To keep Cursor interface work consistent, identify the existing component and token source, use project rules for concrete repository conventions, and connect the permitted Perture context for approved design decisions. Ask the agent to inspect current component usage, compose the screen from those components, and verify the required states and responsive behavior.
- Your systemComponents + rules
- Coding agentRetrieve + reuse
- Working screenRender + review
Map the system to files the agent can use
Start by identifying the source of a button, input, modal, and page shell. Record their import paths and one working usage for each. Find the semantic color and typography tokens, and distinguish library components from screen-specific wrappers.
This map is more useful than a list of hex colors because it connects the visual decisions to executable behavior. For example, an approved input may already contain labeling, validation, and focus behavior. Recreating only its border and padding discards that behavior even when the result looks similar.†
Use project rules for implementation constraints
Cursor project rules can hold repository instructions and apply them to relevant files. Keep the instructions short and specific: where components are exported, which tokens to use, which existing pattern to follow, and which changes require review. Confirm the rule is applicable to the files being edited.
A useful rule also explains what to do when the system has no matching component. Ask for the missing requirement and propose a scoped extension. Without this instruction, an agent may invent a parallel component library to finish the screen.*
Example rule content — adapt to the real repository:
Use the approved exports from src/components/ui.
Use semantic tokens from src/styles/tokens.css.
Inspect one existing page using the requested pattern.
Keep existing accessibility and form behavior.
Identify missing variants before creating new primitives.
Verify all requested states and the narrow-screen layout.Connect the approved brand context
Use the current Perture setup instructions for Cursor and select the appropriate Brand Page. Ask the agent to retrieve relevant design rules and references for the task, then compare those references with the files it can inspect in the repository.
If the brand specifies a component that is not installed in the current project, the connection has not solved the implementation gap. Install or implement the component through an explicitly scoped task, or choose an approved alternative. Do not treat a context response as proof that a component exists in code.‡
Compose and verify one screen
Perture helps reuse the approved context across interface tasks. Project rules keep the repository constraints close to the code. The combination works best when a reviewer can trace a generated UI decision back to an existing component or an explicit design rule.
- 01
Name the user's goal and the existing page pattern to follow.
- 02
Provide realistic content and the required empty, loading, error, and success states.
- 03
Ask the agent to show the component mapping and inspect their source.
- 04
Implement within the agreed files using supported props and tokens.
- 05
Check the rendered page, keyboard behavior, and small viewport, then record concrete gaps.