skills.rest
agatx
agatxCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Draft a complete design system and generate DESIGN.md with preview pages.

5|2|Updated Dec 27, 2025
Search Tags:#typography#branding#ui-design#design-system#color-palette#design-consultation
One-click install
npx skills add https://github.com/agatx/serenada --skill design-consultation-agatx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/agatx/serenada/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/agatx/serenada --skill design-consultation-agatx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Drafts a complete, cohesive design system and DESIGN.md for your project based on context and research.

Core Features & Use Cases

  • Proposes a full design system covering aesthetic, typography, color, spacing, layout, and motion and generates DESIGN.md as the source of truth.
  • Creates font+color preview pages and, for existing sites, can infer a design system using /plan-design-review.
  • Provides a structured output that guides design decisions and governance, including CLAUDE.md updates.

Quick Start

Tell me your project name and goals, and I will generate a complete design system and DESIGN.md for you.

Frequently Asked Questions about design-consultation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system for a new product?▼

To generate a design system for a new product, you provide your project name and goals. The Skill drafts a cohesive system covering typography, color, spacing, layout, and motion, outputting a DESIGN.md file as the source of truth.

Can I infer a design system from an existing website?▼

Yes, you can infer a design system from an existing website. By using the /plan-design-review command, the Skill analyzes your current site and extracts a structured design system, including typography and color palette guidelines.

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

A DESIGN.md file serves as the source of truth for your UI design decisions. It details aesthetic, typography, color, spacing, layout, and motion guidelines, while providing a clear decision log for ongoing design governance.

Does this design system generator provide visual previews?▼

Yes, the design system generator provides live visual previews. It creates font and color preview pages to help you validate the design direction and ensure the proposed typography and color palette meet your project goals.

How do I document design decisions for governance and QA?▼

You document design decisions by generating a DESIGN.md file with a structured decision log. The Skill also updates CLAUDE.md with guidance, providing a clear framework for ongoing design QA and governance.

What do I need to start drafting a cohesive design system?▼

To start drafting a cohesive design system, you only need to provide your project name and goals. The Skill requires no external dependencies and generates a complete design system with typography, color, and layout specifications.

Related Skills

Explore More Design & Creative Skills→
b566776b566776

bmad-market-research

Define market research scope, methodology, and data sources with web-verified evidence.

Community
Advanced
g4rcezg4rcez
48

design-consultation

Generates a complete design system specification and live preview page from a product context.

Community
Advanced
lucasloutayflucasloutayf

minimalist-ui

Define a warm monochrome editorial UI design protocol with strict typography.

Community
Advanced
abrahamgreysonabrahamgreyson

gsd:reference:ui-brand

Apply UI and branding guidelines to GSD projects.

Community
Intermediate