frontend-design-research

name	frontend-design-research
description	阶段 2 试吃——对 4-5 个该领域设计优秀的真实网站跑六维机械拆解（形 / 色 / 字 / 构 / 质 / 动），综合成本项目 design.md 初稿。六维是上位骨架，DOM 量化工作流 + 动效采访 5 类是落地肌肉。每次一站，保护上下文。不做前轮/后轮深度采访（那是 frontend-interview-dualround）、不做视觉锚定三件套（那是 frontend-visual-reference）、不写最终交付的 design.md（那是 frontend-design-writer）、不做组件库 / 动效资产库选型（那部分由 frontend-design-writer 的 §11 Resources 段 + 项目级 components.json 决定）。触发：新项目六维调研、整站重做、前端方向大迭代。

Packaged Knowledge Snapshot

This packaged copy includes local note snapshots for portability. When the original Obsidian absolute path is unavailable, use the packaged snapshot instead:

• /Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/AI前端设计认知框架.md -> references/packaged-knowledge/AI前端设计认知框架.md
• /Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/主语言是设计的第一原则.md -> references/packaged-knowledge/主语言是设计的第一原则.md
• /Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/六维：形色字构质动是网站试吃的机械骨架.md -> references/packaged-knowledge/六维：形色字构质动是网站试吃的机械骨架.md
• /Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/AI 前端动效盲区与采访补偿.md -> references/packaged-knowledge/AI 前端动效盲区与采访补偿.md
• /Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/从参考案例复刻高级感：量化工作流.md -> references/packaged-knowledge/从参考案例复刻高级感：量化工作流.md

Frontend Design Research

这个 skill 在做什么

阶段 2 试吃的纯化执行器。输入是已锁定的主语言 + 初步目标，输出是本项目的 design.md 初稿（可能还包含参考站六维记录）。

核心方法论是六维机械骨架——AI 试吃参考站时常见失败是"偷懒只抄色板"或"感觉驱动说不清楚哪里好"，六维（形 / 色 / 字 / 构 / 质 / 动）把感觉机械化成可量化的正交维度，避免靠"感觉"收敛。

在阶段化流程里的位置

本 skill 严格限定在阶段 2（见 [[AI前端设计认知框架]]）：

阶段1 需求 + 前轮深度采访 ─→ 主语言 + 目标（← 前提）
         ↓
阶段2 试吃六维 × 4-5 站    ─→ design.md 初稿（← 本 skill 产出）
         ↓
阶段3 后轮深度采访         ─→ design.md 定稿
         ↓
阶段4 视觉锚定三件套

和老版的差异：老版 research 包含"主语言收敛 + 参考调研 + 动效采访 + 资源路由"四件事；2026-04-21 重构后：

• 主语言收敛：由 frontend-interview-dualround 前轮产出，本 skill 只做验证（主语言必须已经是动词句式）
• 参考调研：重组为六维骨架 × 4-5 站，一次一站保护上下文
• 动效采访：归到六维之动，作为六维之一，不再是独立步骤
• 资源路由：拆出——组件库 / 动效资产库选型由 frontend-design-writer 写入 §11 Resources 段

何时进入本 skill

要进：

• 阶段 1 完成（主语言 + 目标已定），需要跑参考站调研
• 整个站点/单个关键页面重做
• 前端方向大迭代（主语言不变但视觉气质换）
• 用户说"帮我找几个参考学习"/"跑一下前端调研"/"做六维试吃"

不要进：

• 主语言还没定 → frontend-interview-dualround 前轮先拔出来
• 六维都调研完了要定稿 → frontend-interview-dualround 后轮
• 要派生 Moodboard / 示意图 / 动效帧序列 → frontend-visual-reference（阶段 4）
• 要写交付版 design.md kun 15 段 → frontend-design-writer
• 要生成某个动效的微观实现 prompt → frontend-motion-prompt-writer
• 纯后端/纯脚本/无 UI 任务

知识库依赖

本 skill 只是剧本，方法论住在笔记里，不复制。

文件	用途	何时读
/Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/六维：形色字构质动是网站试吃的机械骨架.md	六维定义 + 每维量化手段 + 现有 checklist 挂接	启动必读
/Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/AI前端设计认知框架.md	阶段化流程总图（本 skill 在阶段 2 的位置）	启动时扫阶段 2 段
/Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/主语言是设计的第一原则.md	主语言的 5 问验证法（本 skill 只验证不收敛）	用户说不清主语言时读
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/从参考案例复刻高级感：量化工作流.md	DOM 量化测量法（六维之形/色/字/构/质 的落地）	步骤 2 跑每站时读
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/AI 前端动效盲区与采访补偿.md	动效采访 5 类（六维之动 的落地）	步骤 2 跑到"动"维时读

启动时拉前两份，其他按触发条件读。

执行顺序

