Reproduce claude.ai/design output from Claude Code: hard-rules doctrine, call order, intake gate, hybrid board default, Deeporax graphics, product-real content, verify-with-interaction, local .dc.html preview, hooks against silent failures.
0 on GitHubby Faisal Ashfaqv1.1.0MITupdated 1 month ago
Not in a marketplace yet, so it loads for one session with --plugin-dir.
Plugin claude-design-local in imfaisii/skills. Commands read from the repo's manifest — 1 month ago.
This plugin runs code on your machine — its hooks fire automatically on events like tool use. The exact commands are listed below; read them before installing.
What it installs
Skills (5)
cd-new
Start a Claude Design project the way the web app does — pick a template and design system, bind them at creation, run the intake gate, scaffold the local mirror, build a hybrid board with real product content and Deeporax graphics, verify, hand over open_url. HARD RULES non-negotiable.
cd-preview
Preview .dc.html files locally without a Claude Design round trip, by serving the local design/ mirror with a copy of the fixed support.js runtime. Use for fast iteration before pushing to the cloud project.
cd-system
Create or fill a Claude Design design system (UI kit) — the right project type, the exact file layout the Design System pane reads, and what the platform generates versus what you must author. Use when building a design system rather than a design.
cd-verify
Run the Claude Design verify loop on a rendered file — render, gate on console and network, fresh-eyes review, act. Use after any write_files that touches a renderable deliverable, and before claiming a design is done.
claude-design-parity
Use when designing through claude.ai/design from Claude Code and the output must match what the web app produces — picking a template and design system, the mandatory call order, the intake gate that decides which questions to ask, choosing between the board / flow / hybrid canvas patterns, Deeporax
Subagents (1)
design-verifier
Fresh-eyes review of a rendered Claude Design file. Dispatch after a clean render gate with a freshly minted serve_url, the project_id, the path, and the user's original request verbatim. Returns VERDICT done or VERDICT needs_work with concrete, located problems. Read-only — it never edits the desig
Slop-resistant prompt packages for Claude Design. Two skills: design-prompt turns a rough idea (and optional inspiration screenshots) into a master design-system prompt plus iteration follow-ups; screen-prompts researches the app, interrogates the user (via /grill-me when installed), maps every screen, and generates per-screen prompts plus an interactive device-frame canvas prompt for click-through testing mobile apps. Reference graphics via the Deeporax connector.
Pick a keyword from Search Console, Ahrefs and Ubersuggest data, run deep research (SERP teardown, topic coverage, verified facts), then write an EEAT-optimized SEO blog post with no AI watermarks inside an existing repo's blog system, with generated images ranked by a vision model.
Add loading.tsx and component-matched skeletons to a Next.js app for faster perceived navigation, fixing and adding skeletons on data calls while mirroring the app theme, dark mode, and accessibility with zero layout shift.
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.
Build, preview, and test UI components with Storybook.
7 skills
storybookjs/storybook 91,552
Maintain claude-design-local?
This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.