Design Style Skill
Purpose
This skill helps Claude Code create beautiful, distinctive frontend interfaces by automatically retrieving design system prompts from the prompts/ directory. Instead of producing generic UI, this skill enables Claude to build interfaces with specific design aesthetics like Neo-brutalism, Modern Dark, Luxury, Cyberpunk, and more.
When to Use
This skill is automatically invoked when:
- User asks to build a web page, landing page, or web application
- User requests a UI component with a specific design style
- User mentions frontend, React, Vue, or web development
- User asks for a specific aesthetic (e.g., "make it look modern and dark" or "use a brutalist style")
Available Design Styles
The following design systems are available in the prompts/ directory:
- Academia - Scholarly, classic, refined
- ArtDeco - Luxurious 1920s glamour
- Bauhaus - Functionalist, geometric minimalism
- BoldTypography - Type-driven design
- Botanical - Nature-inspired, organic
- Claymorphism - Soft, clay-like 3D elements
- Cyberpunk - Futuristic, neon, high-tech
- Enterprise - Professional, corporate, scalable
- FlatDesign - Clean, minimal, 2D
- Fluent2 - Microsoft Fluent 2 Design System
- HumanistLiterary - Warm, literary, conversational (Claude aesthetic)
- Industrial - Raw, mechanical, utilitarian
- Kinetic - Dynamic, motion-focused
- Luxury - Premium, elegant, sophisticated
- Material - Google Material Design
- Maximalism - Bold, expressive, abundant
- MinimalDrak - Minimal dark theme (note: typo in original)
- ModernDark - Contemporary dark UI with depth
- Monochrome - Black and white, high contrast
- Neo-brutalism - Bold, raw, colorful brutalism
- Neumorphism - Soft UI, skeuomorphic
- Newsprint - Newspaper-inspired
- Organic - Natural, flowing forms
- PlayfulGeometric - Fun geometric shapes
- Professional - Clean, business-focused
- Retro - Vintage, nostalgic
- Saas - Modern SaaS aesthetic
- Sketch - Hand-drawn, artistic
- Swiss - International Typographic Style
- TerminalCLI - Command-line interface aesthetic
- Vaporwave - 80s/90s aesthetic, nostalgic
- Web3 - Decentralized, crypto-inspired
How It Works
Step 1: Understand User Intent
When the user requests frontend work, first determine:
- Tech stack - What framework are they using? (React, Vue, Next.js, etc.)
- Design preference - Did they mention a specific style or aesthetic?
- Component scope - Single component, full page, or entire application?
Step 2: Select Design Style
If user specifies a style:
- Match their request to available styles (e.g., "brutalist" → Neo-brutalism)
- Case-insensitive matching (brutalism, Brutalism, BRUTALISM all work)
If user doesn't specify:
- For modern, professional projects → ModernDark or Professional
- For creative, bold projects → Neo-brutalism or BoldTypography
- For minimal, clean projects → FlatDesign or Swiss
- For enterprise/corporate → Enterprise
Ask the user if you're uncertain about which style fits their needs.
Step 3: Retrieve Design System
Use the Read tool to load the appropriate prompt file:
Read: prompts/<StyleName>.md
For example:
prompts/Neo-brutalism.mdprompts/ModernDark.mdprompts/Cyberpunk.md
Step 4: Apply Design System
Once you've loaded the design system prompt:
- Internalize the design philosophy - Understand the core principles, visual signatures, and differentiation factors
- Extract design tokens - Colors, typography, spacing, shadows, borders
- Follow component patterns - Use the specified button styles, card layouts, etc.
- Apply the "Bold Factor" - Implement signature elements that make the design authentic
- Avoid anti-patterns - Don't use techniques that break the aesthetic
Step 5: Build with Context
Before writing code:
- Identify the user's existing tech stack
- Understand their component architecture
- Note any constraints (CSS frameworks, design libraries, etc.)
When writing code:
- Match their existing patterns and conventions
- Centralize design tokens in CSS variables or a config file
- Create reusable, composable components
- Explain your architectural choices briefly
Quality standards:
- Preserve or improve accessibility
- Ensure responsive design across devices
- Make deliberate, creative design choices (not generic boilerplate)
- Leave the codebase cleaner than you found it
Examples
Example 1: User Specifies Style
User: "Create a landing page for my SaaS product with a neo-brutalist design"
Skill Actions:
- Detect keywords: "landing page", "neo-brutalist"
- Map "neo-brutalist" →
prompts/Neo-brutalism.md
- Read the design system prompt
- Ask clarifying questions: "What tech stack are you using? React, Vue, or plain HTML/CSS?"
- Build the landing page following Neo-brutalism principles (thick borders, hard shadows, bold colors, etc.)
Example 2: User Doesn't Specify Style
User: "Help me build a portfolio website"
Skill Actions:
- Detect: "portfolio website" (creative context)
- Suggest options: "Would you like a specific design style? I can create it in Modern Dark (sophisticated), Neo-brutalism (bold and creative), or Swiss (minimal and clean)."
- User responds with preference
- Load appropriate prompt and build
Example 3: Component Request
User: "Add a contact form to my Next.js app. Make it look modern and professional."
Skill Actions:
- Keywords: "Next.js", "modern and professional"
- Select:
ModernDark.md (modern) or Professional.md (professional)
- Read design system
- Build form component matching their Next.js patterns
- Use design tokens from the prompt (colors, typography, shadows, etc.)
Quick Reference Commands
When implementing, you can quickly reference specific sections:
Colors:
Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"
Typography:
Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"
Component Patterns:
Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"
Tips for Best Results
- Read the full prompt - Don't just skim. The design philosophy and differentiation sections are critical.
- Implement signature elements - Every design system has a "Bold Factor" section. These elements are what make it authentic.
- Avoid anti-patterns - Each prompt lists what NOT to do. Follow these rules strictly.
- Ask questions - If the user's needs are unclear, ask before building.
- Match existing code - Don't fight their tech stack. Integrate the design system into their existing patterns.
Notes
- All design system prompts follow the same structure:
<role> and <design-system> sections
- Prompts include detailed color palettes, typography scales, component patterns, and implementation examples
- Each style is production-ready and has been carefully crafted for visual distinctiveness
- The prompts are designed to prevent generic, AI-looking interfaces
Future Enhancements
Potential improvements to this skill:
- Style combination support (e.g., "Cyberpunk + Minimal")
- Custom style creation workflow
- Design token extraction to JSON/CSS
- Component library generation from prompts
1---2name: design-style3description: Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards, portfolios, or any web interface - Creating UI components (buttons, forms, cards, navbars, modals, etc.) - Designing pages with React, Vue, Next.js, Svelte, or any frontend framework - Adding styling or improving visual design of existing components - Implementing specific design aesthetics (modern, dark, minimalist, brutalist, etc.) - User mentions "frontend", "UI", "UX", "design", "interface", "web design", or "styling" - User asks for "beautiful", "modern", "professional", "clean", or any aesthetic adjective - User requests help with CSS, Tailwind, styled-components, or any styling approach This skill automatically retrieves the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to help create visually distinctive, production-grade frontend cod4---5
6# Design Style Skill
7
8## Purpose
9
10This skill helps Claude Code create beautiful, distinctive frontend interfaces by automatically retrieving design system prompts from the `prompts/` directory. Instead of producing generic UI, this skill enables Claude to build interfaces with specific design aesthetics like Neo-brutalism, Modern Dark, Luxury, Cyberpunk, and more.
11
12## When to Use
13
14This skill is **automatically invoked** when:
15- User asks to build a web page, landing page, or web application
16- User requests a UI component with a specific design style
17- User mentions frontend, React, Vue, or web development
18- User asks for a specific aesthetic (e.g., "make it look modern and dark" or "use a brutalist style")
19
20## Available Design Styles
21
22The following design systems are available in the `prompts/` directory:
23
24- **Academia** - Scholarly, classic, refined
25- **ArtDeco** - Luxurious 1920s glamour
26- **Bauhaus** - Functionalist, geometric minimalism
27- **BoldTypography** - Type-driven design
28- **Botanical** - Nature-inspired, organic
29- **Claymorphism** - Soft, clay-like 3D elements
30- **Cyberpunk** - Futuristic, neon, high-tech
31- **Enterprise** - Professional, corporate, scalable
32- **FlatDesign** - Clean, minimal, 2D
33- **Fluent2** - Microsoft Fluent 2 Design System
34- **HumanistLiterary** - Warm, literary, conversational (Claude aesthetic)
35- **Industrial** - Raw, mechanical, utilitarian
36- **Kinetic** - Dynamic, motion-focused
37- **Luxury** - Premium, elegant, sophisticated
38- **Material** - Google Material Design
39- **Maximalism** - Bold, expressive, abundant
40- **MinimalDrak** - Minimal dark theme (note: typo in original)
41- **ModernDark** - Contemporary dark UI with depth
42- **Monochrome** - Black and white, high contrast
43- **Neo-brutalism** - Bold, raw, colorful brutalism
44- **Neumorphism** - Soft UI, skeuomorphic
45- **Newsprint** - Newspaper-inspired
46- **Organic** - Natural, flowing forms
47- **PlayfulGeometric** - Fun geometric shapes
48- **Professional** - Clean, business-focused
49- **Retro** - Vintage, nostalgic
50- **Saas** - Modern SaaS aesthetic
51- **Sketch** - Hand-drawn, artistic
52- **Swiss** - International Typographic Style
53- **TerminalCLI** - Command-line interface aesthetic
54- **Vaporwave** - 80s/90s aesthetic, nostalgic
55- **Web3** - Decentralized, crypto-inspired
56
57## How It Works
58
59### Step 1: Understand User Intent
60
61When the user requests frontend work, first determine:
621. **Tech stack** - What framework are they using? (React, Vue, Next.js, etc.)
632. **Design preference** - Did they mention a specific style or aesthetic?
643. **Component scope** - Single component, full page, or entire application?
65
66### Step 2: Select Design Style
67
68**If user specifies a style:**
69- Match their request to available styles (e.g., "brutalist" → Neo-brutalism)
70- Case-insensitive matching (brutalism, Brutalism, BRUTALISM all work)
71
72**If user doesn't specify:**
73- For modern, professional projects → **ModernDark** or **Professional**
74- For creative, bold projects → **Neo-brutalism** or **BoldTypography**
75- For minimal, clean projects → **FlatDesign** or **Swiss**
76- For enterprise/corporate → **Enterprise**
77
78Ask the user if you're uncertain about which style fits their needs.
79
80### Step 3: Retrieve Design System
81
82Use the Read tool to load the appropriate prompt file:
83
84```
85Read: prompts/<StyleName>.md
86```
87
88For example:
89- `prompts/Neo-brutalism.md`
90- `prompts/ModernDark.md`
91- `prompts/Cyberpunk.md`
92
93### Step 4: Apply Design System
94
95Once you've loaded the design system prompt:
96
971. **Internalize the design philosophy** - Understand the core principles, visual signatures, and differentiation factors
982. **Extract design tokens** - Colors, typography, spacing, shadows, borders
993. **Follow component patterns** - Use the specified button styles, card layouts, etc.
1004. **Apply the "Bold Factor"** - Implement signature elements that make the design authentic
1015. **Avoid anti-patterns** - Don't use techniques that break the aesthetic
102
103### Step 5: Build with Context
104
105**Before writing code:**
106- Identify the user's existing tech stack
107- Understand their component architecture
108- Note any constraints (CSS frameworks, design libraries, etc.)
109
110**When writing code:**
111- Match their existing patterns and conventions
112- Centralize design tokens in CSS variables or a config file
113- Create reusable, composable components
114- Explain your architectural choices briefly
115
116**Quality standards:**
117- Preserve or improve accessibility
118- Ensure responsive design across devices
119- Make deliberate, creative design choices (not generic boilerplate)
120- Leave the codebase cleaner than you found it
121
122## Examples
123
124### Example 1: User Specifies Style
125
126**User:** "Create a landing page for my SaaS product with a neo-brutalist design"
127
128**Skill Actions:**
1291. Detect keywords: "landing page", "neo-brutalist"
1302. Map "neo-brutalist" → `prompts/Neo-brutalism.md`
1313. Read the design system prompt
1324. Ask clarifying questions: "What tech stack are you using? React, Vue, or plain HTML/CSS?"
1335. Build the landing page following Neo-brutalism principles (thick borders, hard shadows, bold colors, etc.)
134
135### Example 2: User Doesn't Specify Style
136
137**User:** "Help me build a portfolio website"
138
139**Skill Actions:**
1401. Detect: "portfolio website" (creative context)
1412. Suggest options: "Would you like a specific design style? I can create it in Modern Dark (sophisticated), Neo-brutalism (bold and creative), or Swiss (minimal and clean)."
1423. User responds with preference
1434. Load appropriate prompt and build
144
145### Example 3: Component Request
146
147**User:** "Add a contact form to my Next.js app. Make it look modern and professional."
148
149**Skill Actions:**
1501. Keywords: "Next.js", "modern and professional"
1512. Select: `ModernDark.md` (modern) or `Professional.md` (professional)
1523. Read design system
1534. Build form component matching their Next.js patterns
1545. Use design tokens from the prompt (colors, typography, shadows, etc.)
155
156## Quick Reference Commands
157
158When implementing, you can quickly reference specific sections:
159
160**Colors:**
161```
162Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"
163```
164
165**Typography:**
166```
167Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"
168```
169
170**Component Patterns:**
171```
172Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"
173```
174
175## Tips for Best Results
176
1771. **Read the full prompt** - Don't just skim. The design philosophy and differentiation sections are critical.
1782. **Implement signature elements** - Every design system has a "Bold Factor" section. These elements are what make it authentic.
1793. **Avoid anti-patterns** - Each prompt lists what NOT to do. Follow these rules strictly.
1804. **Ask questions** - If the user's needs are unclear, ask before building.
1815. **Match existing code** - Don't fight their tech stack. Integrate the design system into their existing patterns.
182
183## Notes
184
185- All design system prompts follow the same structure: `<role>` and `<design-system>` sections
186- Prompts include detailed color palettes, typography scales, component patterns, and implementation examples
187- Each style is production-ready and has been carefully crafted for visual distinctiveness
188- The prompts are designed to prevent generic, AI-looking interfaces
189
190## Future Enhancements
191
192Potential improvements to this skill:
193- Style combination support (e.g., "Cyberpunk + Minimal")
194- Custom style creation workflow
195- Design token extraction to JSON/CSS
196- Component library generation from prompts
majiayu000