Claude Code needs both implementation context and design context. Put concrete repository conventions in CLAUDE.md, connect the permitted Perture Brand Page through its supported integration, and reference the actual components and tokens used by the product. Ask Claude Code to retrieve the relevant rules, inspect existing usages, and verify the required interface states before handoff.
- Your systemComponents + rules
- Coding agentRetrieve + reuse
- Working screenRender + review
Separate repository conventions from brand decisions
Project instructions should tell Claude Code where the implementation lives and how work is verified. Examples include the component import root, the token stylesheet, the form library, and the commands used by the project. These references keep the work grounded in the repository being edited.
Brand context describes the approved identity and interface rules: typography, colors, component families, spacing, states, and patterns. Perture organizes those decisions in a Brand Page for connected coding workflows. Use the two sources together; neither a local instruction file nor a remote context connection automatically establishes the full implementation of a component.*‡
| Reference | Useful information |
|---|---|
| CLAUDE.md | Repository paths, permitted scope, implementation conventions, and checks |
| Component source | Props, variants, state behavior, and working usages |
| Perture Brand Page | Approved brand assets, component references, and design rules |
| Task brief | The user's goal, content, required states, and acceptance criteria |
Confirm the connection before generating UI
MCP is a way for a host to connect to context and tools. The connected service still controls which information and operations the requesting account can access. Review the permissions relevant to your task; a read operation and an edit operation have different effects.†
- 01
Connect Perture using the current setup instructions for your Claude Code environment.
- 02
Confirm the selected Brand Page and the requesting account's access.
- 03
Ask Claude Code which context it retrieved for the task and which component source it can inspect.
- 04
If a required asset, component, or rule is unavailable, resolve that gap before requesting a complete screen.
Write an implementation brief with visible states
The brief names the work and the behavior to preserve. It also prevents a common omission: a generated screen may display a default state correctly but never show what happens during submission or failure. Provide realistic labels and data so these conditions are part of the implementation.
Use a small first task to test the mapping between the Brand Page and the repository. If a component reference points to a design artifact but does not include executable source, say so explicitly. A visual reference can guide review, but it should not be presented as a verified React implementation.
Use this product's connected Perture Brand Page.
Create the billing settings view using the existing page shell and form controls.
Inspect supported component props before editing.
Include current-plan, loading, validation-error, and confirmation states.
Keep plan-change behavior intact and stay within the named view.
Check keyboard use, narrow-screen layout, and the rendered result.Turn corrections into reusable decisions
When the result differs from the system, report the specific mismatch: the wrong variant, unsupported spacing, a missing focus state, or a replaced component. Fix the screen and clarify the source of the approved decision. Avoid adding every one-off screen preference to permanent project instructions.
For the next task, confirm that the corrected reference is still available to Claude Code. Perture helps make the system reusable across conversations, while the repository remains the place where runtime behavior and component APIs can be checked.‡