skills.rest
JonOlsenCa
JonOlsenCaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-consultation

Generate a complete design system and DESIGN.md for product interfaces.

Updated Aug 23, 2026
Search Tags:#typography#design#layout#color#design-system#motion#design-review
One-click install
npx skills add https://github.com/JonOlsenCa/gstack-main --skill design-consultation-jonolsenca
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-consultation
Source: https://github.com/JonOlsenCa/gstack-main/tree/main/design-consultation
Command: npx skills add https://github.com/JonOlsenCa/gstack-main --skill design-consultation-jonolsenca

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing consistent interfaces from scratch wastes time and leads to drift. This skill understands your product, researches the landscape, and proposes a complete design system (typography, color, layout, spacing, motion) and generates a DESIGN.md as the project’s single source of truth.

Core Features & Use Cases

  • Proposes typography, color, layout, spacing, and motion guidelines for a coherent product aesthetic.
  • Generates DESIGN.md as the living design source of truth to guide implementation.
  • For existing sites, can infer a system and plan a design-review workflow.

Quick Start

Describe your product and goals, and I will generate a complete design system and DESIGN.md.

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

Yes, you can upgrade an existing site that lacks a design system. The tool infers a system from your current site and integrates with a plan-design-review workflow to systematically plan and execute design improvements.

What is a DESIGN.md file and why do I need it for my UI layout?▼

A DESIGN.md file is a living document that acts as the single source of truth for your product's aesthetic. You need it to prevent design drift and ensure consistent typography, color, layout, spacing, and motion across your interfaces.

Can I use research-driven design approaches or do I need existing product context?▼

Yes, you can use either research-driven or knowledge-based design approaches. The tool reads product context from office-hours output when available, but you can also simply describe your product and goals to start generating the system.

What's the best way to document typography, color, and motion guidelines for a project?▼

The best way to document these guidelines is by generating a DESIGN.md file. This document captures your complete design system, covering typography, color, layout, spacing, and motion, to guide implementation and prevent drift.

How does a design system review workflow work for existing sites?▼

A design review workflow for existing sites involves inferring a design system from the current layout, then planning upgrades. This process integrates with plan-design-review workflows to systematically execute typography, color, and motion improvements.

Related Skills

Explore More Design & Creative Skills→
cloudofgeorgecloudofgeorge

office-hours

Brainstorms ideas and outputs a structured design brief via office-hours sessions.

Community
Advanced
bajajvinamrbajajvinamr

design-consultation

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

Community
Advanced
shaythegay13shaythegay13

design-consultation

Plan and execute design-system consultations that output a DESIGN.md source of truth.

Community
Advanced
cookeyholdercookeyholder

ui-ux-pro-max

Generate master and page-specific design systems for web and mobile projects.

Community
Advanced