skills.rest
geoffreywoo
geoffreywooCOMMUNITY
Explore all skills by this author โ†’
Website๐•@geoffreywooGitHub

design-consultation

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

1|Updated Feb 27, 2026
Search Tags:#typography#design#branding#ui-design#design-system#color-palette#font-preview
One-click install
npx skills add https://github.com/geoffreywoo/clawfable --skill design-consultation-geoffreywoo
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/geoffreywoo/clawfable/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/geoffreywoo/clawfable --skill design-consultation-geoffreywoo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead.

Core Features & Use Cases

  • Proposes a complete design system including aesthetic, typography, color, layout, spacing, and motion.
  • Generates DESIGN.md as the single source of truth for the project's design; for existing sites, infers the system via a /plan-design-review workflow.
  • Produces font and color previews to visualize the design system on real screens.

Quick Start

Generate a complete design system proposal and font/color previews for your project by asking me to run the plan.

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 from scratch for a new product?โ–ผ

You can generate a comprehensive DESIGN.md file that defines your typography rules, color tokens, layout, spacing, and motion principles to serve as your project's single source of truth.

Can I infer a design system for an existing website?โ–ผ

Yes, you can infer a design system for an existing website by running a /plan-design-review workflow, which analyzes the current site to extract and document its underlying typography, color palette, and layout guidelines.

What is a DESIGN.md file used for in UI design?โ–ผ

A DESIGN.md file acts as the central source of truth for a project, documenting the complete design system including aesthetic choices, typography rules, color tokens, layout spacing, and motion principles to ensure consistency.

Does this design consultation workflow include color and font previews?โ–ผ

Yes, the design consultation workflow produces font and color preview pages, allowing you to visualize your proposed typography rules and color palette on real screens before finalizing the design system.

What components should a complete design system include?โ–ผ

A complete design system should include documented rules for typography, color tokens, layout and spacing guidelines, motion principles, and aesthetic choices, all governed by a DESIGN.md file.

Related Skills

Explore More Design & Creative Skillsโ†’
vibrationalforcevibrationalforce

design-consultation

Research product context and generate a DESIGN.md design system proposal.

Community
Advanced
Jesse-L-MJesse-L-M

design-consultation

Generate a complete design system with typography, color, layout, and motion tokens.

Community
Advanced
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
deveshkumarsdeveshkumars

design-consultation

Generate a complete product design system and output a DESIGN.md source of truth.

Community
Advanced