SuperAPI AI 工具集

pencil-renderer

设计与创作

查看项目

更新于 10-16 03:41

技能介绍

用途:把美学 DNA 代码翻译成 Pencil .pen 框架,通过 MCP 完成渲染。输入为 DNA 代码(布局、颜色、字体、动效、密度、背景六个维度)与组件类型(hero、card、form、nav、footer、section、button、input),可选名称、尺寸、父框架 ID;输出为 .pen 文件中的框架 ID 与渲染截图。

主要能力:DNA 到 Pencil 属性的映射是确定性的,相同 DNA 始终产生相同结构。内置组件模板,如 hero 为容器加标题、副标题、CTA 按钮,card 为容器加图片区、内容、操作,form 为容器加标签、输入、提交等。

使用方式:先确认文档就绪,调用 mcp__pencil__get_editor_state({ include_schema: false }),无编辑器时用 mcp__pencil__open_document({ filePathOrTemplate: "new" }) 打开或新建;再获取样式基础,调用 mcp__pencil__get_style_guide_tags() 与 mcp__pencil__get_style_guide({ tags: [mapped_tags] });随后按 references/dna-to-pencil.md 将 DNA 映射为 Pencil 属性,按 references/batch-design-patterns.md 用 mcp__pencil__batch_design 执行设计操作;最后用 mcp__pencil__get_screenshot({ nodeId: "frameId" }) 截图验证并返回框架 ID、DNA 与截图。

适用场景:由 design-exploration 编排器在 Pencil 后端可用时调用,并组合 aesthetic-system 解释 DNA;面向编排器而非最终用户直接使用。

限制:只做 DNA 到框架的渲染,不进行访谈或迭代;依赖 Pencil MCP,不可用时快速失败;需参考 dna-to-pencil.md、batch-design-patterns.md 与 aesthetic-system/references/dna-codes.md。