102.7K+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 workflow for creating a coherent design system and DESIGN.md as the project’s design source of truth. It establishes product context and the one thing visitors should remember, then proposes typography, color, layout and aesthetic direction. Competitive research is optional; AI mockups depend on the gstack designer, with an HTML preview fallback.

The documented browser paths use Aside or gstack’s headless fallback; research can be reduced when tools are unavailable. Prior taste profiles inform, rather than dictate, recommendations. Outside proposals from Codex and a Claude subagent are opt-in and availability-dependent. The user’s final choice takes precedence over the agent’s taste.

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)
  • DESIGN.md containing the agreed system; existing legacy files may retain their format by user choice
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

    If the user opts in, find 5-10 candidate products, then confirm the exact sites before opening them for visual research. Screenshots and snapshots require Aside or the headless browser; missing search or browser evidence is disclosed.

  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

  • Not a Production UI BuildThe primary outcome is an agreed design system and preview. For inferring the system of an existing site, the source points to plan-design-review.
  • Full Repository RequiredThe entry file delegates the proposal, preview and DESIGN.md-writing phases to sections/proposal-and-preview.md. Use that companion section and the gstack helpers, not the entry file alone.
  • Optional Tool PathsBrowser research, AI mockups and outside voices need their respective tools and access. The source permits disclosed fallbacks; it does not guarantee all integrations on every agent host.

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

    The proposal section defines role-scoped font restrictions. Explicit user requests for a listed font are honored, with the tradeoff stated once.

  2. Specific Fonts Required, Not Defaults

    Name fonts deliberately and explain their fit. The outside-voice prompt rejects generic defaults, but the main workflow accepts the user’s final font choice.

  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

Use the full gstack repository, its setup helpers and design-consultation/sections/proposal-and-preview.md. DESIGN.md format helpers use Bun; browser research and AI mockups are optional integrations, not supplied merely by importing this entry file.

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:

  • The agreed DESIGN.md exists; new open-format files contain front-matter tokens, while an explicitly retained legacy file remains readable as prose.
  • 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?

The source documents gstack tooling rather than guaranteed compatibility with every host. Research can fall back from Aside to the headless browser or WebSearch, and then to disclosed prior knowledge. AI mockups and outside voices are optional. The consultation still needs the companion proposal section, file access and relevant helpers; this page does not record a cross-agent runtime test.

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