一键在 Manus 中运行任何 Skill

doctor

星标95

分支10

更新时间2026年4月20日 05:50

First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

bluzir

bluzir/claude-code-design

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Doctor

Cold-start health check + optional auto-install. Safe to run multiple times.

Phase 1 — Inventory

Run in parallel where possible:

Bash(claude mcp list) — parse output, look for chrome-devtools: ✓ Connected
Bash(which monolith) — existence check
Bash(which node) — required
Bash(which gh) — for /ingest-github
Bash(test -f package.json && echo yes || echo no)
Bash(test -d starters && echo yes || echo no) — expect yes
Bash(test -d artifacts && echo yes || echo no)
Bash(test -d .claude/skills && echo yes || echo no) — expect yes

Phase 2 — Report

Print structured report:

Chrome DevTools MCP: ✓ / ✗ (if ✗, show install command)
monolith CLI:        ✓ / ✗ (optional; needed for /export-standalone)
Node:                ✓ / ✗ (required)
gh CLI:              ✓ / ✗ (needed for /ingest-github)
package.json:        exists / missing
starters/ dir:       exists / missing
artifacts/ dir:      will create
.claude/skills/:     N skills found
FIGMA_TOKEN env:     set / not set (only needed for /ingest-figma)

Phase 3 — Repair (with user consent)

For each missing item, ask the user with AskUserQuestion: "Install X now?" (yes/skip/all).

Repair commands (only on yes):

Chrome DevTools MCP: Bash(claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest) — note: requires Claude Code restart to take effect
monolith: Bash(brew install monolith) (macOS) or tell user for linux

pptxgenjs + puppeteer:

Bash(test -f package.json || npm init -y)
Bash(npm install -D pptxgenjs puppeteer)

artifacts/ dir: Bash(mkdir -p artifacts assets/thumbs test)

Phase 4 — Smoke test

If everything is green (and user didn't just run install → restart):

Write test/smoke-deck.html:

<!doctype html>
<html><head><meta charset="utf-8"/><title>Smoke</title>
<script src="../starters/deck_stage.js"></script></head>
<body><deck-stage width="1920" height="1080">
  <section style="padding:60px;font:48px/1.2 Georgia"><h1>One</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#f4e4d7"><h1>Two</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#4a5d2e;color:#fff"><h1>Three</h1></section>
</deck-stage></body></html>

Run /done test/smoke-deck.html
If Chrome DevTools MCP is connected — check screenshot at .claude/last-preview.png exists and console is clean
Report pass/fail

Phase 5 — Hint sheet

Print one-liner hints:

Available commands & skills:
  /make-deck <brief>            — build a slide deck
  /interactive-prototype <brief> — clickable React prototype
  /wireframe <thing>            — low-fi variants
  /create-design-system <src>   — extract style guide
  /ingest-github <url>          — pull tokens from repo
  /ingest-screenshot <path>     — extract tokens from image
  /ingest-figma <url>           — pull from Figma (needs FIGMA_TOKEN)
  /make-tweakable <html>        — add live tweak panel
  /apply-tweaks <html>          — persist panel changes
  /register-asset <html>        — add to assets.html overview
  /verify-artifact <html>       — vision-based QA
  /export-pdf  /export-pptx  /export-standalone  /handoff
  /preview /done /screenshot    — operational atomics

同仓库更多 Skills

同仓库

make-deck

bluzir/claude-code-design

Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.

2026-04-2095

verify-artifact

bluzir/claude-code-design

Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.

2026-04-2095

animated-video

bluzir/claude-code-design

Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.

2026-04-2095

apply-tweaks

bluzir/claude-code-design

Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.

2026-04-2095

copy-example

bluzir/claude-code-design

Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.

2026-04-2095

create-design-system

bluzir/claude-code-design

Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".

2026-04-2095

name	doctor
description	First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.
allowed-tools	Read Write Bash(claude:) Bash(which:) Bash(brew:) Bash(npm:) Bash(node:) Bash(mkdir:) Bash(ls:) Bash(test:) mcp__chrome-devtools__*

Doctor

Cold-start health check + optional auto-install. Safe to run multiple times.

Phase 1 — Inventory

Run in parallel where possible:

Bash(claude mcp list) — parse output, look for chrome-devtools: ✓ Connected
Bash(which monolith) — existence check
Bash(which node) — required
Bash(which gh) — for /ingest-github
Bash(test -f package.json && echo yes || echo no)
Bash(test -d starters && echo yes || echo no) — expect yes
Bash(test -d artifacts && echo yes || echo no)
Bash(test -d .claude/skills && echo yes || echo no) — expect yes

Phase 2 — Report

Print structured report:

Chrome DevTools MCP: ✓ / ✗ (if ✗, show install command)
monolith CLI:        ✓ / ✗ (optional; needed for /export-standalone)
Node:                ✓ / ✗ (required)
gh CLI:              ✓ / ✗ (needed for /ingest-github)
package.json:        exists / missing
starters/ dir:       exists / missing
artifacts/ dir:      will create
.claude/skills/:     N skills found
FIGMA_TOKEN env:     set / not set (only needed for /ingest-figma)

Phase 3 — Repair (with user consent)

For each missing item, ask the user with AskUserQuestion: "Install X now?" (yes/skip/all).

Repair commands (only on yes):

Chrome DevTools MCP: Bash(claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest) — note: requires Claude Code restart to take effect
monolith: Bash(brew install monolith) (macOS) or tell user for linux

pptxgenjs + puppeteer:

Bash(test -f package.json || npm init -y)
Bash(npm install -D pptxgenjs puppeteer)

artifacts/ dir: Bash(mkdir -p artifacts assets/thumbs test)

Phase 4 — Smoke test

If everything is green (and user didn't just run install → restart):

Write test/smoke-deck.html:

<!doctype html>
<html><head><meta charset="utf-8"/><title>Smoke</title>
<script src="../starters/deck_stage.js"></script></head>
<body><deck-stage width="1920" height="1080">
  <section style="padding:60px;font:48px/1.2 Georgia"><h1>One</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#f4e4d7"><h1>Two</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#4a5d2e;color:#fff"><h1>Three</h1></section>
</deck-stage></body></html>

Run /done test/smoke-deck.html
If Chrome DevTools MCP is connected — check screenshot at .claude/last-preview.png exists and console is clean
Report pass/fail

Phase 5 — Hint sheet

Print one-liner hints:

Available commands & skills:
  /make-deck <brief>            — build a slide deck
  /interactive-prototype <brief> — clickable React prototype
  /wireframe <thing>            — low-fi variants
  /create-design-system <src>   — extract style guide
  /ingest-github <url>          — pull tokens from repo
  /ingest-screenshot <path>     — extract tokens from image
  /ingest-figma <url>           — pull from Figma (needs FIGMA_TOKEN)
  /make-tweakable <html>        — add live tweak panel
  /apply-tweaks <html>          — persist panel changes
  /register-asset <html>        — add to assets.html overview
  /verify-artifact <html>       — vision-based QA
  /export-pdf  /export-pptx  /export-standalone  /handoff
  /preview /done /screenshot    — operational atomics