designer-ui

What problem does it solve?

Provides a structured, auditable workflow to turn wireframes and design briefs into production-ready atomic UI components and pixel-perfect HTML mockups, removing manual coordination between design and development and ensuring consistency with a project design charter.

Core Features & Use Cases

• Orchestration of Design Tasks: Analyze requests, decide required actions (charte, composition, atoms, molecules, mockups) and return an ordered plan.
• Atomic Design Generation: Decompose wireframes into atoms and molecules, create isolated Tailwind-based components, and maintain manifests.
• Design System & Gallery: Generate a graphic charter (charte), component library, and an interactive UI gallery (index.html) for previewing assets.
• Use Case: Given a new page wireframe, the Skill can generate the composition file, create missing atoms/molecules following the charte, assemble a pixel‑perfect mockup, update manifests, and register the result in the gallery.

Quick Start

Generate a high-fidelity HTML mockup for the home page from the provided wireframe, create any missing atoms or molecules according to the charte, update the manifests, and produce the UI gallery.