pencil-renderer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Pencil Renderer

Pencil 渲染器

Translate aesthetic DNA codes into Pencil .pen frames via MCP.

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

Interface

接口

Input:

DNA code:

[layout, color, typography, motion, density, background]

Component type:

hero | card | form | nav | footer | section | button | input

Optional: Name, dimensions, parent frame ID

Output:

Frame ID in .pen file
Screenshot of rendered frame

输入：

DNA代码：

[layout, color, typography, motion, density, background]

组件类型：

hero | card | form | nav | footer | section | button | input

可选：名称、尺寸、父框架ID

输出：

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

Workflow

工作流程

1. Ensure Document Ready

1. 确保文档就绪

javascript

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

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

javascript

// 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 Style Foundation

2. 获取风格基础

javascript

// 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] })

javascript

// 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. Translate DNA to Pencil Properties

3. 将DNA转换为Pencil属性

Reference:

references/dna-to-pencil.md

DNA axis → Pencil property mapping is deterministic. Example:

centered

layout →

alignItems: "center"

, symmetric padding

参考：

references/dna-to-pencil.md

DNA轴与Pencil属性的映射是确定性的。例如：

centered

布局 →

alignItems: "center"

、对称内边距

4. Execute Design Operations

4. 执行设计操作

Reference:

references/batch-design-patterns.md

javascript

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
  `
})

参考：

references/batch-design-patterns.md

javascript

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. Capture Result

5. 捕获结果

javascript

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

javascript

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

6. Return

6. 返回结果

markdown

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

Plus screenshot image.

markdown

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

外加截图图片。

Component Templates

组件模板

Type	Structure
`hero`	Container + headline + subhead + CTA buttons
`card`	Container + image area + content + actions
`form`	Container + labels + inputs + submit
`nav`	Container + logo + links + actions
`footer`	Container + columns + links + legal
`section`	Container + heading + content grid
`button`	Frame + text + icon slot
`input`	Frame + label + field + validation

类型	结构
`hero`	容器 + 标题 + 副标题 + CTA按钮
`card`	容器 + 图片区域 + 内容 + 操作项
`form`	容器 + 标签 + 输入框 + 提交按钮
`nav`	容器 + Logo + 链接 + 操作项
`footer`	容器 + 列 + 链接 + 法律声明
`section`	容器 + 标题 + 内容网格
`button`	框架 + 文本 + 图标插槽
`input`	框架 + 标签 + 输入字段 + 验证

DNA Translation Quick Reference

DNA转换快速参考

DNA Axis	Key Pencil Properties
Layout: centered	`alignItems: "center"` , equal padding
Layout: asymmetric	Offset positions, varied gaps
Layout: bento	Grid with varied spans
Color: dark	Dark fill, light foreground
Color: gradient	`fill: {type: "linear", stops: [...]}`
Typography: display-heavy	Large heading sizes, high contrast
Typography: minimal	Restrained scale, single family
Density: spacious	gap: 24-48, generous padding
Density: compact	gap: 8-16, tight padding
Background: solid	Single fill color
Background: textured	G() for patterns/images

DNA轴	关键Pencil属性
Layout: centered	`alignItems: "center"` , 相等内边距
Layout: asymmetric	偏移位置、可变间距
Layout: bento	可变跨度的网格
Color: dark	深色填充、浅色前景
Color: gradient	`fill: {type: "linear", stops: [...]}`
Typography: display-heavy	大标题尺寸、高对比度
Typography: minimal	克制的比例、单一字体族
Density: spacious	gap: 24-48、充足内边距
Density: compact	gap: 8-16、紧凑内边距
Background: solid	单一填充色
Background: textured	G() 用于图案/图片

Constraints

约束条件

Single concern: Render DNA → frame. No interview, no iteration.
Pencil MCP required: Fails fast if unavailable
Deterministic mapping: Same DNA always produces same structure
Composable: Called by orchestrators, not users directly

单一关注点：仅负责将DNA渲染为框架，不包含交互、迭代
需要Pencil MCP：如果不可用则快速失败
确定性映射：相同DNA始终生成相同结构
可组合：由编排器调用，而非直接由用户调用

References

参考资料

```
references/dna-to-pencil.md
```
— Complete axis mapping
```
references/batch-design-patterns.md
```
— Common operation sequences

aesthetic-system/references/dna-codes.md

— DNA axis definitions

```
references/dna-to-pencil.md
```
— 完整轴映射
```
references/batch-design-patterns.md
```
— 常见操作序列

aesthetic-system/references/dna-codes.md

— DNA轴定义

Integration

集成

Called by:

```
design-exploration
```
orchestrator (when Pencil backend available)

Composes:

```
aesthetic-system
```
(for DNA interpretation)

调用方：

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

组合对象：

```
aesthetic-system
```
（用于DNA解析）