| name | frontend-design |
| description | Distinctive, intentional visual design for We Check UI. Process and craft guidance for implementer and browser tester agents — aesthetic direction, typography, signature moments, and copy that avoid templated defaults. |
| source | https://github.com/anthropics/skills/tree/main/skills/frontend-design |
| license | See LICENSE.txt |
Frontend Design (We Check Harness)
Adapted from the Anthropic frontend-design skill. This skill governs identity and signature craft; workspace density patterns live in design-craft-notion when customized.
Division of labor:
| Skill | Owns |
|---|
frontend-design (this file) | Product identity, typography personality, signature moments, copy tone, anti-template aesthetics |
design-craft-notion | Sidebar density, database toolbars, table rhythm, listing layout (optional extension) |
Precedence (non-negotiable)
When this skill conflicts with product specs, product docs win:
Never bypass tokens, accessibility, or business rules for aesthetics.
Ground it in the product
Read docs/ui-ux/01-ui-ux-foundation.md and docs/brds/01-stakeholders-scope.md for personas, locales, and primary devices. Design for real users under real constraints — not a generic SaaS template.
Audience: Match viewport priorities from UI/UX docs (mobile-first vs desktop admin).
Design thinking (before pixels)
- Purpose — What job is this screen doing in the MVP workflow?
- Tone — Pick a deliberate direction from design overview (calm professional, energetic consumer, dense admin, etc.)
- Differentiation — One memorable moment per major flow (empty state, success, hero data visualization)
- Constraints — Tokens, RBAC, validation states, loading honesty
Visual craft rules
Typography
- Use fonts from
04-design-tokens.md — do not substitute system-ui defaults without doc approval
- Establish clear hierarchy: page title → section → label → metadata
- Avoid identical weight/size for headings and body
Color and contrast
- Semantic colors for success/warning/danger — not one gray alert for every outcome
- Primary CTAs must meet contrast pairs in tokens
- Disabled states legible (≥ 3:1) but visibly inactive
Layout and spacing
- Cards and tables need internal padding — content never flush to edges
- Stack related actions with consistent gap tokens
- Mobile: no horizontal scroll on 320px unless data table explicitly allows
Anti-template checklist (FAIL if present)
- Interchangeable white cards with no product personality
- Default blue primary with no token alignment
- Lorem ipsum or demo copy in production routes
- Identical styling for success, warning, and error outcomes
- Flat gray admin tables with no hierarchy
Implementer self-critique loop
Before SLICE_DONE on frontend slices:
- Capture 320×568 and 1280×720 screenshots per modified route
- Review against ui-visual-verification.md
- Fix contrast, padding, and craft issues; re-screenshot
- List paths in
ai-harness/state/progress.md
Browser tester craft FAIL criteria
Log UX-* (P1+) when screenshots show:
- Primary CTA unreadable or washed-out on mobile
- Touch targets below 44×44 px on primary actions
- Forbidden navigation visible to wrong role
- Generic/template UI where docs specify differentiated outcomes
See ui-ux-testing for full taxonomy.
Related