0. 判型 → 1. 验证主语言 → 2. 六维试吃 × 4-5 站（一次一站）→ 3. 综合成 design.md 初稿

每站跑一次六维，不一次性吃完 4-5 站——上下文会挤垮。

---

步骤 0：判型

先问用户（或从上下文推断）：这是展示型还是工具型？

类型	代表	六维侧重
展示型 / 品牌型	landing page、官网、营销页、作品集	六维全跑，动维最重（展示型命根子）
工具型 / 应用型	dashboard、agent 产品、工作台、管理台	构 + 字最重，动维可近空（轻交互反馈够用）

混合情况（"内部工具但想做得漂亮"）：倾向工具型主干 + 借鉴展示型某一两维（常见是"形"或"质"）。

---

步骤 1：验证主语言（不收敛）

本 skill 不收敛主语言——那是 frontend-interview-dualround 前轮的职责。本 skill 只做入参验证：

检查	通过条件
主语言存在	knowledge/design-docs/design.md §0 或等价位置已经有一句话叙事
动词句式	"滚动时混沌收敛为有序" ✓；"高级极客感" ✗（回 dualround）
5 问有答	主语言笔记的 5 个验证问题都能回答

硬规则：答不出来或还是形容词 → 路由到 frontend-interview-dualround，不要自己往下走。

---

步骤 2：六维试吃 × 4-5 站

本 skill 的核心步骤。一次一站，每站跑一次六维。

2.1 找 URL（用户主场）

写一个搜索提示词（产品类型 + 目标用户 + 期望气质 + 主语言），让用户用 Grok / Manus / Perplexity 跑一轮交回 URL 清单。Claude 的 web search 触达不了 Twitter/Reddit/设计社区的口碑层——这一步必须用户出手。

2.2 每站跑六维（机械骨架）

对每个参考站独立跑一次六维拆解：

维	落地手段	产出
形	图标族盘点 + SVG 路径采样 + border-radius token 表	一张标注图 + radius 表
色	DOM 量化（getComputedStyle）+ Coolors 对比 + token 导出	color token 表 + 明暗饱和度分布
字	DOM 量化（字号 / 行高 / 字距 / 字重）	type scale 表 + 字体族
构	截图栅格标注 + DOM 量化（spacing / grid / 宽度）	栅格截图 + spacing token 表
质	背景层采样 + noise 密度 + 阴影量化 + 渐变采样	material 表（噪点 / 光泽 / 渐变 / 阴影）
动	[[AI 前端动效盲区与采访补偿]] 5 类采访（节奏 / 触发 / 双向性 / 层级 / 反例）	量化语法清单 + 双向性约定

2.3 六维落地的核心机械动作

DOM 量化硬步骤（形 / 色 / 字 / 构 / 质）

真实浏览器打开 + getComputedStyle + getBoundingClientRect 逐元素测量。

测量项	记录
字号 / 行高 / 字重	关键层级各一组
容器宽度 / 最大宽度 / 内外边距	主栅格 + 内容容器
颜色（主色/背景/文字/边框）	HSL 或 Hex
动画 duration / easing	DevTools Animations 面板或读 transition CSS

浏览器工具陷阱（Lenis 劫持 scrollTo、chrome-in-claude 截图 bug）见 [[从参考案例复刻高级感：量化工作流]]，遇到问题时读。

动效采访 5 类（动）

让用户亲自在每个主参考站滚动 + hover + 点击，Claude 在旁边问：

类别	问什么
节奏类	duration 感觉多少秒？快还是慢？easing 像弹簧还是缓冲？stagger 有没有？多大间隔？
触发类	在 scroll 哪个位置触发？hover 瞬间触发还是延迟？点击后多久响应？
双向性类	滚回去会逆放吗？还是保留在末态？
层级类	多个动效共存时谁压谁？主动效哪个？装饰动效哪个？
反例类	什么是你不想要的？哪种动效是"俗套" / "AI 味"？

量化语法（每条一行）：

[触发条件] → [主体] → [变化] → [时序/范围]

示例：

scroll 进入视口 100px → hero 标题 → 从 y=60 opacity=0 到 y=0 opacity=1 → 0.8s ease-out 双向连续
hover 卡片 → 卡片阴影 → 从 shadow-sm 到 shadow-xl → 0.2s ease-out 单向

硬约束

• 展示型核心动效默认双向连续：跟随 scrollY 位置实时变化，禁止 whileInView + once: true 用于核心动效
• 所有动效必须有明确 duration + easing
• 每条动效标明来源（哪个参考站的哪个交互）

2.4 每站记录三类标签

调研结果每站按三类打标：

• 直接借鉴：整体方向可以参考，列出要借鉴的具体元素（对应哪一维）
• 局部学习：某个具体做法值得提取（单维单点借鉴）
• 反面参考（anti-references）：明确要避开的模式 + 为什么

