Web Design

web-design — mockups in the framework you ship

Same workflow as /ios-design, different medium: direction -> tokens -> component gallery -> screens, iterated on real rendered screenshots. Mockups are authored in the TARGET framework (React/Next + Tailwind, Vue, Svelte, or plain HTML) so the mockup language IS the implementation language — the same-language rule from /design-fidelity-loop.

Why not just use Claude Design: it renders HTML .dc.html artifacts inside its own runtime. That is excellent for standalone deliverables and decks, and this skill borrows its verify loop wholesale — but a .dc.html is not your Next.js app, so shipping it still costs a translation. Route to Claude Design (via DesignSync) when the deliverable IS a standalone page or deck; use this skill when the deliverable becomes product code.

Read WEB.md before Phase 1 — the web delta to the two canons. Read RENDERER.md before the first render — capture harness and gotchas. Read ~/.claude/skills/ios-design/VERIFY.md before showing any render — the fresh-eyes loop is medium-agnostic and applies unchanged.

The rubric (three files, one hierarchy)

1. ios-design/TASTE.md — beauty laws (15), medium-agnostic.
2. ux-design/CANON.md — experience laws (18), medium-agnostic.
3. WEB.md — the delta: what changes, what is web-only, the click budget.

On craft disagreements the Vercel web-interface-guidelines skill wins; on aesthetics TASTE.md wins. Record any deliberate law break in DESIGN.md.

Phase 0 — Read first

1. Resolve the repo. Detect the stack before proposing anything: framework

(Next/React, Vue, Svelte, plain), styling (Tailwind config, CSS vars, CSS-in-JS), component library (shadcn/ui, Radix, headless), and whether Playwright already exists (most repos with e2e tests have it — reuse it).

1. Inventory existing design assets: tailwind.config.*, globals.css /

theme CSS vars, docs/design/, a component directory, brand assets. An existing token system is EXTENDED, never replaced.

1. Inventory experience artifacts: EXPERIENCE.md / journeys.yaml from

/ux-design, or a journeys doc. If they exist, screens come FROM flows — every screen names its flow node. If the user wants flows first, route to /ux-design before Phase 1.

1. If the web-interface-guidelines skill is installed, say so — it is the

craft authority for Phase 5 handoff.

Phase 1 — Direction (read WEB.md now)

1. Interview ( fresh-eyes subagent verdict against the user's asks

verbatim + WEB.md laws -> act. Only a VERDICT: done set reaches the user.

Phase 5 — Iterate, then hand off

1. Show the contact sheet. Apply feedback at the right altitude: color /

spacing / type -> tokens; behavior -> component; screen-local fixes are rare. Re-render with a bumped iteration prefix; never overwrite history.

1. User approval is the only exit. Then persist docs/design//

with DESIGN.md (POV, signature detail, 3 checkable laws, the motion spec incl. the reduced-motion variant, decision log, any recorded law breaks), the gallery route, and renders/.

1. Hand off: /web-craft for production hardening (and the Vercel

web-interface-guidelines skill for the 100+ implementation rules); /ui-review + /ux-review (web lanes) to audit the built result.

Output format

• Renders named r---.png in renders/,

plus an index.html contact sheet. Schemes always come in pairs.

• Progress messages show screenshots, not code.

Does not do

• Production hardening, a11y/perf audits, framework idioms — /web-craft plus

the Vercel guidelines skill.

• Journeys, flows, navigation architecture — /ux-design (upstream).
• Auditing an app that already exists — /ui-review (pixels) and

/ux-review (experience), both of which have web lanes.

• Native iOS design — /ios-design. Standalone HTML pages, decks, or design

systems browsable at claude.ai/design — Claude Design via DesignSync.

• Theme A/B on an existing component kit — /skin-gallery.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: dndungu
• Source: dndungu/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.