Agent skill · design visual · lobehub
design-prototype
Use for interactive HTML prototypes (交互原型) with the real LobeHub UI stack. Excludes production UI implementation.
Why this skill is useful
Provides a specific interactive prototype generation process using the LobeHub design system that the AI wouldn't reliably generate on its own.
What it needs
Requires babel, react, react-dom installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
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 nodemodules) — 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 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 nodemodules — so tokens/components/versions match production, and react/emotion/ theme-context are singletons by construction. A 3-line window.require shim + babel's transform-modules-commonjs lets the prototype keep real import statements. ThemeProvider themeMode="auto" → light/dark follow the OS. ⚠️ Don't re-attempt the pure-CDN route (esm.sh import maps). It was tried and rejected: esm.sh's CJS named-export analysis fails serially across antd's dep chain (@ant-design/fast-color → @ant-design/colors → @rc-component/qrcode → …), and ?bundle leaks an unversioned react-is 404. Whack-a-mole, not a foundation. Quickstart 1. Build the runtime into the prototype's directory (any dir works; /tmp is fine): Skip if lobe-prototype-runtime.js + babel.min.js are already there and the design-system versions haven't bumped. 2. Copy references/template.html into the same dir, rename, and replace the sample App with the real surface. Keep the runtime shim block untouched. 3. Open it (open /tmp/my-proto/xxx.html) — no server, no build. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/design-prototype