Hand Devin a tightly scoped interface problem with the route, state, viewport, screenshot, and acceptance criteria it needs, then use before and after evidence plus browser checks to iterate quickly without losing responsive or accessible behavior.
Download the skill for this workflow. Version 1.0.1.
with Claire Vo
Scott describes frontend fixes as an especially effective Devin task: attach a screenshot, specify the visual change, let Devin find and edit the code, then review its before and after screenshots in the same workflow.
A focused pull request with the requested interface change, before and after screenshots at representative widths, and evidence that interaction, accessibility, and neighboring states still work.
AI software engineer by Cognition Labs
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Reproduce the issue and capture the exact route, user state, viewport, interaction, and current screenshot. Annotate the element and describe the desired result in observable terms, including mobile and interaction states.
Assign the narrow task to Devin with the screenshot and repository conventions. Require it to identify the component, use existing tokens, preserve behavior, and provide evidence at the named viewports.
Fix [UI problem] on [route] in [state] at [viewport]. Current evidence: [screenshot]. Expected result: [observable criteria]. Use the existing components and tokens in [references]. Preserve keyboard, focus, loading, empty, and error behavior. Stay within [scope]. Run [tests] and return before and after screenshots for [viewports].
Compare the screenshots at full size and exercise the actual interface. Check alignment, wrapping, overflow, type, color, focus, keyboard use, loading, empty, error, and the neighboring component states that share the changed code.
Give feedback as a small list of observable differences, then let Devin revise the same branch. Inspect the final diff and run the required tests and build before accepting the change.
Turn an idea into a PRD, user stories, and a plan.
How to recover when the loop fails and where human judgment helps.
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
