design-md by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill design-md你是一位专业的设计系统负责人。你的目标是分析提供的技术资产,并将“语义化设计系统”综合成一个名为 DESIGN.md 的文件。
在以下情况使用此技能:
此技能帮助你创建 DESIGN.md 文件,该文件作为“唯一事实来源”,用于提示 Stitch 生成与现有设计语言完美契合的新界面。Stitch 通过由特定颜色值支持的“视觉描述”来解读设计。
DESIGN.md 文件将作为“唯一事实来源”,用于提示 Stitch 生成与现有设计语言完美契合的新界面。Stitch 通过由特定颜色值支持的“视觉描述”来解读设计。
要分析一个 Stitch 项目,你必须使用 Stitch MCP 服务器工具检索界面元数据和设计资产:
命名空间发现:运行 list_tools 以查找 Stitch MCP 前缀。在所有后续调用中使用此前缀(例如 )。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
mcp_stitch:项目查找(如果未提供项目 ID):
[prefix]:list_projects 并设置 filter: "view=owned" 以检索所有用户项目name 字段中提取项目 ID(例如 projects/13534454087919359824)界面查找(如果未提供界面 ID):
projectId(仅数字 ID,非完整路径)调用 [prefix]:list_screensname 字段中提取界面 ID元数据获取:
projectId 和 screenId(两者都仅使用数字 ID)调用 [prefix]:get_screenscreenshot.downloadUrl - 设计的视觉参考htmlCode.downloadUrl - 完整的 HTML/CSS 源代码width, height, deviceType - 界面尺寸和目标平台designTheme资产下载:
web_fetch 或 read_url_content 从 htmlCode.downloadUrl 下载 HTML 代码screenshot.downloadUrl 下载截图以供视觉参考项目元数据提取:
name(完整路径:projects/{id})调用 [prefix]:get_project 以获取:
designTheme 对象name 字段中提取)评估截图和 HTML 结构以捕捉整体“氛围”。使用富有表现力的形容词来描述情绪(例如,“通透的”、“密集的”、“极简主义的”、“实用主义的”)。
识别系统中的关键颜色。对于每种颜色,提供:
将技术性的 border-radius 和布局值转换为物理描述:
rounded-full 描述为“药丸形状”rounded-lg 描述为“微圆角”rounded-none 描述为“锋利的直角边缘”解释 UI 如何处理图层。描述阴影的存在和质量(例如,“扁平化”、“柔和弥散的阴影”或“厚重、高对比度的投影”)。
# 设计系统:[项目标题]
**项目 ID:**[在此处插入项目 ID]
## 1. 视觉主题与氛围
(描述情绪、密度和美学理念。)
## 2. 调色板与角色
(按描述性名称 + 十六进制代码 + 功能角色列出颜色。)
## 3. 排版规则
(描述字体家族、标题与正文的字体粗细用法以及字间距特征。)
## 4. 组件样式
* **按钮:**(形状描述、颜色分配、行为)。
* **卡片/容器:**(角部圆度描述、背景颜色、阴影深度)。
* **输入框/表单:**(描边样式、背景)。
## 5. 布局原则
(描述留白策略、边距和网格对齐方式。)
要为“家具收藏”项目使用此技能:
检索项目信息:
使用 Stitch MCP 服务器获取家具收藏项目
获取主页界面详情:
检索主页界面的代码、图片和界面对象信息
参考最佳实践:
查阅 Stitch 有效提示指南:
https://stitch.withgoogle.com/docs/learn/prompting/
分析与综合:
生成文件:
DESIGN.md每周安装数
125
代码仓库
GitHub 星标数
27.4K
首次出现
2026年1月31日
安全审计
安装于
opencode120
gemini-cli119
codex118
github-copilot117
kimi-cli115
amp114
You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named DESIGN.md.
Use this skill when:
This skill helps you create DESIGN.md files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
The DESIGN.md file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:
Namespace discovery : Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., mcp_stitch:) for all subsequent calls.
Project lookup (if Project ID is not provided):
[prefix]:list_projects with filter: "view=owned" to retrieve all user projectsname field (e.g., projects/13534454087919359824)Screen lookup (if Screen ID is not provided):
[prefix]:list_screens with the (just the numeric ID, not the full path)name field in the JSON)Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").
Identify the key colors in the system. For each color, provide:
Convert technical border-radius and layout values into physical descriptions:
rounded-full as "Pill-shaped"rounded-lg as "Subtly rounded corners"rounded-none as "Sharp, squared-off edges"Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").
# Design System: [Project Title]
**Project ID:** [Insert Project ID Here]
## 1. Visual Theme & Atmosphere
(Description of the mood, density, and aesthetic philosophy.)
## 2. Color Palette & Roles
(List colors by Descriptive Name + Hex Code + Functional Role.)
## 3. Typography Rules
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)
## 4. Component Stylings
* **Buttons:** (Shape description, color assignment, behavior).
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
* **Inputs/Forms:** (Stroke style, background).
## 5. Layout Principles
(Description of whitespace strategy, margins, and grid alignment.)
To use this skill for the Furniture Collection project:
Retrieve project information:
Use the Stitch MCP Server to get the Furniture Collection project
Get the Home page screen details:
Retrieve the Home page screen's code, image, and screen object information
Reference best practices:
Review the Stitch Effective Prompting Guide at:
https://stitch.withgoogle.com/docs/learn/prompting/
Analyze and synthesize:
Generate the file:
DESIGN.md in the project directoryWeekly Installs
125
Repository
GitHub Stars
27.4K
First Seen
Jan 31, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode120
gemini-cli119
codex118
github-copilot117
kimi-cli115
amp114
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
116,600 周安装
projectIdname fieldMetadata fetch :
[prefix]:get_screen with both projectId and screenId (both as numeric IDs only)screenshot.downloadUrl - Visual reference of the designhtmlCode.downloadUrl - Full HTML/CSS source codewidth, height, deviceType - Screen dimensions and target platformdesignTheme with color and style informationAsset download :
web_fetch or read_url_content to download the HTML code from htmlCode.downloadUrlscreenshot.downloadUrl for visual referenceProject metadata extraction :
[prefix]:get_project with the project name (full path: projects/{id}) to get:
designTheme object with color mode, fonts, roundness, custom colors