skills.rest
whd4
whd4COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Plan a complete design system and output a DESIGN.md with font and color previews.

Updated Apr 1, 2026
Search Tags:#typography#ui-design#design-system#color-palette#brand-guidelines#design-consultation
One-click install
npx skills add https://github.com/whd4/gstack --skill design-consultation-whd4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/whd4/gstack/tree/main/design-consultation
Command: npx skills add https://github.com/whd4/gstack --skill design-consultation-whd4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Align product teams around a cohesive design language by generating a complete design system and a reliable DESIGN.md that serves as the single source of truth for aesthetics, typography, color, layout, and motion.

Core Features & Use Cases

  • Define the visual language (typography, color, spacing) and interaction patterns to match product goals.
  • Generate a DESIGN.md as the design source of truth and provide font+color previews for quick validation.
  • Proactively suggest branding and UI guidelines when starting a new project or upgrading an existing site.

Quick Start

Ask gstack to generate a DESIGN.md and a design system preview for a new or existing project.

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

To create a design system for a new project, you can generate a DESIGN.md file that codifies typography, color, layout, spacing, and motion as a single source of truth for your visual language.

What is the best way to document UI design guidelines and brand colors?▼

The best way to document UI guidelines and brand colors is by generating a DESIGN.md file that serves as a reliable source of truth for aesthetics, typography, and your complete color palette.

Can I refine an existing site's visual language without starting over?▼

Yes, you can refine an existing site's visual language by applying a codified design system to upgrade its typography, color, and layout, ensuring a cohesive appearance without a full rebuild.

Does generating a design system include visual previews for fonts and colors?▼

Generating a design system includes creating font and color previews, allowing you to quickly validate the proposed typography and color palette visually before finalizing the DESIGN.md.

When do I need a DESIGN.md file for my product?▼

You need a DESIGN.md file when starting a new project lacking a defined visual language or when upgrading an existing site to align product teams around cohesive typography, color, layout, and motion guidelines.

What components should a complete design system include?▼

A complete design system should include typography, color palette, layout, spacing, and motion, all codified into a DESIGN.md file to define visual language and interaction patterns.

Related Skills

Explore More Design & Creative Skills→
OzeroHAXOzeroHAX
32

docs-project-brief

Define project context, problem statement, and MVP boundaries.

Community
Basic
sablier-labssablier-labs
9

spec-from-screenshot

Analyzes website screenshots and outputs a structured SPEC.md document.

Official
Intermediate
dembrandtdembrandt
33

generate-ui-from-brand

Convert a website URL or DESIGN.md into a brand-aligned UI specification with normalized design tokens.

Official
Advanced
geoffreywoogeoffreywoo

design-consultation

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

Community
Advanced