Turn a written product requirements document into a reviewable visual mockup before any code is written.
Convert an approved mockup into a structured spec of colors, spacing, and component tree.
Have an AI coding agent implement a frontend page against that structured spec instead of guessing.
Use screenshot-based acceptance testing to catch and fix visual differences in a targeted way.
| jason904/ui-skill-lab | eadmin2/jarvis_ai | greatvishal27-rc/ai-resume_analyzer | |
|---|---|---|---|
| Stars | 56 | 56 | 56 |
| Language | Python | Python | Python |
| Setup difficulty | moderate | hard | moderate |
| Complexity | 3/5 | 4/5 | 2/5 |
| Audience | developer | developer | vibe coder |
Figures from each repo's GitHub metadata at analysis time.
Best suited to code-implementable UIs like dashboards and admin panels, less effective for pages relying on complex photo composites.
UI Skill Lab is a collection of reusable skills (plugins) for AI coding agents such as Codex and Claude Code that addresses a common problem: when you hand a written product requirements document directly to an AI agent and ask it to build a frontend page, the agent often produces something that functions but does not match the intended visual direction. The team cannot see the target until the code is already written, and the AI tends to fall back on generic layouts like dashboards, sidebars, and KPI card grids. The project proposes a three-step approach. First, turn the written requirements into a visual mockup or wireframe that the team can review and discuss before any code is written. Second, convert that approved visual into a structured specification covering tokens (colors, spacing, typography), layout rules, and a component tree. Third, let the AI agent implement the page against that specification, then verify using browser screenshots and fix differences in a targeted, structured way. Seven skills handle the seven stages where drift typically occurs. One generates image-generation prompts from the requirements document. Another extracts a structured visual spec from an approved image. A third reviews the extracted spec to catch errors before they reach the codebase. A fourth supplements the spec with product-level design system rules (responsive behavior, component states). A fifth checks whether generated code actually matches the visual spec. A sixth does screenshot-based acceptance testing. The seventh produces a structured fix-tasks file for targeted corrections that do not ripple into the whole page layout. The repository also includes three quality gates: a skill source contract validator, an end-to-end pipeline gate, and a visual reconstruction benchmark that computes image similarity metrics with anti-cheat detection. The README notes this workflow suits code-implementable UIs (dashboards, SaaS admin panels, mobile screens, landing pages) and is less effective for pages that depend heavily on cutout assets or complex photo composites. The project is MIT licensed and the README is written in Chinese.
A set of seven AI agent skills that turn a written product spec into a visual mockup, a structured spec, and a verified frontend build.
Mainly Python. The stack also includes Python.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.