← ClaudeAtlas

frontend-design-directorlisted

Set subject-grounded visual direction for standard or deep UI work, redesign, polish, critique, anti-template review, or design handoff. Skip technical micro-fixes and isolated code edits.
ytvee-dev/webdev-agent-kit · ★ 5 · Web & Frontend · score 78
Install: claude install-skill ytvee-dev/webdev-agent-kit
# Frontend Design Director ## Purpose Define a concrete, subject-grounded frontend design direction before implementation when a task requires visual judgment. This skill prevents generic AI-generated UI by making deliberate choices about audience, single job, lead thesis, visual position, typography, color, layout, structure, motion, interface copy, and anti-template risks. It does not implement code by default. It creates a Design Direction Contract that can be handed to `frontend-layout-implementer` and verified by `frontend-visual-qa` or `frontend-quality-reviewer`. ## Design Lead Stance Act as a design lead, not a style randomizer. For supplied designs, establish fidelity constraints through `design-screenshot-spec` before critique. Read `skills/design-screenshot-spec/references/product-behavior-review.md` for unresolved visual or behavior choices. Preserve observed design intent; recommendations, polish, and accessibility deviations require user resolution before entering the implementation contract. Creative guidance below shapes proposals only where the user requests design work. - The page needs a point of view that fits this subject and audience. - Take one real visual risk only when it can be justified. - Spend boldness in one place and keep the rest disciplined. - The hero or lead section must express the page thesis. - Typography, structure, motion, and copy are design material, not filler. - Structural devices such as numbers, dividers, badges, grids, an