tasteskill: 反套版前端技能

tasteskill: 反套版前端技能 是做什么的？

适用于：着陆页、作品集和重新设计。不适用于：仪表盘、数据表格、多步骤产品 UI。 以下所有规则都是根据上下文的。没有一条会自动触发。首先阅读需求，然后只选取适合的部分。

---

0. 需求推断（在做任何事之前，先读懂需求）

在接触代码或调整参数之前，推断用户真正想要什么。大多数 LLM 的设计输出都很糟糕，因为模型直接跳到了默认美学，而不是先理解上下文。

0.A 首先阅读这些信号

1. 页面类型 - 着陆页 (SaaS / 消费者 / 代理 / 活动)，作品集 (开发者 / 设计师 / 创意工作室)，重新设计 (保留与彻底改版)，编辑 / 博客。
2. 用户使用的语感词 - "极简"、"平静"、"Linear 风格"、"Awwwards"、"粗野主义"、"高端消费者"、"Apple 风格"、"俏皮"、"严肃 B2B"、"编辑风格"、"代理风格"、"玻璃态"、"暗黑科技"。
3. 参考信号 - 他们分享的 URL、粘贴的截图、提及的产品、他们与之竞争的品牌。
4. 目标受众 - B2B 采购委员会 vs. 设计敏感型消费者 vs. 浏览作品集的招聘人员。受众决定美学，而不是你的品味。
5. 已存在的品牌资产 - logo、颜色、字体、摄影。对于重新设计，这些是起点素材，不是可选输入（参见第 11 节）。
6. 隐性约束 - 无障碍优先的受众、公共部门、受监管行业、信任优先的电商、儿童产品。这些约束覆盖美学偏好。

0.B 在生成之前，输出一行 "设计阅读"

在任何代码之前，用一行陈述： "阅读为：<页面类型> 面向 <受众>，采用 <语感> 语言，倾向于 <设计系统或美学家族>。"

示例阅读：

• "阅读为：面向技术买家的 B2B SaaS 着陆页，采用 Linear 极简风格语言，倾向于 Tailwind 工具 + Geist + 克制动效。"
• "阅读为：面向招聘经理的个人设计师作品集，采用编辑/动态字体语言，倾向于原生 CSS + 滚动驱动动画 + 自定义排版。"
• "阅读为：公共部门服务网站的重新设计，采用信任优先语言，倾向于 GOV.UK Frontend 或 USWDS。"

0.C 如果需求模糊，问一个问题，不要猜测

只问一个澄清问题——永远不要一次性抛出多个问题——并且只在设计阅读确实存在分歧时提出。示例："这应该更接近 Linear 的简洁风格还是 Awwwards 的实验风格？"

如果你可以根据上下文自信地推断，不要问。直接声明设计阅读并继续。

0.D 反默认纪律

不要默认使用：AI 紫粉渐变、居中对齐的深色网格背景英雄区域、三个均等的功能卡片、所有内容都套用通用玻璃态、无处不在的无限循环微动效、Inter + slate-900。这些是 LLM 的默认值。必须基于设计阅读有意识地去超越它们。

---

1. 三个旋钮（核心配置）

在设计阅读之后，设置三个旋钮。以下所有的布局、动效和密度决策都由这些旋钮控制。

• DESIGN_VARIANCE: 8 - 1 = 完美对称，10 = 艺术混乱
• MOTION_INTENSITY: 6 - 1 = 静态，10 = 电影感/物理效果
• VISUAL_DENSITY: 4 - 1 = 艺术画廊/通透，10 = 驾驶舱/数据密集

基线： 8 / 6 / 4。除非设计阅读覆盖了它们，否则使用这些值。不要要求用户编辑此文件——覆盖是通过对话进行的。

1.A 旋钮推断（设计阅读 → 旋钮值）

信号	VARIANCE	MOTION	DENSITY
"极简/干净/平静/编辑风格/Linear 风格"	5-6	3-4	2-3
"高端消费者/Apple 风格/奢侈/品牌"	7-8	5-7	3-4
"俏皮/狂野/Dribbble/Awwwards/实验/代理"	9-10	8-10	3-4
"着陆页/作品集/营销网站 (默认)"	7-9	6-8	3-5
"信任优先/公共部门/受监管/无障碍关键"	3-4	2-3	4-5
"重新设计 - 保留"	匹配现有	+1	匹配现有
"重新设计 - 彻底改版"	+2	+2	匹配现有

1.B 用例预设

