| name | frontend-design-systems |
| description | Workflow for generating production-quality frontend interfaces using React, Tailwind CSS, and shadcn/ui with strong focus on spacing, alignment, readability, and non-generic visual design. |
Frontend Design Systems
Overview
This skill enables Claude to generate high-quality frontend interfaces using:
- React
- Tailwind CSS
- shadcn/ui
- modern layout systems
- production-ready component architecture
The workflow focuses on:
- spacing consistency
- visual hierarchy
- alignment precision
- responsive layouts
- clean component composition
- avoiding generic “AI-generated” design patterns
The goal is to create interfaces that feel polished, intentional, and professionally designed rather than autogenerated or visually noisy.
Setup
Before starting:
-
Install Node.js:
https://nodejs.org
-
Create a Next.js project:
npx create-next-app@latest
- Install Tailwind CSS:
npm install tailwindcss @tailwindcss/postcss postcss
- Install shadcn/ui:
npx shadcn@latest init
- Start development server:
npm run dev
Recommended tools:
- VS Code
- Tailwind CSS
- shadcn/ui
- React DevTools
- Figma references (optional)
Recommended extensions:
- Tailwind CSS IntelliSense
- ES7 React snippets
- Prettier
- Error Lens
Inputs Required
- UI requirements
- Layout goals
- Branding direction
- Target platform:
- SaaS dashboard
- landing page
- admin panel
- mobile-first UI
- startup website
Optional:
- Design references
- Existing design system
- Brand colors
- Typography preferences
When to Use This Skill
Use this skill when:
- building React interfaces
- designing SaaS dashboards
- creating landing pages
- generating reusable UI systems
- improving frontend polish
- designing responsive layouts
- building production-ready frontend experiences
When NOT to Use
Do NOT use this skill for:
- backend-only systems
- raw HTML prototypes without design requirements
- non-React frontend stacks
- purely experimental visual art projects
Example Use Case
Create a modern AI startup landing page using React, Tailwind, and shadcn/ui.
Claude should:
- Create a clean layout hierarchy
- Use proper spacing systems
- Build reusable UI sections
- Maintain visual consistency
- Avoid cluttered layouts
- Use responsive design patterns
- Generate polished production-ready code
Final result should:
- feel modern and intentional
- avoid generic AI-generated layouts
- maintain strong readability
- support responsive behavior
- remain scalable and maintainable
Core Frontend Design Principles
1. Prioritize Spacing & Alignment
Good frontend design depends heavily on spacing consistency.
Claude should focus on:
- predictable spacing systems
- clean alignment
- visual breathing room
- balanced layouts
Spacing quality strongly affects:
- perceived professionalism
- readability
- usability
- visual polish
Avoid:
- cramped layouts
- inconsistent padding
- uneven spacing
- visually noisy sections
2. Build Strong Visual Hierarchy
Interfaces should clearly communicate:
- what matters most
- where attention should go
- how content is grouped
Use hierarchy through:
- typography scale
- spacing
- layout structure
- contrast
- component sizing
Good hierarchy improves:
- readability
- navigation
- usability
3. Avoid “AI-Flavored” Design
Generated UIs often feel generic because they:
- overuse gradients
- overcrowd layouts
- misuse shadows
- lack spacing discipline
- prioritize decoration over structure
Claude should prioritize:
- restraint
- clean composition
- intentional spacing
- readable layouts
- subtle visual polish
Professional interfaces usually feel:
- calm
- structured
- balanced
- intentional
4. Keep Components Reusable
UI systems should remain:
- modular
- composable
- scalable
- maintainable
Preferred structure:
components/
ui/
layout/
sections/
Reusable systems improve:
- development speed
- consistency
- scalability
5. Use Tailwind Correctly
Tailwind should improve clarity, not create class chaos.
Preferred workflow:
- consistent spacing scale
- reusable patterns
- grouped utility structure
Avoid:
- excessive inline complexity
- unreadable utility chains
- inconsistent sizing systems
Good Tailwind usage improves:
- maintainability
- iteration speed
- design consistency
6. Use shadcn/ui As a Foundation
shadcn/ui should provide:
- accessible primitives
- scalable component structure
- clean interaction systems
Claude should:
- customize layouts intentionally
- avoid default-template appearance
- extend components thoughtfully
The goal is:
- polished customization
- not generic copy-paste interfaces
Workflow
1. Define Layout Structure
Start by identifying:
- page hierarchy
- content sections
- navigation flow
- responsive behavior
Example:
- Hero
- Features
- Testimonials
- Pricing
- CTA
Focus on:
- clarity
- spacing rhythm
- visual flow
2. Build Core Layout System
Create:
- containers
- spacing systems
- responsive grids
- reusable wrappers
Maintain:
- consistent max widths
- predictable spacing
- responsive scaling
Avoid:
- inconsistent breakpoints
- random spacing values
- overly dense sections
3. Generate Reusable Components
Create:
- buttons
- cards
- navbars
- forms
- modals
- pricing sections
Components should:
- remain composable
- support reuse
- maintain visual consistency
4. Refine Typography & Spacing
Adjust:
- font scale
- section spacing
- line height
- alignment
- whitespace
Typography should improve:
- readability
- hierarchy
- professionalism
Spacing should create:
- breathing room
- clean rhythm
- balanced composition
5. Improve Responsiveness
Validate:
- mobile layouts
- tablet behavior
- desktop scaling
- navigation usability
Responsive layouts should:
- adapt naturally
- preserve hierarchy
- maintain spacing quality
Avoid:
- cramped mobile layouts
- oversized desktop spacing
- broken component stacking
6. Add Visual Polish
Use:
- subtle shadows
- restrained gradients
- hover transitions
- clean borders
- balanced contrast
Visual polish should support:
- clarity
- usability
- professionalism
Avoid:
- excessive effects
- cluttered visuals
- noisy color systems
7. Final Validation
Before shipping validate:
- spacing consistency
- responsive behavior
- alignment precision
- readability
- accessibility
- component consistency
Ensure:
- the interface feels intentional
- layouts remain clean
- sections flow naturally
Output Expectations
The final output should include:
- production-quality frontend code
- reusable React components
- clean Tailwind structure
- polished UI systems
- responsive layouts
- professional visual hierarchy
The workflow itself should remain:
- scalable
- maintainable
- readable
- component-driven
- production-ready
Execution Strategy (for AI agents)
The agent should:
- Prioritize spacing and alignment first
- Build clean visual hierarchy
- Avoid generic AI-style design patterns
- Generate reusable component systems
- Maintain responsive consistency
- Optimize for readability and maintainability
The workflow should optimize for:
- visual polish
- frontend quality
- scalability
- readability
- professional UI consistency
Best Practices
- Use spacing consistently
- Keep layouts visually calm
- Prioritize readability over decoration
- Reuse UI patterns
- Validate responsiveness early
- Keep Tailwind utilities organized
- Use shadcn/ui as a customizable foundation
Notes
- Spacing quality strongly affects perceived frontend quality
- Strong alignment improves visual professionalism
- Simple layouts usually outperform overly complex ones
- Good frontend systems prioritize consistency over decoration
- Well-structured UI systems scale significantly better over time
