メニュー
Conduct design interviews, generate UI variations, and collect live click-to-annotate feedback that streams into the session so edits land without leaving the browser. Use when the user wants rapid iterative UI refinement, not just batched feedback.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes - four-phase framework (root cause investigation, pattern analysis, hypothesis testing, implementation) that ensures understanding before attempting solutions
Create or reorganize project documentation with structured /docs hierarchy
Use when implementing any feature or bugfix, before writing implementation code - write the test first, watch it fail, write minimal code to pass; ensures tests actually verify behavior by requiring failure first
Use when writing or changing tests, adding mocks, or tempted to add test-only methods to production code - prevents testing mock behavior, production pollution with test-only methods, and mocking without understanding dependencies
Use when errors occur deep in execution and you need to trace back to find the original trigger - systematically traces bugs backward through call stack, adding instrumentation when needed, to identify source of invalid data or incorrect behavior
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
| name | live-canvas |
| description | Conduct design interviews, generate UI variations, and collect live click-to-annotate feedback that streams into the session so edits land without leaving the browser. Use when the user wants rapid iterative UI refinement, not just batched feedback. |
This skill implements a complete design exploration workflow: interview, generate variations, collect feedback, refine, preview, and finalize.
All temporary files MUST be deleted when the process ends, whether by:
Never leave .claude-design/ or __live_canvas routes behind. If the user says "cancel", "abort", "stop", or "nevermind" at any point, confirm and then delete all temporary artifacts.
Live Canvas supports two feedback transports. The user picks every time — never auto-select.
<channel source="live-canvas" ...> tag. Requires the session was launched with live-claude (or claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace) — channels are still an experimental Claude Code feature and a plain claude session silently drops the notifications. Any qualifying session can claim the channel by calling mcp__live-canvas__channel_open; only one holds it at a time..claude-design/feedback.jsonl (or downloads the JSON). User says "check" or pastes the file when ready. Works in any host.This SKILL.md is the Claude Code variant of the skill. Same content is mirrored as docs for Droid/Amp/Opencode under packages/<tool>/commands/live-canvas/, but those tools don't support the MCP channel.
If running under Droid, Amp, or Opencode (not Claude Code):
📝 JSON mode (Live channel requires Claude Code).channelUrl omitted in the overlay init.How to tell which host you're in: the environment variable CLAUDECODE=1 is set by Claude Code. If unset, assume non-Claude and go straight to JSON.
Always ask, never auto-detect. Use AskUserQuestion:
Question: Pick a feedback mode
- Live channel — overlay streams each Save straight into this Claude session. Requires this session to have been started with
live-claude(sets the--dangerously-load-development-channelsflag). If you started with plainclaude, pick JSON instead — Live mode will refuse to start and tell you to open a newlive-claudeterminal.- JSON file — overlay writes feedback to a local JSON file; tell me "check" when ready. Works in any session, plain
claudeincluded.
If the user picks JSON, try to bind the batch endpoint so submissions write to disk instead of triggering a browser download. Call mcp__live-canvas__batch_open:
| Tool result | What to do |
|---|---|
| Tool not available (no MCP) | Announce 📝 JSON mode — overlay will offer JSON download on Submit. Proceed to Phase 1 with both channelUrl and batchEndpoint omitted. |
{status: "opened", ...} or {status: "already_listening", ...} | Announce 📝 JSON mode — submissions write to .claude-design/feedback.jsonl. Proceed to Phase 1 with batchEndpoint: 'http://localhost:8788/feedback-jsonl' and channelUrl omitted. |
{status: "in_use", ...} | Announce 📝 JSON mode — overlay will offer JSON download on Submit (another session holds the port). Proceed to Phase 1 with both channelUrl and batchEndpoint omitted. |
Call mcp__live-canvas__channel_close on cleanup/abort to release the port (same teardown as Live mode).
If the user picks Live, claim the channel by calling the MCP tool mcp__live-canvas__channel_open. Branch on the result:
| Tool result | What to do |
|---|---|
| Tool not available (no such tool / MCP error) | Case C: First-time setup needed. Print the install block (below) and STOP. |
{status: "opened", ...} (no took_over) | Case A: Ready. Announce ✨ Live mode — feedback streams into this session. Proceed to Phase 1 with channelUrl: 'http://localhost:8788'. |
{status: "opened", took_over: <pid>, ...} | Case A (takeover): Ready. Announce ✨ Live mode — feedback streams into this session (took over channel from prior live-canvas session pid <pid>). Proceed to Phase 1 the same as plain Case A. The prior session's MCP was a sibling instance of this plugin (same user); its /live-canvas workflow there is now over, but the lab files on disk are untouched. |
{status: "already_listening", ...} | Case A: Ready. Announce ✨ Live mode — feedback streams into this session. Proceed to Phase 1 with channelUrl: 'http://localhost:8788'. |
{status: "in_use", holder_pid, message, ...} | Case B: Foreign process holds the port. A non-live-canvas process is using port 8788 (e.g., a dev server on the wrong port). Print the busy block (below) and STOP — the plugin won't kill processes it doesn't own. |
{status: "no_channel_capability", message, ...} | Case D: Session lacks the channels flag. Print the relaunch block (below) and STOP. Do NOT proceed to Live mode — notifications would be silently dropped. |
You must call mcp__live-canvas__channel_close later — see Phase 8 (Cleanup) and Abort Handling. The MCP plugin also auto-releases the port on session disconnect as a safety net, but explicit close is cleaner.
Case B — busy block (foreign holder):
Substitute the actual holder_pid from the tool response into the message below.
Port 8788 is held by pid <holder_pid>, which is NOT a live-canvas server
(it's some other process). I won't kill processes I don't own.
To use Live mode:
• Find what it is: ps -fp <holder_pid>
• Stop it if it's safe to stop (e.g. a stray dev server on the wrong port).
• Then re-run /live-canvas in this session and pick Live.
Or pick JSON now — JSON mode does not require port 8788.
Case D — relaunch block (no channels flag):
This Claude session is plain `claude` — it can't receive Live-mode feedback.
Live mode needs a session started with `live-claude` (which sets the
experimental --dangerously-load-development-channels flag). Without it,
your browser Saves would POST 200 but never appear in chat.
To use Live mode:
1. Open a NEW terminal (you can keep this one running; it's fine to have
both). Do NOT --continue this session — start fresh in the project.
2. cd to your project directory.
3. Run: live-claude
(if the command isn't found: run `source ~/.zshrc` first, or re-run
packages/claude/plugins/live-canvas-marketplace/setup.sh)
(literal form: claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace)
4. In that NEW session, run /live-canvas and pick Live.
The lab files are written to disk in the project's `.claude-design/lab/`,
so any session in the right cwd can pick up where another left off.
Or pick JSON now to stay in this session — feedback gets written to a file
you paste back here. No relaunch needed.
Case C — first-time setup block:
Live mode needs a one-time install. Two steps:
1. From this repo's root (or wherever liteagents lives):
bash packages/claude/plugins/live-canvas-marketplace/setup.sh
This copies the marketplace into ~/.claude/plugins/ and runs npm install.
2. In any Claude session, register and install the plugin:
/plugin marketplace add ~/.claude/plugins/live-canvas-marketplace
/plugin install live-canvas-channel@live-canvas-marketplace
That's it — once the plugin is installed, /live-canvas in any session can
claim the channel. Re-run /live-canvas and pick Live.
Do not try to run any of these commands yourself. Three reasons:
/plugin steps are Claude Code slash commands — not doable from inside a running session.The user always executes these manually. Your job is to make the sequence obvious and copyable.
Before starting the interview, automatically detect:
Check for lock files in the project root:
pnpm-lock.yaml → use pnpmyarn.lock → use yarnpackage-lock.json → use npmbun.lockb → use bunCheck for config files:
next.config.js or next.config.mjs or next.config.ts → Next.js
app/ directory → App Routerpages/ directory → Pages Routervite.config.js or vite.config.ts → Viteremix.config.js → Remixnuxt.config.js or nuxt.config.ts → Nuxtastro.config.mjs → AstroCheck package.json dependencies and config files:
tailwind.config.js or tailwind.config.ts → Tailwind CSS@mui/material in dependencies → Material UI@chakra-ui/react in dependencies → Chakra UIantd in dependencies → Ant Designstyled-components in dependencies → styled-components@emotion/react in dependencies → Emotion.css or .module.css files → CSS ModulesLook for existing Design Memory file:
docs/design-memory.mdDESIGN_MEMORY.md.claude-design/design-memory.mdIf found, read it and use to prefill defaults and skip redundant questions.
DO NOT use generic/predefined styles. Extract visual language from the project:
If Tailwind detected, read tailwind.config.js or tailwind.config.ts:
// Extract and use:
theme.colors // Color palette
theme.spacing // Spacing scale
theme.borderRadius // Radius values
theme.fontFamily // Typography
theme.boxShadow // Elevation system
If CSS Variables exist, read globals.css, variables.css, or :root definitions:
:root {
--color-* /* Color tokens */
--spacing-* /* Spacing tokens */
--font-* /* Typography tokens */
--radius-* /* Border radius tokens */
}
If UI library detected (MUI, Chakra, Ant), read the theme configuration:
theme.ts or createTheme() calltheme/index.ts or extendTheme() callConfigProvider theme propAlways scan existing components to understand patterns:
Store inferred styles in the Design Brief for consistent use across all variants.
Use the AskUserQuestion tool for all interview steps. Adapt questions based on Design Memory if it exists.
Ask these questions (can combine into single AskUserQuestion with multiple questions):
Question 1: Scope
Question 2: New or Redesign
If "Redesign" selected, ask: Question 3: Existing Path
If target is unclear, propose a name based on repo patterns and confirm.
Question 1: Pain Points
Question 2: Visual Inspiration
Question 3: Functional Inspiration
Question 1: Brand Adjectives
Question 2: Density
Question 3: Dark Mode
Question 1: Primary User
Question 2: Context
Question 3: Key Tasks
Question 1: Must-Keep Elements
Question 2: Technical Constraints
After the interview, create a structured Design Brief as JSON and save to .claude-design/design-brief.json:
{
"scope": "component|page",
"isRedesign": true|false,
"targetPath": "src/components/Example.tsx",
"targetName": "Example",
"painPoints": ["Too dense", "Primary action unclear"],
"inspiration": {
"visual": ["Stripe", "Linear"],
"functional": ["Inline validation"]
},
"brand": {
"adjectives": ["minimal", "trustworthy"],
"density": "comfortable",
"darkMode": true
},
"persona": {
"primary": "Developer",
"context": "desktop-first",
"keyTasks": ["Complete checkout", "Review order", "Apply discount"]
},
"constraints": {
"mustKeep": ["existing fields"],
"technical": ["no new dependencies", "WCAG accessible"]
},
"framework": "nextjs-app",
"packageManager": "pnpm",
"stylingSystem": "tailwind"
}
Display a summary to the user before proceeding.
Create all files under .claude-design/:
.claude-design/
├── lab/
│ ├── page.tsx # Main lab page (framework-specific)
│ ├── variants/
│ │ ├── VariantA.tsx
│ │ ├── VariantB.tsx
│ │ ├── VariantC.tsx
│ │ ├── VariantD.tsx
│ │ └── VariantE.tsx
│ ├── components/
│ │ └── LabShell.tsx # Lab layout wrapper
│ └── data/
│ └── fixtures.ts # Shared mock data
├── design-brief.json
└── run-log.md
The overlay is the PRIMARY feature of Live Canvas. Without it, users cannot provide interactive feedback. NEVER generate a lab without the overlay.
One template, every framework: ~/.claude/skills/live-canvas/templates/overlay-vanilla.js. Single file, zero dependencies, plain DOM. Works in vanilla JS, Vue, Svelte, Rails, Django, Phoenix, plain HTML, Next.js, Vite-React, Remix — anywhere a <script> tag runs.
Copy it into a directory served by the dev server (e.g. public/overlay-vanilla.js for Next.js, static/overlay-vanilla.js for Vite, the public dir for Rails/Django). Reference it from the lab page.
The overlay needs one init() call with target, channelUrl (Live only), and optionally batchEndpoint.
Server-rendered / vanilla HTML:
<script src="/overlay-vanilla.js"></script>
<script>
LiveCanvas.init({
target: '<ComponentOrPageName>',
// Only include channelUrl when the user picked Live and the probe succeeded.
// In JSON mode, OMIT channelUrl so the overlay skips the probe.
channelUrl: 'http://localhost:8788',
// Optional: where to POST JSON payloads when channelUrl is missing.
// When omitted, Submit downloads a JSON file instead.
batchEndpoint: '/__live_canvas/feedback',
});
</script>
React / Next.js / Vite-React: load the script with the framework's mechanism and init in a useEffect:
import Script from 'next/script';
import { useEffect } from 'react';
export default function Lab() {
useEffect(() => {
(window as any).LiveCanvas?.init({
target: 'PostCard',
channelUrl: 'http://localhost:8788', // omit in JSON mode
});
}, []);
return (<>
<Script src="/overlay-vanilla.js" strategy="afterInteractive" />
{/* variants ... */}
</>);
}
Vite-React: use <script> in index.html or useEffect with a dynamic import(). Same LiveCanvas.init({...}) call.
.claude-design/ paths can fail due to bundler configurationsNext.js App Router:
Create app/__live_canvas/page.tsx that imports from .claude-design/lab/
Next.js Pages Router:
Create pages/__live_canvas.tsx that imports from .claude-design/lab/
Vite React:
/__live_canvasApp.tsx based on ?live_canvas=true query paramOther frameworks: Create the most appropriate temporary route for the detected framework.
IMPORTANT: Read DESIGN_PRINCIPLES.md for UX, interaction, and motion best practices. But DO NOT use predefined visual styles—infer them from the project.
Apply universal principles (from DESIGN_PRINCIPLES.md):
Infer visual styles from the project:
Each variant MUST explore a different design axis. Do not create minor variations—make them meaningfully distinct. Use the project's existing visual language for all variants.
Variant A: Information Hierarchy Focus
Variant B: Layout Model Exploration
Variant C: Density Variation
Variant D: Interaction Model
Variant E: Expressive Direction
The Live Canvas page must include:
Header with:
~/.claude/skills/live-canvas/templates/lab-banner.html at the top of the lab page. Same text in any mode. For React/TSX labs, translate the inline style to a JS object: camelCase keys, string values. E.g. style="border-radius:8px; padding:10px 14px; font-size:13px" → style={{ borderRadius: '8px', padding: '10px 14px', fontSize: '13px' }}. Keep the text and role="note".Variant Grid with:
data-variant="X" attribute (where X is A, B, C, D, E, or F). This is required for the feedback system to identify which variant comments belong to.Responsive behavior:
Shared Data:
data/fixtures.tsFeedback Overlay (CRITICAL - NEVER OMIT):
⚠️ THIS IS THE MOST IMPORTANT REQUIREMENT ⚠️
The overlay (overlay-vanilla.js) enables users to click on elements and leave comments. Without it, the Live Canvas is just a static page with no way to collect structured feedback.
~/.claude/skills/live-canvas/templates/overlay-vanilla.js into a directory served by the dev server (e.g. public/, static/, or wherever the framework serves static assets).<script> tag and call LiveCanvas.init({...}) once with target, channelUrl (Live mode), and optional batchEndpoint. See "Wiring the overlay" above for the exact snippets per framework.data-variant="X" attribute (A, B, C, D, E, or F). The overlay uses this to route comments to the right variant file.If you forget to wire up the overlay, the user CANNOT provide feedback. This defeats the entire purpose of the Live Canvas.
Conventions:
Accessibility (from DESIGN_PRINCIPLES):
<button> not <div onclick>, <nav>, <main>, <section>:focus-visible with 2px ring and offsetStates (every component needs):
Motion:
prefers-reduced-motionAfter generating the lab files, immediately present the lab to the user. Do NOT attempt to:
Use the version matching the mode detected in Phase 0.
If LIVE mode:
✨ Live Canvas ready — Live mode
Variants are at: http://localhost:3000/__live_canvas (adjust to your dev port)
Make sure your dev server is running, then:
1. Click "Add Feedback" (bottom-right)
2. Click any element → type → Save
3. Each Save streams here instantly — I'll acknowledge and edit the corresponding variant
4. Keep going, or tell me "done" whenever you're ready to synthesize a winner
If JSON mode:
📝 Live Canvas ready — JSON mode
Variants are at: http://localhost:3000/__live_canvas
Click "Add Feedback" (bottom-right), comment on elements, fill "Overall Direction", click Submit.
Then paste the JSON/markdown here, or just tell me your feedback in plain English.
(To use Live mode next time: relaunch with `live-claude` and pick Live when /live-canvas asks.)
Don't wait for the user to confirm they opened the browser — move on so the feedback instructions are queued.
Running pnpm dev or npm run dev starts a long-running process that never exits. If you run it, you'll wait forever. The user likely already has their dev server running, or can start it themselves in another terminal.
Behavior depends on the mode detected in Phase 0.
In Live mode, feedback arrives in your context as:
<channel source="live-canvas" target="PostCard" variant="B" selector="[data-testid='reply-b']" tagName="button" commentId="c-123...">
make this more prominent
</channel>
For each <channel> tag, do all four steps, in this order:
Acknowledge back to the user in chat — one short sentence confirming what you received. Examples:
Got it — variant B's Reply button, "make this more prominent". Editing now.On it: variant C post card, "add more spacing". Updating.
Do not skip this. The user is watching their browser and needs a text signal that the push landed.Locate the file — the variant attribute tells you which file (.claude-design/lab/variants/Variant<X>.tsx). The selector identifies the element inside it.
Edit the file — make the change implied by the feedback text. Prefer small, surgical edits over rewrites. If the feedback is ambiguous ("change this"), ask one clarifying question rather than guessing.
Close the loop — one short reply after the edit: ✅ Done — variant B Reply button is now larger and primary-colored. Then wait for the next channel event or user message.
If multiple <channel> tags arrive together, batch the acknowledgments but do each edit one at a time so the user's dev server hot-reloads visibly between changes.
The Live Canvas includes a Figma-like feedback overlay. When presenting the lab, include these instructions:
✅ Live Canvas created!
I've generated 5 design variants in `.claude-design/lab/`
To view and provide feedback:
1. Make sure your dev server is running (run `pnpm dev` if not)
2. Open: http://localhost:3000/__live_canvas
**To add feedback:**
1. Click the "Add Feedback" button (bottom-right corner)
2. Click any element you want to comment on
3. Type your feedback and click "Save"
4. Repeat for all elements you want to comment on
5. Fill in the "Overall Direction" field (required)
6. Click "Submit All Feedback"
7. Paste the copied text here in the terminal
Or just describe your feedback manually below!
When the user pastes feedback, it will be in this format:
## Live Canvas Feedback
**Target:** ComponentName
**Comments:** 3
### Variant A
1. **Button** (`[data-testid='submit']`, button with "Submit")
"Make this more prominent"
### Variant B
1. **Card** (`.product-card`, div with "Product Name")
"Love this layout"
### Overall Direction
Go with Variant B's structure. Apply Variant A's button styling.
How to parse and act on this feedback:
[data-testid='submit'])If the user prefers not to use the interactive overlay (or pastes manual feedback), use the AskUserQuestion flow below:
Question 1: Ready to pick?
If user said "Yes", ask:
Question 2a: Which one?
Question 3a: Any tweaks?
If "Minor tweaks needed", ask user to describe changes via text input.
Then proceed to Phase 7: Final Preview.
If user said "No - I like parts of different ones", ask:
Question 2b: What do you like about each?
Example response format to guide user:
- A: Love the card layout and spacing
- B: The color scheme feels right
- C: The interaction on hover is great
- D: Nothing stands out
- E: The typography hierarchy is clearest
Then proceed to Phase 6: Synthesize New Variant.
Based on the user's feedback about what they liked from each variant:
Create a new hybrid variant (Variant F) that combines:
Replace the Live Canvas with a comparison view:
Update the /__live_canvas route to show the new arrangement
Ask for feedback again:
Question: How's the new variant?
If "Getting closer" or "Went the wrong direction", gather more specific feedback and iterate. Support multiple synthesis passes until user is satisfied.
Then proceed to Phase 7: Final Preview.
Once user is satisfied:
Create .claude-design/preview/ directory:
.claude-design/preview/
├── page.tsx # Preview page
└── FinalDesign.tsx # The winning design
Create route at /__design_preview
For redesigns, include before/after comparison:
Ask for final confirmation:
Question: Confirm final design?
If "No, needs changes": gather feedback and iterate. If "Abort": proceed to Abort Handling below.
If the user wants to cancel/abort at ANY point during the process (not just final confirmation), they may say things like:
When abort is detected:
Confirm the abort:
If confirmed, clean up immediately:
mcp__live-canvas__channel_close to release port 8788..claude-design/ directory entirelyapp/__live_canvas/, etc.)Acknowledge:
When user confirms (selected "Yes, finalize it"):
If Live mode was active, call mcp__live-canvas__channel_close to release port 8788 so another session can claim it.
Delete all temporary files:
.claude-design/ directory entirelyapp/__live_canvas/ (Next.js App Router)pages/__live_canvas.tsx (Next.js Pages Router)app/__design_preview/pages/__design_preview.tsxApp.tsx modifications (Vite)Safety rules:
.claude-design/Create DESIGN_PLAN.md in the project root:
# Design Implementation Plan: [TargetName]
## Summary
- **Scope:** [component/page]
- **Target:** [file path]
- **Winner variant:** [A-E]
- **Key improvements:** [from feedback]
## Files to Change
- [ ] `src/components/Example.tsx` - Main component refactor
- [ ] `src/styles/example.css` - Style updates
- [ ] ... (list all affected files)
## Implementation Steps
1. [Specific step with code guidance]
2. [Next step]
3. ...
## Component API
- **Props:**
- `prop1: type` - description
- ...
- **State:**
- Internal state requirements
- **Events:**
- Callbacks and handlers
## Required UI States
- **Loading:** [description]
- **Empty:** [description]
- **Error:** [description]
- **Disabled:** [description]
- **Validation:** [description]
## Accessibility Checklist
- [ ] Keyboard navigation works
- [ ] Focus states visible
- [ ] Labels and aria-* attributes correct
- [ ] Color contrast meets WCAG AA
- [ ] Screen reader tested
## Testing Checklist
- [ ] Unit tests for logic
- [ ] Component tests for rendering
- [ ] Visual regression tests (if applicable)
- [ ] E2E smoke test (if applicable)
## Design Tokens
- [Any new tokens to add]
- [Existing tokens to use]
---
*Generated by Live Canvas skill*
Create or update DESIGN_MEMORY.md:
If new file:
# Design Memory
## Brand Tone
- **Adjectives:** [from interview]
- **Avoid:** [anti-patterns discovered]
## Layout & Spacing
- **Density:** [preference]
- **Grid:** [if established]
- **Corner radius:** [if consistent]
- **Shadows:** [if consistent]
## Typography
- **Headings:** [font, weights used]
- **Body:** [font, size]
- **Emphasis:** [patterns]
## Color
- **Primary:** [color tokens]
- **Secondary:** [color tokens]
- **Neutral strategy:** [approach]
- **Semantic colors:** [error, success, warning]
## Interaction Patterns
- **Forms:** [validation approach, layout]
- **Modals/Drawers:** [when to use which]
- **Tables/Lists:** [preferred patterns]
- **Feedback:** [toast, inline, etc.]
## Accessibility Rules
- **Focus:** [visible focus approach]
- **Labels:** [labeling conventions]
- **Motion:** [reduced motion support]
## Repo Conventions
- **Component structure:** [file organization]
- **Styling approach:** [Tailwind classes, CSS modules, etc.]
- **Existing primitives:** [Button, Input, Card, etc.]
---
*Updated by Live Canvas skill*
If updating existing file:
If framework cannot be determined:
If dev server won't start:
If can't create temporary route:
If cleanup is interrupted:
The plugin supports these optional configurations (via environment or project config):
DESIGN_AUTO_IMPLEMENT: If true, implement the plan immediately after confirmationDESIGN_KEEP_LAB: If true, don't delete lab until explicit cleanup commandDESIGN_MEMORY_PATH: Custom path for Design Memory file/design-variations:design CheckoutSummary.claude-design/lab/ with 5 variantsapp/__live_canvas/page.tsxpnpm dev/__design_previewDESIGN_PLAN.mdDESIGN_MEMORY.md