tasteskill: 反套路前端技能

仅针对落地页、作品集和重新设计。不适用于仪表盘、数据表格或多步骤产品界面。以下每条规则都是根据上下文使用的。没有任何规则会自动触发。首先阅读简报，然后只提取适用的部分。

0. 简报推断（在行动之前，先读懂气氛）

在触碰代码或调整参数之前，推断用户真正想要什么。大多数 LLM 的设计输出糟糕，是因为模型默认跳转到一种美学风格，而不是先读懂气氛。

0.A 首先读取这些信号

页面类型 - 落地页（SaaS / 消费者 / 机构 / 活动），作品集（开发者 / 设计师 / 创意工作室），重新设计（保留还是彻底重做），社论 / 博客。
用户使用的氛围词 - "极简主义"、"平静"、"Linear风格"、"Awwwards"、"野兽派"、"高端消费者"、"Apple风格"、"趣味"、"严肃B2B"、"社论"、"机构风格"、"玻璃态"、"暗色科技"。
参考信号 - 他们链接的 URL、粘贴的截图、提及的产品、正在竞争的竞品品牌。
目标受众 - B2B 采购小组 vs. 注重设计感的消费者 vs. 浏览作品集的招聘人员。受众决定美学风格，而非你的个人品味。
已有的品牌资产 - 标志、颜色、字体、摄影素材。对于重新设计，这些是起始材料，而非可选项（见第 11 节）。
隐含约束 - 无障碍优先的受众、公共部门、受监管行业、信任优先的电商、儿童产品。这些约束覆盖美学偏好。

0.B 在生成代码之前，输出一行“设计解读”

在任何代码之前，用一句话说明："将此项解读为：针对<受众>的<页面类型>，使用<氛围>的语言，偏向<设计系统或美学体系>。"

阅读示例：

"将此项解读为：面向技术买家的 B2B SaaS 落地页，使用 Linear 风格的极简主义语言，偏向 Tailwind 工具类 + Geist + 克制动效。"
"将此项解读为：面向招聘经理的个人设计师作品集，使用社论 / 动态排版语言，偏向原生 CSS + 滚动驱动动画 + 自定义字体。"
"将此项解读为：公共部门服务网站的重新设计，使用信任优先的语言，偏向 GOV.UK Frontend 或 USWDS。"

0.C 如果简报模棱两可，只问一个问题，不要猜测

恰好问一个澄清问题——绝不要一次性抛出多个问题——并且仅在设计解读确实存在分歧时。例如："这个应该更接近 Linear-clean 还是 Awwwards-experimental 的感觉？"

如果你能根据上下文自信地推断出来，就不要问。直接声明设计解读并继续。

0.D 反默认原则

不要默认使用：AI 紫色渐变、居中 Hero 搭配深色网格、三个相等的功能卡片、无处不在的通用玻璃态、无处不在的无限循环微动效、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` 或 Polaris React 的 Web Components	Shopify 管理界面所需
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，等宽字体，原始边框。无库。
社论 / 杂志	衬线字体，非对称网格，充裕的留白。无库。
暗色科技 / 黑客风格	Mono + 强调霓虹色，终端主题。无库。
极光 / 网格渐变	SVG 或分层径向渐变。无库。
动态排版	原生 CSS 动画，滚动驱动动画，GSAP（用于特殊效果）。无库。
Apple Liquid Glass	Apple 仅在其 Apple 平台上描述了此效果。没有官方的 `liquid-glass.css`。 Web 实现使用 `backdrop-filter` + 分层边框 + 高光进行近似。明确标记为近似。

3. 默认架构与约定

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

3.A 技术栈

框架： React 或 Next.js。默认使用 Server Components (RSC)。
- RSC 安全： 全局状态只能在 Client Components 中工作。在 Next.js 中，将 providers 包装在一个使用了 "use client" 的组件中。
- 交互隔离： 任何使用 Motion、滚动监听器或指针物理的组件都必须是孤立的叶子节点，并在顶部使用 'use client'。Server Components 仅渲染静态布局。
样式： 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 使用策略

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

3.E 响应式与布局机制

标准化断点（sm 640、md 768、lg 1024、xl 1280、2xl 1536）。
使用 max-w-[1400px] mx-auto 或 max-w-7xl 来包含页面布局。
视口稳定性： 永远不要使用 h-screen 作为全高 Hero 区域。始终使用 min-h-[100dvh] 以防止在移动设备上（iOS Safari 地址栏）发生布局跳动。
网格优先于 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。
衬线字体规范（非常不鼓励作为默认值）：
- 在任何项目中，非常不鼓励将衬线字体作为默认字体选择。"它感觉有创意 / 高端 / 社论风"并不是使用衬线字体的理由。agent 默认的思维模型是"创意简报 = 衬线字体"，这是在多个生产轮次中被验证的最具 AI 特征的信号。
- 只有在以下情况之一明确成立时，才可接受使用衬线字体：
  - 品牌简报中明确提到了一个衬线字体名称，或者
  - 美学体系确实是社论 / 奢侈 / 出版物 / 手稿 / 传统 / 复古风格，并且你能说出为什么这个特定的衬线字体适合这个特定的品牌
- 对于所有其他情况（创意机构、设计工作室、现代品牌、高端消费者、作品集、生活方式），默认使用无衬线展示字体（Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal）。无衬线展示字体并非"无聊"——它们成为默认值，其道理如同黑色是时尚界的默认色。
- （相关）强调规则： 当你想强调标题中的一个词（例如动态排版式的 "and spatial design" 这种技巧），请使用同一字体的斜体或粗体。不要仅仅为了增加视觉趣味而将随机的衬线词注入无衬线标题（或反之）。混搭字系的强调方式是不专业的。在同一字系内使用斜体或粗体进行强调才是正确的做法。
- 明确禁止作为默认值的字体： 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

…

[为翻译而截断]

91-5/opencode

opencode 是什么？

在你喜欢的 AI 中提问

文档