skills.rest
yahav123147
yahav123147COMMUNITY
Explore all skills by this author →
GitHub

design-consultation

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

1|Updated Apr 13, 2026
Search Tags:#typography#layout#design system#color palette#motion#UI guidelines#design source of truth
One-click install
npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill design-consultation-yahav123147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/yahav123147/paid-ads-cro-skills/tree/main/skills/design-consultation
Command: npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill design-consultation-yahav123147

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns vague ideas and scattered UI decisions into a complete design system you can consistently build with, so you stop re-deciding colors, typography, spacing, and layout every time.

Core Features & Use Cases

  • Design system creation: Produces a full system including aesthetic direction, typography, color, layout, spacing, and motion rules.
  • Landscape understanding: Researches the existing landscape and translates it into practical UI system decisions for your product.
  • Preview page generation: Creates font and color preview pages so you can visually verify the system quickly.
  • Source of truth output: Generates DESIGN.md as the design source of truth, or helps plan a review using /plan-design-review for existing sites.
  • Use when: You are asked to define a “design system” or “brand guidelines”, or you need to create DESIGN.md for a new project with no prior system.

Quick Start

Tell the skill: "Design system for my product, output DESIGN.md and generate font and color preview pages, my goal is [insert goal], my audience is [insert audience], and my current UI assets are [describe or link]."

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

To create a design system, define your product goals, target audience, and current UI assets. The system translates these inputs into a cohesive set of typography, color palette, layout, spacing, and motion rules, outputting a DESIGN.md file as the source of truth.

What is a DESIGN.md file and when do I need one for my UI?▼

A DESIGN.md file serves as the design source of truth for a project. You need one when starting a new project with no prior design system or when ongoing UI work requires consistent rules and visual verification via generated font and color preview pages.

Can I generate typography and color palette guidelines for existing design work?▼

Yes, you can generate typography and color palette guidelines for existing work. The system helps plan a review using /plan-design-review for existing sites, ensuring your ongoing design work aligns with consistent UI rules and visual verification.

What is the best way to document UI guidelines and ensure visual consistency across a product?▼

The best way to document UI guidelines is to generate a DESIGN.md file that aligns aesthetic, typography, color, layout, spacing, and motion to your product’s needs. This establishes a single source of truth to stop re-deciding UI elements repeatedly.

What inputs do I need to provide to generate a coherent design system?▼

To generate a coherent design system, you must provide your product goal, target audience, and current UI assets or descriptions. The system uses this context to research the landscape and translate it into practical UI system decisions.

Related Skills

Explore More Design & Creative Skills→
antriksh-29antriksh-29

design-consultation

Generates a complete design system and DESIGN.md with preview from product context and landscape research.

Community
Advanced
2460124601

design-consultation

Generate a complete design system with typography, colors, layout, spacing, and motion into DESIGN.md.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

Community
Intermediate
kk20300113-pngkk20300113-png

design-consultation

Generate a complete design system and DESIGN.md for new web and mobile applications.

Community
Advanced