skills.rest
Jesse-L-M
Jesse-L-MCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

Updated Mar 27, 2026
Search Tags:#typography#tokens#ui-design#design-system#design-docs#color-palette#design-consultation
One-click install
npx skills add https://github.com/Jesse-L-M/scz-target-engine --skill design-consultation-jesse-l-m
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/Jesse-L-M/scz-target-engine/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/Jesse-L-M/scz-target-engine --skill design-consultation-jesse-l-m

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This design service enables teams to craft a complete, cohesive design system, from typography and color to spacing and motion, and to generate a DESIGN.md that serves as the single source of truth for the product's visual language.

Core Features & Use Cases

  • Proposes a complete design system including typography, color, layout, spacing, and motion tokens.
  • Generates font and color preview pages to visualize the system and keeps a DESIGN.md as the source of truth.
  • Use Case: Start a new product UI with a polished design system or refresh an existing product's visuals to align with a new brand or product strategy.

Quick Start

Ask me to design your product's design system and I will generate a DESIGN.md with typography, color, layout, motion tokens, and both a font and color preview page.

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 with typography and color tokens for a new product?▼

Create a design system by generating typography tokens, color tokens, spacing guidelines, and a formal DESIGN.md. This provides a single source of truth for your product's visual language, including layout and motion tokens.

What is a DESIGN.md and how does it work as a source of truth for UI design?▼

A DESIGN.md is a formal document that defines your complete design system, including typography, color, layout, spacing, and motion tokens. It works as the single source of truth to keep your product's visual language consistent.

Can I use this to refresh an existing site's visual language and brand strategy?▼

Yes, you can refresh an existing product's visuals to align with a new brand or product strategy. It updates your current visual language by generating new typography and color tokens alongside a revised DESIGN.md.

How do I generate font and color preview pages to visualize design tokens?▼

Generate font and color preview pages by defining your typography and color tokens within the design system. This workflow visualizes the proposed tokens to ensure they meet your accessibility considerations and visual requirements.

Does the design system include accessibility considerations and spacing guidelines?▼

Yes, the design system includes accessibility considerations alongside spacing guidelines. It delivers comprehensive typography tokens, color tokens, and motion rules to ensure your UI design remains accessible and visually cohesive.

What's the best way to document design tokens for a UI refresh?▼

The best way to document design tokens is with a formal DESIGN.md that captures typography, color, layout, and motion tokens. This document serves as the authoritative source of truth for your product's updated visual language.

Related Skills

Explore More Design & Creative Skills→
howdeployhowdeploy
15

design-consultation

Generate a DESIGN.md design system with typography, color, spacing, and motion guidelines.

Community
Advanced
lintendolintendo
152

design-md

Analyze Stitch projects to generate DESIGN.md with visual language tokens.

Community
Advanced
salverius-techsalverius-tech

design-workflow

Enforce WCAG 2.1 AA accessibility and design tokens in UI/UX workflows.

Community
Intermediate
wellsgzwellsgz

extract

Identify and extract reusable UI patterns, components, and design tokens into a centralized design system.

Community
Intermediate