skills.rest
Simon-YHKim
Simon-YHKimCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generates a complete design system proposal and DESIGN.md through structured consultation phases.

Updated Apr 5, 2026
Search Tags:#typography#design system#color palette#brand guidelines#ui design#design.md#mockup generation
One-click install
npx skills add https://github.com/Simon-YHKim/eject-button --skill design-consultation-simon-yhkim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/Simon-YHKim/eject-button/tree/main/.claude/skills/design-consultation
Command: npx skills add https://github.com/Simon-YHKim/eject-button --skill design-consultation-simon-yhkim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Starting a new project without a design system leads to inconsistent UI, generic AI-slop aesthetics, and ad-hoc color and font choices. This Skill runs a structured design consultation that researches your product space, proposes a coherent design system, and writes DESIGN.md as the project's design source of truth. ## Core Features & Use Cases - Guided Design Consultation: Gathers product context, optionally researches competitors via WebSearch and headless browsing, then proposes a complete system covering aesthetic, typography, color, layout, spacing, and motion. - Visual Previews: Generates AI mockup variants or HTML font and color preview pages, with a comparison board for collecting feedback before committing. - DESIGN.md Generation: Writes the approved system to DESIGN.md so future UI work stays consistent with the agreed direction. - Use Case: You are starting a new web app with no brand guidelines. Run the consultation, review three visual directions on a comparison board, pick one, and get a DESIGN.md your whole team codes against. ## Quick Start Ask the assistant to run a design consultation and create a DESIGN.md design system for your new 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 design system for a new project?▼

Run the design consultation, which gathers your product context, optionally researches competitors in your space, and proposes a complete system covering aesthetic, fonts, colors, layout, spacing, and motion. The approved result is written to DESIGN.md.

What is DESIGN.md and why use it?▼

DESIGN.md is a project file that records the agreed design system as the single source of truth for typography, color, spacing, and motion. It keeps future UI work consistent so contributors and AI assistants follow the same visual rules.

Can I preview fonts and colors before committing to a design system?▼

Yes. The consultation generates visual previews, either AI-rendered mockup variants shown on a comparison board in your browser, or an HTML font and color preview page if the design binary is unavailable. You pick a direction before DESIGN.md is written.

Does the design consultation work without web research?▼

Yes. Competitive research via WebSearch and headless browsing is optional. If you decline or the tools are unavailable, the consultation proceeds using built-in design knowledge and still produces a complete proposal.

What if my project already has a DESIGN.md file?▼

The skill detects an existing DESIGN.md during pre-checks and asks whether you want to update it, start fresh, or cancel. For inferring a design system from an existing site, it recommends the plan-design-review skill instead.

Related Skills

Explore More Design & Creative Skills→
officebeatsofficebeats
8

positioning-workshop

Guide product managers through structured discovery to define product positioning.

Community
Intermediate
DVNghiemDVNghiem
20

design-audit

Audits UI implementations fidelity against approved design artifacts and specifications.

Community
Intermediate
moorej2400moorej2400

cobuild

Coordinate multiple coding-agent CLIs in isolated git worktrees to converge on one approved direction.

Community
Advanced
sonhaicodersonhaicoder

kimi-render

Render UI from .design spec files and a starter HTML template.

Community
Advanced