pencil-to-code

pencil-to-code 是一个聚焦单一职责的设计转代码技能：把 Pencil 的 .pen 设计稿导出为生产可用的 React + Tailwind 代码。输入为 .pen 的 frame ID 或文件路径，输出为带 Tailwind 类的 React 组件与 Tailwind 主题配置；目标框架默认 React，也支持 Vue、HTML，并可选填写组件名、输出路径。工作流为：先用 mcp__pencil__batch_get 读取 frame 节点树（readDepth、resolveInstances、resolveVariables），用 mcp__pencil__get_variables 获取设计变量；再把 .pen 变量转换为 Tailwind @theme 主题令牌；随后按节点类型映射组件，例如 frame 映射为 flex 容器、text 映射为标题或段落、ref 映射为可复用组件、rectangle/ellipse/image 映射为对应元素；接着生成 TSX 组件与 Tailwind 类；最后可选通过 mcp__pencil__get_screenshot 截图并与渲染结果做视觉比对验证。转换规则覆盖布局（如 layout: horizontal 转 flex flex-row）、8 点间距、排版字号与字重、颜色、圆角等。输出包含生成组件清单、主题配置位置与验证结果。限制方面：它只做导出，不修改设计；默认输出 React + TypeScript，采用 Tailwind 4 的 @theme CSS-first 令牌体系，注重语义化 HTML 与可检测的 aria 属性。该技能可作为 design-exploration 编排器的下游被调用，也可直接使用，并依赖 design-tokens 组织主题结构。资料未提供安装方式、收费、价格与平台支持等细节。