用途:这是 Stitch UI 设计任务的入口编排技能,仅在用户请求中明确提到“Stitch”时使用,用于设计、创建或生成 UI 屏幕,并自主规划与执行设计工作流。
主要能力:先做工具可用性预检,判断走执行流程还是仅输出提示词流程;对任务分类(新建屏幕、优化美化);调用 stitch-ui-design-spec-generator 生成结构化设计规格 JSON(主题、设备、风格、模式);按命名设计系统匹配约束(如 uview-pro、uview、layui、bootstrap、element-plus、vant),支持 selector 与 prefix 两种模式;调用 stitch-ui-prompt-architect 组装符合优化提示词结构的提示词。
使用方式:工具可用时立即执行,依次调用 create_project、generate_screen_from_text、list_screens、get_screen 导出截图与 HTML 资源,并按固定模板输出交付报告;工具不可用时停止执行,只输出可复制粘贴的提示词,不伪造结果。提示词需包含 [Context]、[Layout]、[Components],应用级请求还需项目概述、设计系统(平台、主题、配色含 #hex、字体 px 与字重、组件样式)以及页面结构与功能。
适用场景:使用 Stitch 设计新屏幕、生成应用页面、优化已有屏幕并保持布局与信息架构。
限制:禁止伪造成功、禁止调用外部项目脚手架、禁止编写 Vue/React/HTML 代码;Stitch 项目是设计工作区而非代码仓库。