skills.rest
fray-cloud
fray-cloudCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

Updated Mar 23, 2026
Search Tags:#typography#branding#ui-ux#design-system#mockups#color-systems#design-research
One-click install
npx skills add https://github.com/fray-cloud/coin --skill design-consultation-fray-cloud
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/fray-cloud/coin/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/fray-cloud/coin --skill design-consultation-fray-cloud

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. Use when asked to "design system", "brand guidelines", or "create DESIGN.md". Proactively suggest when starting a new project's UI with no existing design system or DESIGN.md. (gstack)

Core Features & Use Cases

  • Understand product context and target users to define a design system
  • Research competitive landscape to inform typography, color, and layout choices
  • Propose a complete design system including typography, color, spacing, motion, and layout
  • Generate font+color preview pages and build DESIGN.md as the design source of truth

Quick Start

Provide a product brief and I will generate DESIGN.md and a font+color preview page.

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 web app?▼

You create a design system by providing a product brief, which is then used to research the landscape and define typography, color, layout, and motion, outputting a DESIGN.md file as your source of truth.

What is the best way to generate brand guidelines for a UI refresh?▼

Generating brand guidelines for a UI refresh involves analyzing your product context and target users to propose cohesive typography, color systems, and motion, saving the complete system to a DESIGN.md file.

Can I use this to generate typography and color preview pages?▼

Yes, the process generates font and color preview pages alongside the main DESIGN.md file, allowing you to visually verify the proposed typography and color systems before implementation.

When do I need a design system for my dashboard project?▼

You need a design system for your dashboard project when starting a new UI with no existing structure, ensuring cohesive typography, spacing, and layout by establishing a DESIGN.md file as the single source of truth.

Does this work for inferring an existing design system from a current website?▼

No, for existing sites you should use a design review process to infer the system instead of generating a new one, which focuses on defining a complete design system for products lacking existing brand guidelines.

Related Skills

Explore More Design & Creative Skills→
Likas07Likas07

product-marketing-context

Create and maintain a product marketing context document in Markdown.

Community
Intermediate
anonymouswhite07anonymouswhite07

stitch-design-taste

Generate DESIGN.md specifications for Google Stitch from design taste rules.

Community
Advanced
first-flukefirst-fluke
218

ui-ux-pro-max

Generates design systems and reviews UI/UX patterns for accessible web and mobile interfaces.

Official
Advanced
mattothomasmattothomas

design-consultation

Propose and document a complete design system in DESIGN.md.

Community
Advanced