Agent-Skills.md

Agent Skills: Design Principles

Guide AI-assisted UI generation toward enterprise-grade, intentional design. Use when building user interfaces, creating dashboards, designing enterprise software or SaaS applications, generating frontend code with styling, or when the user asks for design help. Enforces principles inspired by Linear, Notion, Stripe, and Vercel.

UncategorizedID: dashed/claude-marketplace/design-principles
7

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dashed/claude-marketplace/tree/HEAD/plugins/design-principles

Skill Files

Browse the full folder contents for design-principles.

Download Skill

Loading file tree…

plugins/design-principles/SKILL.md

Skill Metadata

Name
design-principles
Description
"Guide AI-assisted UI generation toward enterprise-grade, intentional design. Use when building user interfaces, creating dashboards, designing enterprise software or SaaS applications, generating frontend code with styling, or when the user asks for design help. Enforces principles inspired by Linear, Notion, Stripe, and Vercel."

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.