stitch-design-system by acedergren/agentic-tools
npx skills add https://github.com/acedergren/agentic-tools --skill stitch-design-system提取并综合 Stitch 设计,将其转化为语义化的设计系统(DESIGN.md),作为生成一致 UI 的权威参考。
此技能帮助创建 DESIGN.md 文件,作为提示 Stitch 生成符合现有设计语言的新界面的“单一事实来源”。该分析将技术性设计资产(HTML、CSS、颜色)转化为语义化的描述性语言,以便 Stitch 理解并实现视觉一致性。
运行 list_tools 以查找 Stitch MCP 前缀(通常是 mcp_stitch: 或 stitch:)。所有后续调用均使用此前缀。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
调用 [prefix]:list_projects 并附带 filter: "view=owned" 以检索所有项目。从 name 字段中提取项目 ID(格式:projects/{numeric-id})。
调用 [prefix]:list_screens 并附带数字 projectId。通过标题(例如“Home”、“Landing Page”)识别界面。从界面的 name 字段中提取屏幕 ID。
调用 [prefix]:get_screen 并附带数字 projectId 和 screenId。响应包括:
screenshot.downloadUrl - 视觉设计参考htmlCode.downloadUrl - 完整的 HTML/CSS 源代码width、height、deviceType - 界面尺寸designTheme - 颜色、字体、圆角使用 web_fetch 从 htmlCode.downloadUrl 下载 HTML。可选择下载截图用于视觉验证。解析 HTML 以提取 Tailwind 类、自定义 CSS 和组件模式。
调用 [prefix]:get_project 并附带完整的 name 路径(例如 projects/{id})以检索:
designTheme 对象(颜色、字体、圆角)name 字段)评估截图和 HTML,使用富有表现力的形容词捕捉整体“氛围”:
对于每种颜色,记录:
将技术性的 border-radius 值转换为物理描述:
rounded-full → “药丸形状”rounded-lg → “轻微圆角”rounded-none → “锐利、平直的边缘”解释 UI 如何处理图层。描述阴影质量:
# 设计系统:[项目标题]
**项目 ID:**[在此处插入项目 ID]
## 1. 视觉主题与氛围
(描述情绪、密度和美学理念。)
## 2. 调色板与角色
(按描述性名称 + 十六进制代码 + 功能角色列出颜色。)
## 3. 排版规则
(描述字体系列、字重使用和字距特性。)
## 4. 组件样式
- **按钮:**(形状描述、颜色分配、行为)。
- **卡片/容器:**(圆角程度、背景颜色、阴影深度)。
- **输入框/表单:**(描边样式、背景、聚焦状态)。
## 5. 布局原则
(描述留白策略、边距、网格对齐方式。)
rounded-xl 对 Stitch 毫无意义;使用“大幅圆角”以使视觉意图清晰每周安装次数
1
代码仓库
GitHub 星标数
6
首次出现
1 天前
安全审计
安装于
amp1
cline1
opencode1
cursor1
kimi-cli1
codex1
Extract and synthesize Stitch designs into semantic design systems (DESIGN.md) that serve as authoritative references for consistent UI generation.
This skill helps create DESIGN.md files that serve as the "source of truth" for prompting Stitch to generate new screens aligned with existing design language. The analysis transforms technical design assets (HTML, CSS, colors) into semantic, descriptive language that Stitch interprets for visual consistency.
Run list_tools to find Stitch MCP prefix (typically mcp_stitch: or stitch:). Use this prefix for all subsequent calls.
Call [prefix]:list_projects with filter: "view=owned" to retrieve all projects. Extract Project ID from the name field (format: projects/{numeric-id}).
Call [prefix]:list_screens with numeric projectId. Identify the screen by title (e.g., "Home", "Landing Page"). Extract Screen ID from the screen's name field.
Call [prefix]:get_screen with both numeric projectId and screenId. Response includes:
screenshot.downloadUrl - Visual design referencehtmlCode.downloadUrl - Full HTML/CSS sourcewidth, height, deviceType - Screen dimensionsdesignTheme - Colors, fonts, roundnessUse web_fetch to download HTML from htmlCode.downloadUrl. Optionally download screenshot for visual verification. Parse HTML to extract Tailwind classes, custom CSS, and component patterns.
Call [prefix]:get_project with full name path (e.g., projects/{id}) to retrieve:
designTheme object (colors, fonts, roundness)name field)Evaluate screenshot and HTML to capture overall "vibe" using evocative adjectives:
For each color, document:
Convert technical border-radius values to physical descriptions:
rounded-full → "Pill-shaped"rounded-lg → "Subtly rounded corners"rounded-none → "Sharp, squared-off edges"Explain how UI handles layering. Describe shadow quality:
# 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, and letter-spacing character.)
## 4. Component Stylings
- **Buttons:** (Shape description, color assignment, behavior).
- **Cards/Containers:** (Corner roundness, background color, shadow depth).
- **Inputs/Forms:** (Stroke style, background, focus state).
## 5. Layout Principles
(Description of whitespace strategy, margins, grid alignment.)
rounded-xl means nothing to Stitch; use "generously rounded" so the visual intent is clearWeekly Installs
1
Repository
GitHub Stars
6
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
amp1
cline1
opencode1
cursor1
kimi-cli1
codex1
shadcn/ui 框架:React 组件库与 UI 设计系统,Tailwind CSS 最佳实践
56,500 周安装