What problem does it solve?
Building visually polished frontend applications from scratch often results in generic, template-looking UIs or implementations that drift from the intended design. This Skill enforces a design-first workflow where an image-generated concept becomes a binding spec, then verifies the coded result against it until it matches.
Core Features & Use Cases
- Image-Gen Concepting: Generates section-by-section design concepts for landing pages, dashboards, games, and app screens before any code is written.
- Design System Extraction: Converts accepted concepts into tokens, typography scales, component families, and icon inventories for consistent implementation.
- Fidelity Verification: Compares browser screenshots against the accepted concept using a written mismatch ledger, blocking handoff until the implementation passes agency-level review.
- Use Case: Ask for a new SaaS landing page; the Skill generates per-section design concepts, gets your approval, implements the page in React + Vite, and iterates on visual mismatches until the rendered page matches the approved design.
Quick Start
Use the frontend-app-builder skill to design and build a landing page for my new SaaS product.
