We Made Our Landing Page Mockups Regenerate Themselves with AI

The Problem

Landing page screenshots go stale the moment you merge a UI change. Your product evolves daily. Your marketing site shows code from 6 months ago.

The traditional fix: manual screenshot updates. In practice, this means never updating them.

The Solution

Replace static screenshots with React components that:

Link directly to the source code they represent
Use your actual design system tokens
Include metadata for AI-regeneration
Live in your repo, versioned like code
Take 5 minutes to regenerate when the product changes

This is the system we built. Here's how it works.

Architecture

Five components:

1. Source-Linked Mockups

Each mockup includes metadata linking it to its source:

{
  source: {
    type: 'app',
    primary: {
      path: 'app/src/components/app/analytics/BasicMetrics.tsx',
      description: 'Analytics dashboard with metrics cards and charts'
    },
    keyFeatures: [
      '2-column grid of stat cards',
      'Large number display with labels',
      'Chart visualizations (line and bar)',
      'Hover effects with lift and shadow'
    ]
  }
}

The link is bidirectional — change BasicMetrics.tsx, and you know which mockup needs updating.

2. Semantic Design Tokens

Every mockup uses tokens from your design system:

// Instead of: bg-[#1a1a1a]
// We use: bg-primary

// Instead of: text-[#6b7280]
// We use: text-muted-foreground

Change --primary once in your CSS variables, and all mockups update automatically. No manual propagation.

3. Central Registry

TypeScript registry tracking all mockups:

{
  id: 'analytics-mockup',
  name: 'Analytics Dashboard',
  category: 'analytics',
  complexity: 'simple',
  source: { /* source references */ },
  concept: { /* design intent */ },
  usedIn: ['FeaturesSection', 'AnalyticsShowcase'],
  version: 2,
  lastUpdated: '2024-10-23'
}

This is the source of truth for all mockup state.

4. AI Prompt Generator

Generate complete prompts programmatically:

export function generateMockupPrompt(metadata: MockupMetadata): string {
  return `
Generate React mockup: ${metadata.name}

Source: ${metadata.source.primary.path}
Key features: ${metadata.source.keyFeatures.join(', ')}
Layout: ${metadata.concept.layout}
UI elements: ${metadata.concept.uiElements.join(', ')}
Color palette: Use only MOCKUP_COLORS tokens
Sample data: ${metadata.concept.dataShown.join(', ')}
Complexity: ${metadata.complexity}
Animated: ${metadata.isAnimated}

Output: Production-ready TSX component
  `.trim()
}

Run npm run mockup:prompt analytics-mockup, paste into Claude or GPT-4, and get an updated component in about 2 minutes.

5. CLI Tooling

Tools for managing mockups:

# List all mockups
npm run mockup:list --category=dashboard

# Generate AI prompt for a mockup
npm run mockup:prompt analytics-mockup

# Create new mockup metadata
npm run mockup:create

# Validate all mockups against registry
npm run mockup:validate

A standard CLI set for mockup management.

Workflow

Imagine redesigning your analytics dashboard.

Old way: Days to weeks

Update product
Notice landing page is stale
Screenshot → export → optimize → upload
Deploy

New way: 5 minutes

Update product (design tokens propagate automatically)
If structure changed: npm run mockup:prompt analytics-mockup
Paste into Claude, generate new component
Replace file, commit

Most updates—colors, spacing, typography—are automatic via shared design tokens. Only regenerate if layout or structure shifts.

Unexpected Benefits

Design System Enforcement

Using tokens caught inconsistencies—"Why is this button #1a1a1a and that one #0f0f0f?"—and unified the system.

Self-Documenting Registry

The registry became internal documentation. New team members browse mockups to understand component structure.

Rapid Prototyping

Test new features on landing pages before building full implementations. 5-minute mockups gauge interest, save days.

Consistency

Every mockup adheres to the same standards, enforced by design tokens.

Core Principles

1. Mockups are code: React components, versioned, reviewed, deployed.

2. Link to source: Each mockup references the product component it mirrors.

3. Share design tokens: One system for product and marketing.

4. Make regeneration trivial: Under 5 minutes, AI + metadata.

5. Track everything: Registry with versions, dates, sources.

What This Enables

