skills.rest
drt0927
drt0927COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

5|1|Updated Feb 12, 2026
Search Tags:#typography#design#branding#layout#color#design-system
One-click install
npx skills add https://github.com/drt0927/tw-overlay --skill design-consultation-drt0927
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/drt0927/tw-overlay/tree/main/.gemini/skills/gstack-design-consultation
Command: npx skills add https://github.com/drt0927/tw-overlay --skill design-consultation-drt0927

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and engineers often waste time reconciling visuals and interaction ideas across teams. This skill proposes a cohesive design system and generates a DESIGN.md that acts as the single source of truth for typography, color, layout, spacing, and motion.

Core Features & Use Cases

  • Comprehensive system design: typography scales, color tokens, spacing, grid, components, and motion guidelines.
  • Design handoff: DESIGN.md serves as reference for product, engineering, and design teams.
  • Quick-start design drive: for new projects or redesigns, generate a complete design system blueprint.

Quick Start

Provide a project brief and I will generate a DESIGN.md capturing typography, color, and layout decisions.

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

Generate a design system by providing a project brief to produce a DESIGN.md, which defines typography scales, color tokens, layout rules, and motion guidelines as a single source of truth for product UI.

What is a DESIGN.md file used for in design handoff?▼

A DESIGN.md serves as a single source of truth for typography, color, layout, spacing, and motion, providing a unified reference for product, engineering, and design teams during handoff.

Can I use this to generate color tokens and typography scales for an existing project?▼

Yes, it handles typography scales and color tokens for both new and existing projects by researching the landscape and producing a cohesive system with layout rules and usage guidelines.

What's the best way to document layout rules and component conventions for engineering teams?▼

The best way is generating a DESIGN.md that captures layout rules, spacing, and component conventions, ensuring engineering and design teams align on product UI standards and usage guidelines.

Does building a design system require predefined dependencies or component libraries?▼

No dependencies or predefined component libraries are required; the system researches the landscape and generates a complete blueprint including motion guidelines and grid specifications independently.

Related Skills

Explore More Design & Creative Skills→
masa-codehubmasa-codehub

drafting-system-context

Draft and audit system-context.md with Mermaid C4 diagrams against the Design Brief.

Community
Advanced
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
daemon-blockint-techdaemon-blockint-tech
7

ui-software-engineer

Translate design specifications into responsive user interfaces with design tokens and Storybook stories.

Community
Intermediate
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced