用途：在 Pencil（.pen 文件）中设计界面、页面或组件，并把设计转换为 React、Next.js、Vue、Svelte、HTML/CSS 等生产代码；也用于构建设计系统、同步设计令牌（Tailwind v4 @theme、shadcn/ui tokens）以及把现有代码导入 Pencil。
主要能力与规则：始终复用设计系统中已有的可复用组件，先通过 pencil_batch_get 以 patterns: [{ reusable: true }] 查找，再以 ref 实例插入并更新子节点；样式一律使用变量而非硬编码值，先调用 pencil_get_variables 读取令牌，代码中使用语义化 Tailwind 类（如 bg-primary、rounded-md），避免任意值语法；防止文本与子元素溢出，文本宽度用 fill_container，并用 pencil_snapshot_layout 的 problemsOnly: true 检测裁剪；每个区块完成后用 pencil_get_screenshot 做视觉验证；复用已有 logo、图标和图片，优先用 C() 复制而非重新生成；开始前必须加载 frontend-design 技能以获得审美方向。
使用方式：典型流程为先加载 frontend-design，再依次调用 pencil_get_editor_state、pencil_batch_get、pencil_get_variables、pencil_get_guidelines，可选使用风格指南工具，用 pencil_find_empty_space_on_canvas 找空间，用 pencil_batch_design 逐段构建，最后截图与布局检查。设计转代码时读取设计树，把可复用组件映射到 shadcn/ui 组件，使用语义化 Tailwind 类、CVA、cn() 与 Lucide 图标。
适用场景：.pen 文件设计、从设计生成代码、扩展设计系统、令牌同步、代码导入设计。
限制：资料未提供具体收费、价格、平台支持范围或效果数据；相关工具依赖 Pencil MCP 环境，缺失信息暂未提供。