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.

What I learned

Three hours is not a lot. But constraints force clarity. I didn't try to build the perfect tool. I built the smallest thing that could prove the idea works.

The takeaway: your codebase already has a design system. Tokens, components, constraints. It's all there. The missing piece is a bridge that turns that into new pages without starting from scratch every time.

That's what this tool does. And with the Figma plugin coming, it works both ways. Code to design, not just design to code.

Know someone building an early-stage product? Send them this post.