skills.rest
zzxtbeta
zzxtbetaCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Create a complete design system and generate DESIGN.md with typography, color, layout, spacing, and motion.

Updated Mar 29, 2026
Search Tags:#typography#layout#design-system#motion#color-palette#design-guidelines
One-click install
npx skills add https://github.com/zzxtbeta/design-handbook --skill design-consultation-zzxtbeta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/zzxtbeta/design-handbook/tree/main/.agents/skills/gstack/design-consultation
Command: npx skills add https://github.com/zzxtbeta/design-handbook --skill design-consultation-zzxtbeta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Proactively creates a complete design system and a DESIGN.md that serves as the single source of truth for typography, color, layout, spacing, and motion, enabling consistent UI across products.

Core Features & Use Cases

  • Proposes a complete design system including typography, color system, layout patterns, spacing scale, motion guidelines, and accessibility considerations.
  • Generates DESIGN.md as the authoritative design reference and provides a plan for applying the system to existing sites or new projects.
  • Works when starting a new UI with no established design system by providing an initial design direction and guidelines.

Quick Start

Please ask me to design a complete design system for your product and generate DESIGN.md as the source of truth.

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 an existing product?▼

To create a complete design system for an existing product, generate a DESIGN.md file serving as the single source of truth for typography, color, layout, spacing, and motion, alongside a plan for applying these guidelines to your current screens.

What should a design guidelines document include for a new project?▼

A design guidelines document for a new project should include typography, color system, layout patterns, spacing scale, motion guidelines, and accessibility considerations to establish a consistent UI direction from the start.

Can I apply a design system to existing sites or is it only for new projects?▼

You can apply a design system to existing sites and new projects; the process generates a DESIGN.md reference and provides a specific plan for applying the system to real screens in either context.

What is the best way to establish a single source of truth for UI design tokens?▼

The best way to establish a single source of truth for UI design tokens is to generate a comprehensive DESIGN.md covering typography, color palettes, layout, spacing, and motion guidelines to ensure consistent product UI.

Does a generated design system include accessibility considerations and motion guidelines?▼

Yes, a generated design system includes accessibility considerations and motion guidelines, ensuring the proposed typography, color, and layout patterns meet accessibility standards across product interfaces.

Related Skills

Explore More Design & Creative Skills→
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
HaydernCenterpointHaydernCenterpoint

frontend-design

Align frontend UI components to a cohesive design system.

Community
Intermediate
retz8retz8

frontend-design

Generate frontend interfaces with HTML/CSS, React, Vue, and design systems.

Community
Basic
dylantarredylantarre
38

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

Community
Intermediate