Guides
UI design guides for coding agents
Practical guides with worked examples, copyable prompts and exact setup steps, for anyone shipping web and iOS interfaces with Claude Code, Cursor, Codex or GitHub Copilot.
Agent workflows
Step-by-step guides for getting better UI out of a specific coding agent.
- Claude Code UI DesignShort CLAUDE.md rules, one reference question and checking the rendered result.Read the guide
- Cursor UI DesignScoped project rules, MCP setup and fixing a card form's error states.Read the guide
- Codex UI DesignAGENTS.md plus DESIGN.md for consistent screens, and safe token setup in Codex.Read the guide
- GitHub CopilotIssues written as briefs, scoped UI instructions, the no-ui-slop skill and MCP setup.Read the guide
Choose your tools
What a design MCP server does and when it's worth connecting one.
Design and review
Brief your agent before it builds, and check the result before you ship it.
- UI Design Prompt BuilderFree tool: answer a few questions and get a brief your coding agent can build from.Open the tool
- Coding Agent UI Checklist10 checks with a real test each, pass/fail results and a report to paste back to your agent.Read the guide
- GitHub ActionFree: flags inert controls, missing states, new colors and accessibility basics in every pull request.Read the guide
Reference libraries
Real apps and websites to learn from, free to browse.
Put it to work
Connect your agent in two minutes with the setup prompt, or start by browsing the library. Browsing is free; connecting your agent comes with a plan.