skills.rest
rahmanayon
rahmanayonCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Research typography, color, layout, and motion to generate a DESIGN.md design system.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and product teams often start from a blank slate, lacking a cohesive design language. This skill helps you define a complete design system including typography, color, spacing, and motion, and generates DESIGN.md as your single source of truth.

Core Features & Use Cases

  • Proposes a complete design system: aesthetic, typography, color, layout, spacing, motion.
  • Generates font+color previews and a DESIGN.md that teams can reference.
  • Supports planning and review workflows for existing sites via plan-design-review.

Quick Start

Tell me to design your system or create DESIGN.md and I will generate a complete design system with typography, color, and layout 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 design system from scratch for a new product?▼

Creating a design system from scratch involves researching typography, color, layout, and motion to produce a single source of truth. The process generates a DESIGN.md file documenting fonts, color palettes, spacing rules, and motion guidelines for design and development workflows.

What is a DESIGN.md file and why do I need one for my design system?▼

A DESIGN.md file is a single source of truth document that captures your complete design system. It records fonts, color palettes, spacing rules, and motion guidelines so both design and development teams can reference and consume the system consistently.

Can I use a plan-design-review workflow to improve an existing site's design system?▼

Yes, a plan-design-review workflow is applicable to existing sites. It evaluates current typography, color, layout, and motion, then proposes a cohesive design system update and generates documentation for the revised design rules.

What's the best way to document typography and color palettes for development workflows?▼

The best way to document typography and color palettes is to generate a DESIGN.md file. It standardizes fonts, color previews, spacing rules, and motion guidelines into a single source of truth that both design and development teams can directly consume.

Does generating a complete design system require any specific design dependencies or components?▼

Generating a complete design system requires no specific dependencies or components. It operates independently to research and propose typography, color, layout, and motion guidelines, outputting a standalone DESIGN.md file.

Related Skills

Explore More Design & Creative Skills→
aaltaayaaltaay

ckm:design

Coordinate end-to-end design across brand identity, tokens, UI styling, CIP mockups, and presentation assets.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic
TimHL5TimHL5

design-consultation

Create a design system and generate a DESIGN.md document with preview pages.

Community
Advanced