skills.rest
SmallAi-API
SmallAi-APICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-prototype

Builds interactive single-file HTML prototypes using the real LobeHub UI design system.

Updated Jan 27, 2026
Search Tags:#react#design system#interaction design#esbuild#antd#html prototype#lobehub ui
One-click install
npx skills add https://github.com/SmallAi-API/smaihub --skill design-prototype-smallai-api
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-prototype
Source: https://github.com/SmallAi-API/smaihub/tree/main/.agents/skills/design-prototype
Command: npx skills add https://github.com/SmallAi-API/smaihub --skill design-prototype-smallai-api

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @lobehub/ui, @lobehub/icons, antd, antd-style, lucide-react, react, react-dom, esbuild, @babel/standalone, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Design prototypes built with generic component libraries drift from the production UI, forcing costly rewrites. This Skill generates fully interactive, single-file HTML prototypes rendered by the actual @lobehub/ui design system, so promotion to production is mostly splitting files rather than rewriting code. ## Core Features & Use Cases - Real design system rendering: Bundles @lobehub/ui 5.x, antd 6, antd-style, and lucide-react from the repo's own node_modules into a cached runtime, so tokens, components, and versions match production exactly. - Zero-build workflow: One HTML file with production-style React (imports, createStyles, hooks, memo) compiled in-browser via babel-standalone — double-click to open, no server or build step. - State-complete prototypes: Template enforces non-happy-path states (empty, loading, error) behind a toggle strip, plus light/dark theme via ThemeProvider. - Use Case: A designer needs to demo a new settings panel with collapse, drag-resize, and error states. Run the build script once, copy the template, write the surface in production-style React, and verify with a headless Playwright screenshot before sharing. ## Quick Start Ask the AI to build an interactive HTML prototype of your target UI surface using the design-prototype skill, then open the generated file in a browser.

Frequently Asked Questions about design-prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an interactive HTML prototype with the LobeHub UI design system?▼

Run scripts/build-runtime.sh with your output directory to bundle the runtime, copy references/template.html next to it, replace the sample App with your surface in production-style React, and open the HTML file directly in a browser.

How to verify a design prototype renders without errors?▼

Use the repo's Playwright from e2e/node_modules to load the file:// URL headlessly, wait for the #root selector, capture console errors, and take a screenshot. Read the screenshot yourself and check both light and dark color schemes before delivering.

Why does importing Switch from @lobehub/ui fail in the prototype runtime?▼

Switch lives in @lobehub/ui/base-ui, not the root package, along with other base-ui primitives. Import it from the base-ui namespace; if a module is missing entirely, add it to assets/entry.mjs and rerun the build script.

Can I use createStaticStyles in a LobeHub prototype?▼

No, static style extraction requires a build step that prototypes do not have. Use runtime createStyles from antd-style instead, and note this sanctioned deviation when handing the prototype to an implementer.

What are the limitations of the single-file HTML prototype approach?▼

Prototypes skip i18n, use inline data, and keep all code in one file, so they are not production code. The curated runtime is about 16MB loaded from disk, and any component not in entry.mjs requires a rebuild.

Related Skills

Explore More Design & Creative Skills→
TECH-HYTECH-HY

tpo-design-review-checklist

Reviews UX/UI designs against requirement, accessibility, and feasibility checklists with structured verdicts.

Official
Intermediate
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate
petbrainspetbrains
13

frontend-playwright

Identify visual regressions across viewports and interactions before deployment.

Official
Intermediate
sinositatosinositato

prd-ui-prototype

Generate interactive HTML/CSS/JS UI prototypes from PRD documents.

Community
Advanced