skills.rest
txema-puch
txema-puchCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete product design system and DESIGN.md design truth source.

1|Updated Mar 23, 2026
Search Tags:#typography#layout#color#design-system#motion#design-consultation
One-click install
npx skills add https://github.com/txema-puch/drone-ai-saturdays --skill design-consultation-txema-puch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/txema-puch/drone-ai-saturdays/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/txema-puch/drone-ai-saturdays --skill design-consultation-txema-puch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to establish a cohesive design language across products. This Skill provides a structured design-consultation workflow that understands your product, researches the landscape, and generates a complete design system, including aesthetic, typography, color, layout, spacing, and motion, with DESIGN.md as the single source of truth.

Core Features & Use Cases

  • Understands product context, performs landscape research, and proposes a coherent design system.
  • Outputs typography, color, spacing, layout, and motion guidelines, plus a font+color preview page.
  • Creates DESIGN.md as the project-wide design reference; can be used to plan/design reviews or bootstrap new UI work.

Quick Start

Ask me to design a system for your product: I will deliver a DESIGN.md and the necessary design system components that you can review and iterate on.

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 my product?▼

A complete design system is created by proposing typography, color, layout, spacing, and motion guidelines, and generating DESIGN.md as the single source of truth. This workflow tailors the system to your product context and user needs.

What is DESIGN.md and how does it work as a design source of truth?▼

DESIGN.md works as the project-wide design reference by consolidating aesthetic choices, typography, color, spacing metrics, and motion guidelines into one document. It serves as the single source of truth for stakeholder review and UI implementation.

How do I generate typography and color guidelines for a new UI?▼

Typography and color guidelines are generated through a structured design-consultation workflow that researches your product landscape and delivers tailored choices. The output includes a font and color preview page for stakeholder review.

Can I use this design-consultation workflow to plan a design review?▼

Yes, you can use this design-consultation workflow to plan design reviews or bootstrap new UI work. It delivers Phase 3 proposals, risk analysis, and a coherent preview to facilitate stakeholder evaluation.

Does the generated design system include accessibility considerations?▼

Yes, the generated design system includes accessibility considerations alongside spacing metrics, motion guidelines, and color choices. These actionable deliverables ensure the design truth source is both coherent and inclusive.

What's the best way to document spacing and motion guidelines for a design system?▼

The best way to document spacing and motion guidelines is to generate DESIGN.md, which acts as the single source of truth. It consolidates these metrics with typography and color choices into actionable deliverables for review.

Related Skills

Explore More Design & Creative Skills→
AndrewLi0420AndrewLi0420

design-consultation

Define a design system plan with DESIGN.md, CLAUDE.md, and a preview page.

Community
Advanced
shhubbhshhubbh
1

design-consultation

Generate a DESIGN.md documenting typography, color palettes, layout, spacing, and motion guidelines.

Community
Advanced
DYAI2025DYAI2025
3

theme-factory

Apply curated color and font themes to slides, documents, and landing pages.

Community
Basic
ouakarouakar

ui-designer

Define UI design systems and UX specifications bridging BRD and frontend implementation.

Community
Advanced