skills.rest
ArroganceG
ArroganceGCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

Updated Mar 30, 2026
Search Tags:#typography#design#branding#layout#color#design-system
One-click install
npx skills add https://github.com/ArroganceG/trae_skills_backup --skill design-consultation-arroganceg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/ArroganceG/trae_skills_backup/tree/main/design-consultation
Command: npx skills add https://github.com/ArroganceG/trae_skills_backup --skill design-consultation-arroganceg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consultation helps you understand your product, researches the landscape, and proposes a complete design system with aesthetic, typography, color, layout, spacing, and motion, then generates a DESIGN.md as your project's design source of truth. It can guide teams starting from a blank canvas or help infer system elements for existing sites.

Core Features & Use Cases

  • Understand and define a cohesive design system covering typography, color, layout, spacing, and motion.
  • Generate preview pages and a DESIGN.md as the single source of truth for your project's design language.
  • Operate as a manual-trigger workflow to ensure deliberate activation when a user types /design-consultation or asks for branding guidelines.

Quick Start

Describe your product and I will generate a complete design system, including typography, color, layout, spacing, and a DESIGN.md as your 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 build a design system for a new product from scratch?▼

A design system for branding guidelines is a comprehensive framework covering typography, color, layout, spacing, and motion. It operates as a manual-trigger workflow that researches the design landscape and produces a DESIGN.md file as the definitive source of truth.

Can I generate brand guidelines for an existing website?▼

Yes, you can infer design system elements for existing sites. The workflow researches the current design landscape, proposes a cohesive system covering color and layout, and generates a DESIGN.md to formalize your existing brand guidelines.

What is included in a complete product design system?▼

A complete product design system includes typography, color, layout, spacing, and motion guidelines. It features a design-preview phase to visualize aesthetics and outputs a DESIGN.md artifact serving as the single source of truth for your design language.

How do I create a DESIGN.md file for my project's design language?▼

Creating a DESIGN.md file involves a multi-phase design consultation workflow that analyzes your product and researches the landscape. It proposes typography and color rules, runs a design-preview phase, and outputs the final design source of truth.

Do I need an existing DESIGN.md to start defining typography and color rules?▼

No existing DESIGN.md is required to define typography and color rules. The workflow is useful for new projects with no existing design guidelines and generates the DESIGN.md file from scratch after running through the design-preview phase.

Related Skills

Explore More Design & Creative Skills→
alexandervashurinalexandervashurin

design-consultation

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

Community
Advanced
rjroyrjroy
6

design

Document design decisions, interfaces, constraints, and edge cases for software architecture.

Community
Basic
TheTesseractAITheTesseractAI

mockup-sandbox

Create isolated React component previews via a Vite dev server.

Community
Intermediate
cegit27cegit27
3

design-consultation

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

Official
Advanced