Core loop
Paste a URL, choose an idea, generate an on-brand prototype, fork variants, then export.
The Growthtyping core loop is five steps: ingest brand context, pick a pattern, render a prototype, fork variants, and export the artifact your team evaluates. Every feature in the product exists to shorten that path. Nothing here produces text-only output.
Export is the product
Growthtyping does not host prototypes for end users. In-app preview is for author review. What you ship to stakeholders is the exported HTML or React files - dependency-free, no iframe badge, no lock-in.
1. Ingest brand
Paste your product site URL. Growthtyping extracts design tokens (colors, type, radius, spacing), a tone-of-voice sample, and your product one-liner / ICP. The result is a reusable brand profile stored at /brands.
Brand context is not cosmetic. Generic Tailwind-looking output kills the value prop - stakeholders dismiss prototypes that do not look like your product. Ingest once, render many patterns in the same voice.
2. Pick a pattern / idea
Browse the idea library at /ideas - patterns tagged by funnel stage, effort level, and evidence source. Each record links to a real teardown or case study (growth.design, pricing page teardowns, published experiments).
You can start from a curated pattern or free-prompt, but the library is the moat: ideas with receipts, not blank-prompt chaos.
3. Render
A pattern template plus your brand profile is compiled into a structured prompt. The local AI SDK motor generates React/Tailwind files, persists the chat and version in Postgres, and shows a live preview via an in-browser esbuild bundle - source and preview side by side.
Iterate with follow-up messages until the screen matches what you would show in a growth meeting without apologizing.
4. Fork variants on Prototypes
Promising directions branch from the current node on /chats (Prototypes tree) - "try as calculator," "add urgency framing," "make it a 7-day subscriber ticker." The tree encourages stepping stones, not a single spec'd winner upfront.
You wander toward the variant that gets a yes in the room; you do not have to know the answer before you start.
5. Export HTML / React
Export is the deliverable:
- Pure HTML/CSS - single file with inlined styles where applicable
- Raw React files - copy to clipboard or download for your codebase
Hand the export to engineering, paste it into a pitch deck link, or use the prototype itself as the prioritization artifact. No deployment step, no hosted preview URL for stakeholders.