What problem does it solve? Building a design prototype usually means either a throwaway mockup that diverges from the real design system or a full app setup with a build pipeline. This Skill produces a single HTML file that opens directly in a browser while rendering with the actual @lobehub/ui, antd, and antd-style tokens from the repository, so the prototype matches production styling without any build step. ## Core Features & Use Cases - Real design system rendering: Bundles react, @lobehub/ui, @lobehub/ui/base-ui, antd, antd-style, and lucide-react from the repo's own node_modules into a cached IIFE runtime, so component versions and tokens match production exactly. - Production-style source: Prototype code keeps real import statements, createStyles hooks, and memo patterns via a require shim and babel-standalone, making promotion to production mostly a file-splitting exercise. - State-complete prototypes: The template enforces a state toggle covering data, empty, loading, and error states, plus light/dark theme support via ThemeProvider. - Use Case: When asked for an interactive mockup of a settings page redesign, run the build script once, copy the template, write the surface in React, and verify it headlessly with Playwright before delivering. ## Quick Start Ask the AI to create an interactive HTML design prototype of the page or flow you describe, and it will build the runtime, write the single-file prototype, and verify it renders without console errors.
