skills.rest
lemig
lemigCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

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

Updated May 14, 2026
Search Tags:#typography#branding#ui-design#design-system#design-review#color-palette#design-doc
One-click install
npx skills add https://github.com/lemig/transcriptor --skill design-consultation-lemig
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/lemig/transcriptor/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/lemig/transcriptor --skill design-consultation-lemig

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design consultants often need a reliable, repeatable blueprint for product aesthetics and interaction patterns. This Skill understands your product, researches the landscape, and generates a complete design system (aesthetic, typography, color, layout, spacing, motion) plus font+color preview pages, storing them in DESIGN.md as the project's design source of truth.

Core Features & Use Cases

  • Research and landscape analysis to uncover design opportunities and constraints for your product.
  • Propose a complete design system including typography, color palette, spacing, layout, and motion tokens.
  • Generate DESIGN.md and preview pages that document the system for design handoffs and future maintenance.
  • For existing sites, perform a plan-design-review to infer or retrofit a cohesive system.

Quick Start

Tell me your project goals and branding, and I will draft a complete design system and DESIGN.md including typography, color, layout, and a preview for review.

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 from scratch for a new product?▼

To create a design system from scratch, provide your product goals and branding details. The system researches the design landscape and generates a complete framework with typography, color, spacing, layout, and motion tokens.

What is a DESIGN.md file and how does it help with UI design handoffs?▼

A DESIGN.md file acts as the project's single source of truth for UI design. It documents typography, color palettes, spacing, and motion tokens, ensuring consistent design handoffs and future maintenance.

Can I update or retrofit an existing design system for an older site?▼

Yes, you can retrofit an existing design system. The skill performs a plan-design-review process to infer and update your current site's aesthetics, typography, and color palette into a cohesive system.

What do I need to prepare before generating typography and color palette tokens?▼

Before generating typography and color palette tokens, you need to define your product goals and branding context. This input drives the landscape research and ensures the proposed tokens fit your product.

What's the best way to document design tokens for spacing and motion?▼

The best way to document design tokens for spacing and motion is to centralize them in a DESIGN.md file. This approach captures layout and interaction patterns systematically for reliable future reference.

Does this approach work for generating both brand identity and UI layout systems?▼

Yes, this approach works for both brand identity and UI layout systems. It proposes a complete design framework covering brand aesthetics alongside functional UI layout, spacing, and motion tokens.

Related Skills

Explore More Design & Creative Skills→
joyce820309joyce820309

design-consultation

Create a design system with mockups and a DESIGN.md file.

Community
Advanced
dmae97dmae97
130

omk-frontend-implementation

Implement frontend UI components from DESIGN.md with existing design tokens.

Community
Intermediate
yonetim258852yonetim258852

generate-ui-from-brand

Convert a URL or DESIGN.md into a structured UI specification with design tokens.

Community
Advanced
virajpvirajp
1

mockups

Generates HTML mockups from blueprint screen definitions for design review.

Community
Advanced