AI coding agents can generate a working interface quickly. The harder problem is getting the result to match a specific visual target: the same hierarchy, spacing, typography, component proportions, and visible states—without breaking the application that already exists.
That is the problem Reference-Driven UI Engineering is designed to address. It is an open Agent Skill for reference-led frontend work, including screenshots, reference images, public webpages, Figma frame exports, mockups, and wireframes.
Start with evidence, not assumptions
The workflow begins by inspecting the supplied reference and the target project. The agent maps the page structure, visual hierarchy, typography, colors, spacing, components, and visible interaction states before implementation.
The reference is treated as the visual specification—not a loose mood board. The Community Edition has one fidelity target: reproduce the supplied reference as closely as the available evidence allows.
Three ways to use the workflow
- New Build: create an interface in the project's existing stack from a supplied visual reference.
- Existing UI Redesign: update the visual layer while preserving routes, features, data, permissions, and workflows.
- Hybrid: redesign selected screens and build new screens in the same project.
Visual inspection is a hard requirement
A reliable reference-led workflow needs visual access to both sides: the original reference and the rendered implementation. Text descriptions, DOM inspection, OCR, or pixel-difference numbers alone cannot replace direct visual review.
If the active agent cannot inspect both, the Skill instructs it to stop before modifying the target project. This gate prevents a false claim of visual accuracy when the required evidence is unavailable.
Implement, compare, correct
- Inspect the project's framework, routes, components, styles, and conventions.
- Map the reference's geometry, hierarchy, typography, colors, spacing, and visible states.
- Implement with reusable components and the project's existing conventions.
- Capture the implementation at the same viewport and state as the reference.
- Inspect both visuals, correct the largest differences, and check responsive behavior and accessibility.
Install the free Community Edition
The public repository contains the free Community Edition, licensed under MIT. Install it with the Vercel Skills CLI in a compatible environment:
npx skills add tgkjuanda/reference-driven-ui-engineering
The active coding agent must still have the ability to inspect the reference and rendered screenshots. Installation alone does not grant browser, terminal, filesystem, or visual capabilities.
The Community Edition focuses on reference-faithful implementation and essential visual checks. Premium is a separate edition intended to add creative interpretation, deeper Figma workflows, motion design, and expanded QA. Premium access and purchase are not open yet.
Explore the project
Read the documentation, inspect the workflow, and share feedback through the public repository.