Design to Code is a Pro feature. Attempting to use screenshot upload without a Pro subscription returns a
403 error with { "error": "Pro is required" }.How it works
Upload a design image
In the chat input, click the + button and select Attach file. You can attach a screenshot of a live website, a Figma export, or any design mockup saved as an image. Supported formats are standard image types (PNG, JPG, WebP).
Add an optional prompt
Type a short note describing what you want — for example, “Match this layout but use a dark theme” or “Convert this to a SaaS pricing page.” The note is passed to the extraction model as a hint.
Extraction runs automatically
ForgeAI uploads the image and sends it to
gpt-4o-2024-08-06 with structured output enabled. The model analyzes the design and returns a DesignSpec JSON object that captures layout, theme, content, and media placeholders.The code agent receives the spec
The extracted
DesignSpec is prepended to your prompt and forwarded to the main code agent. The agent treats the spec as the primary source of truth for UI structure and copy, filling in only what’s necessary when details are ambiguous.What the extraction captures
The extraction model produces aDesignSpec with the following fields:
Theme
| Field | Description |
|---|---|
primaryColorHex | Primary brand color, as a hex string |
backgroundColorHex | Page background color |
textColorHex | Default text color |
radius | Border-radius scale — sm, md, lg, or xl |
fontStyle | Typography style — modern_sans, classic_sans, or serif |
Pages and sections
Each page in the spec has aroute and an array of sections. Every section includes:
type— the section’s role (e.g.,hero,features,pricing,faq)layout— container size (sm,md,lg), column count (1–6), and alignment (leftorcenter)content— heading, subheading, body text, CTA buttons with variants, and a list of repeated itemsmedia— image placeholders with aspect ratio (square,video, orwide) and alt text
Uncertainties
When the model cannot confidently extract a value, it sets that field tonull and records a note in meta.uncertainties. The code agent reads these notes and makes conservative assumptions where information is missing.
Supported inputs
- Browser screenshots — captured directly from any website or app
- Figma exports — PNG or JPG exports of frames or components
- Design mockups — wireframes, high-fidelity comps, or any image that shows a UI layout
The extraction model works best with clean, full-page screenshots. Cropped or low-resolution images may result in more
null fields and uncertain values, which the code agent will fill with sensible defaults.