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 agentmods add skills/misonl/ling/frontend-designnpx skills add MisonL/Ling --skill frontend-designgit clone --depth 1 https://github.com/MisonL/LingWrote 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/misonl/ling/frontend-design)<a href="https://agentmods.dev/skills/misonl/ling/frontend-design"><img src="https://agentmods.dev/badge/skills/misonl/ling/frontend-design.svg" alt="Measured on agentmods" 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 | $0.00041 | $0.03831 |
| Opus 5 | $0.00020 | $0.01916 |
| Sonnet 5 | $0.00008 | $0.00766 |
| Haiku 4.5 | $0.00004 | $0.00383 |
Grade A, and why
frontend-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 4d 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 — 419 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端设计系统
理念： 每一个像素都有目的。克制就是奢侈。用户心理驱动决策。 核心原则： THINK（思考），不要死记硬背。ASK（提问），不要自作主张。
选择性阅读规则（强制）
必须阅读必读文件，可选文件仅在需要时阅读：
| 文件 | 状态 | 何时阅读 |
|---|---|---|
| ux-psychology.md | [CRITICAL] 必读 | 必须先读！ |
| color-system.md | 可选 | 需要做配色/色盘决策时 |
| typography-system.md | 可选 | 需要选择/搭配字体时 |
| visual-effects.md | 可选 | 玻璃拟态、阴影、渐变相关 |
| animation-guide.md | 可选 | 需要动画时 |
| motion-graphics.md | 可选 | Lottie、GSAP、3D |
| decision-trees.md | 可选 | 场景化模板 |
[CRITICAL] ux-psychology.md = 必读。其他 = 仅在相关时阅读。
运行时脚本
执行这些脚本用于审计（不要阅读，只需运行）：
| 脚本 | 用途 | 用法 |
|---|---|---|
scripts/ux_audit.py |
UX 心理与无障碍审计 | python scripts/ux_audit.py <项目路径> |
[WARN] 关键要求：先问再设（强制）
停！如果用户需求是开放式的，不要默认你的偏好。
当用户表述模糊时，必须提问：
未指定颜色？ 问：
"你偏好哪类配色？（蓝/绿/橙/中性/其他？）"
未指定风格？ 问：
"你希望整体风格是什么？（极简/大胆/复古/未来感/有机？）"
未指定布局？ 问：
"你对布局有偏好吗？（单列/网格/非对称/全宽？）"
需要避免的默认倾向（反“安全港”）
| AI 默认倾向 | 为什么不好 | 换个思路 |
|---|---|---|
| Bento Grids（盒状网格，现代陈词滥调） | 用得太多 | 为什么这个内容一定要用网格？ |
| Hero Split（左右分栏） | 可预测且乏味 | 能否用超大字或垂直叙事？ |
| Mesh/Aurora Gradients（网格/极光渐变） | “新式懒背景” | 能否做更大胆的色彩组合？ |
| Glassmorphism（玻璃拟态） | AI 眼中的“高级感” | 试试高对比纯色平面？ |
| Deep Cyan / Fintech Blue（深青/金融蓝） | 规避紫色禁令的安全色 | 为什么不用红、黑或霓虹绿？ |
| "Orchestrate / Empower" | AI 味文案 | 人类会怎么说？ |
| 深色背景 + 霓虹发光 | 过度使用的“AI 风” | 这个品牌真正需要什么？ |
| Rounded everything（全圆角） | 通用且安全 | 哪里可以使用锋利、粗粝的边？ |
[CRITICAL] “每一次选择安全结构，都会让你更接近一个模板化设计。敢于冒险。”
1. 约束分析（必须先做）
在任何设计工作之前，先回答或询问：
| 约束 | 问题 | 为什么重要 |
|---|---|---|
| 时间线 | 时间有多紧？ | 决定复杂度 |
| 内容 | 内容已准备好还是占位？ | 影响布局弹性 |
| 品牌 | 是否有既定规范？ | 可能限定颜色/字体 |
| 技术 | 技术栈是什么？ | 影响实现能力 |
| 受众 | 具体是谁？ | 决定视觉方向 |
受众 -> 设计方向
| 受众 | 设计要点 |
|---|---|
| Gen Z（Z 世代） | 大胆、快速、移动优先、真实 |
| Millennials（千禧一代） | 干净、极简、价值导向 |
| Gen X（X 世代） | 熟悉、可信、清晰 |
| Boomers（婴儿潮一代） | 易读、高对比、简单 |
| B2B（企业服务） | 专业、数据导向、信任感 |
| Luxury（奢华） | 克制优雅、留白充足 |
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.
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.
- 4d ago First seen · 419 lines · 41 tokens per session scan A 480c86aaff8a
frontend-design is a skill published in the GitHub repository MisonL/Ling (8 stars, last pushed 5mo ago), licensed MIT. It adds 41 tokens to every session and 3,831 once invoked, about $0.0002 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
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
auto-perf-optimize
Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.
chat-perf
Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…