agentappbuilderBlog
Prototyping apps with coding agents
Guides on prototyping app screens with Claude Code, mapping user flows, handing designs to coding agents and keeping them safe.
Claude Code
- Claude Code auto mode blocked an action? What to do next
Why Claude Code auto mode blocked an action, what the classifier reads, and three fixes: a precise message, a trusted host, or a retry in /permissions.
- Claude Code MCP server setup: add, scope, check and remove
Add a Claude Code MCP server step by step: the claude mcp add command, local, project or user scope, passing a key safely, checking status, removing it.
- Claude Code prompts for UI that produce better screens
Claude Code prompts for UI work: the five parts of a good request, prompts to copy, and how to get every screen state before the code changes.
- llms.txt: writing a guide that coding agents actually follow
How to write an llms.txt that coding agents such as Claude Code follow: the sections, exact commands, rules, consent steps, and a template to start from.
- How to prototype app screens with Claude Code before coding
Prototype app screens with Claude Code before it edits your code: list the states, get one HTML frame per state, review versions, then apply your pick.
- Prototype a mobile app with AI: a Claude Code workflow
How to prototype a mobile app with AI: phone-sized HTML frames for every screen state, linked by taps and reviewed before Claude Code writes native code.
Prototyping
- How to compare design variants before writing any code
A method for design variants before code: how many to make, what should differ, how to judge them side by side, and a prompt for your coding agent.
- HTML prototype vs Figma: what fits a developer-led team
HTML prototype vs Figma for teams where developers and coding agents build the UI: strengths, limits, a comparison table and a way to decide per project.
- In-app tutorial design: a practical screen by screen method
In-app tutorial design, step by step: choose the right pattern, teach by doing, draw every state of every step, and let users skip and come back.
- How to prototype an onboarding flow with an AI agent
A step by step way to prototype an onboarding flow with an AI coding agent: define activation, map steps and states, write the prompt, review, iterate.
- The UI states checklist: empty, loading, error and more
A UI states checklist for every screen: empty, loading, partial, error, success and edge cases, with examples and a prompt to draft each state.
- User flow diagram: map every screen state, not just pages
How to draw a user flow diagram where each node is a screen state (empty, loading, error, success) and each arrow names the action behind it.
- Wireframe vs mockup vs prototype: what AI agents change
Wireframe vs mockup vs prototype: what each fidelity level answers, what it costs, and how AI coding agents change which one you start with.
Design to code
- Design handoff for AI agents: what a coding agent needs
What a design handoff for AI agents should contain: every screen state, tokens, real content, behavior and a definition of done, with a template to paste.
- Design tokens as CSS variables an AI coding agent can follow
Set up design tokens as CSS variables that an AI coding agent follows: two layers, clear names, themes, a repository rule and a check for raw values.
- Visual prototype editing: you tweak it, the agent codes it
Visual prototype editing with a coding agent: which changes to make by hand, how to record them as data, and how the agent maps them to your code.
- Figma auto layout to flexbox: a practical CSS mapping
Map Figma auto layout to flexbox: direction, gap, padding, alignment, Hug, Fill and Fixed, with a full table, a worked card example and common pitfalls.
- How to implement a prototype with an AI agent, step by step
Implement a prototype with an AI agent: settle the chosen version, plan against your codebase, build state by state, verify against the prototype, ship.
- How to keep your prototype and code in sync over time
Keep the prototype and code in sync: one source of truth per moment, chosen and shipped versions for each screen state, and captures of the running app.
Screens of a real app
- Demo data for screenshots of your app: a privacy checklist
A privacy checklist for demo data for screenshots: what leaks into app captures, how to seed safe fake data, and what to check before an image is shared.
- How to document app screens before a legacy redesign
Document app screens of a legacy product before you redesign it: an inventory of screens and states, captures, flow maps and the rules the code enforces.
- Screenshot every page with Playwright, state by state
How to screenshot every page with Playwright: list routes and states, sign in once, wait for the right element, and save one stable image per state.
- Visual review vs visual regression testing: when to use each
Visual regression testing catches the UI changes you did not intend; visual review judges the ones you did. How each works, and one loop that uses both.
Security
- Prompt injection in AI agent tools, and how to limit it
How prompt injection reaches AI agent tools through files, pages and tool results, and the design rules that limit the damage when an agent is fooled.
- iframe sandbox for untrusted HTML, with a strict CSP
Render untrusted HTML safely with an iframe sandbox and a Content Security Policy: which tokens to allow, the pair to avoid, and a setup you can copy.
- API keys for AI agents: how to give access with a scoped key
API keys for AI agents, done safely: scope each key to one resource, store only a hash, keep it out of the chat and the repo, and revoke it in one step.
Workflow
- How to write a change request for an AI coding agent
Write a change request for an AI coding agent that it gets right the first time: point at one place, state the scope, define done. Templates included.
- An AI agent product manager workflow on one shared prototype
An AI agent product manager workflow: how a PM reviews screens, picks variants and approves changes on one prototype while a developer's agent codes.
- How to review AI generated UI changes before you merge
A two-pass method to review AI generated UI changes: check every affected screen state first, then read the diff for scope, reuse and regressions.
- How to ship app changes with an AI agent and keep control
Ship app changes with an AI agent without losing control: decide before code, build on a branch with checks, and gate push, merge and deploy yourself.
- Prototype version history: why every change is a version
Why prototype version history beats editing in place: what each version should record, active vs implemented, change notes, and rolling back safely.
- Vibe coding workflow: a review loop for UI without chaos
A vibe coding workflow that stays under control: plan first, review screens before code, apply small batches, check the diff and keep every version.