Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add kkunkunya/ai-frontend-design-kit/plugin install ai-frontend-design-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-design-review)<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-design-review"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-design-review/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-design-review"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-design-review.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00193 | $0.04332 |
| Opus 5 | $0.00097 | $0.02166 |
| Sonnet 5 | $0.00039 | $0.00866 |
| Haiku 4.5 | $0.00019 | $0.00433 |
Grade A, and why
frontend-design-review scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 284 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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设计与前端/02-执行方法/从参考案例复刻高级感：量化工作流.md->references/packaged-knowledge/从参考案例复刻高级感：量化工作流.md/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/参数外显与判断外显：评审的两条姊妹机制.md->references/packaged-knowledge/参数外显与判断外显：评审的两条姊妹机制.md/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/审美是隐性认知，追问是唯一的解压工具.md->references/packaged-knowledge/审美是隐性认知，追问是唯一的解压工具.md
Frontend Design Review
这个 skill 在做什么
把用户的"感觉不对"翻译成可执行的具体改动项。核心手法是三段式追问 + 选择题化 + 参数外显 Tweaks：AI 负责量化和出选项，用户只负责给感觉和做选择。
审美判断本质是隐性认知——用户自己也说不清，但一看到就知道对不对。要求用户一次性把所有审美标准讲清楚，是在要求一件物理上不可能的事。解压隐性认知的唯一工具是追问。
在阶段化流程里的位置
本 skill 严格绑定阶段 7 迭代微调（见 [[AI前端设计认知框架]]）。硬边界：
- 代码已生成才进本 skill——阶段 6 之前用户看不到具体实现，不会涌现真实审美反馈
- 代码前想引导用户定方向用
frontend-interview-dualround（产品设计师视角的双轮采访），不是本 skill
和老版的差异：老版三段式追问曾被当作"通用追问方法论"同时用在代码前和代码后——2026-04-21 重构后明确分工：代码前用 dualround 建立目标和边界，代码后用本 skill 做纠偏。
何时进入本 skill
要进：
- 用户看到前端实现说"感觉不对" / "差点意思" / "不够高级" / "不对但说不出来"
- 用户要求"review 一下这个页面" / "帮我评审前端"
- 前端实现一轮探索完成，进入阶段 7 精调
- 用户说"文案像 AI 写的" / "信息层级不对" / "边缘状态没覆盖"
- 前端设计剧本阶段 7 自动路由到本 skill
不要进：
- 还在调研阶段（没代码可评审）→ 走
frontend-design-research（阶段 2） - 代码前想把用户的模糊诉求拔清楚 → 走
frontend-interview-dualround（阶段 1 前轮 / 阶段 3 后轮） - 还没有 design.md 可对标 → 走
frontend-design-writer - 纯功能 bug（按钮不工作、API 报错）→ 走调试排查剧本
- 用户已经给出明确改动指令（"把标题改成 32px"）→ 直接改
知识库依赖
| 文件 | 用途 | 何时读 |
|---|---|---|
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/审美是隐性认知，追问是唯一的解压工具.md |
三段式追问完整方法论 + 选择题化模式 + 高级感维度拆解 | 启动必读 |
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/参数外显与判断外显：评审的两条姊妹机制.md |
参数外显 Tweaks 协议（把不确定参数暴露为可调旋钮） | 启动必读 |
/Users/kunkun/note/01-AI工程/AI设计与前端/02-执行方法/从参考案例复刻高级感：量化工作流.md |
DOM 量化测量法、浏览器工具陷阱 | 需要和参考站做 DOM 对比时读 |
/Users/kunkun/note/01-AI工程/AI设计与前端/01-认知框架/AI前端设计认知框架.md |
阶段 7 反馈驱动迭代机制、两类项目（展示型/工具型）的评审重点 | 启动时扫一遍阶段 7 段落 |
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 284 lines · 193 tokens per session scan A 1a6bd6aa98d0
frontend-design-review is a skill published in the GitHub repository kkunkunya/ai-frontend-design-kit (7 stars, last pushed 3mo ago), licensed MIT. It adds 193 tokens to every session and 4,332 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
stark
Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material…
web-design
Use for web interfaces, landing pages, product sites, dashboards, React, Next.js, Astro, Tailwind, frontend audits, responsive design, browser interaction, web motion, or requests for a distinctive non-generic website. Select the web surface and implementation track, load a small reference bundle, preserve usability…
design-with-claude
Use when design work needs a product designer's eye: auditing a codebase for design-system gaps, fixing WCAG contrast and unlabeled inputs, choosing type scales or spacing steps, reviewing UI that looks generic or AI-generated, or designing forms, tables, dashboards, navigation, checkout, onboarding, dark mode, and…
web-prototype
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed assets/template.html and pasting section layouts from references/layouts.md. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
mockup-device-3d
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
web-prototype-taste-brutalist
Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Swiss Industrial Print mode).