web-designlisted

# web-design Guidance for producing web UI that looks **deliberately designed**, not auto-generated. The single failure mode this skill exists to prevent: shipping something a viewer can immediately tell an AI made. If it reads as the AI default — purple gradients, beige hero, three equal cards, em-dashes, Inter on slate-900 — it failed, regardless of how clean the code is. Three ideas run through everything here: - **Taste is trained, not innate.** Good design is a stack of small correct decisions, each defensible. There is no single magic move. - **Unseen details compound.** The 75ms exit animation, the 1px focus ring offset, the tinted neutral instead of pure gray — individually invisible, collectively the difference between "fine" and "considered." - **Restraint beats expression by default.** One accent, one type scale, one corner-radius scale, motion only where it earns its place. Reach for more only when the brief asks for it. ## When to use this Use it whenever you design or review web UI: a landing page, a dashboard, a component, a form, a marketing section. Use it before you call a screen "done." **Don't** treat it as always-on — it's a lens for visual/frontend work, not a tax on every code change. ## Workflow 1. **Read the brief** (below) — infer intent, write a one-line Design Read, set the dials. 2. **Apply the fundamentals** — type, color, spacing, the interactive states. Pull depth from `references/` as needed. 3. **Avoid the anti-patterns** —