一键在 Manus 中运行任何 Skill

interactive-prototype

星标96

分支10

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

Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".

安装

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

在 Manus 中运行

来源

bluzir

bluzir/claude-code-design

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

下载

在 Manus 中运行

Interactive Prototype

Build a working clickable prototype — not a static mockup. Uses React + Babel inline with pinned versions, wrapped in a DeviceFrame.

Phase 0 — Context pre-flight (auto-detect, ONE question max)

Before design questions, silently check for context:

Read .claude/design-tokens.json if exists
Bash(ls ~/.claude/design-systems/ 2>/dev/null) — if brief mentions a brand matching a folder name → auto-apply
Glob for codebase tokens: **/tailwind.config.*, **/theme.{ts,js,json}, **/tokens.{css,scss}, **/_variables.*
Scan brief for: github URL → Skill: ingest-github; Figma URL → Skill: ingest-figma; image attachment → Skill: ingest-screenshot; .md/.pdf → Read

If nothing found, ask ONE AskUserQuestion: design system from registry / codebase / screenshot / Figma / none (use frontend-design) / Claude decides. Report "Using . Proceeding."

Phase 1 — Ambiguity gate

Check brief for: platform (iOS/Android/desktop/web), app category (food delivery, social, productivity, etc.), feature count, design context (brand/codebase).

If platform + category present → max 2 clarifying questions. Otherwise AskUserQuestion:

Platform
Screens needed (list)
Transitions between screens (instant / slide / fade / custom)
Does it need "live data" mocking (fake API returns)
How interactive — taps only, or scroll/swipe/drag
Variations wanted

Do not ask about brand context — Phase 0 already handled it.

Phase 2 — Visual system

Using context from Phase 0, commit to a mobile-aware system:

Min 44px hit targets on mobile
Consistent spacing / type scale from loaded tokens
If no tokens → invoke Skill: frontend-design

Phase 3 — Build

artifacts/<slug>.html with shell:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>{{name}}</title>
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
  <script src="./device_frame.jsx" type="text/babel"></script>
  <script src="./animations.jsx" type="text/babel"></script>
  <style>body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f4f6; }</style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;
    // your components here
    function App() {
      const [screen, setScreen] = useState('home');
      return <DeviceFrame kind="ios">
        {screen === 'home' && <HomeScreen onNav={setScreen}/>}
        {screen === 'detail' && <DetailScreen onBack={() => setScreen('home')}/>}
      </DeviceFrame>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
  </script>
</body>
</html>

Bash(cp starters/device_frame.jsx "$(dirname <html>)/") + Bash(cp starters/animations.jsx "$(dirname <html>)/") — copy into the same dir as the HTML
Navigation pattern: useState for current screen. For transitions use <Transition> from animations.jsx.
Critical React rule: never const styles = {...}. Use component-prefixed names: const headerStyles, const cardStyles. Inline styles also OK.
Mock data inline; no external fetch.

Phase 4 — Verify

Important: because this artifact loads external .jsx starters, file:// will hit CORS errors. Run /serve first (one-time), then preview via http:

/serve
/done http://127.0.0.1:4567/artifacts/<slug>.html

Fix errors → Skill: verify-artifact in background.

Phase 5 — Next steps

/make-tweakable to expose knobs (primaryColor, fontSize, density variants)
/export-standalone for offline deliverable
/handoff to produce component files for the dev team
/register-asset to add to overview

同仓库更多 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-2096

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-2096

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-2096

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-2096

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-2096

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-2096

name	interactive-prototype
description	Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".
argument-hint	<feature or app description>
allowed-tools	Read Write Edit Glob Grep Bash(cp:) Bash(open:) Bash(mkdir:) mcp__chrome-devtools__

Interactive Prototype

Build a working clickable prototype — not a static mockup. Uses React + Babel inline with pinned versions, wrapped in a DeviceFrame.

Phase 0 — Context pre-flight (auto-detect, ONE question max)

Before design questions, silently check for context:

Read .claude/design-tokens.json if exists
Bash(ls ~/.claude/design-systems/ 2>/dev/null) — if brief mentions a brand matching a folder name → auto-apply
Glob for codebase tokens: **/tailwind.config.*, **/theme.{ts,js,json}, **/tokens.{css,scss}, **/_variables.*
Scan brief for: github URL → Skill: ingest-github; Figma URL → Skill: ingest-figma; image attachment → Skill: ingest-screenshot; .md/.pdf → Read

If nothing found, ask ONE AskUserQuestion: design system from registry / codebase / screenshot / Figma / none (use frontend-design) / Claude decides. Report "Using . Proceeding."

Phase 1 — Ambiguity gate

Check brief for: platform (iOS/Android/desktop/web), app category (food delivery, social, productivity, etc.), feature count, design context (brand/codebase).

If platform + category present → max 2 clarifying questions. Otherwise AskUserQuestion:

Platform
Screens needed (list)
Transitions between screens (instant / slide / fade / custom)
Does it need "live data" mocking (fake API returns)
How interactive — taps only, or scroll/swipe/drag
Variations wanted

Do not ask about brand context — Phase 0 already handled it.

Phase 2 — Visual system

Using context from Phase 0, commit to a mobile-aware system:

Min 44px hit targets on mobile
Consistent spacing / type scale from loaded tokens
If no tokens → invoke Skill: frontend-design

Phase 3 — Build

artifacts/<slug>.html with shell:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>{{name}}</title>
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
  <script src="./device_frame.jsx" type="text/babel"></script>
  <script src="./animations.jsx" type="text/babel"></script>
  <style>body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f4f6; }</style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;
    // your components here
    function App() {
      const [screen, setScreen] = useState('home');
      return <DeviceFrame kind="ios">
        {screen === 'home' && <HomeScreen onNav={setScreen}/>}
        {screen === 'detail' && <DetailScreen onBack={() => setScreen('home')}/>}
      </DeviceFrame>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
  </script>
</body>
</html>

Bash(cp starters/device_frame.jsx "$(dirname <html>)/") + Bash(cp starters/animations.jsx "$(dirname <html>)/") — copy into the same dir as the HTML
Navigation pattern: useState for current screen. For transitions use <Transition> from animations.jsx.
Critical React rule: never const styles = {...}. Use component-prefixed names: const headerStyles, const cardStyles. Inline styles also OK.
Mock data inline; no external fetch.

Phase 4 — Verify

Important: because this artifact loads external .jsx starters, file:// will hit CORS errors. Run /serve first (one-time), then preview via http:

/serve
/done http://127.0.0.1:4567/artifacts/<slug>.html

Fix errors → Skill: verify-artifact in background.

Phase 5 — Next steps

/make-tweakable to expose knobs (primaryColor, fontSize, density variants)
/export-standalone for offline deliverable
/handoff to produce component files for the dev team
/register-asset to add to overview