返回技能市场
内容创作 安全

stitch-design-taste

@admin/stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

admin 热度 422v0.0.1

Stitch Design Taste — 语义设计系统技能

概览

本技能生成针对 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它将久经考验的反低质前端工程指令转换为 Stitch 原生语义设计语言——描述性、自然语言规则与精确数值配对，Stitch 的 AI 智能体可据此生成高端、非泛型界面。

生成的 DESIGN.md 作为唯一事实来源，用于提示 Stitch 生成与精选、高能动性设计语言一致的新屏幕。Stitch 通过“视觉描述”来理解设计，并辅以具体颜色值、排版规格和组件行为。

前提条件

  • 通过 labs.google/stitch 访问 Google Stitch
  • 可选：Stitch MCP Server，用于与 Cursor、Antigravity 或 Gemini CLI 进行程序化集成

目标

生成一个编码以下内容的 DESIGN.md 文件：

  1. 视觉氛围——情绪、密度与设计理念
  2. 颜色校准——中性色、强调色及禁用模式，并附十六进制代码
  3. 排版架构——字体栈、缩放层级和反模式
  4. 组件行为——按钮、卡片、输入框及交互状态
  5. 布局原则——网格系统、间距理念和响应式策略
  6. 动效理念——动画引擎规格、弹簧物理和持续微交互
  7. 反模式——明确列出被禁用的 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 或 Charcoal

3. 建立排版规则

  • 展示/标题： 字距紧凑，缩放受控。不要大喊大叫。通过字重和颜色建立层级，而不只是巨大尺寸
  • 正文： 宽松行高，每行最多 65 个字符
  • 字体选择： 在高端/创意场景中，Inter 被禁止。强制使用独特字体：Geist、Outfit、Cabinet Grotesk 或 Satoshi
  • 衬线禁令： 通用衬线字体（Times New Roman、Georgia、Garamond、Palatino）被禁止。如果编辑/创意场景需要衬线，只能使用独特的现代衬线：Fraunces、Gambarino、Editorial New 或 Instrument Serif。在仪表盘或软件 UI 中始终禁止使用衬线
  • 仪表盘约束： 只使用无衬线字体配对（Geist + Geist Mono 或 Satoshi + JetBrains Mono）
  • 高密度覆盖： 当密度超过 7 时，所有数字必须使用等宽字体

4. 定义首屏区块

首屏是第一印象，必须具有创意、醒目，且绝不泛型：

  • 内联图像排版： 将小型、语境相关的照片或视觉元素直接嵌入标题的单词或字母之间。图像以行内方式按字高排列，圆角处理，充当视觉标点。这是标志性创意技法
  • 禁止重叠： 文本绝不能与图像或其他文本重叠。每个元素占据自己干净的视觉区域
  • 禁止填充文本： “向下滚动探索”、“向下滑动”、滚动箭头图标、弹跳的 V 形箭头均被禁止。内容应自然吸引用户
  • 非对称结构： 当变化度超过 4 时，禁止居中首屏布局
  • CTA 克制： 最多一个主 CTA。不允许次要的“了解更多”链接

5. 描述组件样式

对每种组件类型，描述形状、颜色、阴影深度和交互行为：

  • 按钮： 在激活状态提供触觉按压反馈。没有霓虹外辉光。没有自定义鼠标光标
  • 卡片： 仅在需要利用浮起高度传达层级时使用。将阴影着色为背景色相。在高密度布局中，用顶部边框分隔线或负空间替代卡片
  • 输入框/表单： 标签位于输入框上方，辅助文本可选，错误文本位于下方。使用标准间距
  • 加载状态： 匹配布局尺寸的骨架加载器——没有通用圆形旋转器
  • 空状态： 经过编排的呈现，说明如何填充数据
  • 错误状态： 清晰的内联错误报告

