# Interactive UI Prototype

Builds interactive HTML prototypes using the real LobeHub UI stack.

- Repository: https://github.com/lobehub/lobehub (83676 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add lobehub/lobehub --skill design-prototype -g -a claude-code -y`
Codex: `npx skills add lobehub/lobehub --skill design-prototype -g -a codex -y`
Cursor: `npx skills add lobehub/lobehub --skill design-prototype -g -a cursor -y`
Gemini CLI: `npx skills add lobehub/lobehub --skill design-prototype -g -a gemini-cli -y`

## Description

Use for interactive HTML prototypes (交互原型) with the real LobeHub UI stack. Excludes production UI implementation.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design Prototype

One HTML file, double-click to open, fully interactive, rendered by the **actual
design system** (`@lobehub/ui` 6.x components, compiled `style.css`, `--lobe-*` theme tokens, exact
versions from this repo's `node_modules`), while the source stays **production-style
React** (`import { Block } from '@lobehub/ui'`, `createStaticStyles(({ css, cssVar }) => …)`,
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)
                                                       + lobe-prototype-runtime.css
                                                       + vendored babel.min.js
per prototype (no build): single HTML  =  <link css> + <script runtime> + babel-standalone
                          + <script type="text/babel"> with production-style React
```

The rest: https://github.com/lobehub/lobehub/blob/HEAD/.agents/skills/design-prototype/SKILL.md