design-principles
Design Principles
This skill guides AI-assisted UI generation toward enterprise-grade, intentional design rather than producing generic interfaces. It enforces principles inspired by products like Linear, Notion, Stripe, and Vercel.
When to Use
Invoke this skill when:
- Building user interfaces or frontend components
- Creating dashboards or admin panels
- Designing enterprise software or SaaS applications
- Generating styled frontend code
- User asks for design help or UI improvements
- Working on any project that needs professional, polished styling
Key Requirement
Commit to a design direction before coding. Choose one personality:
| Direction | Character | Use Case |
|---|---|---|
| Precision & Density | Tight, monochrome, technical | Developer tools |
| Warmth & Approachability | Generous spacing, soft shadows | Consumer SaaS |
| Sophistication & Trust | Cool tones, layered depth | Enterprise finance |
| Boldness & Clarity | High contrast, dramatic space | Modern dashboards |
| Utility & Function | Muted palette, functional density | GitHub-style tools |
| Data & Analysis | Chart-optimized, numbers-first | Analytics platforms |
Core Craft Principles
The 4px grid governs all spacing (4px → 8px → 12px → 16px → 24px → 32px).
Symmetrical padding is mandatory: TLBR values must match unless content creates natural visual balance.
Depth strategy must be intentional and consistent. Choose borders-only (flat, technical), subtle single shadows, layered shadows (premium), or surface color shifts—then commit completely.
Typography hierarchy: Headlines at 600 weight with tight letter-spacing; body at 400–500; scales from 11px to 32px. Monospace exclusively for data.
Card layouts should vary internally while maintaining consistent surface treatment. Border weight, shadow depth, corner radius, and padding remain uniform.
Critical Details
- Use Phosphor Icons; avoid native form elements
- Animation: 150–250ms with cubic-bezier easing (no bounce)
- Color communicates meaning only (status, action, error, success)
- Dark mode requires border emphasis over shadows
- Include navigation context: sidebars, breadcrumbs, or active states
The Standard
"Every interface should look designed by a team that obsesses over 1-pixel differences"—polished, intentional, never defaulted.
Attribution
This skill is based on claude-design-skill by Dammyjay93, licensed under MIT.
More from dashed/claude-marketplace
playwright
Browser automation with Playwright for Python. Use when testing websites, taking screenshots, filling forms, scraping web content, or automating browser interactions. Triggers on browser, web testing, screenshots, selenium, puppeteer, or playwright.
22tmux
Remote control tmux sessions for interactive CLIs (python, gdb, git add -p, etc.) by sending keystrokes and scraping pane output. Use when debugging applications, running interactive REPLs (Python, gdb, ipdb, psql, mysql, node), automating terminal workflows, interactive git commands (git add -p, git stash -p, git rebase -i), or when user mentions tmux, debugging, or interactive shells.
11ai-friendly-cli
Build and refactor CLIs for AI agent compatibility. Use when making command-line interfaces machine-readable, adding structured JSON output, hardening inputs against hallucinations, implementing safety rails like dry-run flags, adding schema introspection, or designing multi-surface architectures (CLI + MCP).
3zellij
Terminal workspace and multiplexer for interactive CLI sessions. Use when managing terminal sessions, running interactive REPLs, debugging applications, automating terminal workflows, or when user mentions zellij, terminal multiplexer, floating panes, or session layouts. Simpler alternative to tmux with native session management.
2chrome-cdp
Interact with local Chrome browser session via Chrome DevTools Protocol. Use when asked to inspect, debug, or interact with a page open in Chrome, take screenshots of browser tabs, read accessibility trees, evaluate JavaScript, click elements, navigate pages, or automate browser interactions in a live Chrome session.
2mermaid-cli
Generate, validate, and fix diagrams from Mermaid markup using the mermaid-cli (mmdc) tool. Use when creating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mindmaps, or any Mermaid-supported diagram type. Also use when validating, verifying, or fixing Mermaid diagram syntax. Triggers on mentions of mermaid, mmdc, diagram generation, diagram validation, or converting .mmd files to images/SVG/PDF.
2