6. 定义布局原则

  • 不允许重叠元素——每个元素占据自己清晰的视觉区域。不允许绝对定位内容堆叠
  • 当变化度超过 4 时，禁止居中首屏区块——强制使用分屏、左对齐或非对称留白
  • 通用的“水平排列 3 个等宽卡片”功能行被禁止——使用 2 列之字形、非对称网格或水平滚动
  • 优先使用 CSS Grid，而不是 Flexbox 数学——绝不使用 calc() 百分比技巧
  • 使用最大宽度约束来限制布局（例如，1400px 居中）
  • 全高区块必须使用 min-h-[100dvh]——绝不使用 h-screen（iOS 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 中明确的“NEVER DO”规则：

  • 任何地方都不要使用表情符号
  • 不使用 Inter 字体
  • 不使用通用衬线字体（Times New Roman、Georgia、Garamond）——仅在需要时使用独特的现代衬线
  • 不使用纯黑（#000000）
  • 不使用霓虹/外辉光阴影
  • 不使用过度饱和的强调色
  • 不在大型标题上使用过度渐变文本
  • 不使用自定义鼠标光标
  • 不允许重叠元素——始终保持干净的空间分隔
  • 不使用 3 列等宽卡片布局
  • 不使用通用名称（“John Doe”、“Acme”、“Nexus”）
  • 不使用虚假的整数（99.99%、50%）
  • 不使用 AI 文案陈词滥调（“提升”、“无缝”、“释放”、“下一代”）
  • 不使用填充 UI 文本：“向下滚动探索”、“向下滑动”、滚动箭头、弹跳的 V 形箭头
  • 不使用失效的 Unsplash 链接——使用 picsum.photos 或 SVG 头像
  • 不使用居中首屏区块（针对高变化度项目）

输出格式（DESIGN.md 结构）

# Design System: [Project Title]

## 1. Visual Theme & Atmosphere
(Evocative description of the mood, density, variance, and motion intensity.
Example: "A restrained, gallery-airy interface with confident asymmetric layouts
and fluid spring-physics motion. The atmosphere is clinical yet warm — like a
well-lit architecture studio.")

## 2. Color Palette & Roles
- **Canvas White** (#F9FAFB) — Primary background surface
- **Pure Surface** (#FFFFFF) — Card and container fill
- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth
- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata
- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines
- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings
(Max 1 accent. Saturation < 80%. No purple/neon.)

## 3. Typography Rules
- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy
- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color
- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers
- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.

## 4. Component Stylings
* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.
* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.
* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.
* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.
* **Empty States:** Composed, illustrated compositions — not just "No data" text.

## 5. Layout Principles
(Grid-first responsive architecture. Asymmetric splits for Hero sections.
Strict single-column collapse below 768px. Max-width containment.
No flexbox percentage math. Generous internal padding.)

## 6. Motion & Interaction
(Spring physics for all interactive elements. Staggered cascade reveals.
Perpetual micro-loops on active dashboard components. Hardware-accelerated
transforms only. Isolated Client Components for CPU-heavy animations.)

## 7. Anti-Patterns (Banned)
(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,
no neon glows, no 3-column equal grids, no AI copywriting clichés,
no generic placeholder names, no broken image links.)

最佳实践

  • 要具描述性： “深炭墨（#18181B）”——而不只是“深色文本”
  • 要具功能性： 解释每个元素的用途
  • 要一致： 全文使用相同术语
  • 要精确： 包含准确的十六进制代码、rem 值和像素值，并用括号标注
  • 要有观点： 这不是中立模板——它强制执行一种特定的高端审美

成功提示

  1. 从氛围开始——在细化令牌前先理解氛围
  2. 寻找模式——识别一致的间距、尺寸和样式
  3. 语义化思考——按用途命名颜色，而不只是外观
  4. 考虑层级——记录视觉重量如何传达重要性
  5. 编码禁令——反模式与规则本身同样重要

需要避免的常见陷阱

  • 使用没有转译的技术术语（“rounded-xl”而不是“宽大的圆角”）
  • 省略十六进制代码或只使用描述性名称
  • 忘记设计元素的功能角色
  • 氛围描述过于含糊
  • 忽略反模式列表——正是这些让输出显得高端
  • 默认使用泛型“安全”设计，而不是强制执行精选审美
qianwen skills install @admin/stitch-design-taste