skills.rest
wodeh
wodehCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete design system and DESIGN.md with font and color previews.

Updated May 11, 2026
Search Tags:#typography#layout#design-system#color-palette#brand-guidelines#motion-design
One-click install
npx skills add https://github.com/wodeh/gstack-kimi --skill design-consultation-wodeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/wodeh/gstack-kimi/tree/main/design-consultation
Command: npx skills add https://github.com/wodeh/gstack-kimi --skill design-consultation-wodeh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill understands a product, researches the design landscape, and delivers a complete design system that defines aesthetics, typography, color, layout, spacing, and motion, producing a DESIGN.md that becomes the project's source of truth.

Core Features & Use Cases

  • Proposes a full design system tailored to the product context, including typography, color palettes, spacing, and motion guidelines.
  • Generates preview pages for fonts and colors and creates DESIGN.md to codify design decisions.
  • For existing sites, can infer a system via plan-design-review and proactively suggest starting UI design when no DESIGN.md exists.

Quick Start

Tell me to design a system for your project and I will generate DESIGN.md along with font/color 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 an existing website?▼

To create a design system for an existing website, this Skill reads your product context, infers visual rules through a plan-design-review process, and outputs a codified DESIGN.md alongside font and color previews.

What is the best way to generate a DESIGN.md file for my project?▼

Generating a DESIGN.md involves researching the design landscape and proposing a tailored system that documents typography, color, and motion. This Skill outputs the file alongside ready-to-implement font and color preview pages.

How do I define brand guidelines and typography for a new web project?▼

Defining brand guidelines and typography requires analyzing product context to propose matching fonts, spacing, and color palettes. The process yields a comprehensive design system codified directly into a DESIGN.md file.

Can I generate a color palette and font preview without manually coding them?▼

Yes, you can generate color palettes and font previews automatically. By analyzing your product context, the Skill produces visual preview pages and documents the exact color and typography choices within your DESIGN.md.

Does this design system generator work for both new and existing sites?▼

Yes, the design system generator works for both new and existing sites. For existing sites, it proactively suggests starting UI design if no DESIGN.md exists and infers the system using a plan-design-review workflow.

Related Skills

Explore More Design & Creative Skills→
SoborboSoborbo
4

competitor-analysis

Analyze up to five competitor websites to extract marketing data into YAML.

Community
Basic
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
gbasingbasin
7

figma-to-react

Convert Figma designs to React components with Tailwind CSS.

Community
Advanced