# Pixel

> Build Mekari Pixel 3 UI in Vue 3/Nuxt from Figma or text. Use when implementing components, validating props, applying design tokens, or checking token mode (2.1 vs 2.4).

- Skill: `pixel-vibe/pixel` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add pixel-vibe/pixel`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pixel-vibe/pixel/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: pixel-vibe (https://skillmd.com/u/pixel-vibe)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pixel-vibe/pixel

---


# 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

**Input:** "Create a form with email and password fields and a submit button"
**Expected:** MpFormControl wrapping MpInput components, MpButton with variant="primary", proper imports from @mekari/pixel3, tokens used for spacing.

### Figma → Code

**Input:** Figma node of a data table with pagination
**Expected:** Get node ID → call get_design_context → map to MpTable + MpPagination → validate props via get-component → output runnable SFC.

## Workflow

### 1. Verify Setup

Read [references/setup.md](references/setup.md) if package setup, plugin registration, or token mode is unclear.

### 2. Analyze the Request

- For Figma work: extract the node ID, then use Figma MCP `get_design_context` and `get_screenshot`.
- For text requests: break the UI into sections, states, interactions, and responsive behavior.
- Produce a short component plan before coding.

### 3. Map UI to Pixel Components

Read [references/components.md](references/components.md), then validate any uncertain component with Pixel MCP `get-component`.

### 4. Apply Styling Safely

- Read [references/design-tokens.md](references/design-tokens.md) when choosing color, spacing, or typography.
- Read [references/styling.md](references/styling.md) when deciding between CSS Props and `css()`.

### 5. Produce Final Code

Read [references/code-structure.md](references/code-structure.md) before writing the final Vue/Nuxt component.

## MCP Usage

### Pixel MCP

- `get-docs` - Pixel setup, enable theme, design tokens, and implementation guides
- `get-component` - Component example, props, slots, and events
- `get-icon-name` - Icon names and usage
- `get-pattern` - Pixel UI patterns and code examples
- `get-template` - Pixel templates and code examples

Available prompts:

- `implement-figma-to-pixel` - Generate an implementation guide for converting Figma designs to Pixel 3 components
- `create-design-to-pixel` - Generate Vue component code from a natural-language UI description

Use `get-docs` first when setup or token mode is unclear, then use `get-component` for component APIs, `get-pattern` for reusable UI patterns, and `get-template` for starter layouts.

### Figma MCP

- `get_design_context` for structure, assets, and code hints
- `get_screenshot` for visual verification
- `get_metadata` only for large-node navigation

## Output Contract

Always produce:

1. Complete runnable Vue/Nuxt code
2. Required imports
3. Components used
4. Token and styling decisions
5. Assumptions, gaps, or unresolved API questions

## QA Checklist

- Setup and token mode confirmed or explicitly called out
- Props verified against Pixel docs where uncertainty existed
- Layout and spacing match the intended hierarchy
- Hover, disabled, error, and loading states handled where relevant
- No stray inline styles or unnecessary raw values

## Reference Loading Guide

- Read `setup.md` before coding if project readiness is uncertain.
- Read `components.md` when mapping UI or resolving prop issues.
- Read `design-tokens.md` when selecting tokens or spacing scale.
- Read `styling.md` when adding layout or custom visual rules.
- Read `code-structure.md` immediately before final code generation.