design-prototype
Produce an interactive single-file HTML design prototype using the REAL LobeHub design system (@lobehub/ui + antd + antd-style tokens) with production-style React — no build step, opens directly in a browser. Use when asked for a design prototype / interactive mockup / 交互原型 / 出个原型 / 设计稿 HTML for a page or flow, or to explore a redesign before committing to implementation.
Profile →npx skills add lobehub/lobehub --skill design-prototype --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design Prototype One HTML file, double-click to open, fully interactive, rendered by the **actual design system** (`@lobehub/ui` 5.x + antd 6 + antd-style tokens, exact versions from this repo's `node_modules`) — while the source stays **production-style React** (`import { Block } from '@lobehub/ui'`, `createStyles(({ css, token }) => …)`, hooks, `memo`). Promotion to production is mostly "split into files", not "rewrite". Prototype code may be quick-and-dirty (one file, no i18n, inline data) — but the **interaction must be complete**: states, transitions, and affordances are the point of a prototype, not its code style. ## How it works ``` one-time (~2s, cached): scripts/build-runtime.sh → lobe-prototype-runtime.js (IIFE global) + vendored babel.min.js per prototype (no build): single HTML = <script runtime> + babel-standalone + <script type="text/babel"> with production-style React ``` - The runtime bundles `react`, `react-dom/client`, `@lobehub/ui`, `@lobehub/ui/base-ui`, `antd` (curated subset), `antd-style`, `lucide-react` from the repo's own `node_modules` — so tokens/components/versions match production, and react/emotion/ theme-context are singletons by construction. - A
- How it works
- Quickstart
- Verify before delivering
- What's in the runtime (extend freely)
- Pitfalls
- Design bar (same as production surfaces)
bash .agents/skills/design-prototype/scripts/build-runtime.sh /tmp/my-proto
What does the design-prototype skill do?
Produce an interactive single-file HTML design prototype using the REAL LobeHub design system (@lobehub/ui + antd + antd-style tokens) with production-style React — no build step, opens directly in a browser. Use when asked for a design prototype / interactive mockup / 交互原型 / 出个原型 / 设计稿 HTML for a page or flow, or to explore a redesign before committing to implementation.
How do I install it?
Run `npx skills add lobehub/lobehub --skill design-prototype --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.