用途
本技能用于初始化一套基于 Bootstrap 规范的设计系统，具体包括两部分：一是设置全局颜色与设计令牌，二是在 .pen 文件中创建初始的组件库框架（Components Overview）。它适合在需要从零搭建 Bootstrap 风格设计系统、并希望将其落到 Pencil 文件中的场景使用。
使用前提与触发条件
技能带有明确约束：只有在用户显式提到「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 文档划分区块：
布局（Layout）：Container、Grid、Stack
内容（Content）：Typography、Images、Tables
表单（Forms）：Form、Input、Select、Checkbox、Radio、Switch、Range
组件（Components）：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
工具类（Utilities）：Borders、Colors、Display、Flex、Float、Spacing
使用 Auto Layout 组织框架，每次 batch_design 调用最多执行 25 个操作。
最佳实践
- 对照 Bootstrap 文档（Sass/CSS 变量）核验令牌值。
- 使用 set_variables 时，除非明确要求完整重置，否则使用 replace: false。
- 组件概览框架使用 Auto Layout。
适用场景
需要在 Pencil 中搭建 Bootstrap 规范的设计系统、统一颜色与基础令牌、并生成组件库初始框架的初始化任务。
限制与暂未提供的信息
技能内容明确了触发约束（必须显式提及 Pencil 与 Bootstrap）以及工具调用顺序与操作上限。关于收费、价格、平台支持范围、实际渲染效果等信息，资料中暂未提供。
关键词
pencil、bootstrap、design system、init、variables、components
参考文件
- references/contract.md – 设计令牌与组件命名。
- references/official.md – 官方文档链接。
- references/examples.md – 示例 PENCIL_PLAN。
- references/components.md – 组件规范。