stitch-ued-guide

Stitch UED 指南

这是一份参考指南，而非操作技能。适用于以下情况：

• 需要在 Stitch 提示词中使用特定设计术语（瀑布流、玻璃拟态、分屏）
• 不确定如何描述布局模式或视觉风格
• 想要一致地应用颜色与主题结构
• 需要了解编写提示词时针对设备的限制

提示词工程策略

最有效的 Stitch 提示词遵循以下 4 部分结构：

[Context & Style] + [Layout Structure] + [Component Details] + [Content & Data]

上下文与风格：

“面向健身房用户的移动健身应用。深色模式搭配霓虹绿点缀。赛博朋克美学。圆角。”

布局结构：

“底部导航栏（主页、训练、进度、个人资料）。可滚动的主信息流。带问候语的吸顶顶栏。”

组件详情：

“训练卡片带渐变边框、缩略图、标题、时长徽标和‘开始’胶囊按钮。”

内容与数据：

“示例数据：‘上肢爆发训练’（45 分钟）、‘核心力量训练’（20 分钟）、‘晨跑’（30 分钟，今天已完成）。”

Stitch 模型选择

模型	适用场景
GEMINI_3_1_PRO	高保真设计、复杂布局、注重质量时——推荐默认使用
GEMINI_3_FLASH	快速迭代、线框图、快速探索、注重速度时
GEMINI_3_PRO	已弃用——目前仍可用，但即将移除。请改用 GEMINI_3_1_PRO

颜色变体参考（colorVariant）

控制 Stitch 如何根据你的 primaryColor 派生完整的调色板：

colorVariant	视觉效果	最适合
MONOCHROME	单色调，具有编辑风格	奢华、极简、文本密集型界面、作品集
NEUTRAL	内敛、专业	企业、企业级、医疗
TONAL_SPOT	在中性色基底上平衡地点缀色	SaaS、效率工具、仪表板
VIBRANT	大胆、充满活力的色彩	消费类应用、社交、食品
EXPRESSIVE	多色、动感	创意、游戏、娱乐
FIDELITY	精准匹配品牌颜色	品牌主导型设计、营销、落地页
CONTENT	调色板随内容调整	媒体、编辑、图片密集型界面
RAINBOW	全光谱色彩	儿童应用、活动、活泼风格
FRUIT_SALAD	温暖的多色调	食品、生活方式、健康养生

间距比例参考（spacingScale）

spacingScale	效果	最适合
0	间距极小——非常紧凑、数据密集	管理面板、数据表格、终端风格界面
1	紧凑——高效利用空间	仪表板、密集的移动端列表、SaaS 工具
2	标准——留白舒适	常规应用、消费类产品
3	宽松——留白充足	落地页、营销、作品集、奢华风格

DesignTheme API 字段参考

get_project 返回的所有 DesignTheme 字段速查：

字段	类型	描述
colorMode	LIGHT / DARK	基础主题模式
customColor	十六进制字符串	用于生成调色板的种子颜色
colorVariant	枚举（9 个值）	从种子颜色派生调色板的方式
headlineFont	字体枚举（68 个值）	展示／标题字体
bodyFont	字体枚举	正文字体
labelFont	字体枚举	标签、说明文字、元数据字体
font	字体枚举	已弃用——请使用 headlineFont/bodyFont/labelFont
roundness	ROUND_FOUR/EIGHT/TWELVE/FULL（存在 ROUND_TWO，但已弃用／未使用）	圆角预设
spacingScale	整数 0-3	布局密度
spacing	对象	可选。间距令牌名称 → CSS 值的映射（例如 {"sm": "8px"}）
typography	对象	可选。排版级别名称（例如 h1、body）→ 排版令牌（fontFamily、fontSize、fontWeight、letterSpacing、lineHeight）的映射
namedColors	对象（40 多个令牌）	完整的语义颜色映射（Material 3）
designMd	字符串	自动生成的设计系统 Markdown
description	字符串	简要的美学描述
overridePrimaryColor	十六进制值	显式主色覆盖值
overrideSecondaryColor	十六进制值	显式辅助色覆盖值
overrideTertiaryColor	十六进制值	显式第三级颜色覆盖值
overrideNeutralColor	十六进制值	显式中性色基色覆盖值
backgroundLight	十六进制值	浅色模式背景
backgroundDark	十六进制值	深色模式背景

布局模式

移动端模式

