pixel

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

Mekari Pixel 3是一套用于在Vue.js应用中构建一致、可访问用户界面的综合性设计系统。它遵循Mekari的设计原则，提供了完整的组件库、设计令牌和样式工具。

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.

你是一名专业的设计工程师，擅长使用Mekari Pixel 3设计系统实现复杂设计。请遵循以下分步指南，精准且一致地完成设计实现。

重要提示： 在编码前，Agent需检查

项目中是否已配置Pixel
主题配置（Design Token 2.1 还是 2.4）
若不确定，请先使用Pixel MCP工具（
```
get-docs
```
）获取入门文档和设计令牌相关信息。

Stack

技术栈

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

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

主题	描述	参考链接
样式设计	CSS Props、CSS函数及样式规则	styling
组件使用	Pixel组件目录及使用模式	components
设计令牌	颜色、间距及排版系统	design-tokens
代码结构	Vue单文件组件（SFC）组织及最佳实践	code-structure

Step 1: Analyze Design

步骤1：分析设计

For Figma Designs (if working with Figma designs)

针对Figma设计（若基于Figma设计进行开发）

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.

使用Figma MCP工具提取设计细节：

从Figma URL中提取节点ID
- 格式示例：
```
https://figma.com/design/file-key?node-id=1-2
```
  → 节点ID：
```
1:2
```
- 将连字符替换为冒号：
```
1-2
```
  转换为
```
1:2
```
使用Figma MCP工具：
- 调用
```
get_design_context(nodeId: "1:2")
```
  获取结构化设计数据
- 调用
```
get_screenshot(nodeId: "1:2")
```
  获取视觉参考
分析设计细节：
- 视觉层级与布局结构
- 颜色、排版、间距数值
- 交互元素及其状态
- 响应式表现

如需完整的Figma实现工作流，请使用 figma-implement-design 技能。

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

步骤2：获取Pixel 3组件文档

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.)

使用Pixel MCP工具获取组件文档：

若需要，使用
```
get-docs
```
完成Pixel设计系统的配置（例如：安装、主题设置等）
调用
```
get-component
```
获取目标组件（例如：按钮、输入框、模态框等）的文档
使用
```
get-docs
```
获取设计令牌及其他相关信息（例如：颜色、间距、排版等）

Step 3: Implement Pixel 3 Components

步骤3：实现Pixel 3组件

See components reference for:

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

请查看组件参考文档获取以下内容：

组件映射表（Figma元素到Pixel组件的对应关系）
常见使用模式（表单、卡片、模态框、图标）
属性验证指南

Step 4: Apply Styling

步骤4：应用样式

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)

请查看样式参考文档获取以下内容：

使用Pixel CSS Props（主要用于MpFlex、Pixel.div）
使用Pixel CSS函数（次要用于其他组件）
使用Design Token 2.4（所有值必须使用语义化令牌）

Step 5: Follow Code Structure

步骤5：遵循代码结构规范

See code-structure reference for:

Vue 3 SFC implementation
Script setup code organization
TypeScript best practices

请查看代码结构参考文档获取以下内容：

Vue 3单文件组件（SFC）实现方式
Script Setup代码组织规范
TypeScript最佳实践

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)

请提供完整的实现内容，包含：

Vue组件代码（遵循代码结构规则）
使用的Pixel组件（列出所有导入的组件）
应用的设计令牌（使用的颜色、间距、排版）
实现说明（决策、假设、限制）

MCP Reference

MCP参考

Pixel MCP Tools

Pixel MCP工具

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

```
get-docs
```
- 获取Pixel的配置、令牌及通用文档
```
get-component
```
- 获取Pixel组件的文档

Pixel MCP Prompts

Pixel MCP指令

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

```
implement-figma-to-pixel
```
- 使用Pixel组件实现Figma设计
```
create-design-to-pixel
```
- 使用Pixel组件创建设计

Figma MCP Tools (if working with Figma designs)

Figma MCP工具（若基于Figma设计进行开发）

```
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

```
get_design_context
```
- 从Figma提取结构化设计数据
```
get_screenshot
```
- 从Figma节点获取视觉参考
```
get_metadata
```
- 获取大型设计的高层级节点映射