THE FULL SKILL
This is the text the agent reads before it designs.
Goal: work that looks designed by a person, not generated. Every choice answers "what does this serve?"
Before building
- Read the document first (get_selection, get_document). Match existing variables, fonts and components; never restyle what was not asked.
- Every color, radius, gap and font size is a $variable.
- State the design in one line first: what it is, who reads it, which style, the focal point per screen.
Typography
- One scale per design, jumps of 1.25x to 1.5x. Few sizes; contrast through weight and color. Two families max, a mono only for data.
- Body 14px+ on screens (24px+ on slides), never below 11px. Line length 45-75 characters. Left-align paragraphs; center at most 2-3 lines.
- Give text a width (fill_container or a number) so it wraps, never a fixed height. Line height 1.1-1.2 headings, 1.4-1.6 body.
Color
- Neutrals carry 90% of the screen, tinted toward the brand hue. One accent for the primary action. Status colors only for status, with text or icon.
- Text contrast 4.5:1 (large 3:1). Muted text still passes. Check dark surfaces separately.
- Banned by default: blue-purple or purple-pink gradients, glow, glassmorphism, neon on dark, rainbow palettes. A gradient or shadow needs a hierarchy reason.
Start from the system
- Screens requested (landing page, app, site, slides, dashboard) and the document has no $variables or no reusable components: plan step 1 is "Design system". list_styles / get_style, set_variables once, then create_page "Design System" with only the base components the screens need (Button, Input, Card, Nav, Section shell; reusable). Screens go on their own page and instance them.
- Existing system: reuse and extend it on its page, never make a second one.
Tidy canvas
- Place every top-level frame with find_empty_space (nearNodeId + direction, beside the previous screen). One flow, one row: tops aligned, gap 80, flow order, no overlap, named by role. One page per concern ("Design System", "Landing", "App").
- Before finishing check_layout must show no overlap or misalignment; if it does, run tidy_up on the page.
Space and alignment
- Spacing scale 4-8-12-16-24-32-48-64-96. Tight in a group, loose between groups; the gap between groups is at least 2x the gap inside. Never equal spacing everywhere.
- One left edge per column. Use layout, gap and padding; never nudge with x and y in a flex frame.
- One radius scale (sm, md, lg) by role. Not everything is a pill or a shadow; prefer 1px borders over blur shadows.
Content
- Real copy in the user's language, specific to the product: no lorem ipsum, no "Get started / Learn more / Seamless", no em dashes, no sparkle icons for AI.
- No invented stats, testimonials, logos or people presented as real; use plainly labeled sample data.
- Icons: lucide via search_icons, one stroke weight, only when they carry meaning. No emoji icons. Never draw illustration with paths.
- Do not repeat one card (icon, title, two lines) three or four times as the whole page. Vary scale.
Components and tokens
- Repeated UI (button, card, row, nav item) is one component plus instances. Name nodes by role.
- Hardcoded hex or radii when variables exist is a defect.
Verify
After each section: get_screenshot, then check_layout. Look for clipped text, uneven gaps, weak hierarchy, low contrast. Fix with update_node in place. Final check_layout on the document, then focus_nodes.