skills.rest
tsensei
tsenseiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

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

3|3|Updated Mar 26, 2026
Search Tags:#typography#design#branding#ui#color#design-system
One-click install
npx skills add https://github.com/tsensei/ReelMistri --skill design-consultation-tsensei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/tsensei/ReelMistri/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/tsensei/ReelMistri --skill design-consultation-tsensei

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design consultant helps you articulate a complete design system for your product, including aesthetic, typography, color, layout, spacing, and motion, and generates DESIGN.md as the project's design source of truth.

Core Features & Use Cases

  • Proposes a complete design system and produces DESIGN.md for new projects or existing sites.
  • Generates font+color preview pages and a cohesive design language that can be referenced by developers and stakeholders.
  • Supports plan-design-review workflow to refine the system for an existing product.

Quick Start

Describe your product context and I will generate a DESIGN.md with typography, color, spacing, and motion previews.

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

To create a complete design system, describe your product context and the tool generates a DESIGN.md file containing typography, color, layout, spacing, and motion guidelines as a single source of truth.

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

Yes, you can generate typography and color guidelines for an existing product by applying a plan-design-review workflow to refine the visual language and refresh the project's DESIGN.md.

What is a DESIGN.md file and how does it work for UI design?▼

A DESIGN.md file serves as a project's design source of truth, consolidating typography, color, spacing, and motion guidelines into a single document that developers and stakeholders can reference.

How do I preview fonts and colors before applying them to my design system?▼

You can preview fonts and colors by requesting the generation of visual preview pages alongside the DESIGN.md, allowing you to evaluate the cohesive design language before implementation.

Does the design system generation work without external design dependencies?▼

Yes, the design system generation works without external dependencies, using either landscape research or internal design knowledge to produce the complete set of UI guidelines.

What's the best way to document spacing and motion guidelines for a UI?▼

The best way to document spacing and motion guidelines is to consolidate them into a DESIGN.md file, ensuring developers and stakeholders share a unified reference for layout and animation rules.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

deslop-ui

Audit rendered interfaces for generic AI design patterns and generate prioritized repair specifications.

Official
Advanced
guillermoscriptguillermoscript
21

extract

Extract reusable components and design tokens into a centralized design system.

Community
Intermediate
26mitch2626mitch26

design-consultation

Create and manage product design systems with YAML configuration and Markdown documentation.

Community
Advanced