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-writer)<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/frontend-design-writer"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-design-writer/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-writer"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/frontend-design-writer.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.00205 | $0.05806 |
| Opus 5 | $0.00102 | $0.02903 |
| Sonnet 5 | $0.00041 | $0.01161 |
| Haiku 4.5 | $0.00020 | $0.00581 |
Grade A, and why
frontend-design-writer 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 — 339 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设计与前端/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-执行方法/动效文档两层：MOTION-SPEC vs 实现 prompt 集.md->references/packaged-knowledge/动效文档两层：MOTION-SPEC vs 实现 prompt 集.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 Writer
这个 skill 在做什么
把前端阶段 1-4 的所有产出（主语言、六维试吃数据、双轮采访记录、视觉锚定三件套、资源选型）压缩成三份 Agent 可执行的交付文件。核心过程是三轮写作，不是从 §1 顺着写到 §14。
在阶段化流程里的位置
本 skill 贯穿阶段 1-7（见 [[AI前端设计认知框架]]），是所有其他前端 skill 的汇总写手：
阶段1 前轮采访 ─┐
阶段2 六维试吃 ─┤
阶段3 后轮采访 ─┼─→ design.md 初稿 → 定稿
阶段4 视觉锚定 ─┘ ↓
§12 §13 §14 引用视觉锚定三件套
↓
阶段6 代码实现 ──── Pre-flight 外显化读本文件
↓
阶段7 迭代微调 ──── review 反写回本文件
kun 15 段分工：
- §0-§11：原 12 段（主语言 + token + Agent prompt guide + motion spec + interview）
- §12 Moodboard Prompt（视觉锚定 A）：引用
knowledge/design-docs/visual-anchors/moodboard-prompt.md - §13 Page Mockup Prompt（视觉锚定 B）：引用
knowledge/design-docs/visual-anchors/mockup-*.md - §14 Motion Prompts（视觉锚定 C + 动效微观层）：引用
knowledge/design-docs/visual-anchors/motion-frames/和knowledge/design-docs/motion-prompts/
What ships with it
9 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.
- agents/openai.yaml 231 B
- references/packaged-knowledge/AI 前端动效盲区与采访补偿.md 14 KB
- references/packaged-knowledge/AI前端设计认知框架.md 25 KB
- references/packaged-knowledge/manifest.json 1.5 KB
- references/packaged-knowledge/主语言是设计的第一原则.md 10 KB
- references/packaged-knowledge/六维：形色字构质动是网站试吃的机械骨架.md 8.5 KB
- references/packaged-knowledge/动效文档两层：MOTION-SPEC vs 实现 prompt 集.md 8.5 KB
- references/packaged-knowledge/深度采访双轮：产品设计师视角的横切机制.md 7.8 KB
- references/packaged-knowledge/视觉锚定三件套：代价结构与资产生成双路径.md 7.6 KB
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 · 339 lines · 205 tokens per session scan A 3e0b6c1d6044
frontend-design-writer is a skill published in the GitHub repository kkunkunya/ai-frontend-design-kit (7 stars, last pushed 3mo ago), licensed MIT. It adds 205 tokens to every session and 5,806 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
ux-design
Use when the user asks for UX, product flow, user journey, wireframes, usability, conversion, onboarding, checkout, signup, navigation, forms, state design, dashboard workflows, command palettes, settings, permissions, long-running task progress, admin/internal tools, activation, retention, or making an app easier to…
android-design
Use when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React Native Android, Flutter Android, Compose Multiplatform, or any Android deliverable. Builds Android apps across system-like Compose, branded…
design-tokens
Use when the user asks for design tokens, DTCG tokens, theme systems, color/typography/spacing/radius/elevation/motion tokens, translating tokens, exporting tokens, making a Compose color scheme from a palette, auditing tokens, or sharing a single token source across web and native. Generates, audits, and translates…
apple-design
Use when the user asks for SwiftUI, UIKit, AppKit, iOS, iPadOS, macOS, watchOS, visionOS, Liquid Glass, HIG, SF Symbols, App Store deliverables, Apple settings/forms, branded Apple apps, React Native iOS, Flutter Cupertino, or Electron/Tauri macOS shells. Builds Apple-platform apps across system-like SwiftUI, branded…
windows-design
Use when the user asks for a Windows app, Win11/Win12 UI, XAML, Fluent design, WinUI, WPF, PowerToys-style tool, Microsoft Store app, desktop utility, admin tool, music/photo/creative app, Tauri desktop, Electron desktop, or any Windows desktop deliverable. Builds Windows apps across system-like WinUI 3, branded WinUI…
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…