技能介绍

解决 AI 生成界面的“塑料感”

在依赖 AI 生成前端界面时，开发者常面临一个痛点：输出结果虽然结构完整，却充斥着高度同质化的“AI 俗套”。千篇一律的居中大标题、刺眼的紫色霓虹渐变、三列等宽特性卡片，以及被滥用的 Inter 字体，让产品瞬间失去高级感。这种缺乏设计品味的“模板味”不仅无法体现品牌个性，还会增加后期的手动重构成本。本技能旨在打破这一僵局，通过将经过实战检验的反俗套（anti-slop）前端工程指令，转化为 Google Stitch 的原生语义设计语言，从源头上抑制模板化输出。

核心能力与生成工作流

本技能的核心产物是一份 DESIGN.md 文件，它将成为提示 Stitch 生成新屏幕的单一事实来源（Single Source of Truth）。其工作流围绕以下关键步骤展开：

氛围与密度定义：通过评估目标项目的意图，设定视觉密度（如“艺术画廊般通透”到“驾驶舱般紧凑”）、排版变化与动效基调，摒弃空洞的形容词。
色彩与排版校准：强制约束强调色数量（最多 1 种，饱和度低于 80%），严禁“AI 紫/蓝霓虹”审美与纯黑（#000000）。排版上禁用 Inter 和通用衬线体，强制使用如 Geist 或 Fraunces 等具有独特字符的字体，并建立严格的字重与行高层级。
布局与组件规范：摒弃重叠元素与 calc() 百分比 hack，强制使用 CSS Grid。明确禁止居中 Hero 布局（高变化度项目）和三列等宽卡片，转而采用非对称网格或错列布局。
动效与微交互：注入基于弹簧物理（stiffness: 100, damping: 20）的动效哲学，要求组件具备持续的微交互状态（如脉冲、闪烁），并严格限制动画属性以保障性能。
反模式黑名单：将“AI 痕迹”编码为显式的 NEVER DO 规则，包括禁用填充文案（如“滚动探索”）、假数据、自定义鼠标指针及过度使用的渐变文本。

适用边界与注意事项

该技能专为配合 Google Stitch（需通过 labs.google/stitch 访问）设计，如需在 Cursor 或 Gemini CLI 中编程调用，还需配置 Stitch MCP Server。在使用此技能时，务必注意以下边界：DESIGN.md 的编写必须高度描述性和功能性，不能仅堆砌技术术语（如写“generously rounded corners”而非 rounded-xl），且必须包含精确的 hex 代码与 rem 值。反模式清单与正向规则同等重要，严格执行这些“禁令”才是输出具备高级感和独特性的真正关键。