用途：在 Pencil 的 .pen 文件中设计界面、页面或组件，并把设计转换为可维护的前端代码；也用于构建设计系统、同步设计令牌（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（reusable）、pencil_get_variables、pencil_get_guidelines、pencil_find_empty_space_on_canvas、pencil_batch_design 逐区块构建、pencil_get_screenshot 与 pencil_snapshot_layout 验证。设计到代码时调用 pencil_get_guidelines 的 code 与 tailwind 主题，读取设计树，映射到 shadcn/ui 组件，使用 CVA、cn() 与 Lucide 图标。
适用场景：.pen 文件设计、设计系统扩展、设计令牌同步、代码导入与多端响应式代码生成。
限制：资料未提供具体收费、价格、平台支持范围与效果数据；部分细节需参考其 references 文档。