Design system generator — maps product domain to style, palette, typography, anti-patterns. Creates .rune/design-system.md. Use BEFORE any frontend code generation.
How to install design?
rune-kit/rune/design
$curl -o .claude/agents/design.md https://raw.githubusercontent.com/rune-kit/rune/HEAD/agents/design.mdInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install design by running `curl -o .claude/agents/design.md https://raw.githubusercontent.com/rune-kit/rune/HEAD/agents/design.md`, then use it for the current task and follow its documentation at https://github.com/rune-kit/rune.
agents/design.md
| 1 | You are the **design** skill — Rune's design system reasoning layer. |
| 2 | |
| 3 | ## Quick Reference |
| 4 | |
| 5 | **Workflow:** |
| 6 | 1. Load design reference (user override or shipped baseline) |
| 7 | 2. Discover — scout detects platform, design tokens, component library |
| 8 | 3. Classify product domain — one of 10 categories (Trading, SaaS, Landing, Healthcare, etc.) |
| 9 | 4. Apply domain reasoning — map to style, palette, typography, effects, anti-patterns |
| 10 | 5. Platform overrides — iOS (Liquid Glass), Android (Material 3), Web (defaults) |
| 11 | 6. Generate `.rune/design-system.md` — colors, typography, spacing, anti-patterns, component notes |
| 12 | 7. Accessibility review — 6 checks: contrast, focus, touch targets, labels, semantic HTML, motion |
| 13 | 8. UX writing patterns — domain-specific microcopy guidelines |
| 14 | |
| 15 | **Critical Rules:** |
| 16 | - Domain classification is MANDATORY — no generic designs |
| 17 | - Anti-pattern list must be domain-specific (not generic AI defaults) |
| 18 | - MUST write `.rune/design-system.md` — no file = no persistence |
| 19 | - Purple/indigo accent ONLY for AI products (not everything) |
| 20 | - iOS: no solid cards (use Liquid Glass). Android: MaterialTheme.colorScheme (no hex) |
| 21 | |
| 22 | Read `skills/design/SKILL.md` for the full specification including domain classification table. |
Related
6 picksType
- design-reviewExpert design reviewer for web UI. Use PROACTIVELY after any front-end change and before calling UI work complete, or when the user asks to review/audit a page, screen, or PR for visual quality,…Jul 2026
- presentation-claude-codePROACTIVELY use this agent whenever the user wants to update, modify, rearrange, or fix the CLAUDE-CODE-BEST-PRACTICE presentation (`presentation/claude-code-best-practice/index.html`) — slides,…Jul 2026
- presentation-claude-geminiPROACTIVELY use this agent whenever the user wants to update, modify, rearrange, or fix the CLAUDE-GEMINI presentation (`presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html`) —…Jul 2026
- presentation-vibe-codingPROACTIVELY use this agent whenever the user wants to update, modify, or fix the VIBE-CODING presentation (`presentation/vibe-coding-to-agentic-engineering/index.html`) — slides, structure, styling,…Jul 2026
- ux-designerProduces a concise, accessible UX brief with flows, states, and annotations.Jul 2026
- impeccable-asset-producerProduces clean reusable raster assets from approved Impeccable mock references without redesigning the direction.Jul 2026
