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

Ready to run

npx skills add https://github.com/zhifengzhang-sz/divine-book --skill design-consultation-zhifengzhang-sz

💬 Prompt for ChatGPT / Claude Chat▼

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.