Taste Skill 高审美前端设计

技能介绍

Taste Skill（仓库字段 taste-skill，安装名 design-taste-frontend）是一套给 AI 编程代理用的反模板化前端设计技能。它要解决的问题很具体：AI 写出来的页面几乎一看就知道是 AI 写的，紫色渐变、居中的大标题配深色网格背景、三张一模一样的功能卡片、满屏玻璃拟态、处处无限循环的微动效、千篇一律的 Inter + slate-900。这些都是模型的默认审美，而 Taste Skill 的作用就是在代理动手写代码前先"读懂房间"，推断出真正合适的设计方向。

技能覆盖的场景是落地页、个人作品集与既有网站的改版，明确不覆盖仪表盘、数据表格与多步骤产品 UI。

它的工作方式可以概括为：先读需求简报推断设计方向，再调三个旋钮（版式变化度 / 动效强度 / 信息密度），然后选一个真实存在的设计系统或诚实的审美方向，最后按一堆硬性规则施工，并在交付前跑一遍出厂自检清单。技能里同时内置了大量"AI 痕迹"禁用规则，宁可拒绝套模板，也不默认走模型的审美舒适区。

• 仓库：https://github.com/Leonxlnx/taste-skill
• 项目主页：https://tasteskill.dev
• 作者：Leonxlnx ｜ 许可：MIT
• 当前版本：v2（实验版），由 v1 大幅重写而来；v1 保留在 skills/taste-skill-v1
• 同一仓库还提供 gpt-tasteskill（更严格的 GPT/Codex 变体）、image-to-code-skill、redesign-skill、soft / minimalist / brutalist-skill 等代码类技能，以及 brandkit、imagegen-frontend-web / mobile 三个只出参考图的图像类技能

适用场景

• 落地页：SaaS、消费品牌、代理商 / 活动页等营销型首页
• 个人作品集：开发者、设计师、创意工作室的作品集站点
• 既有网站改版：在不破坏品牌的前提下做视觉现代化，技能自带"先审计再动手"的流程
• 编辑型 / 博客类页面：杂志化排版、长文阅读页

不适用（技能会明确说明并指向正确的工具）：

• 仪表盘、密集产品 UI、后台管理面板（可用 Fluent、Carbon、Atlassian、Polaris）
• 数据表格（可用 TanStack Table 或 AG Grid）
• 多步骤表单 / 向导
• 代码编辑器（用 Monaco / CodeMirror 官方皮肤）
• 原生移动端（直接用 Apple HIG / Material）
• 实时协作类界面（在线状态、光标、OT 等另一类问题）

核心能力

1. 简报推断：先读房间，再动代码

动手前必须先推断用户真正想要什么，并输出一句话的"设计定位"：

Reading this as: \ for \, with a \ language, leaning toward \.

例如：Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion.

推断依据：页面类型、用户口中的氛围词（minimalist、Linear-style、Awwwards、brutalist、Apple-y…）、他给的参考链接与截图、受众（B2B 采购方 vs 设计敏感型消费者 vs 筛简历的招聘者）、已有的品牌资产（logo / 色彩 / 字体 / 摄影）、以及那些"安静但更强"的约束（无障碍优先、公共部门、受监管行业、儿童产品）。约束优先于审美偏好。

如果简报确实含糊，只问一个澄清问题（例如"要更接近 Linear 那种干净，还是 Awwwards 那种实验？"），绝不一连串提问。能推断出来就别问。

同时明确"反默认纪律"：不要默认紫色渐变、深色网格上的居中主视觉、三张等宽功能卡、到处玻璃拟态、满屏微动效、Inter + slate-900。

2. 三个旋钮（核心参数）

定完设计定位后，设置三个 1–10 的旋钮，后面所有布局、动效、密度决策都由它们决定：

• DESIGN_VARIANCE（版式变化度）：1 = 完全对称，10 = 艺术化混沌
• MOTION_INTENSITY（动效强度）：1 = 静止，10 = 电影级 / 物理感
• VISUAL_DENSITY（信息密度）：1 = 画廊般留白，10 = 座舱般密集

基线是 `8 / 6 / 4`，除非设计定位推翻了它。旋钮只在对话中覆盖，不要改技能文件。

从设计定位推断旋钮：

常见用例预设：

旋钮值会作为全局变量被全文交叉引用，不要自造别名（如 LAYOUT_VARIANCE、ANIM_LEVEL）。

