SuperAPI AI 工具集

stitch-ui-design-spec-vant

设计与创作

查看项目

更新于 10-16 03:16

技能介绍

用途:该技能把 Vant 4(Vue 3 / 移动端)设计规范变成可执行的 Stitch 提示词,仅在用户明确提到“Stitch”时使用。触发关键词包括 vant、vant4、vant-ui、vant ui,以及中文的“vant 风格”“vant 组件库”。

主要能力:提供两种模式。前缀模式输出可直接粘贴到 Stitch [Context] 的硬约束前缀,包含框架、设计令牌(主色 #1989fa、成功 #07c160、警告 #ff976a、危险 #ee0a24,页面背景 #f7f8fa、卡片 #ffffff,基础字号 14px,圆角 sm=2px、md=4px、lg=8px)、组件契约(布局用 van-row/van-col,容器用 van-config-provider,列表卡片用 van-cell-group inset,按钮用 van-button type="primary" round block,表单用 van-form/van-field/van-search/van-picker/van-date-picker,业务用 van-card/van-submit-bar/van-address-list/van-coupon-list,导航用 van-nav-bar/van-tabbar/van-sidebar/van-tabs,反馈用 van-action-sheet/van-swipe-cell/van-empty)以及布局不变量(移动优先 375px 基准、Flexbox 对齐、尊重安全区)。选择器模式先输出 CONTRACT_SELECTION_JSON_V1,再输出组装后的 Stitch 提示词,只注入所需的组件与状态片段。

使用方式:按用户意图选择模式。若用户要求美化、润色、改进现有界面,或要求 selector / JSON / contracts.include / states.include,则用选择器模式;否则用前缀模式。前缀模式只返回一个代码块;选择器模式按顺序返回两个代码块,不附加额外说明。

适用场景:为 Stitch 生成或优化 Vant 4 移动端界面提示词。

限制:仅在用户明确提到 Stitch 时使用;资料未提供安装命令、收费、价格或平台支持等更多信息。