45 lines
2.4 KiB
Markdown
45 lines
2.4 KiB
Markdown
---
|
|
name: design-claude
|
|
description: Apply the Claude (Anthropic) design system to UI code. Use when the user wants their interface to look like Claude (Anthropic), says "make it look like Claude (Anthropic)", "claude design", or references the Claude (Anthropic) aesthetic. Category: AI & LLM. Vibe: Warm parchment, terracotta accent, editorial serif.
|
|
---
|
|
|
|
# Claude (Anthropic) Design System
|
|
|
|
Apply the Claude (Anthropic) brand design system to generate pixel-perfect UI that matches the Claude (Anthropic) aesthetic.
|
|
|
|
## When to Use
|
|
|
|
- User says "make it look like Claude (Anthropic)" or "claude style"
|
|
- User wants the Claude (Anthropic) design language applied to their project
|
|
- User references Claude (Anthropic)'s visual aesthetic, colors, or typography
|
|
|
|
## How to Use
|
|
|
|
1. **Read the full design system**: Open `references/DESIGN.md` in this skill directory — it contains the complete Claude (Anthropic) design specification with 9 sections
|
|
2. **Apply exactly**: Use the exact hex codes, font stacks, spacing values, shadow systems, and component specs from the reference
|
|
3. **Follow the Do's and Don'ts**: Section 7 contains brand-specific guardrails
|
|
4. **Use the Agent Prompt Guide**: Section 9 has quick color references and ready-to-use component prompts
|
|
|
|
## Quick Reference
|
|
|
|
- **Category**: AI & LLM
|
|
- **Aesthetic**: Warm parchment, terracotta accent, editorial serif
|
|
|
|
## Design System Sections
|
|
|
|
The `references/DESIGN.md` file contains:
|
|
|
|
1. **Visual Theme & Atmosphere** — mood, density, design philosophy
|
|
2. **Color Palette & Roles** — every color with semantic name, hex code, and function
|
|
3. **Typography Rules** — font families, full hierarchy table with sizes, weights, line-heights
|
|
4. **Component Stylings** — buttons, cards, inputs, badges, navigation with exact values
|
|
5. **Layout Principles** — spacing system, grid, containers, whitespace philosophy
|
|
6. **Depth & Elevation** — shadow levels, surface hierarchy
|
|
7. **Do's and Don'ts** — brand-specific design guardrails
|
|
8. **Responsive Behavior** — breakpoints, touch targets, collapse strategy
|
|
9. **Agent Prompt Guide** — quick color reference and ready-to-use prompts
|
|
|
|
## Precedence
|
|
|
|
When this skill is active, the Claude (Anthropic) design system overrides generic design rules for colors, typography, spacing, shadows, and component patterns. Generic rules still apply for motion choreography, performance guardrails, and anti-patterns not covered by this design system.
|