skills.rest
XinheLIU
XinheLIUCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Generate a complete design-system proposal with DESIGN.md and an HTML preview.

Updated Apr 26, 2026
Search Tags:#typography#design#color#ux#design-system#visual-design
One-click install
npx skills add https://github.com/XinheLIU/human-leverage --skill design-consultation-xinheliu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/XinheLIU/human-leverage/tree/main/.claude/skills/design-consultation
Command: npx skills add https://github.com/XinheLIU/human-leverage --skill design-consultation-xinheliu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to translate vague product prompts into a cohesive, executable design system, leaving teams with inconsistent visuals and heavy rework.

Core Features & Use Cases

  • Research-driven system design: understands product goals, audience, and landscape; proposes a complete design system including typography, color, spacing, layout, and motion.
  • DESIGN.md as a single source of truth: generates a production-ready design specification that teams can implement.
  • Preview visualization: generates an HTML preview to illustrate the proposed system before implementation.

Quick Start

Ask me to generate a complete DESIGN.md and a preview page that visualizes the proposed design system.

Frequently Asked Questions about design-consultation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate product ideas into a complete design system?▼

To translate product ideas into a complete design system, this Skill identifies your product context and generates a production-ready DESIGN.md specification covering typography, color, spacing, layout, and motion.

What is a DESIGN.md file for a visual design system?▼

A DESIGN.md file serves as the single source of truth for a visual design system. This Skill generates a production-ready DESIGN.md specification detailing aesthetics, typography, color, spacing, layout, and motion for your product.

How do I generate a design system for a new web app project?▼

To generate a design system for a new web app, provide your product goals and audience. This Skill applies built-in design knowledge or competitive research to deliver a complete design-system proposal and an HTML visual preview.

Can I preview a proposed typography and color system before implementation?▼

You can preview a proposed typography and color system before implementation because this Skill generates an HTML preview page. This visualization illustrates the complete design system alongside the production-ready DESIGN.md file.

Does this design system generator work for internal tools and marketing sites?▼

This design system generator works for internal tools and marketing sites. It applies to both new projects and revisions, identifying your specific product context to deliver tailored specifications for typography, color, spacing, and layout.

What is the best way to revise an existing design system without heavy rework?▼

The best way to revise an existing design system without heavy rework is generating an updated DESIGN.md as the source of truth. This Skill evaluates your product context to propose cohesive revisions across typography, color, and layout.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
2.0k

design-brief

Define and document a design brief with problem space, audience, constraints, and success criteria.

Community
Intermediate
rohunjrohunj
232

frontend-design

Design production-grade frontend interfaces with a defined visual identity.

Community
Advanced
HuijiroHuijiro

impeccable-normalize

Audit and realign UI components to match design system tokens, spacing, and patterns.

Community
Advanced
tongliu321-svgtongliu321-svg

ui-ux-pro-max

Generate design system recommendations for UI/UX projects using predefined rules.

Community
Advanced