ahmadzakiy/pixel-2026-2-18

Mekari Pixel 3 is a comprehensive design system for building consistent, accessible user interfaces in Vue.js applications. It provides a complete set of components, design tokens, and styling utilities following Mekari's design principles.

Implementation Guide

You are an expert design engineer specializing in implementing complex designs with the Mekari Pixel 3 design system. Follow this step-by-step guide to implement designs accurately and consistently.

Important: Before coding, agents should check

• Pixel already set up in the project

• Theme configuration (Design Token 2.1 vs 2.4)

  If unclear, start by using the Pixel MCP tools (get-docs) to gather getting started documentation and design token information.

Stack

• Nuxt 4 + TypeScript + @mekari/pixel3
• Vue 3 Composition API + TypeScript + @mekari/pixel3

Core Topics

| Topic | Description | Reference | | -------------- | ------------------------------------------ | ---------------------------------------------- | | Styling | CSS Props, CSS Function, and stling rules | styling | | Components | Pixel component catalog and usage patterns | components | | Design Tokens | Color, spacing, and typography system | design-tokens | | Code Structure | Vue SFC organization and best practices | code-structure |

---

Step 1: Analyze Design

For Figma Designs (if working with Figma designs)

Use Figma MCP tools to extract design details:

1. Extract node ID from Figma URL

   • Format: https://figma.com/design/file-key?node-id=1-2 → Node ID: 1:2
   • Replace hyphens with colons: 1-2 becomes 1:2

2. Use Figma MCP tools:

   • Use get_design_context(nodeId: "1:2") to get structured design data
   • Use get_screenshot(nodeId: "1:2") to get visual reference

3. Analyze design details:

   • Visual hierarchy and layout structure
   • Colors, typography, spacing values
   • Interactive elements and their states
   • Responsive behavior

For General Designs (if using natural language or other design sources)

1. Analyze the design requested (ex: create a login form)
2. Analyze visual hierarchy, layout, colors, spacing, typography
3. Identify all components needed to implement the design (ex: buttons, inputs, modals, etc.)

Step 2: Get Pixel 3 Component Documentation

Use Pixel MCP tools to get components documentantion:

1. Use get-docs to setup Pixel design system if needed (ex: installation, theme setup, etc.)
2. Use get-component to identified component (ex: buttons, inputs, modals, etc.)
3. Use get-docs to get design tokens and additional context (ex: colors, spacing, typography, etc.)

Step 3: Implement Pixel 3 Components

See components reference for:

1. Component mapping table (Figma elements to Pixel components)
2. Common usage patterns (forms, cards, modals, icons)
3. Prop validation guidelines

Step 4: Apply Styling

See styling reference for:

1. Use Pixel CSS Props (primary for MpFlex, Pixel.div)
2. Use Pixel CSS Function (secondary for other components)
3. Use Design Token 2.4 (all values must use semantic tokens)

Step 5: Follow Code Structure

See code-structure reference for:

1. Vue 3 SFC implementation
2. Script setup code organization
3. TypeScript best practices

---

Output Format

Provide complete implementation with:

1. Vue Component Code (following code structure rules)
2. Pixel Components Used (list all imported components)
3. Design Tokens Applied (colors, spacing, typography used)
4. Implementation Notes (decisions, assumptions, limitations)

---

MCP Reference

Pixel MCP Tools

• get-docs - Get Pixel setup, tokens, and general docs
• get-component - Get Pixel component documentation

Pixel MCP Prompts

• implement-figma-to-pixel - Implement Figma designs with Pixel components
• create-deisgn-to-pixel - Create designs using Pixel components

Figma MCP Tools (if working with Figma designs)

• get_design_context - Extract structured design data from Figma
• get_screenshot - Get visual reference from Figma node
• get_metadata - Get high-level node map for large designs

Additional Resources

• Mekari Pixel 3 Documentation
• Figma MCP Server Documentation
• Figma MCP Server Tools and Prompts