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.
Source episode · 26:00
How I AI: Cognition Labs CEO Scott Wu & Devin AI, the junior engineer that never sleepswith 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
Step by step
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.
After the steps
How to recover when the loop fails and where human judgment helps.
Recover
Keep building
Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.
Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.
Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.