Taste Skill

• §0 读房间：写码前先声明一行设计判断——页面类型、vibe 词、参考系、受众、约束。反默认纪律：不许上来就套模板
• §2 设计系统映射：brief 提到 Material / Fluent / Carbon / Polaris / Primer / shadcn → 用官方包；提到 glassmorphism / bento / brutalism / aurora → 用 web 标准并诚实标注是实现；Apple Liquid Glass 明确标注为近似而非官方

• §8 暗色协议：双模式默认，token 策略按项目声明，对比度/层级平价强制
• §11 重设计协议：Greenfield / Preserve / Overhaul 三模式检测，先审计再动手；永不静默改变：URL 结构、导航标签、表单字段名、品牌字标、法务文案
• §13 明确不管：仪表盘、数据表、多步表单、代码编辑器、原生移动、实时协作 UI——边界清晰

• Em-dash 全面禁令：页面任何位置零 ———标题、眉标、正文、按钮、alt 文本全算。pre-v2 测试中违反最多的 Tell，改用连字符或重构句子
• 章节编号眉标：00 / INDEX、001 · Capabilities 一律禁
• 假版本标签：hero 上的 V0.6、INVITE-ONLY PREVIEW、BETA——除非真是产品发布
• 假署名装饰：Field study no. 12 · Ines Caetano 式假 photo-credit——无真实归属就禁

• 装饰噪音：hero 底部文字条（BRAND. MOTION. SPATIAL.）、图上叠 pills、纯装饰状态点、scroll cue（↓ scroll）、城市/时间/天气条——99% 的 brief 都禁
• 假产品 UI：用 div 拼的假任务列表/仪表盘/终端冒充截图——禁
• 假进度条：填底轨道的评分/进度条当对比可视化——禁
• 手绘 SVG 图标：强烈不建议，按序用 Phosphor / HugeIcons / Radix / Tabler（Lucide 不推荐）

• 色彩一致性锁：整页一个 accent，不许第 7 节突然换色
• 形状一致性锁：每页一套圆角系统
• Hero 纪律：标题 ≤ 2 行、副文 ≤ 20 词 ≤ 4 行、CTA 不滚动即可见、字号随图片尺寸规划
• 导航纪律：桌面单行、高度 ≤ 80px
• Logo 墙：放 hero 之下、用真 SVG（Simple Icons / devicon），不许纯文字 wordmark 冒充

• 布局反重复：8 个 section 至少 4 种布局族——同构反复就是 AI 味
• Bento 法则：N 个内容 = 恰好 N 格，不留空洞格
• 主题锁：整页一个主题，不许中途明暗翻转
• 长列表换组件：>5 项还用 <ul> + divide-y 是懒惰默认——换卡片/标签页/跑马灯/轮播/scroll-snap
• 斜体降部预留：展示字斜体含 y g j p q 需 leading-[1.1] + pb-1

• 标准库收敛：动效统一 Motion（motion/react，Framer Motion 更名后的包）；旧 framer-motion 仍作别名
• §5.A GSAP Sticky-Stack：规范骨架 start:"top top" + pin:true + scrub:true，变换由下一张卡的 trigger 驱动
• §5.B GSAP Horizontal-Pan：同样 pin + end:"+="+distance + scrub:1
• §5.C Scroll-Reveal Stagger：简单浮现用 Motion 的 whileInView，GSAP 只留给真 pin/scrub

• §5.D 动画四禁：window.addEventListener('scroll')、React state 里做滚动计算、rAF 循环碰 state——一律禁
• 性能护栏：只动 transform / opacity，禁 top/left/width/height 动画
• Tailwind v4 默认：v3 仅在存量项目要求时
• 为什么给骨架：坏掉的 GSAP ScrollTrigger 是 v1 生产测试的高频事故——Agent 即兴写滚动动画必翻车，给 canonical 代码让它抄

# 全套装（扫 skills/ 目录）
npx skills add \
  https://github.com/Leonxlnx/taste-skill

# 单装主 skill（装的是 v2）
npx skills add \
  https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend"

# 依赖 v1 行为就 pin 旧版
npx skills add \
  https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend-v1"

• 也能裸用：任何 SKILL.md 直接复制进项目，或整段贴进 ChatGPT / Codex 对话
• 重装即升级：install name 不变，新版 SKILL.md 原地替换
• 选择困难？：通用默认 taste-skill；存量项目加 redesign-skill；Agent 老交付半截加 output-skill；交付物是图就装 imagegen 三件
• 调音：打开 skill 文件改顶部三个数字，其余不动