pencil-design-skill
专为Pencil设计工具打造的AI助手，实现UI设计与代码生成一体化。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：pencil-design-skill。 它的用途是：专为Pencil设计工具打造的AI助手，实现UI设计与代码生成一体化。 完整的 Skill 内容见：https://321skill.com/skills/pencil-design-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“在Pencil中为我设计一个登录页面，包含邮箱密码输入框和提交按钮，并生成React代码。” 它会首先检查当前.pen文件中的可复用组件（如按钮、输入框），使用设计变量来设置样式，确保布局正确后生成对应的、使用Tailwind v4语义化工具类的React组件代码。
介绍
Pencil Design Skill 是一款专为Pencil设计工具（处理.pen文件）打造的AI助手技能，旨在解决UI设计与前端开发之间的工作流断层问题。它能够帮助设计师和开发者直接在Pencil中设计出符合生产规范的界面，并一键生成高质量、可维护的React、Vue、Next.js等前端框架代码。
该技能通过一系列严格的规则来确保设计质量与代码质量。使用时，AI会遵循四大核心规则：强制复用设计系统中的现有组件、使用设计变量而非硬编码值、防止布局与文本溢出、以及对每个设计区块进行视觉验证。这确保了从设计稿到代码的转换过程高效且可靠。
它非常适合UI/UX设计师、前端开发工程师以及全栈开发者，特别是那些希望将设计系统与代码库紧密同步、追求设计稿高保真还原、并希望自动化重复设计到代码转换工作的团队或个人。
与同类设计辅助工具或通用代码生成技能相比，Pencil Design Skill的独特之处在于它深度集成于Pencil工具链，并非一个通用的画布工具。它强制推行一套基于最佳实践（如设计令牌、组件实例化）的约束性工作流，确保生成的设计文件本身结构良好，从而直接输出生产级代码，而非仅仅进行视觉模仿或生成一次性的、难以维护的代码片段。
核心特点
深度绑定Pencil设计工具与MCP工具链，通过强制性的设计规则（如组件复用、变量使用）确保设计文件本身具备生产质量，从而直接生成遵循Tailwind v4语义化类和设计系统规范的干净、可维护代码。
注意事项
仅适用于使用Pencil设计工具（.pen文件）的场景，不兼容Figma、Sketch等其他设计平台。
常见问题
Pencil Design Skill能生成哪些框架的代码？
支持生成React、Next.js、Vue、Svelte以及标准的HTML/CSS代码。
使用这个Skill需要提前准备设计系统吗？
最佳实践是已有或在Pencil中构建设计系统（组件库、变量），Skill会强制复用它们以保障一致性；若无，也可在创建新组件时逐步构建。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/pencil-design-skill/raw/index.md 读取 pencil-design-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/pencil-design-skill/raw/index.md（查看排版版本）