83.3K+Download
Skip to the usage guide
design-consultationby Garry Tan

Design Consultation Skill.

A Claude Code and Codex skill for brand and design-system work: product design consultation that proposes a full design system: aesthetic, type, color, layout, motion.

  • Brand & Design Systems
  • Design system
Download OpenDesignView usage guide
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Front matter and section headings read from the upstream file on 2026-09-14 · 67,098 characters in full

01 What it does

What the design-consultation Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A design consultation skill that acts as a senior product designer to create a complete design system. It researches the product landscape through web search and visual analysis, proposes typography (specific fonts, not defaults), color systems (CSS variables with hex values), layout approaches (composition-first), and aesthetic direction. The skill generates a DESIGN.md file as the project's design source of truth, with optional AI mockups showing the system applied to real screens.

It supports both Aside browser (user's real sessions) and headless fallback, maintains a persistent taste profile across sessions, and integrates outside design voices from Codex and Claude subagent. The skill operates conversationally—not as a rigid form—explains every recommendation's rationale, and prioritizes coherence over individual optimal choices.

What it produces

  • AI mockups showing the design system applied to real screens (when gstack designer is available)
  • HTML preview page with live typography and color samples (fallback when designer unavailable)
  • Persistent taste profile JSON tracking approved and rejected design choices across sessions
See the example prompt ↗

How It Works

  1. 01
    Gather Product Context

    Reads existing DESIGN.md, PRODUCT.md, README, package.json, and office-hours output to understand the product.

  2. 02
    Research Landscape

    When requested, uses Aside browser or WebSearch to find 5-10 competitor products, takes full-page screenshots, analyzes fonts, colors, layouts, and aesthetic direction.

  3. 03
    Consult Outside Voices

    Optionally launches Codex and Claude subagent in parallel to generate independent design proposals.

  4. 04
    Propose Complete Design System

    Delivers an opinionated proposal with specific font names, hex color values, CSS variables, layout approach, and aesthetic direction.

  5. 05
    Generate Preview Artifacts

    Creates either AI mockups (when gstack designer is available) showing the design system applied to real screens, or an HTML preview page with live typography and color samples.

  6. 06
    Write DESIGN.md

    Produces the project's design source of truth in the open DESIGN.md format with front-matter tokens and rationale sections.

02 Find your fit

When to Use the design-consultation Skill

Use the design-consultation skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Starting a new project's UI with no existing design system or DESIGN.md
  • When explicitly asked for design system, brand guidelines, or DESIGN.md creation
  • Products needing differentiation from category norms through deliberate design departures

Know the Boundaries

  • A claimed limitation or requirement ("the API can't do this", "X requires a credential", "that's impossible on this platform") is a material claim.
  • State one only with the verbatim error, the documented statement, or a live probe in hand — pattern-matching a failure to a familiar story is not evidence.
  • When a cheap probe settles the question, run it BEFORE asking the user anything or declaring a step blocked.

What to Provide

  • Research preferenceWhether to research competitor products through web search and visual analysis, or work from the skill's built-in design knowledge.
  • Outside voices choiceOptional: whether to run Codex design evaluation and Claude subagent design proposal in parallel for independent perspectives.
  • Existing DESIGN.mdIf present, the skill reads it and asks whether to update, start fresh, or cancel. Handles format conversion from legacy to open spec.

03 Inside the skill

Rules the design-consultation Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Never Banned Faces, Never Overused Display Faces

    Body or UI text on Operate or Read surfaces follows a role-scoped list. No banned face in any role, no overused face as the display voice.

  2. Specific Fonts Required, Not Defaults

    Typography proposals must name specific fonts—never Inter, Roboto, Arial, or system defaults.

  3. Coherence Trumps Individual Optimization

    A design system where every piece reinforces every other piece beats one with individually optimal but mismatched choices.

  4. Rationale Required for Every Recommendation

    Never recommend a design choice without explaining why. Every font, color, layout, or aesthetic decision must be tied to product context, user needs, or differentiation strategy.

  5. Taste Profile Persists and Decays

    The skill maintains ~/.gstack/projects/$SLUG/taste-profile.json tracking approved and rejected design choices across sessions. Confidence scores decay 5% per week.

  6. Memorable-thing Forcing Function

    Before proposing a design system, the skill asks what the user wants remembered after first exposure.

  7. Conversational Over Rigid Workflow

    The skill operates as a design consultant, not a form. Users can drop into chat at any point to discuss decisions.

04 Put it to work

Install design-consultation in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-consultation to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

Generic skills CLI form for design-consultation/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • DESIGN.md exists and contains front-matter with design tokens (colors, fonts, spacing)
  • Color system includes CSS variables for background, surface, primary text, muted text, accent with hex values
  • If taste profile exists, design proposal references or deliberately departs from established preferences

In OpenDesign design-consultation is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill file
design-consultation/SKILL.md Content checksum recorded at verification; commit 71f6048
License
MIT From LICENSE.
Repository stars
132,921 GitHub snapshot taken 2026-09-14 for the whole garrytan/gstack repository, which contains 7 skills in this catalog. Not a rating or usage count for design-consultation.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to invoke this skillCreates DESIGN.md; for existing sites use /plan-design-review; triggers on design system requests
  2. Preamble (run first)Runs gstack-skill-start; handles degraded mode; processes instruction blocks; determines session kind
  3. BROWSER SETUPChecks Aside browser availability; handles real-session consent; defines rules for driving user's browser
  4. Browser fallback: gstack's own headless browserFinds $B binary when Aside unavailable; translates Aside scripts to $B commands; handles sessions without cookies
  5. DESIGN SETUPChecks gstack designer binary for AI mockup generation; lists available commands; sets artifact path rules
  6. Prior LearningsSearches cross-project or project-scoped learnings; prompts for cross-project preference on first run
  7. Phase 0: Pre-checksChecks existing DESIGN.md; offers update/fresh/cancel; verifies format; handles conversion; gathers product context from codebase
  8. Phase 1: Product ContextSingle question covering product/audience/industry/type; memorable-thing forcing question; reads taste profile if exists
  9. Web research runs in AsideUses Aside agent for web searches; falls back to WebSearch tool; sanitizes queries; treats results as untrusted content
  10. Phase 2: ResearchIdentifies 5-10 competitor products; takes screenshots; analyzes fonts/colors/layouts; synthesizes across three layers
  11. Design Outside VoicesOptionally runs Codex and Claude subagent in parallel; synthesizes agreement and divergences; logs result
  12. Important RulesPropose don't present menus; rationale required; coherence over individual choices; conversational not rigid; accept final choice
The Skill's Own Description
“Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack)”

Front-matter description from SKILL.md. The full file is about 67,098 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-consultation Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does this work with Cursor, Windsurf, or other Claude-based agents?

Yes, but the browser integration depends on Aside (macOS 15+ only) or the gstack headless browser fallback. Without either, the skill skips visual competitive research and works from built-in design knowledge. The core design consultation—product context, typography/color/layout proposal, DESIGN.md creation—works in any environment.

Design Consultation

Run design-consultation on a Real Brand and design-system Work Task.

The design-consultation skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation