Design Consultation

What Is This?

Overview

Design Consultation is a structured skill that guides development teams through the process of establishing a complete, documented design system for their product. It begins by analyzing your product's purpose and audience, researches comparable products in the landscape, and then proposes a cohesive design system covering aesthetics, typography, color palettes, layout principles, spacing scales, and motion guidelines. The output is a DESIGN.md file that serves as the single source of truth for all visual and interaction decisions across your project.

The skill operates in two modes. For new projects or products without an existing visual identity, it conducts a full consultation and generates the design system from scratch, including font and color preview pages to validate choices before implementation. For existing sites and applications, the companion command /plan-design-review infers the current design system by analyzing existing styles, components, and patterns, then documents them in the same structured format.

This approach eliminates the common problem of design decisions being scattered across Figma files, Slack threads, and individual developer preferences. By centralizing all design decisions into a versioned DESIGN.md file, every contributor to the project works from the same foundation.

Who Should Use This

• Frontend developers who need clear, authoritative guidance on spacing, typography, and color without waiting for a dedicated designer
• Full-stack engineers building internal tools or early-stage products who want a professional visual foundation without hiring a design agency
• Technical founders launching MVPs who need brand consistency across their product from day one

Why Use It?

Problems It Solves

• Inconsistent visual decisions across a codebase, where button padding, heading sizes, and brand colors differ between pages or components because no authoritative reference exists
• Slow design handoff caused by designers and developers working from separate tools with no shared language for spacing values, type scales, or color tokens
• Repeated design debates in pull requests and team meetings about whether a particular shade of blue is correct or whether a heading should be 24px or 28px

Core Highlights

• Produces a complete DESIGN.md file covering all major design system dimensions
• Covers typography scales, font pairings, and hierarchy rules
• Defines color palettes with semantic naming conventions for primary, secondary, and state colors
• Establishes spacing scales and layout grid specifications
• Documents motion and animation principles for consistent interaction design
• Generates font and color preview pages for visual validation before implementation
• Supports both greenfield projects and existing codebases through the /plan-design-review command
• Integrates naturally into version-controlled repositories alongside source code

How to Use It?

Basic Usage

Trigger the skill by using natural language commands in your development workflow:

design system
brand guidelines
create DESIGN.md

For existing projects, use the review command to infer the current system:

/plan-design-review

Specific Scenarios

Scenario 1: New product launch. A developer building a SaaS dashboard from scratch invokes the skill with "create DESIGN.md". The skill asks clarifying questions about the product category, target audience, and any reference brands, then generates a complete design system with a neutral sans-serif type scale, a blue-primary color palette with semantic tokens, and an 8px base spacing scale.

Scenario 2: Existing codebase audit. A team inheriting a legacy application runs /plan-design-review. The skill analyzes existing CSS and component files, identifies the implicit type scale and color usage, and produces a DESIGN.md that documents what the system actually is, flagging inconsistencies for resolution.

Real-World Examples

A startup engineering team used the skill to generate a DESIGN.md before writing their first component, reducing design-related pull request comments by establishing shared vocabulary for spacing and color tokens upfront.

An open-source project maintainer ran /plan-design-review on a three-year-old codebase and discovered four different blue values being used interchangeably, which the generated document consolidated into two semantic tokens.

Important Notes

Requirements

• The skill works best when provided with context about the product's purpose, target audience, and any existing brand assets or reference sites
• For the /plan-design-review command, access to existing CSS, component files, or a live URL improves the accuracy of the inferred system
• Generated preview pages require a browser environment to render font and color combinations accurately