pixel

Original：🇺🇸 English

Translated

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill to implement designs from Figma nodes or natural language to Vue 3 component or Nuxt pages using Mekari Pixel 3 design system. Requires a working Pixel MCP server connection.

1installs

Sourceahmadzakiy/skills

Added on2026-02-10

NPX Install

npx skill4agent add ahmadzakiy/skills pixel

SKILL.md Content

View Translation Comparison →

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:

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
```
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
Analyze design details:
- Visual hierarchy and layout structure
- Colors, typography, spacing values
- Interactive elements and their states
- Responsive behavior

For complete Figma implementation workflow, use the figma-implement-design skill.

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

Analyze the design requested (ex: create a login form)
Analyze visual hierarchy, layout, colors, spacing, typography
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:

Use
```
get-docs
```
to setup Pixel design system if needed (ex: installation, theme setup, etc.)
Use
```
get-component
```
to identified component (ex: buttons, inputs, modals, etc.)
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:

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

Step 4: Apply Styling

See styling reference for:

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

Step 5: Follow Code Structure

See code-structure reference for:

Vue 3 SFC implementation
Script setup code organization
TypeScript best practices

Output Format

Provide complete implementation with:

Vue Component Code (following code structure rules)
Pixel Components Used (list all imported components)
Design Tokens Applied (colors, spacing, typography used)
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