npx @hegemonart/get-design-done@latest

What It Is

Get Design Done helps AI coding agents ship UI that belongs in your product.

It turns loose requests like "make this screen better" into a traceable design workflow: brief, explore, plan, design, verify.

Instead of asking an agent to improvise from taste alone, GDD gives it a structured process, local design knowledge, project-specific memory, optional design-tool connections, and verification before the work ships.

Why It Exists

AI agents are fast at producing UI. The hard part is making that UI coherent.

Without a design workflow, generated interfaces drift:

• colors and spacing stop matching the system
• components get reinvented
• contrast and accessibility regress
• hierarchy changes from screen to screen
• implementation no longer matches the original brief

GDD adds the missing design discipline around AI coding workflows. It captures the problem, maps the current design system, plans scoped changes, executes them in atomic steps, and verifies the result against the brief, tokens, accessibility, and design-quality rubrics.

Behind the scenes: 64 specialized agents, a queryable intel store, tier-aware model routing, and 39 optional tool connections. What you use day to day is a handful of /gdd:* commands.

Install

npm

npx @hegemonart/get-design-done@latest

Claude Code

/plugin marketplace add hegemonart/get-design-done
/plugin install get-design-done@get-design-done
/reload-plugins

Codex

codex plugin marketplace add hegemonart/get-design-done

agentskills.io

Browse and install Get Design Done from the agentskills.io skills registry.

Direct runtime installer

# Claude Code
npx @hegemonart/get-design-done --claude --global
npx @hegemonart/get-design-done --claude --local

# Other runtimes
npx @hegemonart/get-design-done --codex --global
npx @hegemonart/get-design-done --cursor --global
npx @hegemonart/get-design-done --gemini --global

# Multi-runtime install
npx @hegemonart/get-design-done --all --global

# Preview without writing
npx @hegemonart/get-design-done --dry-run

Quickstart

Run a lightweight first pass:

/gdd:start

Or run the full design cycle:

/gdd:brief
/gdd:explore
/gdd:plan
/gdd:design
/gdd:verify

For natural-language routing:

/gdd:do improve the checkout page hierarchy, spacing, and empty states

Use Cases

Improve An Existing Screen

Use GDD when a screen works technically but feels visually inconsistent, unclear, or under-designed.

/gdd:do improve the settings page layout and component hierarchy

Bring AI Output Back To The Design System

Use it when an agent generated UI that looks plausible but does not match your tokens, spacing, states, or components.

/gdd:verify

Audit Before Shipping

Run verification before a PR, release, or design handoff.

/gdd:audit

Fix Dark Mode

/gdd:darkmode

Import A Design Handoff

/gdd:handoff ./my-design.html

This parses a Claude Design bundle, extracts CSS custom properties into design decisions, and runs handoff faithfulness checks.

Make A Small Focused Fix

/gdd:fast "fix contrast in pricing cards"

What Makes It Different

Local Design Knowledge

GDD ships with an extensive local reference library for design work. Agents can use it without relying on live web search for basic design judgment.

It covers accessibility, WCAG, typography, spacing, grids, color, contrast, surfaces, motion, UX writing, forms, empty states, visual hierarchy, dark mode, responsive behavior, i18n, research methods, audit scoring, and design anti-patterns.

The agent is not starting from a blank prompt. It has a shared design vocabulary and concrete standards it can apply during planning, implementation, and verification.

Full map: docs/KNOWLEDGE-BASE.md

Project-Specific Memory

GDD creates a .design/ workspace that keeps each cycle grounded:

The longer you use it, the less the agent has to rediscover.

Verification Before Shipping

GDD does not stop when the UI "looks done."

The verify stage checks whether the result still matches:

• the original brief
• design-system tokens
• accessibility thresholds
• component conventions
• visual hierarchy
• motion and interaction rules
• recorded design decisions

When gaps appear, GDD produces a structured fix list instead of leaving review to vibes.

Skill behavior tests

GDD's own skills are exercised under adversarial pressure scenarios (time pressure, sunk-cost, authority, scope-minimization) to confirm they hold their discipline rather than caving. See CONTRIBUTING.md for how to add a pressure scenario.

How It Works

Brief -> Explore -> Plan -> Design -> Verify -> Ship

Core Outputs

Commands

GDD ships 96 skills. These are the ones most users need day to day. For the full reference see SKILL.md.

Core Pipeline

Daily Use

Design Tools And Handoff

Full command reference: SKILL.md

Connections

GDD works without external tools, but can connect to 39 optional integrations. All are optional; the pipeline degrades gracefully to fallbacks when any connection is unavailable.

The connection layer spans these categories:

• Design surfaces - Figma (read + write + Code Connect), paper.design, pencil.dev, Penpot, Framer, Webflow, Plasmic
• Reference and research - Refero, Pinterest, Lazyweb, Mobbin, Claude Design handoff
• Component generation - 21st.dev Magic, Magic Patterns, v0.dev, Builder.io
• Component spec and visual QA - Storybook, Chromatic, Preview (Playwright + Claude Preview MCP)
• Knowledge graph - Graphify
• Native and non-web output - Xcode Simulator, Android Emulator, Litmus / Email-on-Acid, print renderer
• Motion verification - Lottie, Rive
• Team surfaces - Slack, Discord, Linear, Jira, Notion, GitHub PR

Configure integrations with:

/gdd:connections

For the full connection list with probe patterns, see connections/connections.md.

Requirements

• Node.js 22 or 24
• Git
• A supported AI coding runtime

Multi-Runtime Support

GDD installs across 14 AI coding runtimes: Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Kilo, Copilot, Windsurf, Antigravity, Augment, Trae, Qwen Code, CodeBuddy, and Cline. The same source skills are compiled to each runtime's native layout (skills/, command/, or .clinerules) by per-runtime converters, so the skill pipeline travels with you across editors. The sub-agents and the hook layer are Claude-specific - they do not travel to the other runtimes (see the Agents/Hooks columns in HARNESSES.md).

Claude Code is the flagship. The full experience runs there end to end: every sub-agent (installed via --claude --local into agents/), the defense-in-depth hooks, and the MCP-backed connections. On the other runtimes you get the same skills in their native shape, and MCP-backed connections light up on the MCP-capable hosts - but the sub-agents and the hook layer are Claude Code-only.

Safety And Privacy

GDD is local-first by default. It writes project artifacts under .design/, uses optional integrations only when configured, and keeps issue reporting consent-gated.

The plugin includes defense-in-depth hooks for protected paths, dangerous-command blocking, injection scanning, MCP circuit breaking, and budget enforcement. GDD also exposes 13 read-only MCP tools for safe project introspection.

Add sensitive paths to your runtime's deny list:

{
  "permissions": {
    "deny": [
      "Read(.env)",
      "Read(.env.*)",
      "Read(**/secrets/*)",
      "Read(**/*.pem)",
      "Read(**/*.key)"
    ]
  }
}

Read: SECURITY.md · PRIVACY.md

Updating

npx @hegemonart/get-design-done@latest

Or from inside Claude Code:

/gdd:update

For the full release history, see CHANGELOG.md.

Troubleshooting

Commands Do Not Appear

Restart your runtime and run:

/gdd:help

Pipeline Is Stuck

/gdd:health
/gdd:resume

Cost Is Too High

/gdd:optimize

Contributing

npm install
npm test
npm run typecheck

Read: CONTRIBUTING.md

License

MIT License. See LICENSE for details. Third-party attributions are listed in NOTICE.