SuperAPI AI 工具集

design-md

设计与创作

查看项目

更新于 10-15 22:39

技能介绍

用途:分析 Stitch 项目中的界面资产,将设计语言提炼为 DESIGN.md 文件,作为提示 Stitch 生成风格一致新界面的“事实来源”。Stitch 通过“视觉描述”加具体颜色值来理解设计。

主要能力:通过 Stitch MCP Server 检索项目与屏幕元数据,下载 HTML/CSS 与截图,解析 Tailwind 类、自定义 CSS 和组件模式,并提取项目级 designTheme(颜色模式、字体、圆角、自定义颜色)。随后按固定结构输出 DESIGN.md,包含视觉主题与氛围、颜色调色板与角色、排版规则、组件样式(按钮、卡片/容器、输入/表单)、布局原则。颜色需同时给出描述性名称、十六进制值和功能角色。

使用方式:先运行 list_tools 发现 Stitch MCP 前缀;未提供 Project ID 时用 [prefix]:list_projects(filter: "view=owned")查找并提取 ID;未提供 Screen ID 时用 [prefix]:list_screens(仅数字 projectId)查找;再用 [prefix]:get_screen(projectId 与 screenId 均为纯数字)获取截图、HTML 下载地址、尺寸与设备类型;用 web_fetch 或 read_url_content 下载 HTML;用 [prefix]:get_project(projects/{id})获取 designTheme 与项目级设计指南。最后按指定 Markdown 结构生成 DESIGN.md。

适用场景:需要为已有 Stitch 项目沉淀设计系统、统一后续界面生成风格时。

限制:需具备 Stitch MCP Server 访问权限,且项目至少有一个已设计屏幕;建议参考 Stitch Effective Prompting Guide(https://stitch.withgoogle.com/docs/learn/prompting/)。具体收费、价格与平台支持情况暂未提供。