skills.rest
Chang-Shih-Yung
Chang-Shih-YungCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a DESIGN.md defining typography, color, layout, spacing, and motion.

Updated Mar 25, 2026
Search Tags:#typography#design#branding#ui#prototyping#color#design-system
One-click install
npx skills add https://github.com/Chang-Shih-Yung/auto-learning --skill design-consultation-chang-shih-yung
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/Chang-Shih-Yung/auto-learning/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/Chang-Shih-Yung/auto-learning --skill design-consultation-chang-shih-yung

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to establish a cohesive design language from scratch or infer one from existing sites. This skill automates the process by understanding product goals, researching landscapes, and generating a DESIGN.md that serves as the single source of truth for typography, color, layout, spacing, and motion.

Core Features & Use Cases

  • Understand product goals and context to define a design system aligned with branding.
  • Research landscape and synthesize typography, color palettes, spacing, and motion guidelines.
  • Generate font+color previews and export a DESIGN.md that consolidates design decisions.
  • Use for new projects or when you need to infer design systems from existing sites via /plan-design-review.
  • Proactively suggest design improvements when starting UI with no existing DESIGN.md.

Quick Start

Describe your product and goals, and I will generate a complete design system and DESIGN.md you can adopt.

Frequently Asked Questions about design-consultation

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

FAQPage Schema
How do I generate a design system for a new project?▼

To generate a design system, describe your product goals and context. The skill researches the landscape and synthesizes typography, color palettes, spacing, and motion guidelines into a DESIGN.md file.

Can I infer a design system from an existing website?▼

Yes, you can infer a design system from existing sites by using the /plan-design-review command. It extracts and consolidates typography, color, layout, and spacing decisions into a single source of truth.

What is a DESIGN.md file used for in UI development?▼

A DESIGN.md file serves as the single source of truth for a project's design language. It defines typography, color, layout, spacing, and motion guidelines to ensure UI consistency across development.

Do I need existing brand guidelines to create a design system?▼

No, you do not need existing brand guidelines. The skill understands your product goals and context to establish a cohesive design language from scratch, including generating font and color previews.

How do I define typography and color palettes for a brand?▼

Define typography and color palettes by providing your product context. The skill synthesizes landscape research to generate aligned font and color previews, which are then exported within a comprehensive DESIGN.md.

Related Skills

Explore More Design & Creative Skills→
forbotsakeforbotsake
5

design-consultation

Propose a complete design system and generate DESIGN.md with typography, color, layout, spacing, and motion tokens.

Official
Advanced
EzequielpereyraaEzequielpereyraa

ui-design

Align React UI components with typography, color, and spacing tokens.

Community
Intermediate
luisitoys12luisitoys12

frontend-design

Apply CSS tokens and WCAG accessibility rules to standardize UI/UX design.

Community
Intermediate
MissTullyMissTully

design-consultation

Generate DESIGN.md with typography, color palettes, layout rules, and motion guidelines.

Community
Advanced