skills.rest
TumeloRamaphosa
TumeloRamaphosaCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Create a design system and generate DESIGN.md with preview pages.

Updated May 7, 2026
Search Tags:#design system#color palette#brand guidelines#design documentation#motion#ui typography#layout and spacing
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill design-consultation-tumeloramaphosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill design-consultation-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns a vague product UI request into a cohesive, shippable design system by defining the visual language end-to-end and producing DESIGN.md as the source of truth.

Core Features & Use Cases

  • Product-and-context design discovery: Understands your product goals and current assets, then researches the design landscape needed for a consistent system.
  • System output for builders: Produces a complete design system covering aesthetic direction, typography, color, layout, spacing, and motion.
  • Preview-ready artifacts: Generates font and color preview pages so you can quickly validate the system visually.
  • Source-of-truth documentation: Creates DESIGN.md as the canonical design reference for future work and reviews.
  • Use case fit: Best when starting a new design system or when you need a brand-guidelines style deliverable; for existing sites, it can infer from /plan-design-review instead.

Quick Start

Ask it to run the design consultation for your project and generate DESIGN.md with the complete system plus font and color preview pages.

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 from a vague product idea?▼

To create a design system from a vague idea, define your product context and let the consultation propose a unified aesthetic direction. This generates a complete visual foundation covering typography, color, layout, spacing, and motion guidelines.

What is the best way to document brand guidelines and UI typography for a new frontend project?▼

The best way to document brand guidelines and UI typography is to generate a canonical DESIGN.md file. This serves as the project's source of truth, recording all design documentation and visual rules for future frontend work and reviews.

How do I generate color palette and font preview pages for visual validation?▼

You generate color palette and font preview pages by running a design consultation on your product context. This produces preview-ready artifacts, allowing you to quickly validate the proposed UI typography and aesthetic direction visually.

Can I use an existing DESIGN.md file to rework my current UI design system?▼

Yes, you can rework an existing UI design system by providing your current DESIGN.md file. The consultation will infer your established visual foundations and brand guidelines, then propose updated layout, spacing, and motion rules.

Does this design documentation process work without external dependencies or components?▼

Yes, the design documentation process works without external dependencies or components. It directly analyzes your product context to define layout, spacing, and motion, outputting a complete design system and DESIGN.md independently.

Related Skills

Explore More Design & Creative Skills→
jeisenbackjeisenback

design-consultation

Plan a design system and produce DESIGN.md with a visual preview.

Community
Advanced
anonymouswhite07anonymouswhite07

stitch-design-taste

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

Community
Advanced
nsuberinsuberi

normalize

Audit and realign UI components, spacing, tokens, and accessibility to a design system.

Community
Advanced
westnwestn
1

design-consultation

Define a complete design system and generate DESIGN.md.

Community
Advanced