skills.rest
westn
westnCOMMUNITY
Explore all skills by this author →
𝕏@westnGitHub

design-consultation

Define a complete design system and generate DESIGN.md.

1|Updated Mar 15, 2026
Search Tags:#typography#layout#brand#color#design-system#motion#design-docs
One-click install
npx skills add https://github.com/westn/gstack-pi-port --skill design-consultation-westn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/westn/gstack-pi-port/tree/main/port/gstack/design-consultation
Command: npx skills add https://github.com/westn/gstack-pi-port --skill design-consultation-westn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often start with vague ideas and end with inconsistent UI. This phase helps define a complete coherent design system for a product, including typography, color, layout, spacing, and motion, and creates a DESIGN.md as the project's design source of truth. For existing sites, you can infer the system via /skill:plan-design-review.

Core Features & Use Cases

  • Proposes a complete design system covering aesthetics, typography, color, layout, spacing, and motion.
  • Generates DESIGN.md as the single source of truth and provides font+color previews for decision making.
  • Supports starting from scratch or refreshing an existing brand; can guide brand guidelines and UI polish.

Quick Start

Ask me to generate a DESIGN.md for your project by starting with /skill:design-consultation and sharing your product goals.

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

To create a design system, define typography, color, layout, spacing, and motion guidelines, then consolidate them into a DESIGN.md file as the project's single source of truth for UI consistency.

What is a DESIGN.md file and how does it support design-ops workflows?▼

A DESIGN.md file is the single source of truth for a product's design system, documenting aesthetics and UI rules to support design-ops workflows across web and mobile platforms.

Can I infer a design system from an existing website?▼

Yes, you can infer a design system from an existing site by running /skill:plan-design-review, which extracts existing typography, color, layout, spacing, and motion patterns to refresh brand guidelines.

How do I generate brand guidelines and UI polish for a site refresh?▼

Generate brand guidelines and UI polish by defining a coherent design system covering typography, color, layout, spacing, and motion, producing font and color previews for decision making.

Does this design consultation approach work for both web and mobile?▼

Yes, this design consultation approach supports design-ops workflows across both web and mobile by defining a complete coherent design system in a shared DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
antriksh-29antriksh-29

design-consultation

Generates a complete design system and DESIGN.md with preview from product context and landscape research.

Community
Advanced
fatihkanfatihkan
7

minimalist-ui

Define a frontend UI protocol enforcing ultra-minimal editorial styling across components.

Community
Advanced
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
arvindbattulaarvindbattula

design-setup

Define target audience, brand personality, typography, color, spacing, and layout for frontend design.

Community
Advanced