pencil-renderer

Pencil 渲染器

通过 MCP 将美学 DNA 代码转换为 Pencil .pen 画框。

接口

输入：

• DNA 代码：[layout, color, typography, motion, density, background]
• 组件类型：hero | card | form | nav | footer | section | button | input
• 可选：名称、尺寸、父画框 ID

输出：

• .pen 文件中的画框 ID
• 渲染后画框的截图

工作流

1. 确保文档已就绪

// Check if editor open
mcp__pencil__get_editor_state({ include_schema: false })

// If no editor, open or create
mcp__pencil__open_document({ filePathOrTemplate: "new" })

2. 获取样式基础

// Get available style guide tags
mcp__pencil__get_style_guide_tags()

// Get style guide matching DNA mood
// Map DNA to relevant tags:
// - dark color → ["dark-mode", "moody"]
// - light color → ["light", "clean"]
// - spacious density → ["airy", "whitespace"]
// etc.
mcp__pencil__get_style_guide({ tags: [mapped_tags] })

3. 将 DNA 转换为 Pencil 属性

参考：references/dna-to-pencil.md

DNA 轴到 Pencil 属性的映射是确定性的。 示例：centered 布局 → alignItems: "center"、对称内边距

4. 执行设计操作

参考：references/batch-design-patterns.md

mcp__pencil__batch_design({
  filePath: "<path>.pen",
  operations: `
    frame=I(document, {type: "frame", name: "Hero-Brutalist", ...properties})
    heading=I(frame, {type: "text", content: "Headline", ...typography})
    // ... additional operations
  `
})

5. 捕获结果

// Screenshot for visual verification
mcp__pencil__get_screenshot({ nodeId: "frameId" })

6. 返回

Frame ID: [id]
DNA: [layout, color, typography, motion, density, background]

以及截图。

组件模板

类型	结构
hero	容器 + 主标题 + 副标题 + CTA 按钮
card	容器 + 图片区域 + 内容 + 操作
form	容器 + 标签 + 输入框 + 提交按钮
nav	容器 + 徽标 + 链接 + 操作
footer	容器 + 列 + 链接 + 法律信息
section	容器 + 标题 + 内容网格
button	画框 + 文本 + 图标槽位
input	画框 + 标签 + 字段 + 验证信息

DNA 转换速查

DNA 轴	主要 Pencil 属性
布局：居中	alignItems: "center"、相等的内边距
布局：不对称	偏移位置、不同间距
布局：便当盒式	跨度各异的网格
颜色：深色	深色填充、浅色前景
颜色：渐变	fill: {type: "linear", stops: [...]}
排版：强调展示	大号标题、高对比度
排版：简约	克制的字号、单一字体系列
密度：宽松	gap: 24-48、充足的内边距
密度：紧凑	gap: 8-16、紧凑的内边距
背景：纯色	单一填充颜色
背景：纹理	使用 G() 绘制图案/图片

约束

• 单一关注点：将 DNA 渲染为画框。不进行访谈或迭代。
• 需要 Pencil MCP：不可用时快速失败
• 确定性映射：相同的 DNA 始终生成相同的结构
• 可组合：由编排器调用，不直接面向用户

参考

• references/dna-to-pencil.md — 完整的轴映射
• references/batch-design-patterns.md — 常见操作序列
• aesthetic-system/references/dna-codes.md — DNA 轴定义

集成

由以下内容调用：

• design-exploration 编排器（Pencil 后端可用时）

组合：

• aesthetic-system（用于解读 DNA）