Continuous synchronization between product and marketing.
Fast A/B testing.
Localization with different sample data.
Personalization based on user segments.
Full change history via git.

Tradeoffs

Initial setup takes about 2 weeks.
Discipline needed: use tokens, update registry, avoid hardcoded colors.
Not suitable for manual illustrations, videos.
AI outputs require human QA.
Maintenance overhead: registry management.

Worth it if:

Your UI updates often.
You rely heavily on screenshots.
You have an established design system.
Your team can maintain tooling.

Not worth it if:

UI is stable.
Landing page is mostly marketing copy.
You’re a very small team.

Implementation Notes

All TypeScript: registry, CLI, components.
Prompt engineering is key.
Version control keeps trust.
Claude 3.5 Sonnet excels for us.
Monorepo simplifies source linking.

The Core Insight

The line between product and marketing is artificial. With AI, shared design systems, and fast pipelines, your landing page is just another view of your product. It should update automatically, seamlessly.

Getting Started

Pick a screenshot.
Convert it into a React component with your design tokens.
Add metadata.
Create a prompt template.
Next update, regenerate.

Build a registry, add components, and watch your landing page stay fresh, aligned, and efficient.

System Components

registry.ts — central metadata store
color-palette.ts — design tokens
generate-prompt.ts — AI prompts
mockup-manager.ts — CLI tools
React components for mockups

Tech stack: Next.js, TypeScript, Tailwind CSS, Claude 3.5 Sonnet.

Appendix: Sample Registry Entry

{
  id: 'analytics-mockup',
  name: 'Analytics Dashboard',
  componentName: 'AnalyticsMockup',
  filePath: './AnalyticsMockup.tsx',
  category: 'analytics',
  tags: ['dashboard', 'metrics', 'charts', 'stats'],
  isAnimated: false,
  complexity: 'simple',
  hasInteractivity: true,
  source: {
    type: 'app',
    primary: {
      path: 'app/src/components/app/analytics/BasicMetrics.tsx',
      description: 'Analytics dashboard with metrics and charts'
    },
    keyFeatures: [
      '2-column grid of stat cards',
      'Large number display with labels',
      'Chart visualizations (line and bar)',
      'Hover effects with lift and shadow',
      'Consistent card styling'
    ]
  },
  concept: {
    description: 'Dashboard showing key content analytics with interactive cards',
    userStory: 'As a content manager, I want to quickly see performance metrics for my AI-generated content',
    layout: 'Grid layout with stat cards on top row, chart cards on bottom row',
    uiElements: [
      'Stat card: AI-Generated Posts with count and time period',
      'Stat card: AI Citations with source labels',
      'Chart card: Line chart for API documentation coverage',
      'Chart card: Bar chart for content type distribution'
    ],
    designStyle: 'Minimal card-based dashboard with hover effects',
    colorUsage: {
      primary: [
        'Large stat numbers',
        'Chart lines and bars',
        'Active data points'
      ],
      backgrounds: [
        'Cards: white',
        'Container: transparent'
      ]
    },
    dataShown: [
      '847 AI-generated posts (last 30 days)',
      '2.4K AI citations from ChatGPT & Claude',
      'API documentation coverage trend',
      'Content types: Guide, Tutorial, API, Blog'
    ]
  },
  dimensions: {
    maxWidth: 'xl',
    responsive: true
  },
  usedIn: ['FeaturesSection', 'AnalyticsShowcase'],
  createdDate: '2024-01-10',
  lastUpdated: '2024-10-23',
  version: 2
}

The metadata enables AI to regenerate the mockup accurately, ensuring consistency and up-to-date visuals.

Questions?

Q: Why not just use Figma's code generation? A: Figma produces generic code. This approach uses your actual components, your design tokens, your data.

Q: Can't I automate this with Playwright screenshots? A: Screenshots are static images. These are React components—interactive, themeable, responsive.

Q: What about Storybook? A: Storybook is for product components, not mockups. These are marketing views, representing your product UI.

Q: Isn't this over-engineering? A: For small, stable teams, maybe. But for teams shipping fast with evolving UIs, it's worth the investment.

Q: Can I see the code? A: Not open source yet, but architecture is laid out here. You can replicate it.

HN: Questions, critiques, similar stories—always eager to hear how others tackle this. The future of integrated product and marketing assets is here.