Rivet

THE ASK: Build and launch an AI Component Generator for Rivet that interprets a user’s plain-text description of a UI section and automatically inserts a complete, responsive visual component with production-ready React/TypeScript code. Estimated build cost: $312K (6 FTE eng + design for 10 weeks at regional benchmarks). We request funding for Phase 1 (MVP) to validate the core premise.

THE BET: We believe 22% of weekly active Rivet designers will use the AI generator at least once per week within 8 weeks of launch, reducing initial component assembly time by 65% and increasing project creation velocity.

THE ROI EQUATION: 2,200 weekly active designers (source: Q1 2025 internal dashboard) × 3.2 manual component builds/week (source: Jan 2025 user survey, n=112) × $24 saved per build (source: blended designer/developer cost of $90/hr × 16 min saved) = $5.4M/year in recoverable productivity value. If adoption is 40% of estimate: $2.16M/year. The downside case still yields a 6.9x return on the Phase 1 investment.

THE KILL CRITERIA: If fewer than 8% of weekly active designers generate a component in the first 30 days, we stop Phase 2 development and convene a retrospective to diagnose the failure.

This feature is a deterministic, code-generating interpreter for specific UI section descriptions, focused on layout, responsiveness, and copy-and-pasteable code. It is not a general-purpose design AI, a conversational agent, or a replacement for Rivet’s core manual design canvas.

Rivet’s wedge is enabling software teams to move from idea to production UI faster. Our current manual drag-and-drop canvas solves for precision and control but creates friction at the ideation and early assembly stage, where speed of creation matters more than pixel perfection. Competitors are layering AI atop their existing paradigms.

How does Figma solve this today? Users hire Figma’s UI creation tools (including their nascent AI features) for collaborative visual design and prototyping, but code generation is a secondary, often manual export. How does Vercel v0 solve this today? Users hire Vercel v0 for generating entire Next.js application code from a text prompt, trading granular component control for full-stack speed.

Our wedge is tight integration of AI-generated, production-ready code directly into the visual design workflow because designers and frontend engineers are the same person in our target market of early-stage startups and product duos.

WHO / JTBD: When a product designer or frontend developer at a seed-stage startup begins a new feature mockup in Rivet, they want to quickly assemble a common UI section (like a user profile card or a settings form) so they can validate the layout and get stakeholder feedback within minutes, not hours.

WHERE IT BREAKS: Today, the user must manually search the component library, drag individual elements (container, avatar, text fields, buttons), configure responsive breakpoints one-by-one, and then group them. For a moderately complex section like a "pricing table with three tiers," this manual assembly takes significant focus away from higher-order design problems.

WHAT IT COSTS:

Economic cost per user: 3.2 builds/week × (11.4 + 6.8) min × $90/hr = $87.36/week in lost productivity. For our active user base, this is $5.4M/year in addressable recovery (2,200 users × $87.36 × 52 weeks). This feature addresses ~70% of the manual assembly time, targeting $3.8M in recoverable value.

JTBD statement: "When I start a new screen, I want to describe a standard UI section in plain text and get a correctly laid-out, responsive component in my canvas with ready-to-edit code, so I can skip manual assembly and focus on the unique parts of my design."

The solution is a minimal UI extension: a floating "Generate with AI" button in the Rivet toolbar. Clicking it opens a concise text input modal. Upon submission, Rivet calls a dedicated inference service, which returns a structured component definition. This definition is rendered as a selectable, editable component group on the active canvas. A side panel exposes the generated React/TypeScript code for immediate copy.

Adversarial Testing:

1. Attack: Vague or malicious prompts. A user inputs "a beautiful section" or script injection.

   • Defense: The inference service is primed with a strict system prompt focused on structural UI elements. Non-conforming prompts return a structured error suggestion ("Try describing specific elements, like 'a navbar with a logo and three links'"). All input is sanitized; code generation is isolated.
   • Change: Added a "See examples" link in the modal with 5 concrete prompts.

2. Attack: 10x expected load on day one. The inference endpoint is overwhelmed, causing timeouts that block the user's canvas.

   • Defense: Implement a request queue with a pessimistic timeout (8 seconds). On timeout, the UI fails gracefully with "Taking longer than expected. We've queued your request – check back in a minute." The component is added asynchronously when ready.
   • Change: Added asynchronous, optimistic job system for generation.

3. Attack: Generated component doesn't match Rivet's design system. The AI uses arbitrary spacing or colors, creating inconsistency.

   • Defense: The inference service is fine-tuned on Rivet's canonical component library and token set (spacing scale, color primitives, typography). The output is constrained to these tokens.
   • Change: Made design-system adherence a P0 acceptance criterion.

Accepted Limitation (Phase 1): The generator recognizes ~12 common UI section patterns (forms, cards, lists, navbars, etc.). Descriptions for highly novel, custom layouts will fall back to the closest match and require manual adjustment.

Wireframes:

