Design

1---2name: design3description: Invoke when building any UI, component, page, or visual interface. Produces distinctive design with a committed aesthetic, not generic defaults. Not for backend logic or data pipelines.4metadata:5  version: "3.11.0"6---7 8# Design: Build It With a Point of View9 10Prefix your first line with 🥷 inline, not as its own paragraph.11 12 13If it could have been generated by a default prompt, it is not good enough.14 15## Lock the Direction First16 17Before writing any code, ask the user directly, using the environment's native question or approval mechanism if it has one:18 191. **Who uses this, and in what context?** Analyst dashboard differs from landing page or onboarding flow. See "App shell exception" below if the answer is a sidebar + main workspace layout.202. **What is the aesthetic direction?** Name it precisely: dense editorial, raw terminal, ink-on-paper, brutalist grid, warm analog. "Clean and modern" is not a direction. If the user names a reference site or product ("feels like Linear / Claude.ai / Vercel"), do not accept it as a direction -- extract 3 concrete properties from it: button radius philosophy, surface depth treatment (shadow vs background step vs border), and accent color family. Name those instead.21 22   **Shortcut when the reference is a well-known brand** (Linear, Stripe, Claude, Vercel, Apple, Tesla, Notion, Figma, Airbnb, Spotify, and ~56 others catalogued in `awesome-design-md` -- see the brand preset section in `references/design-reference.md`): ask the user whether to pull the curated preset via `npx getdesign@latest add <brand>`. If they approve, run it, read the generated `DESIGN.md` at project root, then do the 3-property decomposition against that file rather than from memory. The preset is a starting point, not a direction -- the user still names the aesthetic precisely, and this skill's reflex-font blocklist and absolute bans still win on any conflict.233. **What is the one thing this leaves in memory?** A typeface, color system, unexpected motion, asymmetric layout. Pick one and make it obvious.244. **What are the hard constraints?** Framework, bundle size, contrast minimums, keyboard accessibility.255. **What is the signature micro-interaction?** Scale on press, staggered reveal, or contextual icon animation. Pick one and know exactly how it's implemented.26 27Do not proceed until all five are answered.28 29### Source repo as reference30 31When the user provides a repository URL or pastes source code of an existing product to recreate or extend: the file tree is a menu, not the meal. Do not reconstruct the UI from memory or training data. Instead, read the actual source:32- Theme and token files: `theme.ts`, `colors.ts`, `tokens.css`, `_variables.scss`, or equivalent33- Global stylesheets and layout scaffolds34- The specific components the user mentioned35 36Lift exact values: hex codes, spacing scale entries, font stacks, border radii. A rough approximation is not pixel fidelity.37 38Only attach the target component folder or package. Exclude `.git`, `node_modules`, `dist`, and lock files. Dragging in an entire monorepo pollutes the context with irrelevant code and degrades output quality.39 40### App shell exception (sidebar + main workspace)41 42When the answer to question 1 is an app shell (Slack, Linear, Notion class):43- Decorative backgrounds default to off44- Surface hierarchy uses background-color steps and shadow only45- All interactive elements get `active:scale-95`46- Button radius is consistent within each component type (pick one: pill, square, or one fixed value -- do not mix)47- Commit to a named radius scale before the first component (see Border radius system in `references/design-reference.md`)48 49State the chosen direction in one sentence, then load `references/design-reference.md` and check the tech stack conflicts table. Name the single CSS strategy before writing the first component.50 51Summarize the direction as three lines before writing any code:52- **Visual thesis**: mood, material, and energy in one sentence (e.g. "warm brutalist editorial with high-contrast ink type and rough paper texture")53- **Content plan**: hero -> support -> detail -> final CTA, one line each. For **app/dashboard surfaces**: skip the marketing structure, default to utility mode (orient, show status, enable action), no hero unless explicitly requested.54- **Interaction thesis**: 2-3 specific motion ideas that change how the page feels (e.g. "hero text slides in on load, section headers pin while content scrolls beneath, CTA pulses on hover")55 56For production or multi-page UIs, expand the thesis into the 9-section DESIGN.md scaffold in `references/design-reference.md` (theme, palette, typography, components, layout, depth, do/don't, responsive, prompt guide). For a single component, the three lines are sufficient.57 58## Non-Negotiable Constraints59 60`references/design-reference.md` is already loaded during direction lock. It owns the full rules: typography, OKLCH color, motion timings, layout defaults, CSS-pattern bans, accessibility baseline, and complexity matching. Apply them. Do not restate them here.61 62## Mid-Build Checkpoint63 64After every third component or one complete page section (whichever comes first), stop and check:65 661. Re-read the visual thesis (mood, material, energy) stated during direction lock.672. Ask: does what is on screen right now match that thesis, or has it drifted toward a generic default?683. If drifted: identify the specific element that broke first (typeface, color choice, card treatment, spacing) and fix it before continuing.69 70Do not wait until handoff to run the AI Slop Test. Catching drift early costs one component; catching it at handoff costs the entire build.71 72## When Asked For Options73 74Give at least 3 variations, spread across genuinely different dimensions:75 76- **Dimensions to vary**: visual density, typographic personality, color temperature, layout structure, motion character, amount of decoration, level of abstraction77- **Mix approaches**: one option that follows existing conventions closely, one that remixes the brand DNA in a new way, one that is deliberately unexpected78- **Progress from basic to bold**: the first option is safe and understandable; later options push further79- Three options that differ only by accent color are not three variations. Vary the layout, the typeface, the motion, the surface treatment.80 81## Gotchas82 83| What happened | Rule |84|---------------|------|85| Used Inter as the display font | It communicates nothing. Pick something with a personality. |86| Three cards, identical shadows, identical padding -- a template | If swapping content doesn't require layout changes, redo it. |87| Claimed it looked right without opening a browser | Code correct in your head can look broken in the browser. Open it. |88| Chose glassmorphism, ignored the mobile constraint | `backdrop-filter` is expensive on low-power devices. Name the tradeoff. |89| Colors that "go with everything" go with nothing | Commit to a dominant color plus one sharp accent. |90| State transitions jittered because element sizes changed per state | All states must occupy the same layout footprint; use `min-height` or fixed dimensions. |91| Brand disappeared when the nav was hidden | Brand test: if the first viewport could belong to another brand after removing the nav, the branding is too weak. |92| Copy-heavy hero that nobody reads | If deleting 30% of the copy improves the page, keep deleting. Each section gets one job: explain, prove, deepen, or convert. |93| Dashboard built like a marketing page | App/dashboard surfaces need utility copy and a working surface first. No hero section by default. |94| Every project ended up with the same look | Vary light/dark, serif/sans, dense/spacious. If it could have been the last project, it is not designed for this one. |95| Heavy `border: 1px solid` on every container, flat buttons, no depth | This is 2015 UI kit default. Replace with shadow-step depth, `active:scale-95` on buttons, translucent borders (`border/30`). |96| Light-mode app: white panel on white background, visually indistinguishable | Adjacent nested surfaces must differ visually. Either background step (sidebar vs main ≥4% lightness difference) or shadow minimum `0 1px 3px rgba(0,0,0,0.10)`. |97| Added an extra section because it "felt incomplete" | Ask first. The user knows their audience; you do not. If you think more content would help, surface the suggestion as a question, do not ship it unilaterally. |98| Tried to generate a logo, app icon, or brand illustration | Icons, naming, and brand identity require human taste and judgment. Use a labeled placeholder and ask the user to supply the real asset. |99 100## Handoff101 102Run these litmus checks before writing the handoff summary:103- Is the brand or product unmistakable in the first screen?104- Is there one strong visual anchor (real imagery, not a decorative gradient)?105- Can the page be understood by scanning headlines only?106- Does each section have one job?107- Are cards actually necessary, or just default styling?108- Does motion improve hierarchy or atmosphere, or is it ornamental?109- Would the design still feel premium if all decorative shadows were removed?110- AI Slop Test: scan the first screen for default patterns that scream "AI made this." Examples (not exhaustive): reflex font (Inter, DM Sans, Outfit...), purple-to-blue gradient, centered hero with two CTAs side by side, three identical cards, top nav logo-left-links-center-action-right, decorative gradient with no real imagery. If any appear unintentionally, the direction is not committed enough. Fix typography, color, or layout until none remain.111 112If any check fails, fix it first. Then revisit the common traps list from `references/design-reference.md` (already loaded during direction lock; do not re-read the file). Then ask the user to open the result in a browser and confirm it looks right at full width. Also check at 375px width: resize the browser or use DevTools device emulation. If the layout breaks, content overflows, or text is unreadable at mobile width, fix it before handing off. Do not hand off until both checks pass.113 114End with:115- Aesthetic direction, named and justified in 2-3 sentences116- Non-obvious choices explained: typeface, color decisions, layout logic117- Instructions for replacing placeholder content with real content118 119After handoff, stop. Do not iterate unless the user requests changes.