用途:分析 Stitch 项目中的设计资产,合成一份语义化设计系统文档 DESIGN.md,作为提示 Stitch 生成与现有设计语言一致的新界面的“事实来源”。Stitch 通过“视觉描述”加具体色值理解设计。
使用时机:分析 Stitch 项目、创建 DESIGN.md、合成语义设计系统、使用 Stitch 设计语言、生成 Stitch 项目设计文档时使用。
前提条件:可访问 Stitch MCP Server;有一个至少含一张已设计屏幕的 Stitch 项目;可访问 Stitch 有效提示指南 https://stitch.withgoogle.com/docs/learn/prompting/。
主要能力与流程:通过 Stitch MCP Server 工具获取屏幕元数据与设计资产。先用 list_tools 发现命名空间前缀(如 mcp_stitch:);未提供 Project ID 时调用 [prefix]:list_projects(filter: "view=owned")定位项目并从 name 提取 ID;未提供 Screen ID 时调用 [prefix]:list_screens(projectId 用纯数字)确认目标屏幕;调用 [prefix]:get_screen(projectId 与 screenId 均为纯数字)获取截图、HTML/CSS、尺寸、设备类型及 designTheme;用 web_fetch 或 read_url_content 下载 htmlCode.downloadUrl 的 HTML,可选下载截图,解析 Tailwind 类、自定义 CSS 与组件模式;调用 [prefix]:get_project(projects/{id})提取色彩模式、字体、圆角、自定义颜色及项目级设计指南。随后提取项目标题与 ID,评估整体氛围,映射色板(描述性名称加十六进制值与功能角色),将 border-radius 等几何值翻译为自然语言,描述阴影与层次。
输出:生成结构化 Markdown 的 DESIGN.md,包含项目标题与 ID、视觉主题与氛围、色彩方案与角色等章节,使用描述性设计术语与自然语言,包含精确十六进制色值,并解释设计决策原因。
限制:资料未提供更多细节;需依赖 Stitch 环境与 MCP 工具,缺失事实暂未提供。