A Figma design or exported reference, assets, tokens, and a target app.
A page that follows the source design and stays usable across screen sizes and input methods.
Compare the implemented screen at desktop and mobile sizes and exercise keyboard and error states.
Guessing values from a design thumbnail gives you a page that only looks close. This skill guides your coding agent from prerequisites to a checked result: one page that follows the source design and stays usable across screen sizes and input methods.
The agent inspects one frame's layout, typography, tokens, assets and interactive states through a Figma integration or an explicit handoff. It maps the design to your existing components, records intentional differences and responsive behavior, and sets shared content width and gutters before positioning sections. It builds semantic sections with shared tokens for spacing, colors and type, and gives meaningful images alternative text.
It then compares the running page at the design viewport and tests phone and tablet sizes, keyboard focus, long text and empty states, fixing structural mismatches before small visual details. You need access to the source design, permission to use its assets, and a running web app. Provider accounts, model weights, GPU compute and hosting are not included.
No reviews yet.
Sign in to rate this Vibe.
Carry typography, spacing, and interaction from design into your app.