SuperAPI AI 工具集

stitch-mcp-generate-screen-from-text

设计与创作

查看项目

更新于 10-16 09:49

技能介绍

用途:调用 Stitch MCP 工具 generate_screen_from_text,根据文本描述生成高保真 UI 屏幕或线框图。仅当用户明确提到“Stitch”时使用;典型场景包括描述界面并要求 Stitch 生成、请求设计/生成/创建页面、提供具体视觉要求(如深色模式、蓝色按钮)、可视化线框或概念,以及处于 stitch-ui-designer SOP 第 5 步。触发语如“用 Stitch 设计一个页面”“Stitch 生成 UI”“用 Stitch 画一个登录页”。

主要能力:支持参数 projectId(必填,纯数字 ID,不带 projects/ 前缀)、prompt(必填)、deviceType(可选:MOBILE 默认、DESKTOP、TABLET、SMART_WATCH)、modelId(可选:GEMINI_3_PRO 推荐质量、GEMINI_3_FLASH 速度)。

使用方式:调用 generate_screen_from_text,传入 projectId、prompt 及可选参数。prompt 需按“[Device] [Mode] [Screen Type]. [Style]. [Layout]. [Components].”结构丰富,而非直接使用原始输入。示例:Mobile High-Fidelity login screen. Cyberpunk aesthetic. Dark mode. Neon blue accents. Center-aligned vertical stack. Glitch-effect Logo. Input fields with glowing borders. Primary 'Jack In' button.。设备类型需与描述匹配,例如不要在 MOBILE 请求“侧边栏”。

最佳实践:细化组件(如 Email、Password 与眼睛切换图标),明确颜色(如 Emerald Green、#FF5733),使用真实占位文本(如 Welcome back, Alice),避免 Lorem Ipsum。

输出处理:generate_screen_from_text 返回会话信息(如 sessionId、outputComponents),可能不直接返回截图;生成完成后用 list_screens(projectId 格式为 projects/{id})获取屏幕,再用 get_screen 以选定 screenId 获取截图或 html 资源。

限制:该技能生成视觉设计,不生成实现代码,勿与编码类技能混淆;仅限明确提及 Stitch 时使用,缺失 projectId 或 prompt 无法调用。其他如具体收费、平台支持等暂未提供。