3. 设计系统映射

有官方包的就用官方包，不要手写它已经提供的 CSS，也不要把某种审美潮流伪装成官方系统。

一个项目只用一个系统，不要把 Fluent React 和 Carbon 混在同一棵组件树里。

如果简报描述的是审美方向而非系统（玻璃拟态、Bento、粗野主义、编辑风、暗黑科技、极光渐变、动态字体、Apple Liquid Glass），没有单一官方包可用，就用原生 CSS + Tailwind + 一个在维护的组件库实现，并在代码注释里诚实注明哪些是借鉴灵感、哪些是官方素材。其中特别提醒：Apple Liquid Glass 只在 Apple 平台有官方实现，不存在官方 `liquid-glass.css`，网页实现一律只能标注为近似。

4. 默认技术栈与架构约定

• 框架：React 或 Next.js，默认 Server Components。全局状态只能写在 Client Component 里（Next.js 中把 provider 包进 "use client" 组件）。任何用到 Motion、滚动监听、指针物理的组件都必须是带 'use client' 的隔离叶子组件。
• 样式：默认 Tailwind v4（postcss.config.js 里不要用 tailwindcss 插件，改用 @tailwindcss/postcss 或 Vite 插件）。
• 动效：使用 Motion（原 Framer Motion），从 motion/react 导入。
• 字体：始终用 next/font 或 @font-face + font-display: swap 自托管，生产环境不要用 `` 引 Google Fonts。
• 状态：局部用 useState / useReducer；只有为了避免深层透传才引入全局状态。绝不要用 useState 追踪鼠标位置、滚动进度、指针物理这类连续值，改用 Motion 的 useMotionValue / useTransform / useScroll。
• 图标：优先 @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react；lucide-react 仅在用户明确要求或项目已依赖时用；绝不手写 SVG 图标路径；一个项目只用一套图标库；全局统一 strokeWidth。
• 断点：sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536。页面容器用 max-w-[1400px] mx-auto 或 max-w-7xl。
• 视口稳定性：主视觉全高绝不用 h-screen，一律 min-h-[100dvh]（避免 iOS Safari 地址栏导致跳动）。
• 网格优先于 Flex 数学：不要写 w-[calc(33%-1rem)] 这类百分比算术，用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）。
• 依赖校验（强制）：引入任何第三方库前先查 package.json，缺了就先把安装命令输出出来，绝不假设库已存在。

5. 设计工程准则（纠偏）

字体排印

• 标题默认 text-4xl md:text-6xl tracking-tighter leading-none；正文默认 text-base text-gray-600 leading-relaxed max-w-[65ch]。
• 无衬线字体不默认用 Inter，优先 Geist、Outfit、Cabinet Grotesk、Satoshi。Inter 只在用户明确要中性 / 标准 / Linear 风格，或公共部门、无障碍优先站点时才用。
• 衬线体纪律：衬线体作为任何项目的默认字体都被"非常不推荐"使用，"感觉更有创意 / 更高级"并不是理由。只有当品牌简报点名了某款衬线体，或审美方向确实是编辑 / 奢华 / 出版 / 手稿 / 复古，且能说清这款衬线体为何契合这个品牌时才用。Fraunces 与 Instrument_Serif 被明确列为禁用的默认选项。
• 需要强调标题里的某个词时，用同一字体的斜体或粗体，不要混入一款衬线或另一族字体。

配色

• 最多 1 个强调色，饱和度默认低于 80%。避免"AI 紫 / 蓝光晕"，改用中性底色（Zinc / Slate / Stone）+ 高对比单点强调色。
• 一页一强调色：暖灰站点不会在第 7 屏突然出现蓝色 CTA，玫瑰色站点的页脚也不会冒出青色徽章。
• 高端消费品牌配色禁令：米色 / 奶油底 + 黄铜 / 陶土 / 赭石 + 浓咖啡色文字的"暖匠人"配色，是模型对厨具、健康、手工、奢品简报的默认套路，被列为默认禁用。可轮换的替代方向有：冷调奢华（银灰 + 铬 + 烟）、森林（深绿 + 骨白 + 琥珀）、黑褐（近黑 + 暖棕）、钴蓝 + 奶油、陶土 + 石板灰、橄榄 + 砖红 + 纸、纯单色 + 一个饱和点缀。相邻两个高端消费项目不得使用同一配色家族。

