Interface Craft Gate
Use this Note when UI work needs design craft, not only functional correctness.
Required local evidence
memi agent brief . --intent "Improve this interface" --json
memi diagnose .
memi ux audit . --json
memi craft audit . --json
memi tokens --from ./src --report
If a running route or screenshot is available, audit that surface too:
memi diagnose http://localhost:3000
memi ux audit http://localhost:3000 --json
memi craft audit http://localhost:3000 --json
Craft dimensions
Review these before patching:
- focusing mechanism: what the user sees and does first
- visual weight: contrast, density, and priority
- typographic hierarchy: type scale, weight, line length, and scan order
- spacing rhythm: repeated layout gaps and component padding
- color intentionality: semantic color use, states, and token fit
- component cohesion: variants, radius, strokes, icons, and shared anatomy
- responsive resilience: breakpoints, overflow, touch context, and long content
- user context care: stakes, confidence, recovery, and time pressure
Patch rule
Do not describe a UI as polished unless the handoff names:
- the evidence commands run,
- the craft dimensions that changed,
- the Atomic Design level touched,
- the shadcn/Tailwind primitives reused,
- the verification command that should run next.
Sources
1---2name: interface-craft-gate3description: Make interface craft a required design-agent gate before and after UI changes.4---56# Interface Craft Gate78Use this Note when UI work needs design craft, not only functional correctness.910## Required local evidence1112```bash13memi agent brief . --intent "Improve this interface" --json14memi diagnose .15memi ux audit . --json16memi craft audit . --json17memi tokens --from ./src --report18```1920If a running route or screenshot is available, audit that surface too:2122```bash23memi diagnose http://localhost:300024memi ux audit http://localhost:3000 --json25memi craft audit http://localhost:3000 --json26```2728## Craft dimensions2930Review these before patching:3132- focusing mechanism: what the user sees and does first33- visual weight: contrast, density, and priority34- typographic hierarchy: type scale, weight, line length, and scan order35- spacing rhythm: repeated layout gaps and component padding36- color intentionality: semantic color use, states, and token fit37- component cohesion: variants, radius, strokes, icons, and shared anatomy38- responsive resilience: breakpoints, overflow, touch context, and long content39- user context care: stakes, confidence, recovery, and time pressure4041## Patch rule4243Do not describe a UI as polished unless the handoff names:44451. the evidence commands run,462. the craft dimensions that changed,473. the Atomic Design level touched,484. the shadcn/Tailwind primitives reused,495. the verification command that should run next.5051## Sources5253- https://github.com/sarveshsea/memi54- https://www.npmjs.com/package/@memi-design/cli55- https://github.com/sarveshsea/design-sandbox
memi-design