prototype-html

Interactive HTML Product Prototype Generation

Based on product requirements, generate a complete, directly runnable single-file HTML product prototype.

Core Workflow

1. Understand Requirements - Clarify the product features and interface elements the user needs to showcase
2. Design Layout - Plan the correspondence between the interface elements on the left and the explanatory documentation on the right
3. Write Code - Generate a complete HTML file that complies with all technical specifications
4. Verification Check - Ensure all connecting lines are correct, interactions are complete, and responsiveness works properly

Layout Specifications (Strictly Enforced)

Overall Structure

• Left-Right Split Layout
  • Left side: occupies 80%-85% of the page width, displaying the main product interface content
  • Right side: occupies 15%-20% of the page width, displaying detailed explanatory documentation for the corresponding features
• Divider: There is a clear vertical divider between the left and right columns
• Scroll Synchronization: The left and right columns scroll independently without affecting each other

Connecting Line Functionality (Strictly Enforced)

Use SVG technology to draw connecting lines, ensuring the lines are clearly visible and do not obscure content.

Connecting Line Rules:

• Select 2-4 important elements in the left interface and add connecting lines pointing to the corresponding feature descriptions on the right
• The connecting line'sstarting pointmust precisely connect to the midpoint of the right edge of the left element
• The connecting line'sending pointmust precisely connect to the midpoint of the left edge of the corresponding explanatory text on the right
• The connecting lines use smooth Bezier curves, avoiding rigid right-angle turns
• The connecting line thickness is 2px

Interaction Effects:

• When the mouse hovers over a left element, the corresponding connecting line becomes thicker and highlighted
• When the mouse hovers over the explanatory text on the right, the corresponding connecting line and left element are also highlighted

Connecting Line Labels:

• Add a small number label next to each connecting line, corresponding to the number of the explanation on the right

Responsive Design Specifications

PC

• Maintain the above left-right split layout

Mobile

• Automatically switch to a top-bottom layout
• Display the main product interface at the top and the feature descriptions at the bottom
• The connecting line functionality is automatically hidden
• Display a short description directly below each element
• Provide a "Switch View" button, allowing the user to switch between "Interface Only" and "Interface + Description"

Technology Stack Requirements

1. Pure Front-End Implementation: Use pure HTML, CSS, and native JavaScript, without relying on any external frameworks
2. Styles: Use Tailwind CSS v3, introduced via CDN
3. Icons: Use the Font Awesome icon library, introduced via CDN
4. Code Structure：
   • Semantic HTML structure, using appropriate tags
   • CSS styles are inlined in the<style>tag
   • JavaScript code is inlined in<script>in the tag
   • All code is integrated into a single HTML file, with no external resources required

Styles and Visual Specifications

Color Scheme

• If the user specifies a color scheme, use the user-specified color scheme; otherwise, use the default color scheme below
• Primary color: blue #165DFF
• Secondary colors: light gray #F5F7FA, dark gray #333333
• Accent colors: green #00B42A(success state), red #F53F3F(error state)

Other Style Requirements

• The function description area on the right should use an amber color scheme to distinguish it from the content area on the left!
• Font: system default sans-serif font
• Spacing: use 8px as the base unit and maintain a consistent spacing system
• Shadows: use subtle shadows appropriately to enhance the sense of depth
• Overall style: clean, modern, professional product prototype style

Output Requirements

1. Output the complete HTML file code
2. Add a brief explanation at the beginning of the code to introduce the prototype's features and usage
3. Ensure that the start and target positions of all connecting lines are completely correct
4. Ensure normal display and interaction across different screen sizes

Notes

• Line calculation must be executed after DOM rendering is complete, using DOMContentLoaded and resize events to recalculate
• Ensure that the SVG's pointer-events-none does not block interaction with elements below
• When switching views on mobile, smooth transition animations are required
• All element IDs and data attribute names should be clear to facilitate positioning by the line-drawing script

Reference Content

• The generated HTML file should refer to assets/example.html