skills.rest
I194
I194COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate design tokens and a DESIGN.md for product design systems.

9|3|Updated Jan 29, 2022
Search Tags:#typography#branding#documentation#color#design-system#motion#design-guidelines
One-click install
npx skills add https://github.com/I194/PMTools_2.0 --skill design-consultation-i194
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/I194/PMTools_2.0/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/I194/PMTools_2.0 --skill design-consultation-i194

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Product teams often struggle with inconsistent UI when design systems are missing or outdated. This skill understands your product, researches the landscape, and proposes a complete design system covering aesthetics, typography, color, layout, spacing, and motion, then generates a DESIGN.md as the project’s single source of truth. It can also infer a design system for existing sites by planning a design review workflow.

Core Features & Use Cases

  • Complete design system: covers aesthetics, typography, color, layout, spacing, and motion.
  • Font and color preview pages generated for quick validation.
  • DESIGN.md generated as the project's design source of truth.
  • For existing sites, plan-design-review to infer and document the system.

Quick Start

Describe and implement a complete design system for a project and generate 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?▼

To create a complete design system, define typography, color tokens, spacing, and motion principles. This skill generates a DESIGN.md file serving as the project's single source of truth, including design tokens and a rollout plan for immediate codebase integration.

What is a DESIGN.md file and when do I need one?▼

A DESIGN.md file is a project's design source of truth that unifies UI across pages. You need one when your product lacks a design system or suffers from inconsistent UI, ensuring aesthetics, typography, color, layout, spacing, and motion are documented.

How do I document design tokens for an existing website with no design guidelines?▼

To document design tokens for an existing website, run a design review workflow to infer the current system. This skill plans the review, extracts typography and color tokens, and generates a DESIGN.md to unify the existing UI.

Can I generate font and color preview pages for quick design validation?▼

Yes, you can generate font and color preview pages for quick validation. This skill outputs these previews alongside the complete design system, allowing you to verify aesthetics, typography, and color tokens before implementation.

What's the best way to unify inconsistent UI across multiple pages?▼

The best way to unify inconsistent UI is to generate a comprehensive DESIGN.md. This skill defines design tokens, spacing, and motion principles, providing a structured rollout plan with prerequisites and recommended tooling for codebase integration.

Does this design system generation require any specific dependencies?▼

No, this design system generation requires no specific dependencies. It independently researches your product landscape and outputs design tokens, a DESIGN.md file, and an integration plan without needing external components or frameworks.

Related Skills

Explore More Design & Creative Skills→
scanbottscanbott

design-consultation

Plan and codify a complete design system into a DESIGN.md source of truth.

Community
Advanced
ibalasiteibalasite

design-consultation

Generate a complete design system and DESIGN.md from a product brief.

Community
Advanced
sandalsoftsandalsoft

clean-web-design

Standardize React/Tailwind frontend design with token-based dark-mode-ready UI primitives.

Community
Advanced
kk20300113-pngkk20300113-png

design-consultation

Generate a complete design system and DESIGN.md for new web and mobile applications.

Community
Advanced