Design From Brief — Design skill for Claude Code
Generate a complete design system (palette + foundations + component baseline + starter set + handoff) from a one-paragraph product brief.
How to install Design From Brief
Installs to ~/.claude/skills/sungjin9288-design-ai-design-from-brief/SKILL.md
mkdir -p ~/.claude/skills/sungjin9288-design-ai-design-from-brief && curl -fsSL https://raw.githubusercontent.com/sungjin9288/design-ai/HEAD/commands/design-from-brief.md -o ~/.claude/skills/sungjin9288-design-ai-design-from-brief/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Design From Brief does
description: Generate a complete design system (palette + foundations + component baseline + starter set + handoff) from a one-paragraph product brief.
Produce a full design system bootstrap deliverable from the brief in `$ARGUMENTS`.
Input
Parse `$ARGUMENTS` as a single paragraph describing:
- Product type / category (fintech, social, e-commerce, content, etc.)
- Audience (consumer / B2B / age / region)
- Platform (web / mobile / native / cross-platform)
- Mood / tone (trustworthy
Alternatives in Design
- NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
- Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★
- Design UI UX — Design UI/UX systems with style guides, palettes, typography, and component specs 2.8k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Brand Kit
Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, compone
Design Handoff
Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and produ
Architect Verify Traceability
Integration verification — confirm the issue → design → code → tests chain is intact, E2E + smoke suite pass,
Design Craft
Building or reshaping a UI - a page, landing page, dashboard, product site, interactive piece. Use when choosi
Tokenize
Stand up design system foundations — tokens, type scale, color, and spacing with adaptive-interface checks.
Mobile First Design
Design and build mobile-first responsive web experiences. Start with the smallest screen as baseline, progress
Related Agents
Color Specialist
OKLCH palette derivation, contrast checking, and brand color specialist. Given a persona and product descripti
Design
Design system generator — maps product domain to style, palette, typography, anti-patterns. Creates .rune/desi
Workflow Architect Agent
Workflow design specialist who maps complete workflow trees for every system, user journey, and agent interact