Design Taste Frontend
Use this skill as a frontend taste layer, not as the whole frontend implementation lane. It helps set a deliberate visual direction for landing pages, portfolios, marketing pages, and redesigns so the result does not look templated.
Do not use it for dashboards, dense data tables, multi-step product UI, routine React/Next logic, HTML reports, decks, or code explanation. Existing product experience review routes to product-ui-review; authorized implementation routes to frontend-design. Other work routes to frontend-patterns, web-artifacts-builder, effective-interact, or frontend-slides.
Core Workflow
- Read the brief before choosing aesthetics. Identify page kind, audience, brand assets, references, constraints, and explicit vibe words.
- State one design read before code:
Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <system or aesthetic family>.
- If two plausible directions conflict, ask exactly one clarifying question. If the brief is clear enough, proceed.
- Set three working dials:
DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY. Let the brief override the default.
- Choose a real foundation. If the brief maps to an official design system, use the official package and tokens. If it is an aesthetic rather than a system, say so and build honestly.
- Design against AI tells: no AI-purple default, dark mesh hero, three equal feature cards, generic glassmorphism, or Inter/slate sameness unless the source material demands it.
- Verify spacing, typography, responsiveness, media strategy, hover/focus states, reduced motion, and layout stability before handoff.
References
- Use references/design-read-and-systems.md when selecting the design read, dials, or design-system foundation.
- Use references/visual-discipline.md while building or reviewing typography, color, layout, cards, motion, images, and common AI tells.
- Use references/redesign-and-preflight.md for existing-site redesigns and the final pre-flight checklist.
Handoff Boundary
When handing off a design or implementation, state:
- the design read;
- the chosen dials;
- the foundation or system used;
- what was intentionally preserved or avoided;
- any unresolved visual, accessibility, or performance risks.
1---2name: design-taste-frontend3description: Load when a task needs anti-template frontend visual direction, design-read calibration, or pre-flight critique for landing pages, portfolios, marketing pages, or redesigns; do not load for dashboards, data tables, multi-step product UI, routine frontend logic, HTML reports, slide decks, or generic code explanation.4license: MIT5---67# Design Taste Frontend89Use this skill as a frontend taste layer, not as the whole frontend implementation lane. It helps set a deliberate visual direction for landing pages, portfolios, marketing pages, and redesigns so the result does not look templated.1011Do not use it for dashboards, dense data tables, multi-step product UI, routine React/Next logic, HTML reports, decks, or code explanation. Existing product experience review routes to `product-ui-review`; authorized implementation routes to `frontend-design`. Other work routes to `frontend-patterns`, `web-artifacts-builder`, `effective-interact`, or `frontend-slides`.1213## Core Workflow14151. Read the brief before choosing aesthetics. Identify page kind, audience, brand assets, references, constraints, and explicit vibe words.162. State one design read before code: `Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <system or aesthetic family>.`173. If two plausible directions conflict, ask exactly one clarifying question. If the brief is clear enough, proceed.184. Set three working dials: `DESIGN_VARIANCE`, `MOTION_INTENSITY`, and `VISUAL_DENSITY`. Let the brief override the default.195. Choose a real foundation. If the brief maps to an official design system, use the official package and tokens. If it is an aesthetic rather than a system, say so and build honestly.206. Design against AI tells: no AI-purple default, dark mesh hero, three equal feature cards, generic glassmorphism, or Inter/slate sameness unless the source material demands it.217. Verify spacing, typography, responsiveness, media strategy, hover/focus states, reduced motion, and layout stability before handoff.2223## References2425- Use [references/design-read-and-systems.md](references/design-read-and-systems.md) when selecting the design read, dials, or design-system foundation.26- Use [references/visual-discipline.md](references/visual-discipline.md) while building or reviewing typography, color, layout, cards, motion, images, and common AI tells.27- Use [references/redesign-and-preflight.md](references/redesign-and-preflight.md) for existing-site redesigns and the final pre-flight checklist.2829## Handoff Boundary3031When handing off a design or implementation, state:3233- the design read;34- the chosen dials;35- the foundation or system used;36- what was intentionally preserved or avoided;37- any unresolved visual, accessibility, or performance risks.
JasonxzWen