用途:这是 Google Stitch 的语义设计系统技能,把反模板化前端工程规范翻译成 Stitch 原生语义设计语言,生成一份 DESIGN.md,作为提示 Stitch 生成新界面的单一事实来源。
前置条件:需可访问 Google Stitch(labs.google/stitch);可选 Stitch MCP Server 以便与 Cursor、Antigravity 或 Gemini CLI 做程序化集成。
DESIGN.md 编码内容:视觉氛围(情绪、密度、设计理念);配色校准(中性色、强调色、禁用模式及十六进制码);排版架构(字体栈、字号层级、反模式);组件行为(按钮、卡片、输入框及交互状态);布局原则;动效理念;显式反模式清单。
主要规则:最多 1 个强调色且饱和度低于 80%;禁用 AI 紫/蓝霓虹美学;不得使用纯黑 #000000;禁止使用 Inter 字体与通用衬线字体;高密度场景数字用等宽;默认基线为 Variance 8、Motion 6、Density 4,可据用户描述调整。英雄区禁用居中布局(方差大于 4 时)、禁用重叠元素、禁用“Scroll to explore”类填充文案,CTA 最多一个。布局上禁用“三张等大卡片横排”,使用 CSS Grid,80rem 级 max-width 收束,全高区块用 min-h-[100dvh]。响应式要求:小于 768px 全部多列折叠为单列、无横向滚动、触控目标最小 44px。动效默认弹簧物理(stiffness: 100, damping: 20),仅动画 transform 和 opacity。反模式含无 emoji、无霓虹外发光、无自定义鼠标光标、无 AI 文案套话、无通用占位名称、无失效 Unsplash 链接等。
限制:原文未提供具体安装命令与运行方式;部分示例数值(如卡片圆角 2.5rem)仅为格式示范。该技能强制特定审美取向,并非中性模板。