skills.rest
kitfunso
kitfunsoCOMMUNITY
Explore all skills by this author →
Website𝕏@keithso27GitHub

design-consultation

Proposes a complete design system and writes DESIGN.md for new UI projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a new UI without a design system leads to inconsistent fonts, colors, and spacing across the product. This Skill guides you through a structured design consultation and produces a DESIGN.md file that serves as the project's single source of truth for all visual decisions. ## Core Features & Use Cases - Complete Design System Proposal: Proposes aesthetic direction, typography, color palette, spacing, layout, and motion as one coherent package with explicit SAFE/RISK breakdowns. - Visual Previews: Generates AI-rendered mockups with a browser-based comparison board for feedback, or falls back to a self-contained HTML preview page with font specimens and component samples. - DESIGN.md Generation: Writes a structured DESIGN.md to the repo root and updates CLAUDE.md so future UI work follows the approved system. - Use Case: You are starting a new dashboard product with no brand guidelines. Invoke this Skill to get a full design proposal, preview it visually, and commit a DESIGN.md that all future UI code must follow. ## Quick Start Ask the AI to create a design system and DESIGN.md for your new project's UI.

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 design system for a new project?▼

Invoke the design-consultation skill and answer the product context questions. It proposes a complete system covering aesthetic, typography, color, spacing, layout, and motion, then writes DESIGN.md to your repo root after your approval.

What does DESIGN.md contain after generation?▼

DESIGN.md includes product context, aesthetic direction, typography roles with font loading strategy, color palette with hex values and semantic colors, spacing scale, layout grid, motion easing and durations, plus a decisions log recording the rationale.

Can I preview the design system before writing DESIGN.md?▼

Yes. The skill generates AI-rendered mockups shown on a browser comparison board where you rate and remix variants, or falls back to a self-contained HTML preview page with font specimens, color swatches, and realistic product mockups.

Should I use design-consultation for an existing website?▼

No. For existing sites, use the plan-design-review skill instead, which infers the design system from current code. Design-consultation is intended for new UIs with no existing design system or DESIGN.md.

What happens if I override one part of the design proposal?▼

The skill runs coherence validation and gently flags mismatches, such as pairing brutalist aesthetics with expressive motion. It suggests adjustments but always accepts your final choice and never blocks progress.

Related Skills

Explore More Design & Creative Skills→
YYG501YYG501
4

pmai-init-project

Initializes product context spine files and routes projects into proposal or design workflows.

Community
Advanced
vobasevobase
59

normalize

Normalize UI implementations to match a project's design system.

Official
Intermediate
ClyptAIClyptAI

design-consultation

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

Official
Advanced
Nir-BhayNir-Bhay
19

brand-analyzer

Analyze brand identity and generate brand guidelines using Jung's archetypes.

Community
Advanced