Menu
为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。
当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。
仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。
对照适用的操作手册、草稿安全、证据、改动（mutation）和提交范围要求，核验客户支持工作。在每次 Gmail/客户支持分诊、账单/取消/退款/账户/访问权限调查、支持交接或草稿复核任务之后、给出最终回复之前使用；也在用户要求对照操作手册、清单、skill 或要求来核验支持工作时使用。
创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。
使用本地语音配置，从脚本或内联文本生成 ElevenLabs 文本转语音音频。当用户要 ElevenLabs、text-to-speech、TTS、旁白、配音、语音音频或语音生成时使用；语音名称、voice id、邮箱、所有者和账户特定默认值只从 skill 之外的本地配置载入。
| name | stitch-design-taste |
| description | 为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。 |
本技能生成为 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它把久经实战的反垃圾前端工程指令翻译成 Stitch 的原生语义设计语言——描述性的自然语言规则，搭配 Stitch 的 AI 代理能解读的精确数值，以产出高端、非通用的界面。
生成的 DESIGN.md 充当单一事实来源，用于提示 Stitch 生成与精心策划的高能动性设计语言相符的新屏幕。Stitch 通过**「视觉描述」**结合具体颜色值、字体规格与组件行为来解读设计。
生成一个编码了以下内容的 DESIGN.md 文件：
评估目标项目的意图。用品味谱系上有画面感的形容词：
默认基线：Variance 8、Motion 6、Density 4。根据用户的氛围描述动态调整。
每种颜色提供：描述性名称 + 十六进制码 + 功能角色。
强制约束：
#000000）——用近黑、Zinc-950 或 CharcoalInter 为禁用。强制独特性格：Geist、Outfit、Cabinet Grotesk 或 SatoshiTimes New Roman、Georgia、Garamond、Palatino）为禁用。若编辑部/创意语境需要衬线，只用有辨识度的现代衬线：Fraunces、Gambarino、Editorial New 或 Instrument Serif。仪表盘或软件 UI 中衬线始终禁用Geist + Geist Mono 或 Satoshi + JetBrains Mono）Hero 是第一印象，必须有创意、醒目、绝不通用：
对每种组件类型，描述形状、颜色、阴影深度与交互行为：
calc() 百分比 hackmin-h-[100dvh]——绝不用 h-screen（iOS Safari 灾难性跳动）每个设计必须跨所有视口工作：
clamp() 缩放。正文最低 1rem/14px44px 点击目标clamp(3rem, 8vw, 6rem)）stiffness: 100, damping: 20——高端、有重量的感觉。无线性缓动transform 与 opacity 做动画。绝不动画 top、left、width、height。颗粒/噪点滤镜只用于固定伪元素在 DESIGN.md 中把这些编码为明确的「绝不做」规则：
Inter 字体Times New Roman、Georgia、Garamond）——如需只用有辨识度的现代衬线#000000）99.99%、50%）picsum.photos 或 SVG 头像# 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.)