skills.rest
mattothomas
mattothomasCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

Updated Mar 28, 2026
Search Tags:#typography#branding#layout#ui-design#design-system#color-palette#design-research
One-click install
npx skills add https://github.com/mattothomas/sp26_hackpsu --skill design-consultation-mattothomas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/mattothomas/sp26_hackpsu/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/mattothomas/sp26_hackpsu --skill design-consultation-mattothomas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides end-to-end design-system guidance and execution, turning vague brand requests into a concrete DESIGN.md that serves as the single source of truth for typography, color, spacing, layout, and motion.

Core Features & Use Cases

  • Proposes a complete design system covering aesthetic, typography, color, layout, spacing, and motion.
  • Generates DESIGN.md as the project's authoritative design source of truth.
  • For new projects, proactively propose a design system; for existing sites, infer the system via a plan-design-review.

Quick Start

Ask me to design a complete design system for your project and generate a DESIGN.md you can adopt as the design 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 a new UI project?▼

To create a complete design system for a new UI, define rules covering aesthetic, typography, color, layout, spacing, and motion. The system proactively generates a DESIGN.md file to serve as the single source of truth for your project.

What is a DESIGN.md file and how does it work for brand guidelines?▼

A DESIGN.md file is an authoritative document defining your project's typography, color palette, spacing, layout, and motion. It serves as the single source of truth for brand guidelines and UI specifications.

Can I infer an existing design system when upgrading a site?▼

Yes, you can infer an existing design system when upgrading a site by performing a plan-design-review. This process analyzes the current UI to extract and document typography, color, and layout rules into a unified DESIGN.md.

What's the best way to document typography and color palette specifications for development?▼

The best way to document typography and color palette specifications is to generate a DESIGN.md file. It provides ready-to-use specifications covering aesthetic, layout, spacing, and motion, ensuring the design system ships successfully.

Does this design system approach cover motion and layout rules?▼

Yes, this design system approach covers motion and layout rules. It proposes and documents a complete framework including aesthetic, typography, color, layout, spacing, and motion specifications for new or existing UI projects.

Related Skills

Explore More Design & Creative Skills→
howdeployhowdeploy
15

design-consultation

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

Community
Advanced
Lincode-hormonyLincode-hormony
13

frontend-design

Generate production-grade HTML/CSS/JS frontend components with bold aesthetics and accessible color systems.

Community
Advanced
totalaudiopromototalaudiopromo
1

totalaud-brand

Enforce totalaud brand guidelines for totalaud.io frontend design and development.

Community
Intermediate
stayconnectquickstayconnectquick

design-consultation

Generate a DESIGN.md design system covering typography, color, spacing, layout, and motion.

Community
Advanced