joyeking/redesigned-portfolio

tasteskill: 反套路前端技能

针对落地页、作品集和界面重构。不适用于仪表盘、数据表格或多步骤产品 UI。 以下每条规则都是上下文相关的。它们不会自动触发。首先阅读需求简报，然后只提取适用的部分。

---

0. 需求简报推理（行动前先读懂氛围）

在接触代码或调整旋钮之前，推断用户真正想要什么。多数大模型设计输出质量低下，是因为模型跳转到了一种默认美学，而不是先读懂氛围。

0.A 首先读取这些信号

1. 页面类型 - 落地页（SaaS / 消费者 / 机构 / 活动），作品集（开发者 / 设计师 / 创意工作室），重构（保留 vs. 彻底改造），社论/博客。
2. 用户使用的氛围词 - “极简”、“平静”、“Linear 风格”、“Awwwards”、“粗野主义”、“高端消费者”、“Apple 风”、“俏皮”、“严肃 B2B”、“社论风”、“机构风”、“玻璃质感”、“暗色科技”。
3. 参考信号 - 他们链接的 URL、粘贴的截图、提到的产品、他们与之竞争的品牌。
4. 受众 - B2B 采购委员会 vs. 注重设计感的消费者 vs. 浏览作品集的招聘人员。受众决定美学，而不是你的品味。
5. 已有的品牌资产 - 标志、颜色、字体、摄影。对于重构，这些是起始素材，而非可选输入（参见第 11 节）。
6. 隐性约束 - 无障碍优先的受众、公共部门、受监管行业、信任优先的商务、儿童产品。这些约束覆盖美学偏好。

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

在任何代码之前，用一行话表明：“解读为：<页面类型> 针对 <受众>，采用 <氛围> 语言，倾向于 <设计系统或美学家族>。”

解读示例：

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

0.C 如果需求简报不明确，问一个问题，不要猜测

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

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

0.D 反默认纪律

不要默认使用：AI 紫色渐变、深色网格上的居中主图、三个相同的功能卡片、无处不在的通用毛玻璃效果、各处无限循环的微动效、Inter + slate-900。这些是大模型的默认输出。根据设计解读，有目的地超越它们。

---

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 何时使用真实的设计系统（使用官方包）

简报解读为…	使用	原因
微软 / 企业 SaaS / 仪表盘	@fluentui/react-components 或 @fluentui/web-components	官方 Fluent UI，微软令牌，无障碍完善
Google 风格 UI，Material 风格产品	@material/web + Material 3 令牌	官方，可通过 Material Theming 自定义主题
IBM 风格 B2B / 企业分析	@carbon/react + @carbon/styles	官方 Carbon，成熟的数据密度模式
Shopify 应用界面	polaris.js web 组件 / 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，等宽字体，原始边框。无库。
社论 / 杂志	衬线字体，不对称网格，大量留白。无库。
暗色科技 / 黑客	等宽字体 + 强调色霓虹，终端风格。无库。
极光 / 网格渐变	SVG 或分层径向渐变。无库。
动态排版	原生 CSS 动画，滚动驱动动画，GSAP 用于高级控制。无库。
Apple 液态玻璃	Apple 仅为其 Apple 平台记录此效果。没有官方的 liquid-glass.css。 Web 实现是使用 backdrop-filter + 分层边框 + 高光的近似。明确标记为近似。

---

3. 默认架构与约定

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

3.A 技术栈

• 框架： React 或 Next.js。默认使用服务器组件（RSC）。
  • RSC 安全： 全局状态仅在客户端组件中有效。在 Next.js 中，将提供者包装在 "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 状态管理

• 使用 useState / useReducer 处理独立的 UI 状态。
• 仅在需要避免深层属性传递时使用全局状态——使用 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。用图标库中的字形替换符号。覆盖： 仅当用户明确要求俏皮/聊天风格/社交原生风格时，才允许使用 Emoji——即使如此，也要有意地克制使用。

3.E 响应式与布局机制

• 标准化断点（sm 640、md 768、lg 1024、xl 1280、2xl 1536）。
• 使用 max-w-[1400px] mx-auto 或 max-w-7xl 约束页面布局。
• 视口稳定性： 对于全屏 Hero 区块，切勿使用 h-screen。始终使用 min-h-[100dvh] 以防止在移动设备（iOS Safari 地址栏）上出现布局跳跃。
• 网格优于弹性数学： 切勿使用复杂的 Flexbox 百分比数学（w-[calc(33%-1rem)]）。始终使用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）。

3.F 依赖项验证（强制）

在导入任何第三方库之前，检查 package.json。如果包缺失，先输出安装命令。切勿假设某个库存在。

---

4. 设计工程指令（偏差校正）

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

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（这两个是大模型最喜欢的展示衬线字体）。
  • 如果确实有理由使用衬线字体（根据上述规则，这很罕见），请从以下池中轮换选择，不要在连续的项目中重复使用相同的衬线字体：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…

...（其余内容被截断，用于翻译）