SuperAPI AI 工具集

stitch-design-system

设计与创作

查看项目

更新于 10-15 08:18

技能介绍

用途

Stitch Design System 用于从 Stitch 项目中提取设计系统,生成语义化的 DESIGN.md 文件。该文件作为权威参考,帮助在生成新屏幕时保持一致的视觉语言。它充当技术资产(HTML/CSS)与 Stitch 语言模型之间的桥梁,翻译质量直接决定生成屏幕的一致性。

主要能力

  • 从 Stitch 项目提取设计主题(颜色、字体、圆角等)
  • 将技术性 CSS 值翻译为语义化、感官化的自然语言描述
  • 生成结构化的 DESIGN.md,包含视觉主题与氛围、颜色调色板与角色、排版规则、组件样式、布局原则
  • 提供检索工作流:列出项目、列出屏幕、获取屏幕详情、获取项目详情、抓取 HTML 代码和截图
  • 提供语义翻译指南,涵盖颜色、几何形状、阴影、排版

使用方式

  1. 调用 [prefix]:list_projects(过滤 view=owned),从 name 字段提取数字项目 ID
  2. 调用 [prefix]:list_screens 并传入 projectId,通过标题识别目标屏幕
  3. 调用 [prefix]:get_screen 并传入 projectId + screenId,获取 screenshot.downloadUrl、htmlCode.downloadUrl、designTheme
  4. 调用 [prefix]:get_project 并传入完整名称路径(projects/{id}),获取 designTheme 对象(颜色、字体、圆角)
  5. 使用 web_fetch 抓取 htmlCode.downloadUrl,解析 Tailwind 类、自定义 CSS、组件模式
  6. 可选:使用 web_fetch 抓取截图,用于视觉验证氛围

适用场景

  • 需要从现有 Stitch 项目提取设计系统并生成 DESIGN.md
  • 需要确保多屏生成时视觉语言一致
  • 需要将技术性 CSS 值翻译为 Stitch 可理解的语义描述

限制

  • 资料中未提供具体的安装命令、收费信息、价格、平台支持等细节
  • 资料中未提供官方文档或额外资源链接
  • 资料中未说明该技能的具体运行环境或依赖要求