版式与材质

• DESIGN_VARIANCE > 4 时避免居中主视觉，改用左右分屏、左文右图、非对称留白或滚动吸附结构。
• 卡片只在高程真的表达层级时才用，否则用 border-t、divide-y 或留白分组。阴影要染成背景色调，浅底上不要纯黑投影。
• 圆角一致性：全页只用一个圆角尺度（全直角 / 全柔角 12-16px / 全胶囊），混合体系必须有成文规则并处处遵守。

交互状态

• 完整实现 loading（骨架屏而非通用转圈）、空状态、错误状态，以及 :active 时的物理按压反馈（-translate-y-[1px] 或 scale-[0.98]）。
• 按钮对比度检查：所有 CTA 文字与按钮底色必须可读，WCAG AA 起步（正文 4.5:1，18px+ 大字 3:1）。白底白字、透明按钮无描边一律禁止。
• CTA 换行禁令：按钮文字在桌面端必须单行显示，换行即为破版。
• 禁止重复意图的 CTA："Get in touch" + "Contact us" + "Let's talk" 属同一意图，全页只保留一个标签。
• 表单对比度检查：输入框、占位文字、聚焦环、辅助文字、错误提示都要通过 AA 对比。
• 标签放输入框上方，错误文字放下方，绝不用占位文字当标签。

布局纪律（硬规则，违反即为坏件）

• 主视觉必须能塞进首屏：标题桌面端最多 2 行，副文案最多 20 词且最多 3-4 行，CTA 不滚动就可见。
• 主视觉顶部内边距上限 pt-24，再多就会让内容浮在视口中间，读起来像布局 bug。
• 主视觉最多 4 个文字元素（眉标或品牌条其一、标题、副文案、CTA），CTA 下方的小标语、信任微条、价格提示、功能列表一律移到主视觉下方的独立区块。
• "Used by / Trusted by" logo 墙永远放在主视觉下方，不塞进主视觉。
• 导航桌面端必须单行，高度上限 80px（默认 64-72px）。
• Bento 网格要有节奏且格子数精确对应内容数：3 项就 3 格，5 项就 5 格，中间或末尾不留空格；且至少 2-3 格有真实视觉变化（图片、渐变、纹理、染色底），不能是 6 张白底白卡。
• 同一版式家族在一页里最多出现一次；一页 8 个区块至少要 4 种不同版式家族。
• 连续"左图右文 / 左文右图"锯齿布局最多 2 屏，第 3 屏连续出现即不合格。
• 眉标节制：每 3 个区块最多 1 个眉标（小号大写宽字距标签），主视觉算 1 个。9 个区块的页面最多 3 个眉标，多出即不合格。
• 拆分式页头禁令：左侧大标题 + 右侧小段说明文字的页头默认禁止，要么上下堆叠，要么右侧确实承载视觉或交互元素。
• 每个多列布局都要在同组件里显式声明 < 768px 的折叠规则，不能靠"Tailwind 会处理"。

图像与视觉素材

• 素材优先级：① 环境里有图像生成工具就必须先用它生成对应比例的配图（主视觉摄影、产品图、纹理、氛围图）；② 其次用真实网络图（https://picsum.photos/seed/{描述性种子}/{w}/{h}、图库或品牌方提供的 URL）；③ 都不行就明确告诉用户并留下标注清楚的占位槽（``），绝不用 div 拼"假截图"或手绘 SVG 硬凑。
• 极简站点也需要真实图片，纯文字页不是极简主义，是未完成。
• logo 墙用真实 SVG logo（https://cdn.simpleicons.org/{slug}/ffffff 或 devicon）；自造品牌名就配一个自造的 SVG 记号；logo 墙只放 logo，不要在下面加行业 / 品类小字。
• 禁止 div 伪造产品截图（假任务列表、假终端、假仪表盘），需要展示产品就用真实截图、生成图、真实组件预览，或干脆跳过改用编辑型摄影。

内容密度与文案

