frontend-design Skill
Skill Claude Code Design & Media ProductionWeb & App DevelopmentClaude Code Customization & WorkflowThe explanation below is AI-generated. Please verify it against the sources.
This item is not a SaaS product but a guidance document (SKILL.md) that instructs an AI assistant on how to approach distinctive, intentional visual design when building or reshaping a UI. According to the SKILL.md, the assistant should act as a design lead who makes deliberate, opinionated choices about palette, typography, and layout specific to the brief, grounding decisions in the subject matter itself rather than generic defaults. It prescribes a two-pass process: first brainstorm a compact 'token system' (color, type, layout, signature element), then critique that plan against three commonly-seen AI-generated design looks before writing any code. It also covers restraint, self-critique, and quality floors (responsiveness, keyboard focus, reduced motion), plus separate guidance on writing UI copy in active voice with consistent, plain-language naming. No links, homepage, or product details beyond this SKILL.md text are given in the source.
What you can do with frontend-design
- Ground a design in a concrete subject, audience, and the page's single job before starting
- Treat the hero section as a thesis built from the subject's most characteristic element, rather than a generic stat-and-gradient template
- Pair display and body typefaces deliberately and set an intentional type scale
- Use structural devices (numbering, dividers, labels) only when they encode real information about the content
- Apply motion (page-load sequences, scroll reveals, hover states) only where it serves the subject, avoiding overuse
- Build a token system (4–6 named hex colors, 2+ typefaces, a layout concept, a signature element) and critique it against generic AI-default looks before coding
- Watch for CSS specificity conflicts between type- and element-based selectors, especially around spacing
- Apply a quality floor: responsive down to mobile, visible keyboard focus, respected reduced-motion settings
- Write interface copy in active voice, using consistent naming for actions and plain, specific error/empty-state messaging
Sources
Original description (English)
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
History of frontend-design
- Skill Added frontend-design