Architecture · v1 HuVa Media Kit · single decisive plan
← Wireframe
Architecture · ready for approval

How the AI Freelancer Media Kit gets built

One plan. The kit IS the takeaway — proposal, pricing, pitch script, discovery call, playbook, all in the user's name. Read it end-to-end and you'll know exactly what we're shipping.

1. Goal

A single Claude Artifact that turns 4 inputs (niche, experience, tier, currency) into a complete go-to-market kit for a new AI consultant: portfolio bio, 3 service tiers with pricing, a 1-page sample proposal, a 7-question discovery script, an objection bank, a 90-second pitch, and a first-3-clients playbook. Output renders inline as a tabbed kit + downloadable as PDF + HTML. Email-gated PDF is the lead magnet for HuVa Academy's "land your first AI client" cohort.

2. What it is (and isn't)

It is

  • A single React Claude Artifact (Tailwind + shadcn/ui patterns)
  • Bilingual EN + AM from day one (same component tree, two language packs)
  • One Claude API call · streams a full structured kit (proposal, services, discovery, objections, pitch, playbook)
  • Currency-agnostic · pricing benchmarked against the rate index file by niche × tier × region
  • Persistence via window.storage · users return to edit and re-export
  • Browser-native PDF export via print CSS · zero server cost

It is not (in v1)

  • Not a Vercel app · ships as a Claude Artifact link · zero HuVa hosting
  • No accounts, no Supabase, no shareable kit URLs in v1 · the artifact session IS the storage
  • Not part of aiminiapp · the lead-magnet PDF lives on the HuVa marketing site
  • No client CRM features · this is the GTM kit, not the CRM you run after you have clients

3. User flow · 60 seconds end-to-end

1Open artifactlink from HuVa Academy
24 inputsniche · exp · tier · cur
3Kit streams in~25s
4Tab throughservices / proposal / pitch
5ExportPDF + HTML + soft CTA

First 5 seconds: the user lands and sees the rate they could charge — that's the imposter-killer. They give 4 dropdowns; we give a complete kit they could send to a prospect today.

4. Tech stack

LayerChoiceWhy
ShellSingle React Claude ArtifactDistributed as a shareable link · runs in any Claude account · zero HuVa hosting (same shell as Marketer Pack).
UITailwind + shadcn/ui patternsMatches HuVa's design system · same tokens as Pivot + Build Plan + Marketer Pack.
i18nIn-component lang packs (EN / AM)Same lang-pack pattern as the prior wireframes.
GenerationAnthropic API · window.claude.completeOne streaming call from the artifact. Billed to the user's own Claude — zero HuVa cost.
Output schemaZod-validated structured kitOne type covers all sections · proposal, services × 3, discovery × 7, objections × 4, pitch, playbook × 4.
Rate indexStatic rate-index.tsLocal TS file · benchmark price for 5 niches × 3 tiers × 4 currencies = 60 cells. Updated quarterly.
Persistencewindow.storageUser's last kit + draft edits saved across artifact sessions. Zero server.
ExportPrint CSS + raw HTML downloadPDF via window.print() · HTML via data: URL · zero server cost.
DistributionClaude Artifact link + HuVa Academy CTALives as the lead magnet for the "Land Your First AI Client" cohort. PDF version email-gated on huva.io.

5. The rate index (the foundation)

Pricing is the imposter-killer. We don't let the LLM invent it — we look it up. The rate index is a static TypeScript file that benchmarks 60 cells (5 niches × 3 tiers × 4 currencies). The LLM uses these numbers verbatim. Change a number = the price changes everywhere in the kit immediately.

// lib/rate-index.ts
export const RATE_INDEX = {
  "marketing-automation": {
    starter: { USD: 1800, EUR: 1650, AMD: 720000, GBP: 1450 },
    mid:     { USD: 4800, EUR: 4400, AMD: 1900000, GBP: 3800 },
    premium: { USD: 8200, EUR: 7500, AMD: 3300000, GBP: 6500 },
  },
  "custom-ai-agents": {
    starter: { ... },
    mid:     { ... },
    premium: { USD: 9200, ... },
  },
  "operations-automation": { ... },
  "content-systems": { ... },
  "customer-support-ai": { ... }
}

Each cell ships with a "what's included" list (3–5 deliverables). The LLM doesn't make up the deliverables — it picks from the list and adapts to the user's experience level.

6. Cost

ItemPer use/ month @ 1k uses
Artifact hosting (Claude)$0$0
Generation · billed to user's Claude$0 (HuVa)$0 (HuVa)
PDF export (browser print)$0$0
Lead-magnet PDF on huva.io marketing$0 (lives in marketing site)
Total HuVa cost$0$0

Same cost story as the Marketer Pack — runs on the user's Claude. Differs from Pivot + Build Plan, which are HuVa-hosted Vercel apps with per-call API cost. The lead-magnet PDF is the closest thing to a recurring cost (storage on huva.io, ~$0).

7. Build phases

v1.0 · ship first

Core kit · 7–9 hours

  • Single Claude Artifact, EN + AM, 4-input intake
  • One streaming Claude call · Zod-validated full-kit schema
  • 5-tab kit view (services / proposal / discovery / objections / playbook)
  • Static rate-index.ts with 60 cells (5 niches × 3 tiers × 4 currencies)
  • PDF download via window.print() + HTML download
  • window.storage persistence · last kit + edits saved
  • Soft HuVa Academy CTA · "Land your first paying client" cohort link · single placement

Reduced from the original 10–12h estimate because Pivot + Build Plan + Marketer Pack established the artifact shell, lang-pack pattern, Anthropic call shape, and Zod plumbing.

v1.5 · only if it earns it

Save + share · +3 hours

  • Optional Supabase row · public share URLs (huva.io/kit/[id])
  • "Edit your bio inline before exporting" — the only LLM round-trip post-generate
  • Auto-generated OG image preview (kit card → image) for shared links
v2.0 · later, if v1 validates

Personalization deep cuts · +6 hours

  • Resume/LinkedIn upload — the kit pulls real experience instead of asking for it
  • "Send proposal" flow — paste prospect's name + company, the agent personalizes the proposal in 3s
  • Day 7 / 15 / 30 follow-up nudge emails ("did you send the proposal?")
  • 10 niches instead of 5 · expand the rate index
future · maybe

Verticalized kits

  • Same shell, swapped niches — "Recruiter going independent", "Designer going freelance", "Coach going premium"
  • Each new vertical = ~3h of niche-specific copy + 1h of repackaging · the kit shell is reusable
  • One artifact serves every HuVa Academy cohort vertical

8. Risks & how we kill them

RiskKill it with
LLM hallucinates a price the user can't actually chargePrices come from rate-index.ts, not the LLM. Zod schema rejects any kit where the proposal price doesn't match the looked-up cell. Hard fail, regenerate.
Proposal feels generic · doesn't pass a real prospect's smell testGolden-output tests on each niche × tier combo · Ani + Nick review the EN/HY samples for each persona before launch · the wireframe samples are the bar.
User's Claude session quota runs out mid-streamCatch the error · show "your Claude session hit its limit · here's the partial kit so far" · save what we have to window.storage for retry.
Armenian translations of proposal/discovery feel stiltedNative Armenian review (Ani) on EN / ՀԱՅ lockup before launch · the proposal HY copy needs to read like an Armenian consultant wrote it, not like a translation.
Currency conversions go staleRate index is the source of truth · it's a static file, not a live conversion. Quarterly refresh tied to actual freelancer benchmarks.
PDF export breaks on long kits / weird browsersPrint CSS tested on Chrome / Safari / Firefox before launch · fallback HTML download for users on weird setups.

What "approved" means

Three checkboxes ship the work:

Once approved, we move straight to the implementation plan: the rate-index population (60 cells), the prompt + schema for the full kit, the print stylesheet.