skills.rest
Bradliebs
BradliebsCOMMUNITY
Explore all skills by this author →
GitHub

design-consultation

Automate design-system planning and generate DESIGN.md with YAML frontmatter.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing cohesive UI languages is hard when teams lack a shared system. This skill produces a complete design-system blueprint and DESIGN.md as the single source of truth to guide branding, typography, color, layout, spacing, and motion.

Core Features & Use Cases

  • Proposes a complete design system including aesthetic, typography, color, layout, spacing, and motion.
  • Generates font+color preview pages for quick stakeholder reviews.
  • Creates DESIGN.md as the project’s design source of truth and a plan you can hand to engineers.

Quick Start

Provide a project brief and I will generate a complete design system, including typography, color, layout, spacing, motion, and a DESIGN.md as the source of truth.

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 project?▼

Design system documentation is produced by researching typography, color, layout, spacing, and motion to output a DESIGN.md file with YAML frontmatter and Markdown body, serving as the single source of truth for UI implementation.

What is the best way to document UI branding and typography guidelines for engineers?▼

Documenting UI branding and typography guidelines involves generating a DESIGN.md file with YAML frontmatter and a Markdown body that details typography, color, layout, spacing, and motion for engineering handoff.

Can I generate color and font previews for stakeholder design reviews?▼

Yes, color and font previews are generated for stakeholder reviews. The design system process outputs visual font and color preview pages alongside the DESIGN.md to guide implementation and facilitate quick feedback.

Does this design system process work for UI revamps as well as new projects?▼

Yes, the design system process applies to UI revamps as well as new projects. It automates planning and researching typography, color, layout, spacing, and motion to produce a comprehensive design blueprint for revamps.

What do I need to provide to generate a complete UI design system?▼

You need to provide a project brief. The system uses this brief to research typography, color, layout, spacing, and motion, outputting a complete design system and DESIGN.md documentation for your project.

Related Skills

Explore More Design & Creative Skills→
luanzebaluanzeba

teach-impeccable

Gather project design context and generate a CLAUDE.md Design Context document.

Community
Intermediate
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
vecearvecear

design-to-component-translator

Translate Figma design specs into React components with Tailwind/shadcn styling.

Community
Advanced
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced