skills.rest
jerrywu001
jerrywu001COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete design system and write DESIGN.md with preview pages.

6|2|Updated Oct 18, 2021
Search Tags:#typography#design system#color palette#design documentation#motion#product branding#UI layout
One-click install
npx skills add https://github.com/jerrywu001/jerrywu001 --skill design-consultation-jerrywu001
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/jerrywu001/jerrywu001/tree/main/.claude/skills/design-consultation
Command: npx skills add https://github.com/jerrywu001/jerrywu001 --skill design-consultation-jerrywu001

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you quickly turn a product idea (or an existing site) into a coherent, ready-to-use design system so you don’t guess fonts, colors, and layout patterns.

Core Features & Use Cases

  • Design-system planning: Understands your product, researches the competitive landscape when requested, and proposes an integrated system covering aesthetic direction, typography, color, layout, spacing, and motion.
  • Font + color preview pages: Generates a polished visual preview so you can see the design choices in context before committing.
  • Single source of truth: Writes a project root DESIGN.md that captures the system decisions and rationale; for existing sites it can infer the system via /plan-design-review.

Quick Start

Ask the AI to create your design system and generate DESIGN.md for your project using the design-consultation 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 for a new product?▼

You can create a complete design system by defining aesthetic direction, typography, color, layout, spacing, and motion. This skill produces a coherent system and writes a DESIGN.md file acting as your design source of truth.

What is the best way to consolidate and reconstruct design documentation for an existing project?▼

Reconstructing design documentation for an existing project requires inferring current visual patterns into a unified system. This skill analyzes your existing site to consolidate and generate a comprehensive DESIGN.md source of truth.

Can I generate font and color palette preview pages before committing to a design system?▼

Yes, you can generate font and color palette preview pages to visualize design choices in context. This skill produces polished visual previews allowing you to see typography and color selections before finalizing the system.

Does the design system generation process include competitive research?▼

The design system generation process includes optional competitive research based on user confirmation. When requested, the skill researches the competitive landscape to inform the integrated system covering typography, color, and UI layout.

How do I document UI layout, motion, and product branding decisions in a single file?▼

You document UI layout, motion, and product branding by writing a design source of truth. This skill generates a project root DESIGN.md file capturing all system decisions and rationale in one structured file.

Do I need existing design files to start planning a product branding and typography system?▼

You do not need existing design files to start planning a product branding and typography system. This skill applies to new products lacking design documentation and builds a complete system from scratch based on your product idea.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
anonymouswhite07anonymouswhite07

stitch-design-taste

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

Community
Advanced
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
tropekstropeks

design-consultation

Propose and document a complete design system in a DESIGN.md file.

Community
Advanced