skills.rest
tan-yong-sheng
tan-yong-shengCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gstack-design-consultation

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

1|1|Updated Mar 5, 2026
Search Tags:#typography#design#branding#ui#documentation#color#design-system
One-click install
npx skills add https://github.com/tan-yong-sheng/GrowChat --skill gstack-design-consultation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gstack-design-consultation
Source: https://github.com/tan-yong-sheng/GrowChat/tree/main/.claude/skills/gstack-design-consultation
Command: npx skills add https://github.com/tan-yong-sheng/GrowChat --skill gstack-design-consultation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing cohesive product interfaces from scratch or auditing existing sites to produce a DESIGN.md that serves as the single source of truth for typography, color, spacing, and motion.

Core Features & Use Cases

  • Create a complete design system with typography scales, color palettes, spacing system, and motion guidelines.
  • Generate DESIGN.md that teams reference for consistent UI implementation across products.
  • Provide font and color preview pages to facilitate stakeholder reviews and handoffs.

Quick Start

Ask me to design a complete design system and I will generate a DESIGN.md along with font and color preview assets.

Frequently Asked Questions about gstack-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 scratch?▼

To create a design system, this Skill generates a comprehensive DESIGN.md file covering typography scales, color palettes, spacing systems, and motion guidelines, alongside font and color preview pages for stakeholder reviews.

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

A DESIGN.md file serves as the single source of truth for UI implementation, ensuring consistent typography, color, spacing, and motion guidelines across product teams and design handoffs.

Can I use this to audit and refresh an existing site's branding and UI?▼

Yes, you can audit and refresh an existing site by generating an updated DESIGN.md that establishes new typography, color, layout, and motion guidelines for your interface.

What's the best way to document design tokens like typography and color scales?▼

The best way to document design tokens is using a structured DESIGN.md file with frontmatter, providing actionable steps, design assets, and font and color preview pages for reference.

Do I need any specific UI framework dependencies to generate these design guidelines?▼

No specific UI framework dependencies are required. The Skill operates independently to produce a framework-agnostic DESIGN.md and preview assets for your design system.

Related Skills

Explore More Design & Creative Skills→
joyce820309joyce820309

design-consultation

Create a design system with mockups and a DESIGN.md file.

Community
Advanced
rovannirovanni
1

design-md

Analyze Stitch project metadata and synthesize a semantic DESIGN.md.

Community
Intermediate
8GG-Git8GG-Git

design-system-management

Manage design tokens, component libraries, and pattern documentation for UI development.

Community
Intermediate
BarisSozenBarisSozen
1

apple-ui-design

Generate Apple-inspired UI design guidelines with typography, color, and spacing tokens.

Community
Basic