SuperAPI AI 工具集

stitch-ui-design-spec-bootstrap

设计与创作

查看项目

更新于 10-16 03:15

技能介绍

用途:该技能把 Bootstrap 设计规范变成可在 Stitch 中执行的两种输出模式。仅当用户明确提到 Stitch 时使用。触发关键词包括 bootstrap、bootstrap-vue、bs-vue、bs5,以及“bootstrap 风格”等(中文关键词仅用于触发)。

主要能力:前缀模式输出可直接粘贴到 Stitch [Context] 的 [Hard constraints prefix],包含框架(BootstrapVue,兼容 Vue 3 / Bootstrap 5)、设计 Token(主色 #0d6efd、Secondary #6c757d、Success #198754、Danger #dc3545、Warning #ffc107、Info #0dcaf0;间距强制使用 m-、p-、gap-* 工具类,刻度 1=0.25rem、2=0.5rem、3=1rem、4=1.5rem、5=3rem;圆角 rounded、rounded-pill、rounded-circle;阴影 shadow-sm、shadow、shadow-lg)、组件契约(布局用 b-container、b-row、b-col,禁用原生 CSS grid;按钮用 b-button,禁用 button class="btn";表单用 b-form-group、b-form-input、b-form-select;卡片用 b-card;表格用 b-table)及布局不变量(移动优先响应式类、d-flex 对齐)。选择器模式先输出 CONTRACT_SELECTION_JSON_V1,再输出组装好的 Stitch 提示词,仅注入所需组件与状态片段。

使用方式:根据用户意图选择模式。若用户要求美化、打磨、优化现有界面,或要求 selector / JSON / contracts.include / states.include,则用选择器模式;否则用前缀模式。前缀模式只返回一个代码块;选择器模式严格按顺序返回两个代码块,且不添加额外说明文字。真实来源为 references/contract.md、references/examples.md、references/official.md。

限制:仅限明确提及 Stitch 时使用;具体价格、收费、平台支持范围等资料未提供。