design-playbook

v0.24.1

Design I/O for coding agents: controllable UI generation via declarations (spec/domain/craft/design/components/template) and contracts (skill/evaluator). Use for product UI—console, dashboard, agent-ops, CJK-first apps.

CodexClaude Code8 Skills2 MCP serversstdio

By Bandersnatch0xLicense: MIT2 GitHub starsUpdated 4 days ago

Directory evidence

Runtimes: Codex and Claude Code
Parsed components: 10 skill or MCP entries
Source updated: Sep 19, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install design-playbook for Codex and Claude Code

Installs for the current user

codex plugin marketplace add Bandersnatch0x/design-playbook
codex plugin marketplace upgrade design-playbook
codex plugin add design-playbook@design-playbook

Paste and run these commands in a terminal with Codex. They add and refresh the design-playbook catalog, then install this plugin.

Compatibility: the page URL and API slug “design-playbook” remain stable.

Codex: design-playbook@agent-plugin-marketplace → design-playbook@design-playbook

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually

$ git clone https://github.com/Bandersnatch0x/design-playbook

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is packages/design-playbook/.

Plugin files

packages/design-playbook/

├── .codex-plugin/plugin.json
├── .claude-plugin/plugin.json
├── skills/craft-guard/SKILL.md
├── skills/design-baseline/SKILL.md
├── skills/design-playbook/SKILL.md
├── skills/native-craft/SKILL.md
├── skills/reference-intake/SKILL.md
├── skills/ui-evaluator/SKILL.md
├── skills/ui-picker/SKILL.md
├── skills/ux-spec/SKILL.md
└── .mcp.json

Included Skills8

craft-guardskills/craft-guard/SKILL.md

UI craft and feedback quality. Use when polishing product UI (motion, loading/error feedback) or when a page reads as AI slop.

design-baselineskills/design-baseline/SKILL.md

Discover, validate, or draft a project-owned DESIGN.md before adding or revising UI in an existing frontend. Use during design-playbook initialization when a repository already has pages, components, themes, tokens, or styles; when new UI looks inconsistent with existing surfaces; when DESIGN.md may be missing, incomplete, conflicting, or stale; or when the user asks to generate a design system from existing frontend source. Produces a provenance-backed draft and requires confirmation before creating or replacing the durable baseline.

design-playbookskills/design-playbook/SKILL.md

Route and orchestrate outcome-first product UI work. Use for answer, review, diagnosis, plan, prototype, build, or fix asks involving a page, dashboard, list, or settings surface, and for recirculating failed design review through declarations and evidence.

native-craftskills/native-craft/SKILL.md

Native-feel declaration for desktop apps. Use when a cross-platform desktop app (macOS+Windows) must feel indistinguishable from native. Invoked before ui-picker for native-desktop targets, not web pages.

reference-intakeskills/reference-intake/SKILL.md

Reference intake contract from screenshot, URL, design file, or product analogy. Use when the user supplies visual/product reference before build, or when Keep/Change/Do not copy boundaries are missing for a design ask.

ui-evaluatorskills/ui-evaluator/SKILL.md

Run evidence-backed UI acceptance. Use after generating a page, or when the user wants a design review or recirculatable critique against declared goals and success criteria.

ui-pickerskills/ui-picker/SKILL.md

UI shell and component semantics. Use when scaffolding a product page (list, dashboard, settings, detail, agent-admin), or when the wrong template/Badge-Tag pairing is about to be coded.

ux-specskills/ux-spec/SKILL.md

Declaration-first UI spec (six-layer spec.md) shaped through an S0-S6 interactive session. Use when turning a short product/UI ask into six-layer spec.md, or when goal, edge-state, acceptance, or evidence requirements are missing before build.

MCP servers2

design-playbook-evidencestdio

command: python
args: ./mcp/evidence/server.py
cwd: .

design-playbook-previewstdio

command: python
args: ./mcp/preview/server.py
cwd: .

Plugin manifests2

packages/design-playbook/.codex-plugin/plugin.json

{
  "name": "design-playbook",
  "version": "0.24.1",
  "description": "Design I/O for coding agents: controllable UI generation via declarations (spec/domain/craft/design/components/template) and contracts (skill/evaluator). Use for product UI—console, dashboard, agent-ops, CJK-first apps.",
  "author": {
    "name": "Bandersnatch0x",
    "url": "https://github.com/Bandersnatch0x"
  },
  "homepage": "https://github.com/Bandersnatch0x/design-playbook",
  "repository": "https://github.com/Bandersnatch0x/design-playbook",
  "license": "MIT",
  "keywords": [
    "ui",
    "ux",
    "design",
    "design-io",
    "design-playbook",
    "spec",
    "craft",
    "evaluator",
    "console",
    "cjk"
  ],
  "skills": "./skills/",
  "mcpServers": "./.codex-plugin/mcp.json",
  "interface": {
    "displayName": "design-playbook",
    "shortDescription": "Design I/O declarations + contracts for product UI",
    "developerName": "Bandersnatch0x",
    "category": "Design",
    "brandColor": "#2DD4BF",
    "websiteURL": "https://github.com/Bandersnatch0x/design-playbook"
  }
}

packages/design-playbook/.claude-plugin/plugin.json

{
  "name": "design-playbook",
  "description": "Design I/O for coding agents: controllable UI generation via declarations (spec/domain/craft/design/components/template) and contracts (skill/evaluator). Use for product UI—console, dashboard, agent-ops, CJK-first apps.",
  "version": "0.24.1",
  "author": {
    "name": "Bandersnatch0x"
  },
  "license": "MIT",
  "keywords": [
    "ui",
    "ux",
    "design",
    "design-io",
    "design-playbook",
    "spec",
    "craft",
    "evaluator",
    "console",
    "cjk"
  ]
}

Browse the “ui” tag →

tool-timing-badge

by claude-code-templates

Times every tool call and wraps the engine's ToolUse rendering with a colored duration badge from the surface's own element table, on the terminal, Desktop and mobile. Hooks tool.call and ui.render using JSX.

Claude Code

31.6kUpdated 2 hours ago

ui-ux-pro-max

by nextlevelbuilder

UI/UX design intelligence. Searchable local database with 84 styles, 192 palettes, 74 font pairings, 25 charts, and 22 stacks (React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.

Claude Code

4.1kUpdated last week

uizze

by UIZZE

Stop AI coding agents from shipping generic UI with a free anti-ui-slop Skill, a UI Slop Gate, and optional UIZZE research across 800,000+ real web and iOS screens.

Claude Code1 Skill

2.8kUpdated last week

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[design-playbook on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-playbook)