SuperAPI AI 工具集

stitch-ui-design-spec-bootstrap

设计与创作

查看项目

更新于 10-15 21:48

技能介绍

用途:让 Bootstrap 设计规范在 Stitch 中可执行。约束:仅当用户明确提到 Stitch 时才使用本技能。

两种模式:前缀模式输出可供 Stitch [Context] 直接粘贴的硬约束前缀;选择器模式先输出 CONTRACT_SELECTION_JSON_V1,再输出仅注入所需组件/状态片段的拼装提示词。选择器模式用于美化/打磨既有界面,或用户要求 selector、JSON、contracts.include、states.include;否则用前缀模式。

主要能力与规范:框架为 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,不用 button 加 btn 类;表单用 b-form-group/b-form-input/b-form-select;卡片用 b-card;表格用 b-table。布局不变量:移动优先响应式类与 d-flex 对齐工具。

触发关键词:bootstrap、bootstrap-vue、bs-vue、bs5,以及中文“bootstrap 风格”等(仅用于触发)。事实来源为 references/contract.md、examples.md、official.md。

选择器模式输出顺序固定为两个代码块:契约选择 JSON 与最终 Stitch 提示词(含 [Context]、[Layout]、[Components])。

使用流程与限制:先澄清意图并做预检,明确目标、输入、约束、成功标准与失败边界;未经授权不执行写入、付费、发布或不可逆动作;证据缺失时标记为 NOT_VERIFIED;仅在用户给定范围内工作,不适用时按技能名称交接。价格、平台与效果等资料暂未提供。