• 纵向滚动信息流 — 内容卡片无限滚动，固定页眉，底部导航
• 标签页导航 — 分段控件或标签栏，内容在页面内切换
• 底部弹层 — 向上滑出的面板，用于展示次要内容或操作
• 全屏表单 — 单列布局、大尺寸触控区域、固定提交按钮
• 详情 → 操作 — 顶部为主视觉内容，下方为说明，底部固定 CTA

桌面端模式

• 左侧边栏 + 主内容区 — 常驻侧边导航（200-280px）、主内容区、顶部栏
• 顶部导航 + 内容区 — 水平导航栏，下方为分区主内容
• 分屏 — 两个等分区域（表单／预览、注册／产品截图）
• 仪表盘网格 — KPI 栏、图表、表格、小组件组成的响应式网格
• 落地页 — 全宽主视觉区、功能区块、定价、页脚 CTA

通用模式

• 瀑布流网格 — 高度不一的卡片，Pinterest 风格布局
• 便当盒网格 — 大小不一的不对称方块，每个方块包含不同内容
• 主视觉区 — 全宽／全高布局，含背景图片、标题、CTA
• 卡片网格 — 在响应式分栏网格中排列统一尺寸的卡片

视觉风格

风格	描述	适用场景
扁平风格	无阴影、鲜明色彩、简洁形状	移动应用、插画
Material 风格	带有高度效果的卡片、清晰的层级、涟漪效果	Android 风格应用
新拟态	同色背景上的凸起元素、柔和阴影	奢华、简约 UI
玻璃拟态	磨砂玻璃效果，模糊 + 透明度 + 边框	现代 SaaS、叠加层
粗野主义	原始、高对比度、刻意粗粝、打破网格	编辑设计、鲜明品牌
极简主义	最大化留白、单一强调色、注重字体排版	作品集、落地页
赛博朋克	深色背景、霓虹点缀、故障元素、等宽字体	游戏、科技、深色模式

颜色结构公式

在提示词中使用一致、专业的配色方案：

[Domain/mood description] + [Background hex] + [Primary hex] + [Secondary hex] + [Text hex] + [Aesthetic mood]

示例：

“现代 SaaS 效率应用。背景为 Slate-50（#F8FAFC）。主色为 Indigo（#6366F1）。辅助色为 Violet（#8B5CF6）。文字为 Zinc-900（#18181B）。简洁、规整、专业。”

深色模式示例：

“高端深色仪表板。背景为 Zinc-900（#18181B）。深色界面上的主色为 Indigo-400（#818CF8）。卡片表面为 Zinc-800（#27272A）。文字为 Zinc-100（#F4F4F5）。专注、高对比度、对开发者友好。”

设备指南

设备	尺寸	主要限制
MOBILE	宽约 375px	底部导航、便于拇指操作的点击目标（至少 44px）、单列布局、较大的字体
DESKTOP	宽约 1440px	多列布局、侧边栏导航、密集的数据表、悬停交互
TABLET	约 768-1024px	混合布局：双列网格、可折叠侧边栏、便于触控且空间更充裕
AGNOSTIC	自适应	响应式／流式布局，不绑定特定设备，能够适应视口

提示词中的无障碍设计

在提示词中加入以下短语，引导 Stitch 生成无障碍设计：

• “高对比度文本，符合 WCAG AA 标准的颜色”
• “便于触控的点击目标，最小高度为 44px”
• “清晰的视觉层次，醒目的标题字号”
• “确保文字与背景之间有足够的颜色对比度”

快速参考——Stitch 提示词中的 UI 组件名称

请使用这些准确名称（模糊的描述会导致较差的结果）：

• “浮动操作按钮（FAB）”，而不是“角落里的按钮”
• “分段控件”，而不是“切换组”
• “底部弹出层”，而不是“从底部弹出的窗口”
• “骨架屏加载器”，而不是“加载占位符”
• “Snackbar”，而不是“底部通知”
• “面包屑导航”，而不是“导航路径”
• “步骤条／向导”，而不是“多步骤表单指示器”
• “带可排序列的数据表”，而不是“数据列表”
• “自动补全输入框”，而不是“带建议的搜索”

相关技能

• stitch-ui-design-spec-generator — 生成结构化 JSON，帮助你按照本指南进行描述
• stitch-ui-prompt-architect — 运用这些词汇来构建最终的 Stitch 提示词