SuperAPI AI 工具集

stitch-design-md

设计与创作

查看项目

更新于 10-15 21:49

技能介绍

用途:分析 Stitch 项目资产,将语义化设计系统综合为自然语言的 DESIGN.md(非 CSS),用于回填 Stitch 提示词、保持多页面视觉一致以及编写设计文档。仅当用户明确提到“Stitch”或为 Stitch 生成准备设计系统文档时使用。

主要能力:从 Stitch 项目提取设计主题(colorMode、customColor、colorVariant、roundness、spacingScale、headlineFont/bodyFont/labelFont、namedColors 40+ 语义令牌、backgroundLight/Dark、designMd),下载 HTML 并解析 Tailwind 类、内联 tailwind.config 与 CSS 变量,然后按固定结构输出 DESIGN.md:视觉主题与氛围、配色与角色、字体规则、组件样式、布局原则,以及可直接复制进 Stitch 提示词的“Design System Notes for Stitch Generation”。

使用方式:需先配置 Stitch MCP Server,且项目至少有一个已设计屏幕。若用户提供 Stitch URL,解析出 projectId 与 node-id 作为 screenId,调用 [prefix]:get_screen;若未知,则 list_tools 找前缀,list_projects(filter: "view=owned")选项目,list_screens 选代表屏幕,再 get_screen 与 get_project。下载 HTML 使用:bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"。

适用场景:继续构建更多 Stitch 屏幕、多页面 stitch-loop 构建(将第 6 节放入每个 next-prompt.md)、以及后续交给 stitch-design-system 生成 design-tokens.css 与 tailwind-theme.css 前的文档准备。

限制:仅限 Stitch 相关任务;不产出 CSS 代码级主题;需 MCP 与已有屏幕;颜色应优先采用 namedColors 而非从 HTML 猜测;避免只写 Tailwind 类名而不翻译为描述性语言,避免只列颜色不写功能角色,避免省略字重层级,第 6 节必须包含实际十六进制值。参考文件包括 examples/usage.md、examples/DESIGN.md、docs/color-prompt-guide.md、scripts/fetch-stitch.sh。