skills.rest
makyua-san
makyua-sanCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate DESIGN.md with typography, color, spacing, and motion tokens.

Updated Apr 5, 2026
Search Tags:#typography#branding#ui-design#design-system#design-docs#color-palette#design-consultation
One-click install
npx skills add https://github.com/makyua-san/usecase-agent --skill design-consultation-makyua-san
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/makyua-san/usecase-agent/tree/main/.claude/skills/design-consultation
Command: npx skills add https://github.com/makyua-san/usecase-agent --skill design-consultation-makyua-san

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consultation helps teams understand a product and craft a coherent design system. It researches the landscape, proposes a complete system covering typography, color, layout, spacing, and motion, and generates font and color preview pages. It creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system.

Core Features & Use Cases

  • Understand product context and market landscape to draft a scalable design system.
  • Define typography scales, color tokens, spacing, and motion guidelines.
  • Produce DESIGN.md and font/color preview pages ready for implementation.
  • Use when asked to "design system", "brand guidelines", or "create DESIGN.md".
  • Proactively suggest design-system improvements when starting a new UI with no existing DESIGN.md.

Quick Start

Provide a complete design system proposal and generate DESIGN.md with typography, color, layout, and motion previews.

Frequently Asked Questions about design-consultation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for an existing website?▼

To create a design system for an existing website, use a plan-design-review process to infer the current UI patterns. This generates a DESIGN.md file and font and color preview pages to serve as your project's design source of truth.

How do I define typography and color tokens for my product?▼

You define typography and color tokens by analyzing your product context and market landscape. The system then proposes a complete set of design tokens and generates dedicated font and color preview pages for visual validation.

Do I need a DESIGN.md file to scale my product's UI?▼

You need a DESIGN.md file to act as the single source of truth for your product's design system. It ensures consistent typography, color, spacing, and motion guidelines across new UI implementations and existing site updates.

Can I apply a design system to new projects without existing brand guidelines?▼

Yes, you can apply a design system to new projects by drafting a complete proposal covering layout, typography, and motion. It proactively suggests improvements and generates a DESIGN.md file even when no existing brand guidelines are present.

Related Skills

Explore More Design & Creative Skills→
jubscodesjubscodes
49

gsp-brand-research

Research market landscape and competitive positioning for a brand.

Community
Advanced
jangirsamarthjangirsamarth

design-guide

Guide UI component creation with design tokens and interaction patterns.

Community
Intermediate
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
drt0927drt0927
5

design-consultation

Generate a DESIGN.md design system with typography, color, layout, and motion guidelines.

Community
Advanced