designer-ui

To generate atomic UI components from wireframes, the skill decomposes wireframes into isolated atoms and molecules, enforces design tokens and Tailwind constraints, and assembles pixel-perfect HTML mockups while updating component manifests.

Atomic design generation for HTML mockups is the process of breaking down wireframes into base atoms and molecules, assembling full-page mockups, enforcing design system tokens, and validating component manifests to maintain UI consistency.

Yes, you can enforce Tailwind and Preline constraints to build a design system. The workflow validates component manifests, applies these specific CSS framework constraints, and generates a graphic charter to ensure all UI atoms and molecules remain visually consistent.

To create an interactive UI gallery for component preview, the workflow orchestrates the generation of atoms, molecules, and mockups, then automatically registers and compiles these assets into an index.html file for interactive visual previewing.

Yes, this atomic design workflow requires a graphic charter. It uses the charter alongside wireframes and component manifests to produce atoms, molecules, and full-page mockups while validating design tokens to ensure project-wide visual consistency.

The best way to maintain a component manifest during UI design is to automate updates through an orchestration process that validates design tokens, tracks newly created atoms and molecules, and registers mockups automatically after each composition.