skills.rest
CaltexBevo
CaltexBevoCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a DESIGN.md documenting typography, color, layout, spacing, and motion.

Updated Feb 5, 2026
Search Tags:#typography#design#branding#layout#color#design-system#ui-patterns
One-click install
npx skills add https://github.com/CaltexBevo/ihe-pulse --skill design-consultation-caltexbevo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/CaltexBevo/ihe-pulse/tree/main/.claude/skills/gstack.bak/design-consultation
Command: npx skills add https://github.com/CaltexBevo/ihe-pulse --skill design-consultation-caltexbevo

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 covering aesthetic, typography, color, layout, spacing, and motion.
  • Generates DESIGN.md to serve as the source of truth for your product's UI guidelines.
  • Produces font+color preview pages to visualize typography and color decisions.
  • Works for new projects with no existing design system and for refreshing an under-defined UI, ensuring cross-team consistency.

Quick Start

Ask me to design a complete design system for your product and I will generate DESIGN.md with typography, color, and layout guidelines.

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

A design system standardizes typography, color, layout, spacing, and motion guidelines into a single DESIGN.md file. This document serves as the source of truth to align cross-team product development and ensure UI consistency.

How do I generate brand guidelines and document UI patterns?▼

Generate brand guidelines by providing product goals and branding references. The system outputs a production-ready DESIGN.md detailing typography, color, layout, and motion alongside optional font and color preview pages to visualize the decisions.

Does this design system generator work for refreshing an existing UI?▼

Yes, the design system generator works for refreshing an under-defined UI or aligning an evolving product across teams. It applies to new experiences with no existing system and uses available branding references to establish consistency.

What do I need to start building typography and color guidelines?▼

To start building typography and color guidelines, provide product context like goals, audience, and constraints, plus branding references. This input generates a DESIGN.md and font and color previews for your UI.

When should I not use this approach to define a design system?▼

Avoid generating a new design system for existing sites that already have established UI guidelines. Instead, use a plan-design-review approach to infer the existing system rather than creating a new DESIGN.md from scratch.

Related Skills

Explore More Design & Creative Skills→
CapatainaCapataina

define-vision

Generates a VISION.md fileCapturing project goals, scope, and design intent from guided team discussions.

Community
Advanced
AndrewChang-cpuAndrewChang-cpu

frontend-design

Create production-ready frontend interfaces with typography, color, motion, and layout guidelines.

Community
Advanced
Hey-ViswaHey-Viswa

airtable-design-skill

Translate Airtable design-system patterns into implementation-ready UI guidance for React/Next.js projects.

Community
Intermediate
tblakex01tblakex01
1

design-consultation

Generate a complete design system with typography, color, layout, spacing, and motion guidance.

Community
Advanced