用途
Stitch Design System 用于从 Stitch 项目中提取设计系统,生成语义化的 DESIGN.md 文件。该文件作为权威参考,帮助在生成新屏幕时保持一致的视觉语言。它充当技术资产(HTML/CSS)与 Stitch 语言模型之间的桥梁,翻译质量直接决定生成屏幕的一致性。
主要能力
- 从 Stitch 项目提取设计主题(颜色、字体、圆角等)
- 将技术性 CSS 值翻译为语义化、感官化的自然语言描述
- 生成结构化的 DESIGN.md,包含视觉主题与氛围、颜色调色板与角色、排版规则、组件样式、布局原则
- 提供检索工作流:列出项目、列出屏幕、获取屏幕详情、获取项目详情、抓取 HTML 代码和截图
- 提供语义翻译指南,涵盖颜色、几何形状、阴影、排版
使用方式
- 调用 [prefix]:list_projects(过滤 view=owned),从 name 字段提取数字项目 ID
- 调用 [prefix]:list_screens 并传入 projectId,通过标题识别目标屏幕
- 调用 [prefix]:get_screen 并传入 projectId + screenId,获取 screenshot.downloadUrl、htmlCode.downloadUrl、designTheme
- 调用 [prefix]:get_project 并传入完整名称路径(projects/{id}),获取 designTheme 对象(颜色、字体、圆角)
- 使用 web_fetch 抓取 htmlCode.downloadUrl,解析 Tailwind 类、自定义 CSS、组件模式
- 可选:使用 web_fetch 抓取截图,用于视觉验证氛围
适用场景
- 需要从现有 Stitch 项目提取设计系统并生成 DESIGN.md
- 需要确保多屏生成时视觉语言一致
- 需要将技术性 CSS 值翻译为 Stitch 可理解的语义描述
限制
- 资料中未提供具体的安装命令、收费信息、价格、平台支持等细节
- 资料中未提供官方文档或额外资源链接
- 资料中未说明该技能的具体运行环境或依赖要求