用途:分析 Stitch 项目中的屏幕与设计资产,综合出一份名为 DESIGN.md 的“语义设计系统”文件,作为提示 Stitch 生成与既有设计语言一致的新界面的“事实来源”。Stitch 通过“视觉描述”加具体颜色值来理解设计。
主要能力:提取项目标识与 ID;根据截图和 HTML 结构定义整体氛围;映射配色(描述性名称+十六进制码+功能角色);把 border-radius 等技术值翻译为形状描述;描述阴影与层级;按固定结构输出 Markdown,包含视觉主题与氛围、配色与角色、排版规则、组件样式(按钮、卡片/容器、输入/表单)、布局原则。
使用方式:需具备 Stitch MCP Server 访问权限、至少含一个已设计屏幕的 Stitch 项目,以及 Stitch 有效提示指南(https://stitch.withgoogle.com/docs/learn/prompting/)。通过 MCP 工具检索:先运行 list_tools 发现命名空间前缀;用 [prefix]:list_projects(filter: "view=owned")查找项目并提取 Project ID;用 [prefix]:list_screens 查找屏幕;用 [prefix]:get_screen 获取截图、HTML 代码、尺寸与设备类型等;用 web_fetch 或 read_url_content 下载 HTML 并解析 Tailwind 类、自定义 CSS 与组件模式;用 [prefix]:get_project 获取 designTheme 等元数据。最后按指定结构生成 DESIGN.md。
适用场景:需要为 Stitch 项目沉淀统一设计语言、让后续生成界面保持风格一致时。
限制:依赖 Stitch MCP Server 与已有设计屏幕;资料未提供具体收费、价格、平台支持范围或效果保证,暂未提供。