• 每屏默认形态：短标题（≤ 8 词）+ 短副段（≤ 25 词）+ 一个视觉素材或一个 CTA。
• 不做数据倾倒屏：营销页上不要 20 行表格、30 行获奖名单、巨型价格矩阵；改为前 3-5 项精选 + "查看完整列表"、走马灯 / 轮播，或干脆另开一页。
• 超过 5 项的列表要换 UI 组件（分组两列、卡片网格、标签页 / 折叠、横向 scroll-snap、走马灯），不要默认 ` + divide-y`；规格表更不要每行都加下边框。
• 文案自查：交付前重读页面上每一个可见字符串，语法不通、指代不明、像 AI 幻觉的俏皮话一律重写成朴素功能句。AI 生成的可爱文案比无聊文案更糟。
• 假精确数字要么来自真实数据、要么显式标注为示例，凭空捏造的工程精度禁止。
• 引言 ≤ 3 行，署名要"姓名 + 职位（可选公司）"；引号用真正的印刷引号或干脆不用。

页面主题锁定

整页只有一个主题，区块之间不反转：暗色页不能中间夹一屏暖米色，反之亦然。需要"滚动换主题"这种刻意的构成手法时，一页最多用一次，且必须是一次带过渡的完整切换。

6. 动效与滚动骨架

这些是工具不是默认项，由设计定位决定是否启用，不会自动触发。核心纪律：

• 动效必须有理由：加任何动画前先问"它传达了什么"。合理答案是层级（引导注意力）、叙事（按顺序揭示）、反馈（回应操作）、状态变化。不合理答案是"看起来酷"。一句话说不清理由就删掉。
• 声称了动效就要真的动：MOTION_INTENSITY > 4 的页面必须真有入场过渡、滚动揭示、悬停物理；做不完就把旋钮降到 3，交一个干净的静态页，绝不留半成品动效。
• 弹簧物理用 type: "spring", stiffness: 100, damping: 20，不要线性缓动。
• 水平走马灯一页最多一条。
• MOTION_INTENSITY > 3 的一切动效都必须尊重 prefers-reduced-motion，无限循环、视差、滚动劫持、磁吸物理在减弱动效下必须塌缩为静态。

禁止的动画写法

• 禁止 window.addEventListener("scroll", ...)（每帧执行、易卡顿、无批处理），改用 Motion 的 useScroll()、GSAP ScrollTrigger、IntersectionObserver 或 CSS animation-timeline: view()。
• 禁止用 React state 存 window.scrollY 做进度计算；禁止触碰 React state 的 requestAnimationFrame 循环。
• layout / layoutId 只用于真实的可见状态变化，不要"为了保险"包住静态内容。

