Stats
Actions
Tags
Runs a six-dimensional (form/color/typography/structure/texture/motion) mechanical analysis on 4-5 real reference sites to produce a design.md draft. For new projects, full-site redesigns, or major front-end iterations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ai-frontend-design-kit:frontend-design-researchThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<!-- PACKAGED_KNOWLEDGE_START -->
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阶段 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 只做验证（主语言必须已经是动词句式）frontend-design-writer 写入 §11 Resources 段要进：
不要进：
frontend-interview-dualround 前轮先拔出来frontend-interview-dualround 后轮frontend-visual-reference（阶段 4）frontend-design-writerfrontend-motion-prompt-writer本 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 站——上下文会挤垮。
先问用户（或从上下文推断）：这是展示型还是工具型？
| 类型 | 代表 | 六维侧重 |
|---|---|---|
| 展示型 / 品牌型 | landing page、官网、营销页、作品集 | 六维全跑，动维最重（展示型命根子） |
| 工具型 / 应用型 | dashboard、agent 产品、工作台、管理台 | 构 + 字最重，动维可近空（轻交互反馈够用） |
混合情况（"内部工具但想做得漂亮"）：倾向工具型主干 + 借鉴展示型某一两维（常见是"形"或"质"）。
本 skill 不收敛主语言——那是 frontend-interview-dualround 前轮的职责。本 skill 只做入参验证：
| 检查 | 通过条件 |
|---|---|
| 主语言存在 | knowledge/design-docs/design.md §0 或等价位置已经有一句话叙事 |
| 动词句式 | "滚动时混沌收敛为有序" ✓；"高级极客感" ✗（回 dualround） |
| 5 问有答 | 主语言笔记的 5 个验证问题都能回答 |
硬规则：答不出来或还是形容词 → 路由到 frontend-interview-dualround，不要自己往下走。
本 skill 的核心步骤。一次一站，每站跑一次六维。
写一个搜索提示词（产品类型 + 目标用户 + 期望气质 + 主语言），让用户用 Grok / Manus / Perplexity 跑一轮交回 URL 清单。Claude 的 web search 触达不了 Twitter/Reddit/设计社区的口碑层——这一步必须用户出手。
对每个参考站独立跑一次六维拆解：
| 维 | 落地手段 | 产出 |
|---|---|---|
| 形 | 图标族盘点 + SVG 路径采样 + border-radius token 表 | 一张标注图 + radius 表 |
| 色 | DOM 量化（getComputedStyle）+ Coolors 对比 + token 导出 | color token 表 + 明暗饱和度分布 |
| 字 | DOM 量化（字号 / 行高 / 字距 / 字重） | type scale 表 + 字体族 |
| 构 | 截图栅格标注 + DOM 量化（spacing / grid / 宽度） | 栅格截图 + spacing token 表 |
| 质 | 背景层采样 + noise 密度 + 阴影量化 + 渐变采样 | material 表（噪点 / 光泽 / 渐变 / 阴影） |
| 动 | [[AI 前端动效盲区与采访补偿]] 5 类采访（节奏 / 触发 / 双向性 / 层级 / 反例） | 量化语法清单 + 双向性约定 |
真实浏览器打开 + getComputedStyle + getBoundingClientRect 逐元素测量。
| 测量项 | 记录 |
|---|---|
| 字号 / 行高 / 字重 | 关键层级各一组 |
| 容器宽度 / 最大宽度 / 内外边距 | 主栅格 + 内容容器 |
| 颜色（主色/背景/文字/边框） | HSL 或 Hex |
| 动画 duration / easing | DevTools Animations 面板或读 transition CSS |
浏览器工具陷阱（Lenis 劫持 scrollTo、chrome-in-claude 截图 bug）见 [[从参考案例复刻高级感：量化工作流]]，遇到问题时读。
让用户亲自在每个主参考站滚动 + 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 单向
whileInView + once: true 用于核心动效调研结果每站按三类打标：
knowledge/design-docs/research/{site}-sixdim.md（可选）或直接综合到 design.md 初稿把 4-5 站的六维记录综合成一份本项目的 design.md 初稿（不是每站一份）。这步不是简单拼贴，要按本项目主语言筛选。
每维记录"最支持本项目主语言的条目"：
初稿写到 knowledge/design-docs/design.md（不是交付版，是待后轮采访定稿的版本）：
---
status: signal
last_updated: YYYY-MM-DD
source: frontend-design-research skill
stage: 2-initial-draft
---
初稿段落（对应 kun 15 段的前 9 段子集）：
§7/§8/§9/§11 留到 frontend-design-writer 的 Round 3 组装；§12-§14 留到阶段 4 完成后回填。
knowledge/design-docs/design.md 初稿落盘，含 §0-§6 + §10，frontmatter 含 status: signalfrontend-interview-dualround 后轮采访| 场景 | 走谁 |
|---|---|
| 已定稿项目的二开 / 增量扩展（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 |
plugins/frontend-suite/skills/ 删除本目录即自动停止发现；marketplace 刷新后生效。~/.agents/agent_prompt_core/shared/playbooks/前端设计_剧本.md 阶段 2 路由frontend-design-writer / frontend-interview-dualround / frontend-visual-reference 的"边界表"npx claudepluginhub kkunkunya/ai-frontend-design-kit --plugin ai-frontend-design-kitCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.