Pixel Design System

Build Pixel 3 UI with a low-noise workflow: verify setup, map the UI, validate props, apply token-safe styling, and ship runnable Vue/Nuxt code.

Golden Rules

1. Import UI from @mekari/pixel3.
2. Use Pixel primitives before raw HTML equivalents.
3. Wrap validated fields in MpFormControl.
4. Verify component's props with Pixel MCP get-component before guessing.
5. Verify icon name with Pixel MCP get-icon-name before guessing.
6. Use CSS Props for MpFlex, MpScrollbar, MpSkeleton, and Pixel.*, use css() only when CSS Props are unavailable.
7. Prefer design tokens over raw color, spacing, or typography values.
8. Preserve the project's active token mode instead of mixing 2.1 and 2.4 ad hoc.

Examples

Text request → Component output