用途
该技能用于初始化一套基于 Bootstrap 规范的设计系统，具体目标是在 .pen 文件中设置全局调色板，并创建初始的组件库框架。它适用于需要从 Bootstrap 规范出发搭建新设计系统的场景。
使用约束：仅当用户明确提到“Pencil”和“Bootstrap”，或正在编排 Pencil 设计系统初始化任务时，才使用此技能。
主要能力
该技能输出一个 PENCIL_PLAN，随后由 Agent 按顺序调用 Pencil MCP 工具：open_document、set_variables、batch_design，可选调用 get_screenshot。
第一步：初始化变量（set_variables）
使用 mcp__pencil__set_variables 注册 Bootstrap 设计令牌，遵循 .pen 文件 schema。
主色 / 语义色：
- bs-primary: #0d6efd
- bs-secondary: #6c757d
- bs-success: #198754
- bs-danger: #dc3545
- bs-warning: #ffc107
- bs-info: #0dcaf0
- bs-light: #f8f9fa
- bs-dark: #212529
正文与边框：
- bs-body-color: #212529
- bs-border-color: #dee2e6
- bs-border-radius: 0.375rem (6px)
字体：
- bs-font-size-base: 1rem (16px)
如需更多令牌，可从 Bootstrap Sass 变量 / CSS 变量中补充。
第二步：创建组件概览结构（batch_design）
使用 mcp__pencil__batch_design 创建一个“Components Overview”框架，其分区基于 Bootstrap 文档：
布局：Container、Grid、Stack
内容：Typography、Images、Tables
表单：Form、Input、Select、Checkbox、Radio、Switch、Range
组件：Accordion、Alert、Badge、Breadcrumb、Buttons、Button group、Card、Carousel、Close button、Collapse、Dropdowns、List group、Modal、Navbar、Offcanvas、Pagination、Placeholders、Popovers、Progress、Scrollspy、Spinners、Toasts、Tooltips
工具类：Borders、Colors、Display、Flex、Float、Spacing
使用 Auto Layout 组织框架。每次 batch_design 调用最多保持 25 个操作。
使用方式
该技能本身输出 PENCIL_PLAN，实际执行由 Agent 调用 Pencil MCP 工具完成，调用顺序为 open_document、set_variables、batch_design，可选 get_screenshot。
最佳实践
- 对照 Bootstrap 文档（Sass/CSS 变量）核验令牌值。
- 使用 set_variables 时设置 replace: false，除非请求完整重置。
- 组件概览框架使用 Auto Layout。
关键词
pencil、bootstrap、design system、init、variables、components
参考资料
- references/contract.md – 设计令牌与组件命名。
- references/official.md – 官方文档链接。
- references/examples.md – 示例 PENCIL_PLAN。
- references/components.md – 组件规范。
限制
资料未提供该技能的收费、价格、平台支持范围、实际效果或完整使用步骤等更多信息。