High-Fidelity Product Prototype Generator

Problem

Product reviews often stall at text specs or rough wireframes: pages look generic, lack industry character, and offer no clickable path through real states. It is hard to judge layout, state coverage, edge cases, error feedback, and business flow until something interactive exists.

How It Works

The skill classifies input into three modes: clear industry context, a product description without an obvious industry, or a vague prototype request. It infers or asks for the industry, product type, core features, and target users, then applies an industry-specific visual spec for color, typography, corner radius, shadows, and motion. The output is a standalone .html file built with HTML5, TailwindCSS, vanilla JavaScript, Lucide Icons, and inline Mock Data, so it can run directly in a browser without a build step. Before delivery, it checks that the core path works, empty/loading/success/failure states exist, responsiveness works, micro-interactions feel deliberate, visual hierarchy is clear, and generic blue-purple gradients are avoided.

Boundaries and Notes

This is useful for validating UI layout, interaction feedback, and industry-consistent visuals. It does not replace real backends, authentication, payment, security review, or performance testing. Industry-specific design specs may limit output if the reference file is missing, CDN assets require external network access, and deployment depends on the surrounding environment, so the artifact should be treated as a prototype rather than a production page.