skills.rest
AndrewLi0420
AndrewLi0420COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Define a design system plan with DESIGN.md, CLAUDE.md, and a preview page.

Updated Mar 18, 2026
Search Tags:#typography#branding#layout#color#design-system#motion#design-consultation
One-click install
npx skills add https://github.com/AndrewLi0420/BMW --skill design-consultation-andrewli0420
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/AndrewLi0420/BMW/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/AndrewLi0420/BMW --skill design-consultation-andrewli0420

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables teams to rapidly define a coherent design system for a project by researching the landscape, articulating an aesthetic and brand strategy, and generating a ready-to-use DESIGN.md as the single source of truth.

Core Features & Use Cases

  • Comprehensive system planning: defines aesthetics, typography, color, spacing, motion, and layout aligned with product goals.
  • Documentation as code: outputs DESIGN.md and CLAUDE.md to codify decisions and guardrails.
  • Phase-based collaboration: supports iterative proposals, user feedback, and design-system previews before implementation.

Quick Start

Provide a complete design system proposal by feeding your product context and goals to this skill.

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 from scratch?▼

To create a design system, define typography, color, spacing, motion, and layout rules aligned with your product context. This Skill generates a comprehensive plan with a DESIGN.md file and a preview page to serve as your single source of truth.

What is the best way to document design system decisions for a development team?▼

The best way to document design system decisions is by codifying them as code. This Skill outputs a DESIGN.md and CLAUDE.md to specify aesthetics and guardrails, ensuring developers and designers share a single source of truth.

How do I translate brand strategy and research into UI typography and color choices?▼

Translate brand strategy into UI elements by applying research and product type considerations to specify typography and color. This Skill analyzes your context to output a tailored aesthetic plan across typical screens.

Does this approach provide a visual preview of the design system before implementation?▼

Yes, this approach provides a visual preview of the design system before implementation. Alongside the DESIGN.md documentation, it generates a preview page that demonstrates the specified layout and motion in a realistic UI.

When do I need a phase-based proposal for my design system?▼

You need a phase-based proposal for your design system when supporting iterative collaboration across teams. This process helps gather user feedback and refine aesthetics before committing to final development.

Related Skills

Explore More Design & Creative Skills→
deepnoodle-aideepnoodle-ai

prd

Generate structured PRD documents with goals, scope, and acceptance criteria.

Official
Advanced
anonymouswhite07anonymouswhite07

stitch-design-taste

Generate DESIGN.md specifications for Google Stitch from design taste rules.

Community
Advanced
tizeetizee
2

design-taste-frontend

Enforce design and architecture rules for React and Next.js frontend interfaces.

Community
Advanced
Exia-thdExia-thd

ui-designer

Generate WCAG AA-compliant wireframes, design tokens, and component inventories for digital products.

Community
Advanced