skills.rest
viraatdas
viraatdasCOMMUNITY
Explore all skills by this author →
𝕏@therealviraatGitHub

design-consultation

Generate a cohesive design system with typography, color, layout, and motion guidelines.

Updated Apr 1, 2026
Search Tags:#typography#design#ui#layout#brand#color#design-system
One-click install
npx skills add https://github.com/viraatdas/vstack --skill design-consultation-viraatdas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/viraatdas/vstack/tree/main/design-consultation
Command: npx skills add https://github.com/viraatdas/vstack --skill design-consultation-viraatdas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design consultation helps you turn a product idea into a cohesive, scalable design system by researching the landscape, defining typography, color, layout, spacing, and motion, and generating a DESIGN.md as the project's design source of truth.

Core Features & Use Cases

  • Proposes a complete design system covering aesthetic, typography, color, layout, spacing, and motion guidelines.
  • Generates font+color preview pages and creates DESIGN.md as the single source of truth for the project.
  • Works for both new UI projects and existing sites (use /plan-design-review to infer the system); proactively suggests design systems when starting a project with no DESIGN.md.

Quick Start

Ask me to design a complete design system and generate a DESIGN.md as the project 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 web or mobile UI?▼

A design system provides a cohesive set of typography, color, layout, spacing, and motion guidelines for web or mobile interfaces. It ensures visual consistency and scalability across a product by generating a DESIGN.md file as the project's source of truth.

Can I generate typography and color guidelines for an existing site?▼

Yes, you can generate typography and color guidelines for an existing site. By running a design review plan, the system infers your current design patterns and proposes a cohesive design system updated within a new DESIGN.md file.

What is included in a scalable design system for startups?▼

A scalable design system for startups includes comprehensive typography scales, color palettes, spacing rules, layout structures, and motion guidelines. It outputs a DESIGN.md file and visual preview assets to establish a unified UI standard.

How do I document UI layout and motion guidelines for my project?▼

Document UI layout and motion guidelines by compiling them into a DESIGN.md file. This document acts as the project's source of truth, detailing specific spacing, layout structures, and animation standards alongside typography and color definitions.

Do I need a DESIGN.md file before building a new mobile interface?▼

You do not need a DESIGN.md file beforehand, as starting a new UI project without one will proactively trigger a suggestion to design a complete system. Generating this file first ensures your mobile interface has a cohesive typography and color foundation.

Related Skills

Explore More Design & Creative Skills→
Higashi-KotaHigashi-Kota

accessibility-review

Audit design system tokens and components for WCAG compliance.

Community
Intermediate
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
bajajvinamrbajajvinamr

design-consultation

Create a cohesive design system with typography, color, spacing, and motion rules.

Community
Advanced