How a 3-hour building event kicked off my page generator

The problem

Early-stage startups need pages fast. A sales one-pager for a new partnership. A marketing landing page for a campaign. A layout to test an idea before the week is over.

The codebase already has design tokens, colors, spacing, typography, and components. But none of that is easy to pull into a new page without building it from scratch every time.

So every new page starts from a blank canvas. Again.

The spark

Vercel built json-render as a way to generate UI from structured JSON. You define a component catalog, AI generates layouts that match your schema. Predictable output, every time.

I looked at that and thought: what if the catalog came straight from your codebase? What if the tool read your actual tokens, your actual components, and generated layouts that already matched your design system?

What I built

The FLab Page Generator reads your codebase. It pulls your design tokens (colors, spacing, typography, etc.) and your component definitions. Then it generates full page layouts using those exact tokens and components.

Not generic templates. Your design system. Your constraints.

The output is a complete page layout as structured JSON that:

• Uses only components from your catalog
• Respects your spacing and typography tokens
• Follows your color palette
• Renders directly with json-render

Where this gets useful

The obvious use case is speed. Need a sales one-pager for a partner meeting tomorrow? Generate it from your existing components in minutes, not hours.

But the real value shows up in three places:

• Designer handoff: Generate a starting layout, then refine it. Faster than blank canvas
• Internal tools: Quick dashboards and admin pages using your existing component set
• Marketing pages: Campaign landing pages that stay on-brand without designer bottleneck

The Figma plugin

Generated JSON is useful for rendering in code. But designers still think in Figma.

So I'm building a Figma plugin that takes the generated layout and recreates it as Figma components. Auto-layout, proper constraints, and your design tokens mapped to Figma variables.

The flow: generate a layout from your codebase, push it to Figma, then tweak it visually. Code to design, not the other way around.

Part 2: The technical deep-dive

This post covers the why. In Part 2, I walk through the how:

• Extracting design system foundations from a codebase
• Building components and defining a minimal catalog
• Code export and Figma import
• Troubleshooting: auto-layout vs CSS grid and other edge cases

Coming soon.

Try it

Early access is coming soon. If you want to generate pages from your existing codebase, sign up for the waitlist to be first in line.

Know someone building an early-stage product? Send them this post. I'm looking for founders and designers who want to move faster without sacrificing consistency.