design-style

Category: Development & Coding | Uploader: Castor6 | Downloads: 0 | Version: v1.0（Latest）

Use this skill whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

Changelog: Source: GitHub https://github.com/Castor6/tactus

Directory Structure

Current level: .agents/skills/design-style/

📁 prompts/
- 📄 Academia.md 28.6 KB
- 📄 ArtDeco.md 17.1 KB
- 📄 Bauhaus.md 11.9 KB
- 📄 BoldTypography.md 15.6 KB
- 📄 Botanical.md 11.0 KB
- 📄 Claymorphism.md 22.4 KB
- 📄 Cyberpunk.md 16.8 KB
- 📄 Enterprise.md 14.3 KB
- 📄 FlatDesign.md 10.0 KB
- 📄 Fluent2.md 9.4 KB
- 📄 HumanistLiterary.md 7.0 KB
- 📄 Industrial.md 22.9 KB
- 📄 Kinetic.md 25.3 KB
- 📄 Luxury.md 24.0 KB
- 📄 Material.md 24.8 KB
- 📄 Maximalism.md 32.9 KB
- 📄 MinimalDrak.md 16.1 KB
- 📄 ModernDark.md 18.3 KB
- 📄 Monochrome.md 17.0 KB
- 📄 Neo-brutalism.md 24.2 KB
- 📄 Neumorphism.md 12.1 KB
- 📄 Newsprint.md 18.7 KB
- 📄 Organic.md 12.7 KB
- 📄 PlayfulGeometric.md 9.1 KB
- 📄 Professional.md 22.7 KB
- 📄 Retro.md 24.4 KB
- 📄 Saas.md 25.4 KB
- 📄 Sketch.md 12.1 KB
- 📄 Swiss.md 14.2 KB
- 📄 TerminalCLI.md 6.5 KB
- 📄 Vaporwave.md 18.2 KB
- 📄 Web3.md 19.0 KB
📁 scripts/
- 📄 list-styles.sh 1.6 KB
- 📄 verify-skill.sh 4.2 KB
📄 reference.md 12.6 KB
📄 SKILL.md 8.5 KB
📄 styles-mapping.json 13.3 KB

SKILL.md

---
name: design-style
description: |
  Use this skill whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
  This includes:
  - Landing pages, websites, web apps, dashboards, portfolios, or any web UI
  - UI components (buttons, forms, cards, navbars, modals, etc.)
  - React, Vue, Next.js, Svelte, or other frontend frameworks
  - CSS, Tailwind, styled-components, or styling help
  - Visual improvements or aesthetic upgrades
  - Requests mentioning frontend, UI, UX, interface, web design, or styling
  - Adjectives like beautiful, modern, clean, professional, minimalist, dark, brutalist, etc.

  This skill loads the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to generate distinctive, production-grade frontend code instead of generic UI.
  
  IMPORTANT: Trigger proactively for ANY frontend/UI-related request, even if no style is specified.
allowed-tools: Read, Glob, Grep
---

# 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:
1. **Tech stack** - What framework are they using? (React, Vue, Next.js, etc.)
2. **Design preference** - Did they mention a specific style or aesthetic?
3. **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.md`
- `prompts/ModernDark.md`
- `prompts/Cyberpunk.md`

### Step 4: Apply Design System

Once you've loaded the design system prompt:

1. **Internalize the design philosophy** - Understand the core principles, visual signatures, and differentiation factors
2. **Extract design tokens** - Colors, typography, spacing, shadows, borders
3. **Follow component patterns** - Use the specified button styles, card layouts, etc.
4. **Apply the "Bold Factor"** - Implement signature elements that make the design authentic
5. **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:**
1. Detect keywords: "landing page", "neo-brutalist"
2. Map "neo-brutalist" → `prompts/Neo-brutalism.md`
3. Read the design system prompt
4. Ask clarifying questions: "What tech stack are you using? React, Vue, or plain HTML/CSS?"
5. 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:**
1. Detect: "portfolio website" (creative context)
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)."
3. User responds with preference
4. 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:**
1. Keywords: "Next.js", "modern and professional"
2. Select: `ModernDark.md` (modern) or `Professional.md` (professional)
3. Read design system
4. Build form component matching their Next.js patterns
5. 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

1. **Read the full prompt** - Don't just skim. The design philosophy and differentiation sections are critical.
2. **Implement signature elements** - Every design system has a "Bold Factor" section. These elements are what make it authentic.
3. **Avoid anti-patterns** - Each prompt lists what NOT to do. Follow these rules strictly.
4. **Ask questions** - If the user's needs are unclear, ask before building.
5. **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

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

design-style

Directory Structure

SKILL.md

Report

Notice