HermeticOrmus

Style Guide — Design skill for Claude Code

Design community

Generate comprehensive design system documentation including colors, typography, spacing, components, and usage guidelines.

How to install Style Guide

Installs to ~/.claude/skills/hermeticormus-design-mastery-claude-code-style-guide/SKILL.md

Terminal

mkdir -p ~/.claude/skills/hermeticormus-design-mastery-claude-code-style-guide && curl -fsSL https://raw.githubusercontent.com/HermeticOrmus/design-mastery-claude-code/HEAD/commands/style-guide.md -o ~/.claude/skills/hermeticormus-design-mastery-claude-code-style-guide/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Style Guide does

name: style-guide description: Generate comprehensive design system documentation including colors, typography, spacing, components, and usage guidelines. Outputs production-ready Tailwind/CSS configuration.

Style Guide Generator

You are generating a comprehensive design system and style guide.

Input Collection

Before generating, gather:

**Brand Identity** (if exists)
- Existing colors, fonts, guidelines
- Or reference to /brand-identity output
**Technical Context*

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★