stitch-design-taste - SKILL

name: stitch-design-tastedescription: “Use when generating Google Stitch DESIGN.md systems for premium typography, color, layout, motion intent, and anti-generic UI rules.”category: frontendrisk: safesource: communitysource_repo: Leonxlnx/taste-skillsource_type: communitydate_added: “2026-04-17”author: Leonxlnxtags: [stitch, design-system, frontend, ui]tools: [claude, cursor, codex, antigravity]Stitch 设计品味 — 语义设计系统技能使用时机当用户想要一个与 Google Stitch 兼容的 DESIGN.md 或用于 AI 屏幕生成的语义设计系统时使用。当将高级前端品味规则转化为 Stitch 友好的视觉描述、颜色角色、排版规格和组件行为时使用。当设计系统必须在屏幕生成前防止通用的 AI UI 模式时使用。限制此技能为 Stitch 产生语义设计系统指导它不保证 Stitch 会精确渲染每个约束。生成的DESIGN.md文件仍需要对照实际产品简报、品牌约束、可访问性需求和屏幕内容进行审查。动效章节记录实施意图供后续编码代理使用因为 Stitch 本身可能生成静态屏幕。概述此技能生成针对 Google Stitch 屏幕生成优化的DESIGN.md文件。它将经过实战检验的反劣质前端工程指令转化为 Stitch 原生的语义设计语言——描述性、自然语言的规则配以精确的值Stitch 的 AI 代理可以解释这些值来产生高级、非通用的界面。生成的DESIGN.md作为唯一事实来源用于提示 Stitch 生成与经过策划的、高自主性设计语言一致的新屏幕。Stitch 通过由特定颜色值、排版规格和组件行为支持的**“视觉描述”**来解释设计。前置条件通过 labs.google.com/stitch 访问 Google Stitch可选Stitch MCP 服务器用于与 Cursor、Antigravity 或 Gemini CLI 的程序化集成目标生成一个DESIGN.md文件编码视觉氛围— 情绪、密度和设计理念颜色校准— 中性色、强调色和带十六进制代码的禁用模式排版架构— 字体栈、字号层级和反模式组件行为— 按钮、卡片、输入及交互状态布局原则— 网格系统、间距理念、响应式策略动效理念— 动画引擎规格、弹簧物理、持续的微交互反模式— 被禁用的 AI 设计陈词滥调的明确列表分析与综合说明1. 定义氛围评估目标项目的意图。使用品味光谱中富有表现力的形容词密度“美术馆通透”1–3→ “日常应用平衡”4–7→ “驾驶舱密集”8–10变化度“可预测对称”1–3→ “偏移非对称”4–7→ “艺术性混乱”8–10动效“静态克制”1–3→ “流畅 CSS”4–7→ “电影式编排”8–10默认基线变化度 8、动效 6、密度 4。根据用户描述的氛围动态调整。2. 映射调色板为每种颜色提供描述性名称十六进制代码功能角色。强制约束最多 1 种强调色。饱和度低于 80%AI 紫/蓝霓虹美学被严格禁止— 无紫色按钮发光、无霓虹渐变使用绝对中性基底Zinc/Slate配高对比度的单一强调色整个输出坚持一种调色板 — 无暖/冷灰波动绝不使用纯黑#000000— 使用 Off-Black、Zinc-950 或炭黑3. 建立排版规则展示/标题紧凑字距、受控的字号。不张扬。通过字重和颜色建立层级而非仅靠巨大尺寸正文宽松行高每行最多 65 字符字体选择在高级/创意语境中Inter被禁止。强制独特字符Geist、Outfit、Cabinet Grotesk或Satoshi衬线禁令通用衬线字体Times New Roman、Georgia、Garamond、Palatino被禁止。如果编辑/创意语境需要衬线只使用独特的现代衬线Fraunces、Gambarino、Editorial New或Instrument Serif。在仪表盘或软件 UI 中衬线始终被禁止仪表盘约束仅使用无衬线配对GeistGeist Mono或SatoshiJetBrains Mono高密度覆盖当密度超过 7 时所有数字必须使用等宽字体4. 定义英雄区英雄区是第一印象必须创意、引人注目、绝不千篇一律内联图像排版直接在标题的词或字母之间嵌入小而上下文化的照片或视觉元素。图像以行高内联放置、圆角充当视觉标点。这是标志性的创意技法无重叠文本绝不能与图像或其他文本重叠。每个元素占据自己干净的空间区域无填充文本“Scroll to explore”、“Swipe down”、滚动箭头图标、弹跳 chevron 被禁止。内容应自然吸引用户非对称结构当变化度超过 4 时居中英雄区布局被禁止CTA 克制最多一个主要 CTA。无次要Learn more链接5. 描述组件样式对于每种组件类型描述形状、颜色、阴影深度和交互行为按钮活动状态下的触觉按压反馈。无霓虹外发光。无自定义鼠标光标卡片仅在提升层次传达层级时使用。阴影色调匹配背景色调。对于高密度布局用 border-top 分隔线或负空间替代卡片输入/表单标签在输入框上方帮助文本可选错误文本在下方。标准间距加载状态匹配布局尺寸的骨架加载器 — 无通用圆形旋转器空状态组合构成指示如何填充数据错误状态清晰、内联的错误报告6. 定义布局原则无重叠元素 — 每个元素占据自己清晰的空间区域。无绝对定位内容堆叠当变化度超过 4 时居中英雄区被禁止— 强制分屏、左对齐或非对称留白通用的水平三个等宽卡片功能行被禁止— 使用两列之字形、非对称网格或水平滚动CSS Grid 优于 Flexbox 计算 — 绝不使用calc()百分比技巧使用 max-width 约束包含布局例如 1400px 居中全高章节必须使用min-h-[100dvh]— 绝不使用h-screeniOS Safari 灾难性跳动7. 定义响应式规则每个设计必须在所有视口中工作移动优先折叠 768px所有多列布局折叠为单列。无例外无水平滚动移动端的水平溢出是严重失败排版缩放标题通过clamp()缩放。正文最少1rem/14px触控目标所有交互元素最少44px点按目标图像行为内联排版图像词间照片在移动端堆叠在标题下方导航桌面水平导航折叠为干净的移动菜单间距垂直章节间距按比例缩小clamp(3rem, 8vw, 6rem)8. 编码动效理念弹簧物理默认stiffness: 100, damping: 20— 高级、有重量感。无线性缓动持续的微交互每个活动组件应有无限循环状态Pulse、Typewriter、Float、Shimmer交错编排绝不瞬间挂载列表 — 使用级联延迟进行瀑布式显现性能仅通过transform和opacity动画。绝不动画top、left、width、height。颗粒/噪点滤镜仅在固定伪元素上9. 列出反模式AI 特征在 DESIGN.md 中将这些编码为明确的绝不这样做规则任何地方无 emoji无Inter字体无通用衬线字体Times New Roman、Georgia、Garamond— 仅在需要时使用独特的现代衬线无纯黑#000000无霓虹/外发光阴影无过度饱和强调色无大标题上的过度渐变文本无自定义鼠标光标无重叠元素 — 始终干净的空间分离无 3 列等宽卡片布局无通用名称“John Doe”、“Acme”、“Nexus”无假整圆数字99.99%、50%无 AI 文案陈词滥调“Elevate”、“Seamless”、“Unleash”、“Next-Gen”无填充 UI 文本“Scroll to explore”、“Swipe down”、滚动箭头、弹跳 chevron无损坏的 Unsplash 链接 — 使用picsum.photos或 SVG 头像无居中英雄区针对高变化度项目输出格式DESIGN.md 结构# 设计系统[项目标题] ## 1. 视觉主题与氛围 对情绪、密度、变化度和动效强度的富有表现力的描述。 示例一个克制、画廊般通透的界面搭配自信的非对称布局 和流畅的弹簧物理动效。氛围是冷静而又温暖的——像一个 光线充足的建筑工作室。 ## 2. 调色板与角色 - **画布白**#F9FAFB— 主要背景表面 - **纯表面**#FFFFFF— 卡片和容器填充 - **炭黑墨水**#18181B— 主要文本Zinc-950 深度 - **哑光钢灰**#71717A— 次要文本、描述、元数据 - **耳语边框**rgba(226,232,240,0.5)— 卡片边框、1px 结构线条 - **[强调色名称]**#XXXXXX— 用于 CTA、活动状态、聚焦环的单一强调色 最多 1 种强调色。饱和度 80%。无紫色/霓虹。 ## 3. 排版规则 - **展示** [字体名称] — 紧凑字距、受控字号、字重驱动层级 - **正文** [字体名称] — 宽松行高、最大 65ch 宽度、中性次要色 - **等宽** [字体名称] — 用于代码、元数据、时间戳、高密度数字 - **禁用** Inter、高级语境中的通用系统字体。仪表盘中禁止衬线字体。 ## 4. 组件样式 * **按钮** 扁平、无外发光。活动时触觉 -1px 位移。主要按钮强调色填充次要按钮幽灵/描边。 * **卡片** 大方圆角2.5rem。扩散耳语阴影。仅在提升层次服务层级时使用。高密度用 border-top 分隔线替代。 * **输入** 标签在上方错误在下方。聚焦环用强调色。无浮动标签。 * **加载器** 匹配确切布局尺寸的骨架闪烁。无圆形旋转器。 * **空状态** 组合、插图化的构成 — 不只是无数据文本。 ## 5. 布局原则 网格优先的响应式架构。英雄区非对称分割。 低于 768px 严格单列折叠。max-width 包含。 无 flexbox 百分比计算。宽松的内边距。 ## 6. 动效与交互 所有交互元素的弹簧物理。交错级联显现。 活动仪表盘组件上的持续微循环。仅硬件加速 变换。高 CPU 动画隔离在客户端组件中。 ## 7. 反模式禁止 禁止模式的明确列表无 emoji、无 Inter、无纯黑、 无霓虹发光、无 3 列等宽网格、无 AI 文案陈词滥调、 无通用占位名称、无损坏的图像链接。最佳实践要有描述性“深炭黑墨水#18181B” — 而不仅仅是深色文本要有功能性解释每个元素用于什么要一致整个文档使用相同的术语要精确在括号中包含确切的十六进制代码、rem 值、像素值要有主见这不是一个中立模板——它强制执行特定的、高级的美学成功提示从氛围开始 — 在细化令牌之前理解氛围寻找模式 — 识别一致的间距、尺寸和样式语义化思考 — 按用途命名颜色而不仅仅是外观考虑层级 — 记录视觉权重如何传达重要性编码禁令 — 反模式与规则本身一样重要应避免的常见陷阱使用无翻译的技术行话“rounded-xl” 而不是大方圆角省略十六进制代码或只使用描述性名称忘记设计元素的功能角色氛围描述过于模糊忽略反模式列表 — 这些是让输出高级的东西默认使用通用的安全设计而不是强制执行策划的美学