2.5 数量约束

• 默认 4-5 站：少于 4 难以识别品类共性，多于 5 上下文不够
• 每站记录到 knowledge/design-docs/research/{site}-sixdim.md（可选）或直接综合到 design.md 初稿
• 不跨站对比——横向对比留到步骤 3 综合

2.6 常见误区

• ==不要把六维当权重评分表==：不是给每站打 6 维分数选最高的，六维是观察维度不是评价维度
• ==不要每维都穷尽==：每维记录"和本项目主语言最相关的部分"即可
• ==不要跳过"质"这一维==：质是最容易被忽略也最容易出 AI 味的维（默认渲染扁平、无材质）

---

步骤 3：综合成 design.md 初稿

把 4-5 站的六维记录综合成一份本项目的 design.md 初稿（不是每站一份）。这步不是简单拼贴，要按本项目主语言筛选。

3.1 筛选原则

每维记录"最支持本项目主语言的条目"：

• 主语言是"克制 + 叙事推进"？→ 形维选几何圆角 + 直线分割线
• 主语言是"激进 + 锋利"？→ 形维选尖角 + zero radius

3.2 落盘位置

初稿写到 knowledge/design-docs/design.md（不是交付版，是待后轮采访定稿的版本）：

---
status: signal
last_updated: YYYY-MM-DD
source: frontend-design-research skill
stage: 2-initial-draft
---

初稿段落（对应 kun 15 段的前 9 段子集）：

• §0 Main Language（从前轮采访复制）
• §1 Visual Theme & Atmosphere（六维综合的一段话描述）
• §2 Colors（色维量化）
• §3 Typography（字维量化）
• §4 Components（形 + 字 + 质 综合）
• §5 Layout（构维量化）
• §6 Depth（质维量化）
• §10 Motion Spec（动维量化）

§7/§8/§9/§11 留到 frontend-design-writer 的 Round 3 组装；§12-§14 留到阶段 4 完成后回填。

---

完成标准

• 步骤 0 判型完成，记录展示型/工具型
• 步骤 1 主语言验证通过（动词句式 + 5 问有答）
• 跑完至少 4 个参考站的六维（工具型可降到 3 站）
• 每站六维都有量化数据（不是"感觉像……"）
• 至少 1 个反面参考（anti-reference）且说明原因
• 动维采访五类都被问过（节奏/触发/双向性/层级/反例），至少 3 条量化语法
• 展示型项目核心动效标明双向性约定
• knowledge/design-docs/design.md 初稿落盘，含 §0-§6 + §10，frontmatter 含 status: signal
• 已告知用户下一步是 frontend-interview-dualround 后轮采访

与其他 skill / 剧本的边界

场景	走谁
已定稿项目的二开 / 增量扩展（design.md 定稿 + 加新页面 / section / 微改）	frontend-iteration-planner（场景 C 入口路由器）
前轮 / 后轮深度采访（产品设计师视角）	frontend-interview-dualround
派生 Moodboard / 完整网页示意图 / 动效帧序列	frontend-visual-reference（阶段 4）
把初稿写成交付版 kun 15 段	frontend-design-writer
某个核心动效的微观实现 prompt（LoadingScreen 风格）	frontend-motion-prompt-writer
整个项目 knowledge/ 骨架从零搭	req-suite:project-spec
已定稿项目改按钮颜色、调文案、修 bug	开发实现剧本
用户看实现说"感觉不对"	frontend-design-review（阶段 7）
反 slop 硬禁令扫描	frontend-anti-slop-gate（阶段 6 横切）
组件库 / 动效资产库选型（shadcn / Lottie / Rive / Spline）	由 frontend-design-writer §11 Resources 段记录；实际 MCP 分发走项目级 components.json 与 mcp-bootstrapper
项目收尾把开发中调过的动效回灌	本 skill 跑动维汇总采访，再回 writer 更新 §10 / §14

本 skill 的 deletion-spec

• 触发删除条件：当 AI 试吃参考站默认就能稳定覆盖六维（不偷懒只抄色板、不忽略材质和动效），或六维骨架被证伪 / 扩缩维度（比如拆成 7 维 / 合并成 5 维），本 skill 需要重写。
• 禁用方式：从 plugins/frontend-suite/skills/ 删除本目录即自动停止发现；marketplace 刷新后生效。
• 卸载清单：
  • 同步检查 ~/.agents/agent_prompt_core/shared/playbooks/前端设计_剧本.md 阶段 2 路由
  • 同步检查 [[AI前端设计认知框架]] 阶段 2 段 + [[六维：形色字构质动是网站试吃的机械骨架]] "对应 skill" 引用
  • 同步检查 frontend-design-writer / frontend-interview-dualround / frontend-visual-reference 的"边界表"
  • 资源路由章节已迁到 writer §11，迁出时需同步写 writer 的 deletion-spec