Requirement to HTML

Problem

When a page requirement exists only as a verbal description, screenshot, or hand-drawn sketch, writing HTML directly can miss layout hierarchy, colors, component states, and interaction details, causing rework. This skill splits idea-to-page into a review-first workflow: turn raw input into a confirmable requirement checklist before coding.

How It Works

• Input analysis: supports text descriptions, reference images, or both; images are broken down into layout structure, palette, type hierarchy, component types, spacing, and alignment.
• Requirement structuring: produces a page overview, layout structure, component list, color scheme, font hierarchy, data content, and interaction notes, optionally with ASCII wireframes.
• Confirmation gate: does not start writing HTML until the user confirms the requirements, preventing implementation based on ambiguous understanding.
• File generation: after confirmation, creates a single, self-contained HTML file, usually with inline CSS and JS, minimal external CDN dependencies, and desktop support around 1280px to 1920px.
• Delivery: supports browser-panel preview and file attachment, making iteration easier.

Boundaries and Notes

It fits landing pages, forms, dashboards, and detail pages that can be expressed as a single runnable HTML file. If the image is unclear or the request is vague, it asks follow-up questions. For complex pages with more than 8 regions, it is better to confirm the overall layout first, then details. Charts default to pure CSS/SVG or lightweight inline approaches, with CDN libraries such as Chart.js only when explicitly requested. This is not a design-production tool; it converts existing ideas into runnable page prototypes.