Communitygithub.com

chiroro-jr/pencil-design

使用 Pencil 设计 UI(.pen 文件)并从中生成生产就绪代码。适用于处理 .pen 文件、在 Pencil 中设计屏幕或组件、或从 Pencil 设计生成代码。触发于涉及 Pencil、.pen 文件、设计到代码的工作流或使用 Pencil MCP 工具进行 UI 设计的任务。

pencil-design 是什么?

该技能使 AI 代理能够与 Pencil UI 设计工具生态进行交互,处理专有的 .pen 文件以创建屏幕和组件。它支持从设计直接生成生产就绪代码,弥合了设计原型与开发实现之间的鸿沟。该技能适用于 Cursor、Codex 和 Claude Code 等平台,利用 MCP 工具(如 createDesign、updateDesign 和 readDesign)读取、修改和导出 Pencil 文件。用户可以在 Pencil 中可视化设计 UI,让 AI 根据草图或提示生成对应的 .pen 文件,并通过代码生成命令将设计转换为 HTML、React 或 Vue 等框架代码。此工作流特别适合快速原型设计和设计迭代,确保 UI 规范与生成代码之间的一致性和可追溯性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chiroro-jr/pencil-design-skill/tree/main/skills/pencil-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

pencil-design 是做什么的?

使用 Pencil 设计 UI(.pen 文件)并从中生成生产就绪代码。适用于处理 .pen 文件、在 Pencil 中设计屏幕或组件、或从 Pencil 设计生成代码。触发于涉及 Pencil、.pen 文件、设计到代码的工作流或使用 Pencil MCP 工具进行 UI 设计的任务。

相关技能