\r \r

Design Style Skill\r

\r

Purpose\r

\r 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.\r \r

When to Use\r

\r This skill is automatically invoked when:\r

• User asks to build a web page, landing page, or web application\r
• User requests a UI component with a specific design style\r
• User mentions frontend, React, Vue, or web development\r
• User asks for a specific aesthetic (e.g., "make it look modern and dark" or "use a brutalist style")\r \r

Available Design Styles\r

\r The following design systems are available in the prompts/ directory:\r \r

• Academia - Scholarly, classic, refined\r
• ArtDeco - Luxurious 1920s glamour\r
• Bauhaus - Functionalist, geometric minimalism\r
• BoldTypography - Type-driven design\r
• Botanical - Nature-inspired, organic\r
• Claymorphism - Soft, clay-like 3D elements\r
• Cyberpunk - Futuristic, neon, high-tech\r
• Enterprise - Professional, corporate, scalable\r
• FlatDesign - Clean, minimal, 2D\r
• Fluent2 - Microsoft Fluent 2 Design System\r
• HumanistLiterary - Warm, literary, conversational (Claude aesthetic)\r
• Industrial - Raw, mechanical, utilitarian\r
• Kinetic - Dynamic, motion-focused\r
• Luxury - Premium, elegant, sophisticated\r
• Material - Google Material Design\r
• Maximalism - Bold, expressive, abundant\r
• MinimalDrak - Minimal dark theme (note: typo in original)\r
• ModernDark - Contemporary dark UI with depth\r
• Monochrome - Black and white, high contrast\r
• Neo-brutalism - Bold, raw, colorful brutalism\r
• Neumorphism - Soft UI, skeuomorphic\r
• Newsprint - Newspaper-inspired\r
• Organic - Natural, flowing forms\r
• PlayfulGeometric - Fun geometric shapes\r
• Professional - Clean, business-focused\r
• Retro - Vintage, nostalgic\r
• Saas - Modern SaaS aesthetic\r
• Sketch - Hand-drawn, artistic\r
• Swiss - International Typographic Style\r
• TerminalCLI - Command-line interface aesthetic\r
• Vaporwave - 80s/90s aesthetic, nostalgic\r
• Web3 - Decentralized, crypto-inspired\r \r

How It Works\r

\r

Step 1: Understand User Intent\r

\r When the user requests frontend work, first determine:\r

1. Tech stack - What framework are they using? (React, Vue, Next.js, etc.)\r
2. Design preference - Did they mention a specific style or aesthetic?\r
3. Component scope - Single component, full page, or entire application?\r \r

Step 2: Select Design Style\r

\r If user specifies a style:\r

• Match their request to available styles (e.g., "brutalist" → Neo-brutalism)\r
• Case-insensitive matching (brutalism, Brutalism, BRUTALISM all work)\r \r If user doesn't specify:\r
• For modern, professional projects → ModernDark or Professional\r
• For creative, bold projects → Neo-brutalism or BoldTypography\r
• For minimal, clean projects → FlatDesign or Swiss\r
• For enterprise/corporate → Enterprise\r \r Ask the user if you're uncertain about which style fits their needs.\r \r

Step 3: Retrieve Design System\r

\r Use the Read tool to load the appropriate prompt file:\r \r

Read: prompts/\x3CStyleName>.md\r
```\r
\r
For example:\r
- `prompts/Neo-brutalism.md`\r
- `prompts/ModernDark.md`\r
- `prompts/Cyberpunk.md`\r
\r
### Step 4: Apply Design System\r
\r
Once you've loaded the design system prompt:\r
\r
1. **Internalize the design philosophy** - Understand the core principles, visual signatures, and differentiation factors\r
2. **Extract design tokens** - Colors, typography, spacing, shadows, borders\r
3. **Follow component patterns** - Use the specified button styles, card layouts, etc.\r
4. **Apply the "Bold Factor"** - Implement signature elements that make the design authentic\r
5. **Avoid anti-patterns** - Don't use techniques that break the aesthetic\r
\r
### Step 5: Build with Context\r
\r
**Before writing code:**\r
- Identify the user's existing tech stack\r
- Understand their component architecture\r
- Note any constraints (CSS frameworks, design libraries, etc.)\r
\r
**When writing code:**\r
- Match their existing patterns and conventions\r
- Centralize design tokens in CSS variables or a config file\r
- Create reusable, composable components\r
- Explain your architectural choices briefly\r
\r
**Quality standards:**\r
- Preserve or improve accessibility\r
- Ensure responsive design across devices\r
- Make deliberate, creative design choices (not generic boilerplate)\r
- Leave the codebase cleaner than you found it\r
\r
## Examples\r
\r
### Example 1: User Specifies Style\r
\r
**User:** "Create a landing page for my SaaS product with a neo-brutalist design"\r
\r
**Skill Actions:**\r
1. Detect keywords: "landing page", "neo-brutalist"\r
2. Map "neo-brutalist" → `prompts/Neo-brutalism.md`\r
3. Read the design system prompt\r
4. Ask clarifying questions: "What tech stack are you using? React, Vue, or plain HTML/CSS?"\r
5. Build the landing page following Neo-brutalism principles (thick borders, hard shadows, bold colors, etc.)\r
\r
### Example 2: User Doesn't Specify Style\r
\r
**User:** "Help me build a portfolio website"\r
\r
**Skill Actions:**\r
1. Detect: "portfolio website" (creative context)\r
2. 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)."\r
3. User responds with preference\r
4. Load appropriate prompt and build\r
\r
### Example 3: Component Request\r
\r
**User:** "Add a contact form to my Next.js app. Make it look modern and professional."\r
\r
**Skill Actions:**\r
1. Keywords: "Next.js", "modern and professional"\r
2. Select: `ModernDark.md` (modern) or `Professional.md` (professional)\r
3. Read design system\r
4. Build form component matching their Next.js patterns\r
5. Use design tokens from the prompt (colors, typography, shadows, etc.)\r
\r
## Quick Reference Commands\r
\r
When implementing, you can quickly reference specific sections:\r
\r
**Colors:**\r
```\r
Grep: pattern "Token|Value|Usage" path "prompts/\x3CStyle>.md"\r
```\r
\r
**Typography:**\r
```\r
Grep: pattern "Font|Weight|Size" path "prompts/\x3CStyle>.md"\r
```\r
\r
**Component Patterns:**\r
```\r
Grep: pattern "Button|Card|Input" path "prompts/\x3CStyle>.md"\r
```\r
\r
## Tips for Best Results\r
\r
1. **Read the full prompt** - Don't just skim. The design philosophy and differentiation sections are critical.\r
2. **Implement signature elements** - Every design system has a "Bold Factor" section. These elements are what make it authentic.\r
3. **Avoid anti-patterns** - Each prompt lists what NOT to do. Follow these rules strictly.\r
4. **Ask questions** - If the user's needs are unclear, ask before building.\r
5. **Match existing code** - Don't fight their tech stack. Integrate the design system into their existing patterns.\r
\r
## Notes\r
\r
- All design system prompts follow the same structure: `\x3Crole>` and `\x3Cdesign-system>` sections\r
- Prompts include detailed color palettes, typography scales, component patterns, and implementation examples\r
- Each style is production-ready and has been carefully crafted for visual distinctiveness\r
- The prompts are designed to prevent generic, AI-looking interfaces\r
\r
## Future Enhancements\r
\r
Potential improvements to this skill:\r
- Style combination support (e.g., "Cyberpunk + Minimal")\r
- Custom style creation workflow\r
- Design token extraction to JSON/CSS\r
- Component library generation from prompts\r