skills.rest
gfires
gfiresCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete design system and DESIGN.md covering typography, color, layout, spacing, and motion.

Updated Aug 23, 2026
Search Tags:#typography#layout#color#design-system#motion#design-research#design-consultation
One-click install
npx skills add https://github.com/gfires/motion-analysis --skill design-consultation-gfires
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/gfires/motion-analysis/tree/main/design-consultation
Command: npx skills add https://github.com/gfires/motion-analysis --skill design-consultation-gfires

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Assists product teams in crafting cohesive design systems that scale across products. It analyzes your product, researches design landscape, and proposes a complete system covering typography, color, layout, spacing, and motion. It outputs DESIGN.md as the single source of truth and can infer a system for existing sites via /plan-design-review.

Core Features & Use Cases

  • Proposes a complete design system including aesthetic, typography, color, layout, spacing, and motion.
  • Outputs DESIGN.md as the project design source of truth; for existing sites use /plan-design-review to infer.
  • Proactively assists when starting a new UI with no DESIGN.md.

Quick Start

Describe your product and I will generate a complete design system plus DESIGN.md as your source of truth.

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 UI?▼

Generate a design system for existing sites by using the /plan-design-review workflow to infer the current design source. This process analyzes the existing UI to construct or extract a cohesive system and outputs it into a DESIGN.md file.

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

A DESIGN.md file serves as the single source of truth for your project's design system. It documents the aesthetic decisions, typography, color palettes, layout structures, spacing rules, and motion guidelines to ensure UI consistency across the product.

Can I generate typography and color guidelines for an existing website?▼

Yes, you can generate typography and color guidelines for an existing website by initiating the /plan-design-review workflow. This infers the current design system from your existing site and documents the complete UI rules into a DESIGN.md file.

What do I need to provide to generate a design system covering layout and motion?▼

To generate a design system covering layout and motion, you simply need to provide a description of your product. The system researches the design landscape and proposes a complete aesthetic framework without requiring external dependencies or components.

Does this design system generation work without any external component libraries?▼

Yes, design system generation works without external component libraries or dependencies. It proactively assists by generating the foundational design rules, including spacing and motion, directly from your product description into a DESIGN.md document.

Related Skills

Explore More Design & Creative Skills→
eKoh951eKoh951

product-marketing-context

Draft and manage a reusable product marketing context document in .claude/product-marketing-context.md.

Community
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate