Interactive HTML Product Prototype Generator
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md and install @user_d5a027ad/prototype-html into your AI assistant.
About this skill
What Problem It Solves
Product reviews often scatter requirements, interface mockups, and interaction notes across documents, images, and prototyping tools, making it hard to verify what a specific button or state controls. prototype-html turns this into a single runnable HTML prototype: the left side shows the main product UI, while the right side documents the corresponding behavior, with SVG connectors linking interface elements to explanations.
How the Skill Works
The workflow moves from requirement analysis to layout design, code generation, and validation. It outputs a pure front-end single file using HTML, CSS, and native JavaScript, loading Tailwind CSS v3 and Font Awesome via CDN. The layout reserves 80%-85% width for the main UI and 15%-20% for notes, with independent scrolling. It selects 2-4 key elements and draws smooth 2px Bezier connectors, adding bidirectional hover highlighting. On mobile, it switches to a stacked layout, hides connectors, replaces them with short notes under each element, and offers a view toggle button.
Boundaries and Caveats
It fits quick demos and design communication, especially when interface elements need to be tied to functional notes. It follows the default palette and spacing rules, but user-specified brand colors take precedence. Connector positioning depends on DOM readiness and resize events, so element IDs and data attributes must be clear. It is not a substitute for real backend integration, complex state management, or deep accessibility hardening.
Use Cases
- Before a product review, place buttons, forms, and state notes in one HTML file and mark controls with connectors.
- When syncing UI interactions with engineers, generate a single-file prototype where hover highlights link interface elements to notes.
- Before mobile demos, switch the desktop split layout to a stacked view and show short function notes under each element.
- When preparing a quick runnable demo, output a single HTML file with Tailwind and Font Awesome, without project setup.
Best For
- Product managers who need interface notes and the prototype on the same screen for reviews
- Independent developers who need to demo a single-file HTML prototype to clients quickly
- UI designers who need mobile page notes under interface elements
- QA engineers who need to align control notes with their positions in the UI
Related Skills
A ComfyUI image-generation skill that uses a five-step dialog to collect prompts, prefill templates, confirm parameters, submit API jobs, and return results.
A design-system guidance skill for Impeccable that produces token-based rules, component states, accessibility criteria, and QA checklists.
Director-level video lapian that diagnoses material precision, then produces frame evidence, director analysis, a style bible, and a showcase video.
Plan and brief Amazon MAIN, Listing, and A+ image sets from verified product facts, then return plan and image QA status.