┌─────────────────────────────────────────────────────────────────────────┐
│ Rivet Canvas - [Project Name]                            [Share] [Publish]│
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  [Toolbar] ┌──────┐ ┌──────┐ ┌───────────────────┐                     │
│            │ Move │ │ Frame│ │ **Generate with AI** │                     │
│            └──────┘ └──────┘ └───────────────────┘                     │
│                                                                         │
│                                                                         │
│                            ┌─────────────────────────────┐              │
│                            │ Describe a UI section       │              │
│                            │                             │              │
│                            │ ┌─────────────────────────┐ │              │
│                            │ │a user profile card with │ │              │
│                            │ │avatar, name, title, and │ │              │
│                            │ │a follow button          │ │              │
│                            │ └─────────────────────────┘ │              │
│                            │                             │              │
│                            │ [Cancel]      [Generate →]  │              │
│                            │                             │              │
│                            │ *e.g., "3-tier pricing table"*│              │
│                            └─────────────────────────────┘              │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────┐
│ Rivet Canvas - Component Generated                       [</> View Code] │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │  [Generated Component Group - Selected]                          │  │
│  │  ┌──────────────────────────────┐                                │  │
│  │  │        [Avatar]              │  Jane Doe                      │  │
│  │  │                              │  Senior Product Manager        │  │
│  │  └──────────────────────────────┘                                │  │
│  │                                              [ Follow ]          │  │
│  └──────────────────────────────────────────────────────────────────┘  │
│                                                                         │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │ **Generated Code**                                                │  │
│  │                                                                   │  │
│  │ `export function UserProfileCard({ name, title, avatarUrl }) {`  │  │
│  │ `  return (`                                                      │  │
│  │ `    <div className="rivet-card rivet-flex rivet-gap-4...">`      │  │
│  │ `      <img src={avatarUrl} className="rivet-avatar-lg"... />`    │  │
│  │ `      <div>`                                                     │  │
│  │ `        <h3 className="rivet-text-lg...">{name}</h3>`            │  │
│  │ `        <p className="rivet-text-muted...">{title}</p>`          │  │
│  │ `      </div>`                                                    │  │
│  │ `      <button className="rivet-btn-primary">Follow</button>`     │  │
│  │ `    </div>`                                                      │  │
│  │ `  );`                                                            │  │
│  │ `}`                                                               │  │
│  │                                                                   │  │
│  │                                               [ Copy Code ]       │  │
│  └──────────────────────────────────────────────────────────────────┘  │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Phase 1 — MVP (10 weeks) US#1 — Generate Component from Text

• Given a user is on the Rivet canvas with a valid paid subscription
• When they click "Generate with AI", enter a valid description of a supported UI pattern, and click "Generate"
• Then a correctly grouped component is placed on the canvas with 100% consistency in matching the described core elements (P0), and the "View Code" panel displays production-ready React/TypeScript code using Rivet design tokens with ≥99.5% accuracy (P1)
• If story fails: User cannot progress past manual assembly, neutralizing the feature's value proposition.
• Validated by QA lead against a test suite of 100 pre-defined prompt/component pairs.

US#2 — Component is Fully Editable

• Given an AI-generated component is on the canvas
• When the user selects it
• Then they can manually adjust its layout, edit text content, and modify styling via the property panel with zero loss of functionality compared to a manually created component (P0)
• If story fails: The AI component becomes a "black box," breaking Rivet's core editing model and causing user frustration.
• Validated by Lead Designer against all standard canvas interactions.

US#3 — Responsive Behavior Applied

• Given an AI-generated component is on the canvas
• When the user switches to the "Tablet" or "Mobile" breakpoint view
• Then the component adapts its layout (e.g., stack, resize) according to Rivet's responsive rules with ≥95% accuracy for supported patterns (P2), without manual configuration.
• If story fails: User must manually configure responsiveness, erasing 50% of the time-savings benefit.
• Validated by Frontend Tech Lead against the 12 supported pattern definitions.

Out of Scope (Phase 1):

Phase 1.1 — (4 weeks post-MVP): Increase supported UI patterns from 12 to 25. Add "Regenerate" button for last prompt. Add basic usage analytics dashboard for PM. Phase 1.2 — (8 weeks post-MVP): Introduce "Variants" (generate 3 options for one prompt). Implement soft fair-use rate limiting alerts.

Primary Metrics:

Guardrail Metrics (must NOT degrade):

Leading Indicator (D14): If ≥15% of users who see the feature modal click "Generate," we predict hitting the D60 adoption target (correlation from prior feature launches, r=0.81).

What We Are NOT Measuring:

• Total generations per day: Could be driven by a few users testing limits, not broad adoption.
• Model inference latency in isolation: We care about end-to-end user-perceived latency, which the 8-second timeout guards.
• "User satisfaction" score (NPS/CSAT): Lagging, noisy indicator for a utility feature; adoption and time-saved are better proxies.

