design-consultation

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

Updated Mar 21, 2026

Search Tags:#typography #branding #layout #design-system #motion #color-palette #design-preview

Ready to run

npx skills add https://github.com/TimHL5/carousel --skill design-consultation-timhl5

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/TimHL5/carousel/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/TimHL5/carousel --skill design-consultation-timhl5

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.

Core Features & Use Cases

Proposes a complete design system including aesthetic, typography, color, layout, spacing, and motion
Generates font+color preview pages to demonstrate the system
Creates DESIGN.md as the project’s design source of truth
For existing sites, provides guidance to infer the system via a plan-design-review approach

Quick Start

Ask me to design a complete design system for your 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, you need to define aesthetics, typography, color, layout, spacing, and motion. This skill analyzes your product context to propose a cohesive system and generates a DESIGN.md document as your project's source of truth.

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

Documenting brand guidelines requires a structured source of truth like a DESIGN.md file. This skill drafts a comprehensive document containing sections for Product Context, Aesthetic Direction, Typography, Color, Layout, Spacing, and Motion.

How do I generate a preview page for my color palette and typography?▼

You can generate a preview page to demonstrate your color palette and typography by outputting a ready-to-preview HTML file. This skill creates HTML pages that visually demo the proposed design system components.

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

Yes, you can infer a design system for an existing site by using the plan-design-review approach. This evaluates your current UI to reverse-engineer the underlying design rules and establish a source of truth.

When do I need to draft a DESIGN.md file?▼

You need to draft a DESIGN.md file when starting a new project's UI with no existing design system or when you need to establish brand guidelines. It serves as the central source of truth for your product's visual decisions.