skills.rest
24601
24601COMMUNITY
Explore all skills by this author →
Website𝕏@moltar81435GitHub

design-consultation

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

Updated Mar 28, 2026
Search Tags:#typography#design-system#mockups#design-docs#color-palette#brand-guidelines#design-research
One-click install
npx skills add https://github.com/24601/gastack-pre-fork --skill design-consultation-24601
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/24601/gastack-pre-fork/tree/main/design-consultation
Command: npx skills add https://github.com/24601/gastack-pre-fork --skill design-consultation-24601

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns vague visual direction into a documented, production-ready design system so teams stop debating basics and start shipping consistent UI. It centralizes typography, color, layout, spacing, motion, and preview artifacts into a single DESIGN.md source of truth.

Core Features & Use Cases

  • Design system generation: Proposes a cohesive aesthetic, specific font choices, color tokens, layout rules, spacing scales, and motion guidelines, then writes DESIGN.md.
  • Preview artifacts: Generates font and color preview pages and, when available, AI mockups or comparison boards to visualize the system on real screens.
  • Research and inference: Performs competitive visual research and can infer a system from an existing site or update an existing DESIGN.md.

Quick Start

Ask the skill to create a DESIGN.md and preview pages by saying please create a complete design system for my product including typography, colors, layout, spacing, motion, and font plus color preview pages.

Frequently Asked Questions about design-consultation

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

FAQPage Schema
How do I generate a complete design system from scratch?▼

To generate a design system, request a DESIGN.md to produce cohesive typography, color palette, layout, spacing, and motion guidelines. This outputs a documented source-of-truth alongside font and color preview pages for immediate visual reference.

What is a DESIGN.md source-of-truth and when do I need one?▼

A DESIGN.md is a centralized document defining typography, color tokens, layout, and spacing rules. You need one when a product lacks visual guidelines or requires revising to ensure teams ship consistent UI without debating basics.

Can I infer a design system from an existing website?▼

Yes, the skill performs research and inference to extract typography, colors, and layout rules from an existing site. It then updates or creates a DESIGN.md and generates corresponding visual preview artifacts.

How do I create visual mockups and preview pages for a color palette?▼

Generating font and color preview pages is a core feature. When design and browse binaries are available, it optionally generates visual mockups and comparison boards to visualize the system on real screens.

Does this design system generation work for dashboards and marketing sites?▼

Yes, the generated design system applies to new projects, existing websites, dashboards, and marketing sites. It standardizes typography, spacing, and motion across diverse product surfaces into one DESIGN.md.

What's the best way to document brand guidelines and typography for a new project?▼

The best way is generating a DESIGN.md that centralizes typography, color palette, layout, and motion guidelines. This stops teams from debating visual basics and provides preview pages for immediate reference.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
compozycompozy
2.5k

minimalist-ui

Define and enforce a minimalist UI protocol for typography, color, and layout.

Official
Advanced
shekerkammashekerkamma

design-shotgun

Generate multiple UI design variants from a creative brief.

Community
Advanced
MissTullyMissTully

design-consultation

Generate DESIGN.md with typography, color palettes, layout rules, and motion guidelines.

Community
Advanced