design

v0.11.0

Claude Design <-> Storybook/Chromatic iteration loop: sync a design-system catalog to Claude Design, iterate look-and-feel there, then implement and visually validate the result in a React or React Native codebase.

Claude Code7 Skills

By Samuel Daigle0 GitHub starsUpdated 1 hour ago

Directory evidence

Runtimes: Claude Code
Parsed components: 7 skill or MCP entries
Source updated: Oct 1, 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 for Claude Code

Installs for the current user

claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install design-7@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

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/Lichens-Innovation/ai-dev-tools

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

Plugin files

plugins/design/

├── .claude-plugin/plugin.json
├── skills/chromatic-init/SKILL.md
├── skills/design-init/SKILL.md
├── skills/design-loop/SKILL.md
├── skills/design-palette/SKILL.md
├── skills/design-refresh/SKILL.md
├── skills/design-screens/SKILL.md
└── skills/storybook-init/SKILL.md

Included Skills7

chromatic-initskills/chromatic-init/SKILL.md

Adds Chromatic visual testing to a Storybook project: installs the chromatic package, wires the CHROMATIC_PROJECT_TOKEN, adds a publish script, runs the baseline build, and optionally sets up CI publishing - the publish/approval gate of the design loop. Used by design-init, or directly when the user wants to set up Chromatic, visual regression testing, or a Storybook review workflow. Use when the user asks to add Chromatic, set up visual regression, or publish Storybook for review.

design-initskills/design-init/SKILL.md

One-time setup for running the design loop in an existing React or React Native project. Creates the canonical palette, sets up Storybook/Chromatic/MCP, creates (or binds) the Claude Design project, seeds it with the palette card, reconciles palette inputs between the two, and writes design.manifest.json. Use when the user wants to set up a project for the Claude Design loop, onboard an existing project, or asks how to get started with the design plugin.

design-loopskills/design-loop/SKILL.md

Runs the Claude Design -> React implementation loop: reads an approved component or screen proposal (or the palette card) from a Claude Design project, implements it in the mapped component or screen using the canonical CSS tokens, converges via Playwright screenshots + Storybook MCP tests, and publishes to Chromatic. Also routes design requests: adding or refreshing a page in Claude Design (design-screens) and bringing Claude Design up to date (design-refresh). Use when the user says a component, a screen (or the palette) is ready to implement, asks to sync approved Claude Design changes into code, asks to add a page to Claude Design, or wants to run the design loop.

design-paletteskills/design-palette/SKILL.md

Creates or migrates the canonical CSS theme palette: brand/base/status inputs per light and dark mode, generated faint→intense scales, a reference-only semantic layer, a var()-only theme shared by web and React Native, Tailwind v4 utilities, and a contrast audit. Used by design-init, or directly when the user wants to create a theme palette, set up design tokens, normalize existing CSS variables, or check palette contrast.

design-refreshskills/design-refresh/SKILL.md

Brings the Claude Design project up to date with the code: checks whether the synced components are behind their code (and asks the user to run /design-sync when they are), rebuilds the screen mockups whose code changed, and offers screens that have no mockup yet. Use when the user wants Claude Design refreshed or up to date before designing, or after design-loop applied changes.

design-screensskills/design-screens/SKILL.md

Adds, refreshes or fixes app screens (pages) in the Claude Design project as mockups: rebuilds each screen from the synced components with sample data, checked against screenshots of the running app, and uploads it to screens/<name>.html so its design can be explored in Claude Design. Use when the user asks to add a page or screen to Claude Design, to design a whole page, to refresh a screen's mockup, or to make a mockup match the real page more closely.

storybook-initskills/storybook-init/SKILL.md

Installs and configures Storybook in a React or React Native project (including each UI app of a monorepo), wires up the Storybook MCP server, and confirms Playwright can screenshot a running Storybook - the render + knowledge half of the design loop. Used by design-init, or directly when the user wants to add Storybook or configure the Storybook MCP. Use when the user asks to add Storybook, set up component stories, or configure the Storybook MCP.

Plugin manifests1

plugins/design/.claude-plugin/plugin.json

{
  "name": "design",
  "version": "0.11.0",
  "description": "Claude Design <-> Storybook/Chromatic iteration loop: sync a design-system catalog to Claude Design, iterate look-and-feel there, then implement and visually validate the result in a React or React Native codebase.",
  "author": {
    "name": "Samuel Daigle",
    "email": "[email protected]"
  },
  "keywords": [
    "design",
    "design-system",
    "storybook",
    "chromatic",
    "claude-design",
    "playwright"
  ]
}