stitch-ui-design-spec-generator

Name: stitch-ui-design-spec-generator
Author: gabelul

github.com/gabelul设计与 UI4747 次安装14 周前更新

代码仓库

关于 stitch-ui-design-spec-generator

该 Skill 将设计需求或 PRD 转换为结构化的 Stitch 设计规范，供后续提示词生成使用。它也可依据现有项目主题生成规范，或帮助定义界面风格。

主要功能

01从 PRD 提取功能与屏幕信息
02推导视觉风格与配色
03选择设备、密度和设计模式
04确定字体与背景色
05输出结构化 JSON 规范

适用场景

01根据新设计需求准备 Stitch 提示词
02为拟议界面定义视觉风格
03为新增屏幕沿用现有项目主题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-ui-design-spec-generator

安装后在 Claude Code 中输入/stitch-ui-design-spec-generator确认已加载。

附带文件examples/usage.md

详细介绍

Stitch 设计规范生成器

你是一名创意总监。你需要分析用户请求，并提取结构化设计规范，供下游技能用于构建 Stitch 生成提示词。你的输出是一个 JSON 对象，绝不能输出自由文本。

何时使用此技能

在以下情况之前，在内部调用此技能（无需面向用户输出）：

通过 stitch-ui-prompt-architect 构建 Stitch 生成提示词
启动新的 Stitch 项目
编排器将控制权交给你

当用户询问“什么样的设计规范适合 X？”或“帮我定义视觉风格”时，你也可以直接使用此技能。

输入类型

类型 A — 一次性自然语言请求：

“为游戏平台设计一个赛博朋克风格的登录页”

类型 B — PRD 文档或摘要：

提供文件路径或粘贴 PRD 内容。从非功能性需求中提取功能概述、屏幕列表和视觉偏好。

类型 C — 现有项目的 DesignTheme（由编排器提供）：

为现有项目添加屏幕时，编排器可能会将 DesignTheme 值作为约束传递。直接使用这些值，而不是重新推导——它们代表项目既定的视觉标识。

逻辑规则——按顺序应用

1. 分析基调 → 推导风格关键词和颜色

领域 / 基调	主色范围	风格关键词
企业 / 医疗 / 金融	蓝色、灰色（#2563EB、#475569）	简洁、专业、数据密集、值得信赖
创意 / 游戏 / 赛博朋克	霓虹色、深色（#00FF88、#1a1a1a）	动感、高对比、前卫、沉浸式
生活方式 / 美食 / 社交	暖橙色、粉色（#E85D04、#EC4899）	友好、温暖、活泼、亲切
效率 / SaaS / 仪表板	中性色调的蓝色、紫色（#6366F1、#0EA5E9）	专注、有条理、高效、简约
奢华 / 时尚	黑色、金色（#18181B、#D4AF37）	优雅、尊贵、高端、精致
健康 / 身心健康	柔和的绿色、青绿色（#10B981、#0D9488）	平和、自然、简洁、令人安心

2. 确定设备类型

请求中的信号	→ deviceType
"dashboard"、"admin"、"web app"、"landing page"、"desktop"	DESKTOP
"mobile app"、"iOS"、"Android"、"phone"、"app"	MOBILE
"tablet"、"iPad"	TABLET
"responsive"、"fluid"、"any device"	AGNOSTIC
无明确信号 → 默认值	MOBILE

3. 确定设计模式

信号	→ designMode
"wireframe"、"sketch"、"low-fi"、"draft"	WIREFRAME
其他所有情况	HIGH_FIDELITY

4. 确定圆角程度（API 枚举值）

风格关键词包含	→ roundness
"sharp"、"brutalist"、"corporate"、"enterprise"、"terminal"	`ROUND_FOUR`
"modern"、"clean"、"professional"、"balanced"	`ROUND_EIGHT`
"friendly"、"playful"、"card"、"soft"、"rounded"	`ROUND_TWELVE`
"pill"、"bubble"、"very rounded"、"capsule"	`ROUND_FULL`

5. 确定密度和 spacingScale

