High-Fidelity HTML Prototype Generator

The Problem It Solves

Before formal development, teams often need to align with users or clients on page layout, visual style, and interaction logic. Traditional wireframes or static placeholders lack the intuitiveness required for users to truly experience the product. This skill addresses this by rapidly generating high-fidelity, interactive HTML prototypes. By following the "Show, Don't Tell" principle, it visualizes vague product ideas into clickable, fillable, and navigable pages, effectively confirming module placement and core business flows.

Core Capabilities and Key Steps

The workflow centers around industry-driven design and single-file delivery:
* Industry Inference & Spec Loading: Based on the user's context (e.g., food delivery, finance, SaaS), it infers the industry and loads specific visual specs (color palettes, typography, border-radius), strictly avoiding generic AI aesthetics like blue-to-purple gradients.
* High Fidelity & Real Interactivity: Prototypes are not static wireframes but interactive pages with animations, state transitions, and mock data. It supports onclick page navigation, real form inputs, hover feedback on buttons, and modals implemented via fixed-position div elements.
* Zero-Dependency Single File: The tech stack relies on HTML5, TailwindCSS (CDN), Vanilla JavaScript, and Lucide Icons. All styles, logic, and data are inlined into a single HTML file, requiring no build process and running directly in the browser.
* Quality Assurance: Pre-delivery checks validate industry consistency, interaction completeness, mock data realism (rejecting Lorem Ipsum), and state coverage (empty, loading, success/failure states).

Boundaries and Considerations

• Prototype-Only: It does not include real data storage or backend logic, relying entirely on inlined mock data.
• Visual Asset Limits: External images are not used. Icons and visual elements are primarily drawn with CSS or provided by the Lucide icon library.
• Lower Responsiveness Requirements: The focus is on fixed-viewport display (375px for APP mode, 1024px+ for web mode) rather than full responsive adaptation across all devices.
• Code Structure: For prototypes with more than 5 pages, it is recommended to maintain a simple page navigation index in the top comments to keep the code clean.