skills.rest
louisfghbvc
louisfghbvcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Generate a complete design system with typography, color, layout, and motion tokens.

4|1|Updated Sep 13, 2023
Search Tags:#typography#design#branding#ui#documentation#color#design-system
One-click install
npx skills add https://github.com/louisfghbvc/mcp-leetcode-crawler --skill design-consultation-louisfghbvc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/louisfghbvc/mcp-leetcode-crawler/tree/main/.agent/skills/design-consultation
Command: npx skills add https://github.com/louisfghbvc/mcp-leetcode-crawler --skill design-consultation-louisfghbvc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead. Use when asked to "design system", "brand guidelines", or "create DESIGN.md". Proactively suggest when starting a new project's UI with no existing design system or DESIGN.md.

Core Features & Use Cases

  • Proposes a complete visual language including typography, color system, spacing, and motion for a cohesive brand.
  • Generates DESIGN.md as the source of truth and provides font+color preview pages for quick stakeholder review.
  • Advises on plan-design-review for existing sites and offers a guided path from design discovery to system delivery.

Quick Start

Tell me your product goals and I will draft a complete design system and DESIGN.md.

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 for a new product UI?▼

To create a complete design system, you provide your product goals and the tool drafts typography, color, layout, spacing, and motion tokens. It generates a DESIGN.md file serving as the single source of truth for your brand guidelines.

What's the best way to generate brand guidelines and typography tokens for a project?▼

Generating brand guidelines involves proposing a complete visual language with typography and color tokens. The tool outputs a DESIGN.md file and font/color preview pages, providing ready-to-use design artifacts for immediate review.

Can I infer a design system from an existing website?▼

Yes, you can infer a design system from an existing site by using the plan-design-review process. This analyzes your current UI to extract typography, color, and layout guidance, generating a matching DESIGN.md source of truth.

Does the generated design system include color and layout guidance?▼

Yes, the generated design system includes comprehensive color tokens, typography tokens, layout guidance, spacing, and motion rules. These elements are populated within the DESIGN.md to provide cohesive brand guidelines.

How do I start building a design system if I have no existing documentation?▼

Start by stating your product goals and UI requirements. The tool researches the landscape and proposes a complete design system, creating a DESIGN.md file populated with typography, color, and layout tokens for your new project.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
lintendolintendo
152

design-md

Analyze Stitch projects to generate DESIGN.md with visual language tokens.

Community
Advanced
wpgauravwpgaurav
14

frontend-css-patterns

Provide framework-agnostic CSS patterns for typography, color, motion, and layout.

Community
Intermediate
drt0927drt0927
5

design-consultation

Generate a DESIGN.md design system with typography, color, layout, and motion guidelines.

Community
Advanced