GSAP 粘性堆叠（Sticky-Stack）标准骨架

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !ref.current) return;
    const ctx = gsap.context(() => {
      const cardEls = gsap.utils.toArray<HTMLElement>(".stack-card");
      cardEls.forEach((card, i) => {
        if (i === cardEls.length - 1) return;
        ScrollTrigger.create({
          trigger: card,
          start: "top top",                              // pin at viewport top
          endTrigger: cardEls[cardEls.length - 1],
          end: "top top",
          pin: true,
          pinSpacing: false,
        });
        gsap.to(card, {
          scale: 0.92,
          opacity: 0.55,
          ease: "none",
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <div ref={ref} className="relative">
      {cards.map((card, i) => (
        <div
          key={i}
          className="stack-card sticky top-0 min-h-[100dvh] flex items-center justify-center"
        >
          {card}
        </div>
      ))}
    </div>
  );
}

要点：start: "top top"、pin: true、除最后一张外全部钉住，缩放/透明度由下一张卡片的滚动触发器驱动。

GSAP 横向平移（Horizontal-Pan）标准骨架

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function HorizontalPan({ children }: { children: React.ReactNode }) {
  const wrap = useRef<HTMLDivElement>(null);
  const track = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !wrap.current || !track.current) return;
    const ctx = gsap.context(() => {
      const distance = track.current!.scrollWidth - window.innerWidth;
      gsap.to(track.current, {
        x: -distance,
        ease: "none",
        scrollTrigger: {
          trigger: wrap.current,
          start: "top top",                              // pin starts when section top hits viewport top
          end: () => `+=${distance}`,                    // scroll distance = track width minus viewport
          pin: true,
          scrub: 1,
          invalidateOnRefresh: true,
        },
      });
    }, wrap);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <section ref={wrap} className="relative overflow-hidden">
      <div ref={track} className="flex h-[100dvh] items-center">
        {children}
      </div>
    </section>
  );
}

要点：外层被钉住，内层轨道随垂直滚动横向滑动，end: "+=${distance}" 让滚动长度等于横向行程。

滚动揭示（Scroll-Reveal，轻量替代方案）

只是"元素进入视口时淡入"、不需要钉住的场景，优先用 Motion 的 whileInView 而不是 GSAP：

"use client";
import { motion, useReducedMotion } from "motion/react";

export function RevealStagger({ items }: { items: string[] }) {
  const reduce = useReducedMotion();
  return (
    <ul className="grid gap-6">
      {items.map((item, i) => (
        <motion.li
          key={item}
          initial={reduce ? false : { opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{
            duration: 0.6,
            delay: i * 0.06,
            ease: [0.16, 1, 0.3, 1],
          }}
        >
          {item}
        </motion.li>
      ))}
    </ul>
  );
}

动效库分工：Motion（motion/react）用于 UI / Bento / 状态变化；GSAP + ScrollTrigger 用于整页滚动叙事与滚动劫持；Three.js / WebGL 用于画布背景与 3D 场景。绝不在同一棵组件树里混用 GSAP / Three.js 与 Motion，它们会抢同一批帧。

7. 性能与无障碍护栏

• 只动 transform 与 opacity，绝不动 top / left / width / height；will-change: transform 只在真会动的元素上少量使用。
• 任何 MOTION_INTENSITY > 3 的动效都必须处理 prefers-reduced-motion：Motion 里用 useReducedMotion() 降级为静态，CSS 里用 @media (prefers-reduced-motion: no-preference) 包裹或在 reduce 分支里关掉。
• 面向消费者的页面必须一开头就双模式设计，用 Tailwind dark: 变体或 CSS 变量二选一，不要交付只有单模式的页面。不要用纯 #000000 和纯 #ffffff，用近黑 / 近白保留层次。开发期间两种模式都要看过。
• 核心 Web 指标目标：LCP < 2.5s（首图 next/image priority 或预加载）、INP < 200ms、CLS < 0.1（为图片、字体、嵌入预留空间）；交付前跑一遍 Lighthouse。
• 颗粒 / 噪点滤镜只能加在 fixed、pointer-events-none 的伪元素上，绝不加在滚动容器上（连续 GPU 重绘会毁掉移动端帧率）；首屏外的重资源要懒加载。
• 不要到处撒 z-50 / z-10，z-index 只用于系统性层级（粘性导航、弹窗、遮罩、颗粒），并在项目常量文件里记录层级表。

8. AI 痕迹禁用清单

这些是模型试图"看起来像被设计过"时的默认签名，除非简报明确要求，否则视为硬性禁止：

• 视觉与 CSS：默认不要霓虹外发光、不用纯黑、不用过饱和强调色、大标题不滥用渐变文字、不做自定义鼠标指针。
• 字体：不默认 Inter；不靠放大 H1 制造层级（用字重与颜色）；衬线体不给仪表盘用。
• 版式：禁止"三张等宽功能卡"这一经典套路，改用两列锯齿、非对称网格、滚动钉住或横向滚动。
• 内容与数据：不用 "John Doe"、"Sarah Chan" 这类通用名；不用 SVG 蛋形头像；不用 99.99%、1234567 这类假完美数字（用 47.2%、+1 (312) 847-1928 这种有机数据）；不用 "Acme"、"Nexus"、"SmartFlow" 这类创业模板名；不用 "Elevate / Seamless / Unleash / Next-Gen / Revolutionize" 这类填充动词。
• 外部资源：不手写 SVG 图标；不用 div 伪造截图；不用失效的 Unsplash 链接；shadcn/ui 可以改但绝不能用默认态。
• 主视觉区：不加版本号标签（V0.6、BETA、INVITE-ONLY，除非简报就是产品发布）；不加 "Brand · No. 01" 式子眉标。
• 区块编号与微标签：禁止 00 / INDEX、001 · Capabilities、06 · how it works 这类编号眉标；禁止图片或 Bento 格上的 01 / 4 序号；禁止滚动提示带章节号；禁止 "Index of Work, 2018 - 2026" 这类年份范围标签。
• 分隔符与圆点：中点 · 每行最多 1 个；默认不做装饰性彩色状态圆点（只有表达真实语义状态时可少量使用）。
• 破折号（最常被违反的一条）：em-dash（`—`）完全禁用。标题、眉标、按钮、正文、引言、署名、图注、alt 文本一律不许出现；没有"少量使用"或"正文里可以"的例外。用句号、逗号、分号、括号或换行重构句子。en-dash（–）用作分隔符时同样禁止，日期与数字范围用普通连字符（2018-2026、€40-80k）。页面上只允许普通连字符 - 与数学负号。
• 假产品预览：主视觉里不要用 div 拼的假任务列表 / 假终端 / 假仪表盘，这是 AI 设计的第一号痕迹。
• 营销文案套路：不用 "Quietly in use at / Quietly trusted by"；不用 "From the field"、"Field notes"、"Currently on the bench" 这类故作姿态的诗意标题；不加天气 / 城市 / 时间条；不用 "Stage 1 / Step 1 / Phase 01 / Pass One" 这类通用步骤标签（直接写动词，如 Install、Configure、Ship）。
• 图片上的浮层与图注：不在图片上叠 Plate · Brand 这类标签；不做装饰性摄影师署名（Field study no. 12 · Ines Caetano）；营销页不加 v1.4.2、Build 0048 这类版本页脚；不做 "Reservation 412 of 800" 式的库存计数器。
• 装饰文字条：主视觉底部的 BRAND. MOTION. SPATIAL. 这类小号等宽大写条默认禁止（除非它承载真实可点链接或真实状态信息）；区块标题右上角飘一句没有对齐关系的说明文字同样禁止。
• 列表与分隔线：长列表 / 规格表不要每行都加 border-t + border-b；不用带填充背景轨道的评分 / 进度条做对比视觉。
• 地域、时间与滚动提示：99% 的简报都不要城市名 / 时间 / 天气条；禁止 Scroll、↓ scroll、Scroll to explore 之类的滚动提示（用户知道什么是滚动）。

9. 改版协议（Redesign）

技能同时处理全新搭建与改版，误判模式是改版失败最大的来源。

第一步先定模式：全新搭建（无既有站点或已批准彻底重做）、改版-保留品牌（先审计、提取品牌 token、渐进演化）、改版-彻底重做（视觉上按新项目做，保留内容与信息架构）。含糊不清时只问一次："这次改版要保留现有品牌，还是视觉上从零开始？"

动手前先审计并记录现状：品牌 token（主色 / 强调色、字体栈、logo 处理、圆角）、信息架构（页面树、主导航、关键转化路径）、内容区块（哪些真在起作用、哪些是填充）、要保留的签名交互与文案语气、要淘汰的 AI 痕迹与失效链接、既有站点的旋钮读数（这是起点而非基线）、以及 SEO 基线（当前排名页、meta 标题、结构化数据、OG 卡片），SEO 迁移是改版的头号风险。

保留规则：未经要求不改信息架构，保持页面 slug、锚点 ID、主导航标签稳定；先提取品牌色再套用配色规则（本来就是紫色的品牌保持紫色）；保持文案语气，视觉现代化不等于内容重写；不要回退既有的无障碍成果与分析事件。

现代化杠杆（按优先级，满足简报即停）：① 字体刷新（单位风险下视觉提升最大）→ ② 间距与节奏 → ③ 配色重校 → ④ 动效层 → ⑤ 主视觉与关键区块重组 → ⑥ 整块替换（仅当原区块确实无可救药）。

决策树：信息架构、内容、SEO 都健康 → 定向演化（杠杆 1-4）；视觉债务是结构性的（信息架构坏了、没有设计系统、移动端崩了）→ 彻底重做但严格保留内容；品牌本身在变 → 按全新项目做。

绝不静默改动（需用户明确批准）：URL 结构与路由 slug、主导航标签、表单字段名与顺序、品牌 logo 与字标、既有的法务 / 同意 / Cookie 文案。

10. 出厂自检（Pre-Flight Check）

交付代码前必须逐项跑完这张清单，任何一项不能诚实地打勾，页面就不算完成。清单覆盖：设计定位是否声明、旋钮是否由简报推出、设计系统是否选定或诚实标注、改版模式是否判定并审计、全页是否零 em-dash、主题锁定、配色与圆角一致性、按钮与表单对比度、CTA 不换行且意图不重复、衬线体与高端消费配色是否避开禁用族、斜体降部是否留出 leading-[1.1] + pb-1、主视觉是否塞进首屏且顶部内边距不超过 pt-24、主视觉文字元素 ≤ 4、眉标数量 ≤ ⌈区块数 / 3⌉、拆分式页头与锯齿布局是否超标、logo 墙是否只放 logo、Bento 格子数与背景是否有变化、文案自查、动效是否都有理由、走马灯是否只有一条、导航是否单行且 ≤ 80px、版式家族是否够多样、长列表是否换了组件、是否用了真实图片、图片浮层与图注、版本页脚、装饰文字条、评分条、地域条、滚动提示、编号眉标、装饰圆点等一律为否，以及内容密度、引言行数、动效是否真的动了、GSAP 骨架参数是否正确、有无 window.addEventListener('scroll')、减弱动效与暗色模式是否处理、移动端折叠是否显式声明、min-h-[100dvh] 是否到位、useEffect 是否清理、空 / 加载 / 错误状态是否齐备、图标库是否合规、代码是否干净可维护、核心 Web 指标是否可信、是否只用了一个设计系统。

效果预览

以下两图为使用该技能产出的页面示例（来自项目仓库的 examples 目录）：

工作方式

1. 读简报：从页面类型、氛围词、参考链接、受众、既有品牌资产与隐含约束中推断用户的真实意图，先用一句话声明"设计定位"。
2. 定旋钮：根据设计定位设置 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY，并说明理由，而不是默默用基线值。
3. 选地基：能对应官方设计系统就直接装官方包；只是审美方向就诚实标注，用原生 CSS + Tailwind + 组件库实现。
4. 施工：按默认技术栈与架构约定写代码，同时遵守设计工程准则、布局硬规则、动效纪律与无障碍护栏。
5. 自检：交付前跑完整的出厂自检清单；改版类任务还要先做审计、走定向演化或彻底重做的决策树。
6. 诚实兜底：素材拿不到就明确告知用户并留占位槽；做不完的动效宁可降级为静态，不交半成品。

你需要提供

• 页面类型：落地页 / 作品集 / 改版 / 编辑型页面，以及具体的业务场景（SaaS、消费品牌、代理商、活动等）
• 氛围词与参考：你想要的调性（minimalist、Linear-style、Awwwards、brutalist、Apple-y…），以及参考网址、截图或竞品名称
• 受众与约束：面向谁（B2B 采购、设计敏感型消费者、招聘者…），是否有无障碍优先、公共部门、受监管行业等硬约束
• 既有品牌资产：logo、色彩、字体、摄影素材（改版场景下这些是输入材料而非可选项）
• 改版类任务额外需要：现有站点地址、品牌 token、页面树与导航结构、当前 SEO 基线（排名页、meta、结构化数据）
• 内容与文案：真实的标题、正文、数据、引言与署名；以及页面需要展示的产品图或可用的图像生成能力

你会获得

• 一句话的设计定位声明，以及由简报推出的三个旋钮取值
• 一个可直接运行的前端页面（默认 React / Next.js + Tailwind v4 + Motion），带完整的加载 / 空 / 错误状态与响应式折叠规则
• 选定或诚实标注的设计系统 / 审美方向实现，含真实安装命令与官方文档链接（技能内置 Fluent、Material、Carbon、Polaris、Atlassian、Primer、GOV.UK、USWDS、Bootstrap、Radix、shadcn/ui、Tailwind 的安装命令与规范出处）
• 需要滚动叙事时，按标准骨架实现的粘性堆叠 / 横向平移 / 滚动揭示组件
• 通过出厂自检清单的产出：零 em-dash、主题锁定、配色与圆角一致、按钮与表单对比度达标、主视觉塞进首屏、版式家族多样、无 AI 痕迹
• 改版类任务额外获得现状审计报告，包含品牌 token、信息架构、SEO 基线、保留与淘汰清单，以及定向演化或彻底重做的建议

使用示例

安装（技能以 Agent Skill 形式分发，同一 CLI 可扫描仓库里全部技能）：

npx skills add https://github.com/Leonxlnx/taste-skill

只安装本技能（`--skill` 传的是 SKILL frontmatter 里的 `name`，不是文件夹名）：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

锁定使用 v1 旧版行为：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

也可以直接把 SKILL.md 复制进项目，或粘贴到 ChatGPT / Codex / Cursor 的对话里使用。

典型用法：给代理一句话简报，例如"给一个面向技术买家的 B2B SaaS 做落地页，Linear 那种克制的高级感，不要 AI 味"，技能会先输出设计定位与旋钮取值，再按规则产出代码，并在交付前跑完自检。改版场景则先给出现有站点地址与品牌素材，技能先审计再动手。