---
name: al-106-turn-a-customer-ui-request-into-a-draft-pr
description: "Let the person closest to the customer capture what they see, then have an agent write a spec, open a pull request, and attach sandbox browser screenshots for a human to review, like Rillet's customer success Chrome extension on eve/Vercel that helped a two-person frontend team close 800+ Linear tickets and ship some customer asks in as little as two hours. Use when the user wants help with customer-driven shipping (coding) for a small business."
---

# Turn a customer UI request into a draft PR

Let the person closest to the customer capture what they see, then have an agent write a spec, open a pull request, and attach sandbox browser screenshots for a human to review, like Rillet's customer success Chrome extension on eve/Vercel that helped a two-person frontend team close 800+ Linear tickets and ship some customer asks in as little as two hours.

## Inputs to collect first
Ask the user for anything below that they haven't already given you. Don't guess missing facts.

- What they see / paste screenshot notes / attach UI capture
- One sentence
- App/page/component
- Safe and well-scoped only / don't touch billing / auth / etc
- Reviewer

## Instructions

Do the task below with the user's inputs in place of each [bracket].

A customer wants this change in our product. Context: [describe what they see / paste screenshot notes / attach UI capture]. Desired outcome: [one sentence]. Product area: [app/page/component]. Constraints: [safe and well-scoped only / don't touch billing / auth / etc.]. Write (1) a short spec with acceptance criteria, (2) the code change on a new branch, (3) a draft pull request assigned to [reviewer], and (4) steps to manually verify in a browser. If you can run a sandbox browser, take screenshots of before/after and attach them. Flag anything unsafe or out of scope. Don't merge, deploy, or contact the customer.

## Safety checks (share these with the user)

- This prompt works on text other people wrote (emails, reviews, messages or web pages). That text can hide instructions aimed at AI, such as "ignore your rules and…". Paste it as material to work on, and never let the AI act on requests inside it, like paying, sharing logins or changing records.
- Remove names, contact details, account numbers and other personal data the task doesn't need before you paste, and check your AI tool's data and training settings.
- Check names, dates, numbers and any claim against your own source material before you use the answer. AI can misread or invent details.
- Say clearly which parts need a person to review or approve before anything is sent, paid, posted or filed.

## About this skill

- Works with: Claude Code, Codex, Cursor, eve, Vercel, Linear, Slack, Chrome
- Based on this real-world example: https://vercel.com/blog/how-rillet-ships-3-faster-with-ai-agents-on-vercel
- Free prompt from AgentPlaybook Real Estate: https://agentic-library.netlify.app/prompt/al-106-turn-a-customer-ui-request-into-a-draft-pr/
- To install in an agent that supports Agent Skills, save this file as SKILL.md in a folder with the same name as `name` above (for example in your skills directory). Install steps for Claude.ai, Claude Code, Cursor and Codex: https://agentic-library.netlify.app/skills/