SuperAPI AI 工具集

stitch-ui-design-spec-bootstrap

前端与建站

查看项目

更新于 10-16 03:15

技能介绍

用途:该技能让 Bootstrap 设计规范可在 Stitch 屏幕生成流程中执行,仅当用户明确提及 Stitch 时才使用。触发关键词包括 bootstrap、bootstrap-vue、bs-vue、bs5,中文触发词含 bootstrap 风格、响应式布局(需上下文暗示 Bootstrap)。

主要能力:提供两种模式。前缀模式输出可直接粘贴的 [Hard constraints prefix],供 Stitch [Context] 使用,规定框架为 BootstrapVue(兼容 Vue 3 / Bootstrap 5),并固定设计令牌:颜色 Primary=#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 variant、size,禁用 button class="btn";表单用 b-form-group、b-form-input、b-form-select;卡片用 b-card;表格用 b-table striped hover。布局不变式要求移动优先响应式类和 d-flex 对齐工具。选择器模式输出 CONTRACT_SELECTION_JSON_V1 及最终 Stitch prompt,只注入所需的组件与状态片段。

使用方式:若用户要求美化、打磨、优化现有屏幕,或要求 selector / JSON / contracts.include / states.include,使用选择器模式;否则使用前缀模式。前缀模式仅返回一个代码块;选择器模式按顺序返回两个代码块,无额外说明文字。

限制:仅限明确提及 Stitch 时使用;参考来源为 references/contract.md、references/examples.md、references/official.md;官方文档内容暂未提供。