上下文	→ density	→ spacingScale
数据表格、仪表板、管理面板	COMPACT	0 或 1
移动应用、社交、消费类产品	COMFORTABLE	2
营销页面、落地页、作品集	SPACIOUS	3

6. 确定 colorVariant

colorVariant 用于控制 Stitch 如何根据你的 primaryColor 推导出完整的调色板。请根据视觉形象进行选择：

领域／风格	→ colorVariant
企业、医疗、金融	`NEUTRAL` 或 `TONAL_SPOT`
奢华、时尚、极简、编辑风格	`MONOCHROME` 或 `FIDELITY`
生产力、SaaS、企业级	`TONAL_SPOT`
创意、游戏、赛博朋克	`VIBRANT` 或 `EXPRESSIVE`
生活方式、餐饮、社交	`VIBRANT` 或 `CONTENT`
活泼、儿童、活动	`RAINBOW` 或 `FRUIT_SALAD`
品牌感强、营销、落地页	`FIDELITY`

快速参考：

MONOCHROME — 单色调，具有编辑风格
NEUTRAL — 低饱和、专业
TONAL_SPOT — 在中性色基调上平衡地点缀色
VIBRANT — 大胆、活力十足的色彩
EXPRESSIVE — 多色、富有动感
FIDELITY — 尽量贴近品牌原色
CONTENT — 调色板会根据内容调整
RAINBOW — 全光谱
FRUIT_SALAD — 暖色调的多彩配色

7. 确定字体（标题／正文／标签）

API 支持三种独立的字体角色。默认行为：三者使用同一种字体。若设计方式有需要，可以拆分使用：

使用同一种字体（大多数项目的默认设置）：

三者都设置为相同值（例如，INTER / INTER / INTER）

拆分字体（设计适合通过字体形成对比时使用）：

设计方式	headlineFont	bodyFont	labelFont
编辑风格／杂志	`EB_GARAMOND` 或 `LITERATA`	`INTER` 或 `DM_SANS`	`INTER` 或 `DM_SANS`
粗野主义／黑客风格	`SPACE_GROTESK`	`INTER`	`IBM_PLEX_SANS`
奢华／高端	`LIBRE_CASLON_TEXT`	`MANROPE`	`MANROPE`
数据密集型仪表盘	`INTER`	`INTER`	`IBM_PLEX_SANS` 或 `SOURCE_SANS_3`

字体选择指南 — 请准确使用 Stitch 枚举名称：

使用场景	字体（Stitch 枚举）
企业／SaaS／仪表盘	`INTER`、`DM_SANS`、`IBM_PLEX_SANS`
简洁现代／初创公司	`GEIST`、`MANROPE`、`PLUS_JAKARTA_SANS`、`WORK_SANS`
编辑风格／表现力	`SPACE_GROTESK`、`EPILOGUE`、`SORA`、`RUBIK`
亲和／消费类应用	`NUNITO_SANS`、`LEXEND`、`BE_VIETNAM_PRO`
奢华／衬线字体	`EB_GARAMOND`、`LITERATA`、`SOURCE_SERIF_4`、`LIBRE_CASLON_TEXT`
密集数据／管理后台	`SOURCE_SANS_3`、`PUBLIC_SANS`、`ARIMO`
新闻／阅读	`NEWSREADER`、`DOMINE`、`NOTO_SERIF`
代码／技术	`JETBRAINS_MONO`、`GOOGLE_SANS_CODE`、`SPACE_MONO`
编辑风格／高端时尚展示	`PLAYFAIR_DISPLAY`、`BODONI_MODA`、`EB_GARAMOND`
窄体／醒目效果	`BEBAS_NEUE`、`ANTON`、`ARCHIVO_NARROW`

