A Claude Code skill enforcing precise, crafted UI design for enterprise software, SaaS dashboards, and admin interfaces. It guides AI-generated interfaces towards modern aesthetics inspired by leading design systems like Linear and Notion, enhancing output quality and consistency for users of Claude Code.

How It Works

The skill integrates with Claude Code, directing its UI generation process. It mandates selecting a design direction (e.g., Precision & Density, Warmth & Approachability) and applying core craft principles such as a 4px grid, consistent typography hierarchy, and intentional depth strategy. This approach prevents common UI anti-patterns and ensures outputs are contextually appropriate and aesthetically refined.

Quick Start & Requirements

• Installation:
  • macOS/Linux:

    mkdir -p ~/.claude/skills/design-principles
    curl -o ~/.claude/skills/design-principles/skill.md \
      https://raw.githubusercontent.com/Dammyjay93/claude-design-skill/main/skill/skill.md
    

  • Manual: Create ~/.claude/skills/design-principles/ and copy skill/skill.md into it. Restart Claude Code.
• Prerequisites: Claude Code environment.
• Usage: Activates automatically or via /design-principles command or prompt reference.
• Demo: dashboard-v4-eta.vercel.app showcases before/after examples.

Highlighted Details

• 4px Grid System: Enforces strict adherence to 4px multiples for all spacing and sizing.
• Design Personalities: Offers configurable aesthetic directions: Precision & Density, Warmth & Approachability, Sophistication & Trust, Boldness & Clarity, Utility & Function, Data & Analysis.
• Craft Principles: Mandates symmetrical padding, consistent depth strategy, monospace font usage for data elements, and intentional color application for structure and meaning.
• Inspiration: Leverages design philosophies from Linear, Notion, Stripe, and Vercel.

Maintenance & Community

The provided README does not detail specific contributors, sponsorships, or community channels (e.g., Discord, Slack).

Licensing & Compatibility

• License: MIT.
• Compatibility: Permissive license allows for commercial use and integration within closed-source projects without significant restrictions.

Limitations & Caveats

This skill is exclusively for the Claude Code platform. Customization requires forking the repository and modifying the skill.md configuration file. Its effectiveness is contingent on Claude Code's interpretation and application of the defined design rules.