frontend-design-systems

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:

1. Install Node.js: https://nodejs.org

2. Create a Next.js project:

npx create-next-app@latest

3. Install Tailwind CSS:

npm install tailwindcss @tailwindcss/postcss postcss

4. Install shadcn/ui:

npx shadcn@latest init

5. 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:

1. Create a clean layout hierarchy
2. Use proper spacing systems
3. Build reusable UI sections
4. Maintain visual consistency
5. Avoid cluttered layouts
6. Use responsive design patterns
7. 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:

1. Prioritize spacing and alignment first
2. Build clean visual hierarchy
3. Avoid generic AI-style design patterns
4. Generate reusable component systems
5. Maintain responsive consistency
6. 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