skills.rest
zhifengzhang-sz
zhifengzhang-szCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Create a complete design system and export DESIGN.md as the source of truth.

Updated Feb 27, 2026
Search Tags:#typography#ui#documentation#prototyping#color#design-system
One-click install
npx skills add https://github.com/zhifengzhang-sz/divine-book --skill design-consultation-zhifengzhang-sz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/zhifengzhang-sz/divine-book/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/zhifengzhang-sz/divine-book --skill design-consultation-zhifengzhang-sz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to codify a cohesive look and feel across product surfaces. This skill solves that by understanding your product, researching the landscape, and delivering a complete design system with typography, color, layout, spacing, and motion, then generating a DESIGN.md that serves as the project’s design source of truth. It also supports existing sites by offering a plan-design-review to infer the system and guidelines. It proactively suggests improvements when starting a new UI from scratch.

Core Features & Use Cases

  • Understands product context and research landscape to propose a cohesive visual system.
  • Generates a complete design system covering typography, color, layout, spacing, and motion, plus preview pages.
  • Creates DESIGN.md as the single source of truth; supports plan-design-review for existing sites; proactive design guidance.

Quick Start

Tell me you want a full design system and DESIGN.md, or ask for a plan-design-review to infer the system for an existing site.

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 a new product?▼

A design system for a new product is created by analyzing context and researching the landscape to propose cohesive typography, color, layout, spacing, and motion, then exporting a DESIGN.md file as the single source of truth.

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

A DESIGN.md file serves as the project's design source of truth, codifying typography, color, layout, spacing, and motion rules to ensure a cohesive look and feel across all product surfaces.

Can I infer design guidelines for an existing website?▼

Yes, you can infer design guidelines for an existing website by requesting a plan-design-review, which analyzes your current UI to propose cohesive visuals and generate matching design documentation.

What does a complete UI design system include?▼

A complete UI design system includes typography, color, layout, spacing, and motion specifications, along with generated preview pages to visually demonstrate the proposed cohesive styles.

How do I document UI typography and color tokens for my project?▼

You document UI typography and color tokens by generating a DESIGN.md file that codifies all visual rules and design system guidelines, ensuring they remain up-to-date and accurate.

Does prototyping a design system require existing code?▼

No, prototyping a design system does not require existing code; it can proactively suggest improvements and generate a complete visual system from scratch based on product context and landscape research.

Related Skills

Explore More Design & Creative Skills→
zapabobzapabob
2

codex-mcp-researcher

Perform code analysis and automated reviews using the Codex MCP protocol.

Community
Advanced
shhubbhshhubbh
1

design-consultation

Generate a DESIGN.md documenting typography, color palettes, layout, spacing, and motion guidelines.

Community
Advanced
moonklabsmoonklabs

sprintable-design

Generate Sprintable UI artifacts from design tokens, assets, and UI kit components.

Official
Intermediate
daodaoleedaodaolee

style-extractor

Extracts web UI style guides and motion analysis from live sites or screenshots.

Community
Advanced