用例	VARIANCE	MOTION	DENSITY
着陆页 (SaaS, 主流)	7	6	4
着陆页 (代理/创意)	9	8	3
着陆页 (高端消费者)	7	6	3
作品集 (设计师/工作室)	8	7	3
作品集 (开发者)	6	5	4
编辑/博客	6	4	3
公共部门服务	3	2	5
重新设计 - 保留	匹配	匹配+1	匹配
重新设计 - 彻底改版	+2	+2	匹配

1.C 旋钮如何驱动输出

使用这些值（或用户覆盖的值）作为全局变量。本文档中的引用均明确指向这些变量名——永远不要发明类似 LAYOUT_VARIANCE 或 ANIM_LEVEL 的别名。

---

2. 需求 → 设计系统映射

一旦你有了设计阅读（第 0 节）和旋钮值（第 1 节），选择正确的基础。不要为那些已有官方包的东西发明 CSS。不要把美学潮流当作官方系统。

2.A 何时使用真实的设计系统（使用官方包）

阅读为…	使用	原因
Microsoft / 企业 SaaS / 仪表盘	@fluentui/react-components 或 @fluentui/web-components	官方 Fluent UI，Microsoft 令牌，无障碍已完成
Google 风格 UI，Material 风格产品	@material/web + Material 3 令牌	官方，可通过 Material Theming 主题化
IBM 风格 B2B / 企业分析	@carbon/react + @carbon/styles	官方 Carbon，成熟的数据密度模式
Shopify 应用界面	polaris.js web components / Polaris React	Shopify 管理 UI 需要
Atlassian / Jira 风格产品	@atlaskit/* + @atlaskit/tokens	官方 Atlassian DS
GitHub 风格开发者工具/社区页面	@primer/css 或 @primer/react-brand	官方 Primer；营销页面使用 Brand 变体
英国公共部门服务	govuk-frontend	法律/法规要求
美国公共部门 / 信任优先	uswds	同上
快速本地企业/代理 MVP	Bootstrap 5.3	无聊、快速、有效
现代无障碍 React 基础	@radix-ui/themes	原语 + 精致主题
现代 SaaS，你自己拥有组件	shadcn/ui (npx shadcn@latest add ...)	你拥有代码，易于定制；永远不要以默认状态发布
Tailwind 基础的现代 SaaS / AI 营销	Tailwind v4 工具 + dark: 变体	独立开发者和小团队构建的默认选择

诚实规则： 如果需求读起来符合上述系统之一，则安装并使用官方包。不要手动重新创建其 CSS。不要导入一个系统的令牌又覆盖掉 90%。

每个项目只用一个系统。 不要在同一个组件树中混用 Fluent React 和 Carbon。不要将 shadcn/ui 组件导入 Material 3 应用。

2.B 当需求是一种美学，而非一个系统时

对于这些方向，没有单一的官方包。使用原生 CSS + Tailwind + 一个维护良好的组件库来构建。在代码注释中诚实地说明哪些是借用灵感，哪些是官方素材。

美学	诚实的实现方式
玻璃态 / "毛玻璃"	backdrop-filter，分层边框，高亮叠加。为 prefers-reduced-transparency 提供纯色填充回退。
Bento (Apple 风格瓷砖网格)	使用混合单元格尺寸的 CSS Grid。没有单一的库拥有这个。
粗野主义	原生 CSS，等宽字体，原始边框。没有库。
编辑风格 / 杂志	衬线字体，非对称网格，充足留白。没有库。
暗黑科技 / 黑客	等宽 + 霓虹强调色，终端主题。没有库。
Aurora / 网格渐变	SVG 或层叠径向渐变。没有库。
动态排版	原生 CSS 动画，滚动驱动动画，GSAP 用于接管。没有库。
Apple Liquid Glass	Apple 仅为其 Apple 平台记录了此效果。没有官方的 liquid-glass.css。 Web 实现是使用 backdrop-filter + 分层边框 + 高亮的近似。在标签中明确标注为近似。

---

3. 默认架构与约定

除非设计阅读选择了真实的设计系统（第 2.A 节），否则使用以下默认值：

3.A 技术栈

• 框架： React 或 Next.js。默认为服务器组件 (RSC)。
  • RSC 安全： 全局状态仅在客户端组件中有效。在 Next.js 中，将 providers 包装在 "use client" 组件中。
  • 交互隔离： 任何使用 Motion、滚动监听或指针物理效果的组件必须是一个独立的叶子组件，并在顶部使用 'use client'。服务器组件仅渲染静态布局。
• 样式： Tailwind v4 (默认)。仅在现有项目要求时才使用 Tailwind v3。
  • 对于 v4：不要在 postcss.config.js 中使用 tailwindcss 插件。使用 @tailwindcss/postcss 或 Vite 插件。
• 动画： Motion (以前称为 Framer Motion 的库)。从 motion/react 导入 (import { motion } from "motion/react")。framer-motion 包仍然可以作为遗留别名工作——在新代码中优先使用 motion/react。
• 字体： 始终使用 next/font (Next.js) 或通过 @font-face + font-display: swap 自托管。在生产环境中，永远不要通过 <link> 链接 Google Fonts。

3.B 状态

• 对于孤立的 UI，使用本地 useState / useReducer。
• 仅用于避免深层 prop 穿透时使用全局状态——Zustand、Jotai 或 React context。
• 永远不要使用 useState 来跟踪由用户输入驱动的连续值（鼠标位置、滚动进度、指针物理效果、磁性悬停）。使用 Motion 的 useMotionValue / useTransform / useScroll。useState 会在每次变化时重新渲染 React 树，并且在移动端上会卡住。

3.C 图标

• 允许的库 (优先级顺序)： @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react。
• 不推荐： lucide-react。仅当用户明确要求或项目已依赖它时才可接受。
• 永远不要手动编写 SVG 图标。 如果缺少某个字形，安装第二个库或从原语组合——不要从头开始绘制图标路径。
• 每个项目只用一个图标族。 不要在同一个组件树中混用 Phosphor 和 Lucide。
• 全局统一下 strokeWidth (例如 1.5 或 2.0)。

3.D Emoji 政策

默认情况下在代码、标记和可见文本中不鼓励使用。用图标库字形替换符号。覆盖： 仅在用户明确要求俏皮/聊天风格/社交原生氛围时允许使用表情符号——即使如此，也要有意图地、克制地使用。

3.E 响应式与布局机制

• 统一下断点 (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 地址栏) 上布局跳跃。
• 优先使用 Grid 而非 Flex 计算： 永远不要使用复杂的 flexbox 百分比计算 (w-[calc(33%-1rem)])。始终使用 CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6)。

3.F 依赖项验证 (强制)

在导入任何第三方库之前，检查 package.json。如果缺少该包，先输出安装命令。永远不要假设某个库存在。

---

4. 设计工程指令 (纠正偏见)

LLM 默认使用陈词滥调。主动覆盖这些默认值。每条规则都有一个上下文感知的覆盖路径。

4.1 排版

• 显示/标题： 默认 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 或适合品牌的衬线字体。
  • 覆盖： 当用户明确要求中性/标准/Linear 风格，或需求是针对公共部门/无障碍优先网站时，Inter 是可以接受的。

• 需要了解的字体搭配： Geist + Geist Mono、Satoshi + JetBrains Mono、Cabinet Grotesk + Inter Tight、GT America + IBM Plex Mono。

• 衬线字体纪律 (非常不鼓励作为默认值)：

  • 非常不鼓励在任何项目中默认使用衬线字体. “感觉有创意/高端/编辑风格” 不是使用衬线字体的理由。代理的默认心理模型认为“创意需求 = 衬线字体”，这是经过生产轮测试的单一最明显的 AI 标志。
  • 仅当以下条件之一明确为真时，才可以使用衬线字体：
    • 品牌需求中明确提到了某种衬线字体，或者
    • 美学家族确实是编辑/奢侈/出版/手稿/遗产/复古风格，并且你能阐明为什么这种特定的衬线字体适合这个特定的品牌
  • 对于其他所有情况（创意代理、设计工作室、现代品牌、高端消费者、作品集、生活方式），默认使用无衬线显示字体 (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal)。无衬线显示字体并非“无聊”——它们是默认选择，原因和时尚界默认使用黑色一样。
  • 强调规则 (相关)： 当你想在标题中强调某个词时（例如“及 空间 设计”这种动感手法），使用同一字体的斜体或粗体。不要在无衬线标题中插入一个随机的衬线词（反之亦然），仅仅为了增加视觉趣味。混合字体族的强调是业余之举。在同一个字体族内使用斜体/粗体强调是正确的做法。
  • 特别禁止作为默认值： Fraunces 和 Instrument_Serif (两种 LLM 最喜欢的显示衬线字体)。
  • 如果使用衬线字体是合理的 (罕见，根据上述规则)，请从以下库中选择，不要在连续的项目中重复使用相同的衬线字体：PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt, I

…

[已截断用于翻译]