Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add kkunkunya/ai-frontend-design-kit --skill system-designgit clone --depth 1 https://github.com/kkunkunya/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/system-design)<a href="https://agentmods.dev/skills/kkunkunya/ai-frontend-design-kit/system-design"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/system-design/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/system-design"><img src="https://agentmods.dev/badge/skills/kkunkunya/ai-frontend-design-kit/system-design.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.00072 | $0.01329 |
| Opus 5 | $0.00036 | $0.00665 |
| Sonnet 5 | $0.00014 | $0.00266 |
| Haiku 4.5 | $0.00007 | $0.00133 |
Grade A, and why
system-design 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 9d 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 — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.
系统架构决策
技能定位
本技能处理"系统怎么切"的问题：模块边界、数据流向、存储选型、API 契约、依赖拓扑、扩展点。
核心方法论：Alternatives Considered 强制 + trade-off 诚实。没有 alternatives 段的 Design Doc 是推销文档，不是设计文档。
何时进入
- 多模块项目或跨模块改造
- 存量系统新增模块（需评估是否破坏现有边界）
- 高风险集成（第三方服务、跨团队 API）
- 重大技术选型（数据库、消息队列、部署架构）
req-suite:project-spec路由过来
何时不进入
- 前端技术栈选型（Next.js/Vite/状态管理）→
frontend-design-research - 视觉/动效/组件库 →
frontend-design-research - 纯 UI 项目无后端 → 不需要本 skill
- 单模块小项目、local-light 模式 → 不需要本 skill
前置输入
从 req-suite:project-spec 获取：
knowledge/product-specs/PRODUCT-BRIEF.md（目标结果 + 非目标）knowledge/references/research-*.md（调研结果，如有）- 选择题清单中和架构相关的 🟡/🔴 项
核心流程
1. 结构影响分析 → 2. Design Doc / ADR → 3. 更新 ARCHITECTURE.md
步骤 1：结构影响分析
回答这些问题：
- 这次变化涉及哪些模块？
- 有没有模块不该碰（boundary violation）？
- 数据流方向是什么？有没有循环依赖？
- 失败模式是什么？一个模块挂了会影响什么？
- 有没有共享状态需要加锁/同步？
步骤 2：写 Design Doc 或 ADR
根据决策规模选用：
大 Design Doc（重要方案决策）
核心段（按社区最佳实践）：
| 段 | 写什么 | 质量标准 |
|---|---|---|
| Context | 背景事实 + 相关链接，不写观点 | 3-5 行，读完知道为什么在讨论这件事 |
| Goals / Non-goals | 要达成什么、明确不追求什么 | 可验证的 bullet 列表 |
| Proposed Design | 方案概述 + 关键架构图 | Agent 读完能开始实现 |
| Alternatives Considered | 考虑过的其他方案 + 每个的 trade-off | 这是核心。没有这段的 doc 是推销文档 |
| Risks & Mitigations | 已知风险和应对 | 每条 risk 有对应 mitigation |
| Success Criteria | 怎么判断方案成功 | 可测量、可验证 |
规模：1-3 页小方案，5-10 页大方案。超过 10 页说明该拆。
产出写入 knowledge/design-docs/DESIGN-DOC-[标题].md。
小 ADR（单个决策记录）
适用于具体技术选择、配置决策、依赖选型。
# ADR-NNN: [决策标题]
## Status
Proposed | Accepted | Superseded by ADR-NNN | Deprecated
## Context
[驱动这个决策的背景力量、约束、需求]
## Decision
[选了什么、怎么做]
## Consequences
[好的后果 + 坏的后果 + trade-off]
一个文件一个决策，不合并。不修改已 Accepted 的 ADR，用新 ADR 替代。
产出写入 knowledge/design-docs/ADR-NNN-[标题].md。
步骤 3：更新 ARCHITECTURE.md
将稳定的结构事实写入项目根的 ARCHITECTURE.md（不是 knowledge/ 下的）：模块拓扑、关键依赖、数据流向。只写事实，不写决策理由（理由住在 Design Doc / ADR 里）。
与 frontend-design-research 的边界
两个 skill 是正交子域，不是上下层：
| 本 skill 管 | frontend-design-research 管 |
|---|---|
| 模块边界、数据流、存储、API 契约 | 主语言、参考案例、动效采访、视觉 token |
| 依赖拓扑、扩展点 | 前端技术栈（框架/路由/状态/构建） |
| 跨层集成协议 | 组件库路由、动效资产库 |
What ships with it
1 file 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.
- 9d ago First seen · 123 lines · 72 tokens per session scan A 65f4ba5ee993
system-design is a skill published in the GitHub repository kkunkunya/ai-frontend-design-kit (7 stars, last pushed 3mo ago), licensed MIT. It adds 72 tokens to every session and 1,329 once invoked, about $0.0004 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…