skills.rest
mostafasudo
mostafasudoCOMMUNITY
Explore all skills by this author →
Website𝕏@mostafasudoGitHub

design-consultation

Generate a comprehensive design system and document it in DESIGN.md.

3|Updated Oct 12, 2025
Search Tags:#design system#brand guidelines#design documentation#preview generation#ux ui design
One-click install
npx skills add https://github.com/mostafasudo/warpy --skill design-consultation-mostafasudo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/mostafasudo/warpy/tree/main/.codex/skills/gstack/design-consultation
Command: npx skills add https://github.com/mostafasudo/warpy --skill design-consultation-mostafasudo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion, WebSearch, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

The design-consultation Skill solves the problem of creating a complete design system, providing a starting point for aesthetic, typography, color, layout, spacing, motion, and generating preview pages.

Core Features & Use Cases

  • Design System Creation: Understands your product, researches the landscape, and proposes a comprehensive design system.
  • Design System Documentation: Generates a DESIGN.md file as the project's design source of truth.
  • Preview Generation: Generates font+color preview pages.
  • Use Case: Ideal when starting a new project with no existing design system or when tasked with creating a design system, brand guidelines, or DESIGN.md.

Quick Start

Use the /design-consultation skill to create a design system for your new project.

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 design system for a new project?▼

A design system centralizes typography, color, layout, spacing, and motion rules into a single source of truth. This skill generates these guidelines and documents them in a DESIGN.md file for your new project.

What is a DESIGN.md file used for in UX UI design?▼

A DESIGN.md file serves as the project's design source of truth, documenting brand guidelines and aesthetic choices. This skill generates it automatically to ensure consistent UX UI design implementation across your project.

Can I automatically generate brand guidelines and design documentation?▼

Yes, you can automatically generate brand guidelines and design documentation. This skill analyzes your product and outputs a comprehensive DESIGN.md file containing all your brand and design rules.

How do I generate color and typography preview pages for a design system?▼

To generate color and typography preview pages, this skill creates visual HTML outputs after defining your design system. These previews allow you to validate font and color choices directly.

Does this design system generator work for existing projects or only new ones?▼

This design system generator is ideal when starting a new project with no existing design system. It can also be used for existing projects if you are tasked with creating brand guidelines or a DESIGN.md file from scratch.

Related Skills

Explore More Design & Creative Skills→
zhifengzhang-szzhifengzhang-sz

design-consultation

Create a complete design system and export DESIGN.md as the source of truth.

Community
Advanced
atrislabsatrislabs
67

atris-design

Apply the Atris design policy to frontend typography, color, layout, motion, and backgrounds.

Official
Advanced
lagarcesslagarcess
1

stitch-loop

Automate iterative Stitch page generation, sanitization, and baton handoff.

Community
Advanced
abrahamgreysonabrahamgreyson

gsd:reference:ui-brand

Apply UI and branding guidelines to GSD projects.

Community
Intermediate