Make interfaces feel deliberate through small, evidence-backed improvements. Preserve the project's stack, component library, tokens, density, and established visual language.
Workflow
- Resolve the requested screen, component, flow, and states.
- Read the project's interface rules, design tokens, and nearby components before judging the work.
- Inspect the rendered interface when visual or interaction behavior matters. Inspect source for the implementation behind each visible issue.
- Prioritize broken or unclear interaction states before decorative polish.
- Reuse existing components and tokens. Introduce a new primitive only when the project has no suitable one.
- Implement changes in the project's existing styling system.
- Verify default, hover, focus, active, disabled, loading, empty, error, and selected states where they exist.
For detailed checks, read only the reference relevant to the task:
- Read surfaces-and-icons.md for depth, borders, radii, imagery, and icon consistency.
- Read motion-and-states.md for transitions, feedback, reduced motion, and state completeness.
Quality bar
- Prefer one clear visual hierarchy over equal emphasis everywhere.
- Use borders for structure and state; use shadow only when elevation is meaningful.
- Keep nested radii visually concentric.
- Align icons optically when geometric centering looks wrong.
- Keep one icon family and a consistent stroke language per surface.
- Name exact transition properties; never use
transition: all. - Leave a static cue after motion ends. Motion must not be the only signal.
- Keep focus visible and preserve native interaction behavior.
- Avoid adding gradients, glass effects, glow, excessive rounding, or animation merely to make a screen look "designed."
DesainPakeAI projects
When the user explicitly requests DesainPakeAI MCP work, call get_project_context first and retain its revision. Read the design-quality guide before a substantial visual change. Preserve public component props, data-node-id, data-component, data-part, and data-action values. After mutations, run verify_preview and finish the page workflow required by the MCP.
Review and implementation
Treat a request to review, audit, or critique as read-only. Report one finding per root cause with evidence from both source and rendered behavior when relevant. Do not turn a preference for another aesthetic into a defect.
When implementation is requested, make the smallest coherent change, verify it, and summarize the result and any state that could not be checked.