mcpField
P
pixel

pixel

github.com/ahmadzakiy设计与 UI037 次安装24 周前更新
代码仓库

关于 pixel

pixel 是面向 Vue/Nuxt 界面开发的设计系统技能，指导开发者使用 Pixel 3 组件和设计令牌生成可运行代码。它涵盖从 Figma 设计映射组件、核验属性到样式检查的流程。

主要功能

  1. 01将需求映射为 Pixel 组件
  2. 02核验组件属性、插槽和事件
  3. 03使用设计令牌与 CSS Props
  4. 04依据 Figma 设计生成界面
  5. 05输出可运行的 Vue/Nuxt 代码

适用场景

  1. 01根据文字描述构建表单或界面
  2. 02将 Figma 设计转换为 Vue 组件
  3. 03确认组件属性和样式用法

MCP 相关

使用 Pixel MCP 查询文档、组件、图标、模式和模板；也可使用 Figma MCP 获取设计上下文与截图。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ahmadzakiy/skills --skill pixel

安装后在 Claude Code 中输入/pixel确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
code-structure.md
components.md
design-tokens.md
setup.md
styling.md

详细介绍

Pixel Design System

以低干扰的工作流构建 Pixel 3 UI：验证设置、梳理 UI、验证属性、应用令牌安全的样式，并交付可运行的 Vue/Nuxt 代码。

黄金规则

  1. 从 @mekari/pixel3 导入 UI。
  2. 优先使用 Pixel 基元，而不是原生 HTML 等效元素。
  3. 使用 MpFormControl 包裹已验证的字段。
  4. 猜测之前，先通过 Pixel MCP get-component 验证属性。
  5. 优先使用设计令牌，而不是原始颜色、间距或排版值。
  6. 对 MpFlex、MpScrollbar、MpSkeleton 和 Pixel.* 使用 CSS Props；仅在 CSS Props 不可用时使用 css()。
  7. 保留项目当前启用的令牌模式，避免随意混用 2.1 和 2.4。

示例

文本请求 → 组件输出

输入：“创建一个包含电子邮件和密码字段以及提交按钮的表单” **预期：**使用 MpFormControl 包裹 MpInput 组件，MpButton 设置 variant="primary"，从 @mekari/pixel3 正确导入组件，并使用令牌设置间距。

Figma → 代码

**输入：**包含分页的数据表格 Figma 节点 **预期：**获取节点 ID → 调用 get_design_context → 映射为 MpTable + MpPagination → 通过 get-component 验证属性 → 输出可运行的 SFC。

工作流

1. 验证设置

如果不确定软件包设置、插件注册或令牌模式，请阅读 references/setup.md。

2. 分析请求
  • 对于 Figma 工作：提取节点 ID，然后使用 Figma MCP 的 get_design_context 和 get_screenshot。
  • 对于文本请求：将 UI 拆分为各个区块、状态、交互和响应式行为。
  • 编码前先制定简短的组件计划。
3. 将 UI 映射到 Pixel 组件

阅读 references/components.md，然后通过 Pixel MCP get-component 验证任何不确定的组件。

4. 安全地应用样式
5. 生成最终代码

编写最终的 Vue/Nuxt 组件前，请阅读 references/code-structure.md。

MCP 用法

Pixel MCP
  • get-docs - Pixel 设置、启用主题、设计令牌和实现指南
  • get-component - 组件示例、属性、插槽和事件
  • get-icon-name - 图标名称和用法
  • get-pattern - Pixel UI 模式和代码示例
  • get-template - Pixel 模板和代码示例

可用提示词：

  • implement-figma-to-pixel - 生成将 Figma 设计转换为 Pixel 3 组件的实现指南
  • create-design-to-pixel - 根据自然语言 UI 描述生成 Vue 组件代码

如果不确定设置或令牌模式，请先使用 get-docs，然后使用 get-component 查询组件 API、使用 get-pattern 查询可复用的 UI 模式，并使用 get-template 获取起始布局。

Figma MCP
  • get_design_context 用于获取结构、资源和代码提示
  • get_screenshot 用于视觉验证
  • 仅在导航大型节点时使用 get_metadata

输出要求

始终提供：

  1. 完整、可运行的 Vue/Nuxt 代码
  2. 所需的导入
  3. 使用的组件
  4. 令牌和样式决策
  5. 假设、缺漏或尚未解决的 API 问题

QA 检查清单

  • 已确认设置和令牌模式，或明确说明相关情况
  • 对存在不确定性的属性，已参照 Pixel 文档进行验证
  • 布局和间距符合预期层级
  • 在相关情况下已处理悬停、禁用、错误和加载状态
  • 没有多余的内联样式或不必要的原始值

参考资料加载指南

  • 如果不确定项目是否就绪，请在编码前阅读 setup.md。
  • 映射 UI 或解决属性问题时，请阅读 components.md。
  • 选择令牌或间距比例时，请阅读 design-tokens.md。
  • 添加布局或自定义视觉规则时，请阅读 styling.md。
  • 生成最终代码前，请立即阅读 code-structure.md。

评论

支持 Markdown