When AI-generated UI looks generic, first check whether the coding agent can access your actual components, their import paths and props, and the rules that connect them. A brand description or screenshot alone leaves implementation decisions open. Reuse the existing component source, define the supported states and layouts, then review the rendered screen against the same system. Perture makes that approved context available inside connected AI coding workflows.
- Your systemComponents + rules
- Coding agentRetrieve + reuse
- Working screenRender + review
Find the missing information before rewriting the prompt
A request such as ‘make this match our brand’ rarely identifies which Button component to import, which radius token applies to a panel, or whether a form needs a compact variant. If the agent cannot locate those decisions, it may build plausible substitutes. The output can compile and still differ from the product.
Inspect one generated screen. List the elements that were recreated: buttons, cards, text fields, navigation, typography, and icons. For each, ask whether a matching implementation already exists and whether the agent received its source or a precise reference to it. This distinguishes missing context from an actual gap in the design system.
| Symptom | What to check | Useful correction |
|---|---|---|
| A new button style | Existing component path and variants | Import the approved Button and use a supported variant |
| Near-matching colors | Token names and semantic roles | Use the existing surface, text, and action tokens |
| Correct screenshot, wrong behavior | Interaction states and component API | Use the runtime component and exercise its states |
| A different layout on every screen | Grid, spacing, and page patterns | Reference an existing page pattern and its responsive rules |
Provide a component contract, not only a visual example
A useful component reference includes the import path, allowed props, default state, variants, and constraints. Include an existing usage example. If a screenshot shows a loading state, identify the prop or state transition that produces it. Give the agent enough information to use the component without inventing its API.
For a new signup screen, the scope might be: use the existing page shell, FormField, Button, and typography tokens; preserve validation behavior; change only the new route and its composition. If a required component is missing, ask the agent to report that gap before implementing a new primitive.†
Example task — replace the example paths with your repository's real paths:
Build the signup screen using the approved components in src/components/ui.
Inspect their source and existing usage before editing.
Reuse our typography, spacing, and color tokens.
Include default, invalid, submitting, and success states.
Report missing components instead of silently recreating them.
Stay within the signup route and its directly required files.Review both the implementation and the experience
A passing build is useful evidence about the implementation, but it does not establish visual fidelity. A screenshot is useful evidence about appearance, but it does not prove interaction behavior. Keep both forms of review in the workflow.
- 01
Check imports and props. Confirm the screen uses the intended components and supported variants.
- 02
Exercise the states. Test loading, errors, empty data, and disabled controls with realistic content.
- 03
Inspect responsive behavior. Look at narrow and wide viewports, long labels, and overflow.
- 04
Use the keyboard. Check focus visibility, navigation order, and the action each control performs.
- 05
Compare the rendered screen with the approved system. Record the concrete mismatch and its expected behavior.
Where Perture fits
Perture organizes your approved brand and design system in a Brand Page and makes the permitted context available to connected coding agents. This gives the next interface task a reusable reference instead of a new, manually reconstructed brand briefing.
The practical starting point is one real screen with existing components. Connect the workflow, ask the agent to retrieve the system, build within a bounded scope, and review the result. Use the problems found in that task to improve the component references and rules before expanding to more screens.
For one founder or designer, Perture Solo includes one Brand Page and the official plugins. For a team that needs sharing, Pro MCP editing, and the included implementation, Perture Pro provides the broader workflow. Choose the plan that matches who will maintain and use the system.*