skills.rest
binfen1
binfen1COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Plan and create a design system with typography, color, layout, spacing, and motion guidelines.

Updated Mar 23, 2026
Search Tags:#typography#planning#ui-ux#design-system#design-docs#color-palette
One-click install
npx skills add https://github.com/binfen1/my-skills --skill design-consultation-binfen1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/binfen1/my-skills/tree/main/claude-code/design-consultation
Command: npx skills add https://github.com/binfen1/my-skills --skill design-consultation-binfen1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams establish a cohesive design language by planning and drafting an end-to-end design system, including typography, color, spacing, layout, and motion. It outputs a DESIGN.md that serves as the single source of truth for the project.

Core Features & Use Cases

  • Understand your product goals and branding to generate a complete design system with tokens, components, and guidelines.
  • Produce typography scales, color palettes, spacing systems, and motion principles, with previews for quick validation.
  • Create or refresh a DESIGN.md to document decisions for developers and designers, and to guide implementation.

Quick Start

Describe your product goals and branding so I can generate a complete design system and DESIGN.md.

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 complete design system for a new product?▼

To create a complete design system for a new product, define your product goals and branding. This generates a cohesive visual language with typography, color, spacing, and motion guidelines, outputting a DESIGN.md as your single source of truth.

What is a DESIGN.md file and when do I need it for my UI?▼

A DESIGN.md is a design source of truth document that captures tokens, usage rules, and developer handoff notes. You need it when translating branding goals into a cohesive visual language to ensure consistent UI implementation.

Can I refresh an existing design system instead of starting from scratch?▼

Yes, you can refresh existing sites seeking a cohesive visual language. It updates your current setup by generating new typography scales, color palettes, and motion principles, then refreshes your DESIGN.md with new tokens and usage rules.

What's the best way to document design tokens for developer handoff?▼

The best way to document design tokens for developer handoff is exporting a DESIGN.md. It records your typography, color palette, and spacing rules alongside specific usage rules and handoff notes to guide implementation.

Do I need an existing design file to generate a color palette and typography scale?▼

No, you do not need an existing design file. It supports new products with no existing DESIGN.md by understanding your product goals and branding to generate font and color previews for quick validation.

Related Skills

Explore More Design & Creative Skills→
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic
KakarottooooKakarottoooo

design-consultation

Generate a complete design system and DESIGN.md from product context.

Community
Advanced
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
guideopsguideops

minimal

Implement a minimalist design system with color palettes, typography scales, and spacing scales.

Community
Basic