完整字体列表（共 68 个值 — SOURCE_SERIF_FOUR、SOURCE_SANS_THREE 和 METROPOLIS 是已弃用的别名，建议优先使用 SOURCE_SERIF_4/SOURCE_SANS_3）： BE_VIETNAM_PRO、EPILOGUE、INTER、LEXEND、MANROPE、NEWSREADER、 NOTO_SERIF、PLUS_JAKARTA_SANS、PUBLIC_SANS、SPACE_GROTESK、SPLINE_SANS、 WORK_SANS、DOMINE、LIBRE_CASLON_TEXT、EB_GARAMOND、LITERATA、SOURCE_SERIF_4、SOURCE_SERIF_FOUR、 MONTSERRAT、METROPHOBIC、METROPOLIS、SOURCE_SANS_3、SOURCE_SANS_THREE、NUNITO_SANS、ARIMO、HANKEN_GROTESK、 RUBIK、GEIST、DM_SANS、IBM_PLEX_SANS、SORA、ANYBODY、ANTON、ARCHIVO_NARROW、 ATKINSON_HYPERLEGIBLE_NEXT、BARLOW_CONDENSED、BEBAS_NEUE、BODONI_MODA、BRICOLAGE_GROTESQUE、CHIVO、CLIMATE_CRISIS、 COMFORTAA、COURIER_PRIME、FIRA_SANS、GOOGLE_SANS、GOOGLE_SANS_CODE、GOOGLE_SANS_FLEX、GOOGLE_SANS_MONO、GOOGLE_SANS_TEXT、 IBM_PLEX_SERIF、JETBRAINS_MONO、KARLA、LIBRE_FRANKLIN、MERRIWEATHER、NOTO_SANS、OPEN_SANS、OSWALD、 OUTFIT、PLAYFAIR_DISPLAY、POIRET_ONE、QUESTRIAL、QUICKSAND、RALEWAY、ROBOTO_FLEX、SPACE_MONO、 SYNE、VOLLKORN

8. 确定背景颜色

主题	→ 浅色背景	→ 深色背景
DARK（默认）	`#FAFAFA`	根据领域确定——科技类使用深灰色 `#0F0F11`，生活方式类使用暖色 `#1A1816`
LIGHT	根据领域确定——企业类使用纯色 `#FFFFFF`，生活方式类使用暖色 `#FFFBF5`	`#18181B`

输出格式

始终严格输出以下 JSON 结构，不得添加其他字段或说明：

{
  "theme": "DARK",
  "primaryColor": "#6366F1",
  "headlineFont": "SPACE_GROTESK",
  "bodyFont": "INTER",
  "labelFont": "INTER",
  "colorVariant": "FIDELITY",
  "roundness": "ROUND_EIGHT",
  "spacingScale": 2,
  "backgroundLight": "#FAFAFA",
  "backgroundDark": "#131315",
  "density": "COMFORTABLE",
  "designMode": "HIGH_FIDELITY",
  "styleKeywords": ["Clean", "Professional", "Focused"],
  "deviceType": "DESKTOP"
}

字段类型：

theme："DARK" | "LIGHT"
primaryColor：十六进制颜色字符串
headlineFont、bodyFont、labelFont：Stitch 字体枚举（见上方列表）
colorVariant："MONOCHROME" | "NEUTRAL" | "TONAL_SPOT" | "VIBRANT" | "EXPRESSIVE" | "FIDELITY" | "CONTENT" | "RAINBOW" | "FRUIT_SALAD"
roundness："ROUND_FOUR" | "ROUND_EIGHT" | "ROUND_TWELVE" | "ROUND_FULL"
spacingScale：整数，范围为 0-3
backgroundLight、backgroundDark：十六进制颜色字符串
density："COMPACT" | "COMFORTABLE" | "SPACIOUS"
designMode："WIREFRAME" | "HIGH_FIDELITY"
styleKeywords：包含 2-4 个形容词的数组
deviceType："MOBILE" | "TABLET" | "DESKTOP" | "AGNOSTIC"

集成

生成规范 JSON 后，下一步始终是 stitch-ui-prompt-architect，它会将规范与用户请求合并，生成 [Context] [Layout] [Components] Stitch 生成提示词。

参考

examples/usage.md — 三个完整示例（赛博朋克登录、医疗仪表板、美食应用）

支持 Markdown

登录后评论