skills.rest
JovieInc
JovieIncOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-consultation

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

Updated Aug 2, 2025
Search Tags:#typography#branding#layout#color#design-system#motion#design-consultation
One-click install
npx skills add https://github.com/JovieInc/Jovie --skill design-consultation-jovieinc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/JovieInc/Jovie/tree/main/.claude/skills/gstack/design-consultation
Command: npx skills add https://github.com/JovieInc/Jovie --skill design-consultation-jovieinc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams define a complete, coherent design system for a product, including aesthetic, typography, color, layout, spacing, and motion, and generates a DESIGN.md as the project’s design source of truth.

Core Features & Use Cases

  • Understands the product and brand context and produces a unified design system.
  • Generates font and color previews to visualize the system and a DESIGN.md document you can reference.
  • Plans design guidelines for existing sites or new products, and supports brand guideline creation and UI consistency.

Quick Start

Define a complete design system for my product, including aesthetic, typography, color, layout, spacing, and motion, and generate 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 complete design system for a new product?▼

Generate a design system by defining product context, aesthetic, typography, color, layout, spacing, and motion. This produces a DESIGN.md document acting as the single source of truth for unified design language and brand guidelines.

What is a DESIGN.md file and how does it work for UI consistency?▼

DESIGN.md is a document acting as the single source of truth for design decisions. It captures your unified design language, brand guidelines, typography, and color previews to ensure UI consistency across new and existing sites.

Can I use this to build brand guidelines for an existing site?▼

Yes, you can build brand guidelines for an existing site. The process analyzes your current product context to plan and deliver a coherent design system and unified design language ready for implementation.

What's the best way to define typography and color previews for a design system?▼

The best way is to generate a unified design system that includes font and color visualizations alongside a comprehensive DESIGN.md document. This provides immediate visual previews for reference and implementation.

Does this design consultation process include layout and motion guidelines?▼

Yes, the design consultation process includes layout and motion guidelines. It satisfies end-to-end requirements by defining spacing, motion, typography, and color, delivering a coherent plan ready for implementation.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
bajajvinamrbajajvinamr

design-consultation

Create a cohesive design system with typography, color, spacing, and motion rules.

Community
Advanced
programadorisgodprogramadorisgod
1

Svelte Components

Create reusable Svelte 5 components with runes and shadcn-svelte integration.

Community
Advanced
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate