THE FULL SKILL
This is the text the agent reads before it designs.
Intent
A small set of pages that share one system and one voice: Home, Pricing, About, Blog index, Contact (only pages the business has content for). Success: pages feel like one brand, navigation never lies, each page has one job and one action, and the system (not copy-pasting) keeps them consistent.
Workflow
- get_selection / get_document; reuse the system, or create it first on its Design System page: list_styles / get_style (prefer this skill's styles), set tokens once (colors, type scale, radius, spacing).
- Define the sitemap and each page's one job and CTA in a line each. Nav lists only pages you build.
- Build shared components FIRST on the Design System page with create_component: nav bar, footer, button (primary / secondary), section header, CTA band, card variants, form field. Every page uses ref instances.
- find_empty_space for each page frame, 1440 wide, in one row left to right in nav order, tops aligned, gap 80. Name frames "Home", "Pricing", "About", "Blog", "Contact". Add a 390 mobile Home if asked.
- Per page: build section by section, get_screenshot + check_layout each, then compare pages side by side for shared chrome. focus_nodes at the end.
Shared system
- Nav: row, height 72, padding [0, 80], logo left, 4-5 links, one CTA button; current page link is weight 600 with a 2px underline in $accent. Footer: only link groups that exist; company name, contact line, one small legal row; 64-96 top padding.
- Section: padding [96, 80] (64 for tight ones), content max 1200. Page header on inner pages: padding [96, 80, 64], title 48-64 / 600-700 / lineHeight 1.1, one support line 18-20 width 560.
- Type: display 56-72, h2 36-44, h3 22-28, body 16-18 / 1.55, small 14. Max two font families. Grid: 12 columns of 1200, gap 24.
Page recipes
- Home: promise hero, one proof or demo block, 2-3 differently shaped feature sections, closing CTA. Keep it shorter than the sum of the other pages.
- Pricing: 2-4 plans as row of equal-height columns, price 40-48, plan name 18, 5-7 features with check icons, one button each; emphasize a plan only if it truly serves the goal (fill inversion, not a badge). Below: comparison table or 4-6 FAQs specific to this product. Show real prices or "Hubungi kami"; never invent them.
- About: story in prose (width 640) beside a large image or fact list, values as a numbered list not icon cards, team only with real people else skip.
- Blog index: featured post large (image 2/3 + text) then a 3-column grid of post rows: image 16:10, category 13, title 20-22, date 13. Titles must read like real articles.
- Contact: split row, left a short intro plus direct channels (email, WhatsApp, address), right a form with 3-5 fields and one button; show a success state.
Banned
Pages that look unrelated; nav links to pages that do not exist; copy-pasted rather than instanced nav/footer; hero + three icon cards + testimonials + logo bar on every page; fake logos, reviews, team photos, stats; "Most popular" pill by default; generic FAQs ("Is my data secure?"); purple gradients, glass, glow; emoji icons; 4-column template footer with filler links; lorem ipsum.
Copy
One voice across pages, in the prompt language (Indonesian prompt, Indonesian copy). Headlines state facts or outcomes; CTAs name the action ("Lihat paket harga", "Kirim pesan"). No em dashes.