skills.rest
TimHL5
TimHL5COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/TimHL5/carousel --skill design-consultation-timhl5
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

teach-impeccable

Gather project design context and persist it into a centralized AI config.

Community
Advanced
zardusai-cyberzardusai-cyber
1

design-system

Analyze CSS patterns to generate design tokens, DESIGN.md, and HTML preview.

Community
Advanced
totalaudiopromototalaudiopromo
1

totalaud-brand

Enforce totalaud brand guidelines for totalaud.io frontend design and development.

Community
Intermediate
Buntyarora97Buntyarora97

branding-generator

Create brand identity kits with color palettes, typography, and logo concepts.

Community
Advanced