Build a reference recipe
build_recipeThe best way to build from references, with or without a person: pass 2 to 6 screen ids from search_screens (each "id: what to take from it") and get one Markdown brief with the screenshots attached at 1x (section crops for long pages), measured component sizes, the page structure and what to take from each. Up to 6 images are attached (one per reference, then extra section crops); the brief's first line lists them and names a get_screen_image call for any left out. Structure comes from the screens and every visual token from one style product, so conflicting looks are resolved instead of mixed. Interactive parts get matching motion entries to fetch with get_motion. E.g. Linear's issue composer, Vercel's pricing layout and Notion's look in one screen.
Tool call template
Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {
"screens": "<screens>"
},
"name": "build_recipe"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| goal | No | What you want to build. Goes at the top of the brief. | |
| stack | No | Preferred stack, e.g. Next.js and Tailwind. | |
| style | No | Product id whose measured visual language to use, e.g. linear or stripe. Omit to use the project's own design system. | |
| screens | Yes | 1 to 6 screen ids, each optionally followed by ": what to take from it", e.g. ["linear-product-new-issue: issue composer modal", "vercel-marketing-pricing: plan cards and FAQ"]. | |
| styleNotes | No | Extra visual direction in words, e.g. "our brand green #1a7f37, rounded corners". Used on its own when style is omitted. | |
| styleContext | No | Which of the style product's guides to use. Defaults to marketing when most screens are marketing pages, otherwise product. |