RISK 1 — Model Hallucination & Low Output Quality

• Probability: Medium Impact: High
• Causal Chain: Model misinterprets a common prompt → generates a broken or illogical layout → user wastes time correcting it → user loses trust, disables the feature, and tells peers it's unreliable.
• Mitigation: Implement a rigorous, automated prompt/output validation pipeline (owner: ML Eng Lead, Priya) running nightly against the 12 core patterns before any model deployment. A >2% regression in accuracy blocks deployment.
• Deadline: Pipeline in place by Week 4 of development.

RISK 2 — Inference Cost Spiral

• Probability: Low Impact: High
• Causal Chain: Feature goes viral → 10x expected daily inference calls → cloud API costs exceed $50K/month → finance forces feature shutdown or punitive pricing, damaging brand.
• Mitigation: Implement hard, plan-based usage limits at the application layer (owner: Backend Lead, Marco) before launch. Trigger cost alerts at 50%, 80%, and 100% of forecasted monthly budget.
• Deadline: Limits and alerting implemented by Week 8.

RISK 3 — Competitive Pre-emption

• Probability: Medium Impact: Medium
• Causal Chain: Figma ships a similar, well-integrated code-generation feature 4 weeks before our launch → neutralizes our "unique integration" narrative → our launch appears derivative, reducing press and adoption.
• Mitigation: Accelerate our launch communications track. Prepare a competitive differentiation brief highlighting our production-code focus (owner: PM & Head of Marketing, joint). Double down on targeting early-stage technical founders who value code output.
• Deadline: Brief drafted by Week 6; comms plan locked by Week 9.

RISK 4 — Intellectual Property & Training Data Liability

• Probability: Low Impact: Catastrophic
• Causal Chain: A user claims the AI generated a component identical to their proprietary, patented UI → legal demand to disclose training data → reveals our model was fine-tuned on potentially copyrighted public designs → triggers litigation and reputational damage.
• Mitigation: Engage Legal to draft explicit Terms of Service clause stating AI output is user's responsibility and we do not claim ownership (owner: General Counsel, Sarah). Use only Rivet's own design system library and synthetically generated examples for fine-tuning.
• Deadline: ToS update approved by Legal by Week 6.

Kill Criteria — we pause and conduct a full review if ANY are met within 90 days:

1. Fewer than 8% of Weekly Active Users generate a component in the first 30 days.
2. Canvas Editor Crash Rate attributable to the AI feature exceeds 0.5% of sessions.
3. More than 40% of user feedback tagged "ai-component" contains the phrase "broken" or "useless."
4. Inference costs exceed $75K in any single month.

The architecture comprises three key services: 1) The Rivet client with the new UI modal, 2) An AI Orchestrator (new backend service) that sanitizes input, manages the request queue, and calls the inference endpoint, and 3) The Model Inference Endpoint (hosted cloud API). The Orchestrator returns a structured JSON representation of the component (elements, layout, tokens) which the client renders onto the canvas and translates into code.

Performance Target: End-to-end generation P95 latency < 8 seconds, measured from user click to component render.

Assumptions vs Validated:

Decision: Model hosting and inference strategy. Choice Made: Use a dedicated, fine-tuned GPT-4-class model via a major cloud provider's managed API (e.g., Azure OpenAI, Anthropic on AWS Bedrock), not an open-source model self-hosted by Rivet. Rationale: The quality and reliability of component generation is the primary user experience. Managed APIs provide the fastest path to high-quality, structured outputs with enterprise-grade uptime. Self-hosting would require significant MLOps investment and delay launch by 5+ months for uncertain quality gains. ────────────────────────────────────────

Decision: Level of code customization in the MVP. Choice Made: Generated code uses Rivet's design system tokens and standard React patterns. It is not customizable via the AI prompt in Phase 1 (e.g., "use Material-UI" or "make it dark mode"). Rationale: Our wedge is speed for common use cases, not infinite flexibility. Supporting arbitrary styling frameworks vastly increases complexity and model hallucination risk. Users can manually edit the generated code or component properties. ────────────────────────────────────────

Decision: Handling of user data for model improvement. Choice Made: User prompts and generated components are NOT used to retrain or improve the model without an explicit, opt-in consent toggle (disabled by default). Rationale: Protecting user IP is critical for trust. An opt-out model would violate the implicit contract of a design tool. We forfeit potential long-term model improvement speed for immediate user trust and adoption. ────────────────────────────────────────

Decision: Pricing model for AI feature. Choice Made: AI component generation is included in all paid plans for Phase 1, with a generous but enforceable fair-use limit (e.g., 50 generations/day on Pro plan). Rationale: We are testing adoption and value, not monetization. Including it drives upgrade intent for free users and removes friction for paid users to adopt. Usage-based billing adds cognitive overhead too early. ────────────────────────────────────────

BEFORE / AFTER NARRATIVE

Before: Maya, a founding designer at a Series A fintech startup, needs