skills.rest
TioSavich
TioSavichCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

Updated Sep 10, 2024
Search Tags:#typography#design#layout#design-system#motion#color-palette
One-click install
npx skills add https://github.com/TioSavich/UMEDCTA --skill design-consultation-tiosavich
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/TioSavich/UMEDCTA/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/TioSavich/UMEDCTA --skill design-consultation-tiosavich

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to align product goals with a consistent visual language. This Skill provides a complete plan, artifacts, and a working workflow to build a unified design system, DESIGN.md, and a preview page that demonstrates the system in action.

Core Features & Use Cases

  • Complete design-system proposal covering aesthetics, typography, color, spacing, and motion.
  • Generates a DESIGN.md and CLAUDE.md guidance to enforce design decisions.
  • Phase-based workflow including context gathering, research (optional), and final design documentation.

Quick Start

Describe your product goals and I'll deliver a complete design-system direction, a color and typography palette, and a live preview.

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

A design system aligns product goals with a consistent visual language by defining typography, color, spacing, and motion rules. It functions as a single source of truth to eliminate visual inconsistencies across product interfaces.

What is the best way to document typography and color palettes for development?▼

You start by providing your product goals, which triggers a phased workflow of context gathering and optional research. This produces an aesthetic direction, color and typography palettes, and a live preview page demonstrating the system.

Can I build a design system for an existing product without starting from scratch?▼

Yes, this workflow supports existing products by evaluating current interfaces and generating updated typography, color, and motion guidelines. It outputs a DESIGN.md and preview page to align your current product with a unified visual language.

How do I generate a preview page for my design system?▼

You generate a preview page by defining your product goals and aesthetic direction. The workflow automatically produces a live preview page demonstrating your typography, color palettes, spacing, and motion guidelines in action.

Do I need design research before generating a design system?▼

Design research is optional. The workflow includes a phased approach where you can skip research and use context gathering to directly produce typography palettes, color schemes, and your DESIGN.md documentation.

Related Skills

Explore More Design & Creative Skills→
vibrationalforcevibrationalforce

design-consultation

Research product context and generate a DESIGN.md design system proposal.

Community
Advanced
bajajvinamrbajajvinamr

design-consultation

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

Community
Advanced
logikwiselogikwise

design-guide

Standardize frontend UI design using design tokens, typography, and component patterns.

Community
Intermediate
Aurora-AIAurora-AI

design-md

Generate a DESIGN.md design system from Stitch project assets.

Community
Intermediate