frontend-design
Create distinctive, production-grade frontend interfaces with exceptional design quality. Two modes - (1) New projects - bold aesthetic design philosophy including typography, color theory, spatial composition, motion design, visual details, avoiding generic AI aesthetics, creating unforgettable interfaces. (2) Existing codebases - mandatory design language analysis enforcing consistency by scanning layout patterns, typography hierarchy, component structure, spacing, theme systems before implementation. Use when building components, pages, applications, design systems, UI modifications. Covers React, Vue, Next.js, HTML/CSS, Tailwind. Keywords - create component, build page, design interface, add UI, aesthetic design, visual design, typography, animations, spatial layout, design system, consistency, pattern analysis, existing codebase.
When & Why to Use This Skill
This Claude skill empowers developers to build production-grade frontend interfaces with exceptional design quality. It bridges the gap between design and code by offering two specialized modes: creating bold, unique aesthetics for new projects and ensuring strict design consistency in existing codebases. Supporting React, Vue, and Next.js, it automates the analysis of layout patterns, typography, and theme systems to deliver professional, high-fidelity UI components that avoid generic AI aesthetics.
Use Cases
- Greenfield Development: Generating distinctive, high-fidelity UI components and pages for new projects using advanced design principles like typography, color theory, and spatial composition.
- Design Consistency Enforcement: Analyzing existing codebases to ensure new UI additions perfectly match established layout patterns, component structures, and theme systems.
- Design System Building: Creating and scaling production-ready design systems with consistent styling, reusable components, and professional visual details.
- UI/UX Refactoring: Modernizing legacy frontend interfaces by applying professional design standards, motion design, and improved visual hierarchy to existing React or Vue applications.
| name | frontend-design |
|---|---|
| description | Create distinctive, production-grade frontend interfaces with exceptional design quality. Two modes - (1) New projects - bold aesthetic design philosophy including typography, color theory, spatial composition, motion design, visual details, avoiding generic AI aesthetics, creating unforgettable interfaces. (2) Existing codebases - mandatory design language analysis enforcing consistency by scanning layout patterns, typography hierarchy, component structure, spacing, theme systems before implementation. Use when building components, pages, applications, design systems, UI modifications. Covers React, Vue, Next.js, HTML/CSS, Tailwind. Keywords - create component, build page, design interface, add UI, aesthetic design, visual design, typography, animations, spatial layout, design system, consistency, pattern analysis, existing codebase. |
Frontend Design Skill
This skill provides two distinct workflows for creating production-grade frontend interfaces:
Scenario Detector
Answer this question: Is there an existing codebase with components, pages, or a design system?
✅ YES → Existing Codebase (Most Common)
Use this workflow: EXISTING-CODEBASE-CHECKLIST.md
Purpose: Enforce design language consistency by analyzing existing patterns before implementation.
When to use:
- Adding components to existing project
- Creating new pages in existing app
- Modifying UI in established codebase
- Working with design system
Process: Mandatory 3-phase checklist (Design Analysis → Decisions → Implementation)
✅ NO → New Project (Greenfield)
Use this workflow: NEW-PROJECT-DESIGN.md
Purpose: Create bold, distinctive aesthetic design from scratch.
When to use:
- Starting new projects
- Building standalone components/pages
- No existing design system to match
- Full creative freedom
Process: Design thinking → Aesthetic principles → Implementation
Quick Reference
For consistency in existing codebases: → EXISTING-CODEBASE-CHECKLIST.md
For aesthetic design philosophy: → NEW-PROJECT-DESIGN.md
For real-world examples: → EXAMPLES.md
For deep-dive principles: → REFERENCE.md
Still unsure which scenario applies? Default to EXISTING-CODEBASE-CHECKLIST if there's any existing code to reference.