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 ssmurfgg04-gif/context-m --skill designgit clone --depth 1 https://github.com/ssmurfgg04-gif/context-mWrote 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/ssmurfgg04-gif/context-m/design)<a href="https://agentmods.dev/skills/ssmurfgg04-gif/context-m/design"><img src="https://agentmods.dev/badge/skills/ssmurfgg04-gif/context-m/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/ssmurfgg04-gif/context-m/design"><img src="https://agentmods.dev/badge/skills/ssmurfgg04-gif/context-m/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.00065 | $0.11279 |
| Opus 5.5 | $0.00026 | $0.04512 |
| Sonnet 5.5 | $0.00013 | $0.02256 |
| Haiku 4.5 | $0.00006 | $0.01128 |
Grade A, and why
Design Skill 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 2mo 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 — 478 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Skill(设计技能)
设计类 HTML 产物的路由器:决定任务是否与设计相关、选哪个 artifact skill 作主技能、是否需要 design-system-reference.md / design-system-generation.md / export.md、动手前澄清多少。(产物结构、场景判断、跨场景工艺、参考/导出分别属于各 artifact skill、horizontal-craft/、及对应文件。)
整体流程
下面是一条流程,大部分步骤是内部的、瞬时完成的——只有当需求确实含糊时才停下来询问。不要把任何一步变成一张要填的表,或一个必须先读的文件。
用户请求
│
▼
1. 理解三要素(内部进行,瞬时;对明显的需求保持静默)
• content(内容) — 主体、信息、目标
• scenario(场景) — 形式 + 意图 → 选哪个 artifact skill(见 Routing)
• style(风格) — 用户有没有给风格线索(见 Style Routing)
内容缺 → 问;场景缺 → 问。(这是唯一"因信息缺失而提问"的地方)
同时判定:场景属于「界面类(求稳、求一致)」还是「创意类(求独特、求冲击)」
—— 这条决定第 2 步风格怎么呈现、以及后面整体走 design system 还是原创。
创意类需求:顺带完成创意解读(Design Read,见 §Creative Context)。
│
▼
2. 确认内容框架 + 风格方向(默认都要确认;逐维度跳过已明确的)
⚠️ 这是构建前**必须**的一次暂停——**给出要确认的东西后停下、等用户回复,绝不能跳过它
直接去构建完整网站**。检索/研读完资料后直接开建、不先确认,是错误行为。
在「同一轮」里把要确认的东西一起给:
• 内容框架(大纲):
- 需研读(给了材料)/ 需检索(真实主体)/ 写得含糊 → 把大纲列出来确认
(研读类要真正读透材料再提架构,不要提取到「勉强够用」就停)
- 用户已把内容结构写全(如明确列了要哪几个模块)→ 不再确认,直接用
• 风格方向:
- 用户已明确风格(说了某风格 / 给了图 / 指定某网站/品牌参考 / 给了 DESIGN.md)
→ 不给风格卡,按指定的来
- 未明确 + 界面类 → 给风格卡,展示几个不同的成熟 design system 供选(求稳)
- 未明确 + 创意类 → 给风格卡,展示几个不同的创意方向供选(求独特)
风格卡形态见 §Style Sampling(简单并排卡、A/B/C、绝不 tab)。
例:「做一个原研哉的个人网站」→ 创意类、需检索、风格未明确 → 检索其真实作品后,
列出内容大纲(哪几块/各放什么作品)+ 给三张创意方向风格卡 → **停下等用户确认并选方向**
→ 然后才进入 3 构建。绝不是检索完就直接把整站做出来。
两个维度独立判断:都明确→直接进 3;只要有任一维度需要确认,就必须停下等用户。
用户回复后进入 3。若用户只调整内容(没换方向),沿用已选方向直接做,不重新出卡。
│
▼
3. 检查模板(仅当场景命中模板库时)
在 `design-templates/INDEX.md` 按载体 + 场景检索:明确匹配 → 采用为起点、读其 SKILL.md
(通常比从零更好);没有合适的 → 直接用 artifact skill,绝不强行套。
模板是起始骨架不是用来克隆——保留用户真实内容,套 artifact skill + horizontal craft。
│
▼
4. 补全风格的剩余维度(在第 2 步已定的大方向内)
大方向已在第 2 步定了(指定 / design system / 创意方向之一)。这里只把没被覆盖的
具体维度按来源优先级填齐:① 用户即时描述(最高,锁定)② DESIGN.md ③ 模板/种子
④ 平行约束兜底(只加载需要的:字体/图标/配色…)。各来源可叠加。
冲突:用户描述与设计系统在某维度矛盾时,以用户为准,并用一句话说明差异。
│
▼
5. 开工预告(进入较长构建之前)—— 见 §Build Preview
不许只说「稍等」。先用人话给「有内容的施工预告」:做哪几块、怎么呈现、配色/字体、
预计耗时。构建中无法实时播报(写文件是一次性工具调用、产品不流式渲染),信息须在
开工前一次给足,让等待期有内容可读、能判断方向。
│
▼
6. 构建:用 artifact skill 的判断 + 补全后的风格 + 第 2 步所选方向。
│
▼
7. 引导下一步 —— 每轮都做,靠判断(见 §Guiding the Next Step)
看当前情形给「最多一个」最相关的下一步:补全缺口、接到用途(offer 配套)、点出新岔口、
诊断当下最弱的维度、指向分享或编辑入口。没合适项就不提;只指路不代劳。
│
▼
8. 质量门禁 —— 交付前把 quality-gate.md 当作精简的最终检查清单跑一遍。
(适用于「每一个」产出产物的轮次,不只第一轮——见 §Every turn。)
What ships with it
60 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.
- canvas-and-device.md 11 KB
- content-page.md 15 KB
- deck.md 4.5 KB
- design-system-generation.md 9.9 KB
- design-system-reference.md 16 KB
- design-systems/brand-inspiration/airbnb/components.html 56 KB
- design-systems/brand-inspiration/airbnb/DESIGN.md 30 KB
- design-systems/brand-inspiration/airbnb/README.md 200 B
- design-systems/brand-inspiration/airbnb/tokens.css 14 KB
- design-systems/brand-inspiration/airtable/DESIGN.md 34 KB
- design-systems/brand-inspiration/airtable/README.md 204 B
- design-systems/brand-inspiration/apple/components.html 28 KB
- design-systems/brand-inspiration/apple/DESIGN.md 36 KB
- design-systems/brand-inspiration/apple/README.md 198 B
- design-systems/brand-inspiration/apple/tokens.css 16 KB
- design-systems/brand-inspiration/arc/DESIGN.md 7.1 KB
- design-systems/brand-inspiration/binance/DESIGN.md 39 KB
- design-systems/brand-inspiration/binance/README.md 202 B
- design-systems/brand-inspiration/bmw-m/DESIGN.md 30 KB
- design-systems/brand-inspiration/bmw-m/README.md 198 B
- design-systems/brand-inspiration/bmw/DESIGN.md 27 KB
- design-systems/brand-inspiration/bmw/README.md 194 B
- design-systems/brand-inspiration/bugatti/DESIGN.md 28 KB
- design-systems/brand-inspiration/bugatti/README.md 202 B
- design-systems/brand-inspiration/cal/DESIGN.md 30 KB
- design-systems/brand-inspiration/cal/README.md 194 B
- design-systems/brand-inspiration/canva/DESIGN.md 6.9 KB
- design-systems/brand-inspiration/cisco/DESIGN.md 11 KB
- design-systems/brand-inspiration/claude/DESIGN.md 33 KB
- design-systems/brand-inspiration/claude/README.md 200 B
- design-systems/brand-inspiration/clay/DESIGN.md 25 KB
- design-systems/brand-inspiration/clay/README.md 196 B
- design-systems/brand-inspiration/clickhouse/DESIGN.md 25 KB
- design-systems/brand-inspiration/clickhouse/README.md 208 B
- design-systems/brand-inspiration/cohere/DESIGN.md 20 KB
- design-systems/brand-inspiration/cohere/README.md 200 B
- design-systems/brand-inspiration/coinbase/DESIGN.md 25 KB
- design-systems/brand-inspiration/coinbase/README.md 204 B
- design-systems/brand-inspiration/composio/DESIGN.md 20 KB
- design-systems/brand-inspiration/composio/README.md 204 B
- design-systems/brand-inspiration/cursor/components.html 25 KB
- design-systems/brand-inspiration/cursor/DESIGN.md 21 KB
- design-systems/brand-inspiration/cursor/README.md 200 B
- design-systems/brand-inspiration/cursor/tokens.css 13 KB
- design-systems/brand-inspiration/discord/components.html 13 KB
- design-systems/brand-inspiration/discord/DESIGN.md 7.6 KB
- design-systems/brand-inspiration/discord/tokens.css 7.4 KB
- design-systems/brand-inspiration/duolingo/DESIGN.md 6.8 KB
- design-systems/brand-inspiration/elevenlabs/DESIGN.md 20 KB
- design-systems/brand-inspiration/elevenlabs/README.md 208 B
- design-systems/brand-inspiration/expo/DESIGN.md 21 KB
- design-systems/brand-inspiration/expo/README.md 196 B
- design-systems/brand-inspiration/ferrari/DESIGN.md 24 KB
- design-systems/brand-inspiration/ferrari/README.md 202 B
- design-systems/brand-inspiration/figma/components.html 13 KB
- design-systems/brand-inspiration/figma/DESIGN.md 32 KB
- design-systems/brand-inspiration/figma/README.md 198 B
- design-systems/brand-inspiration/figma/tokens.css 7.3 KB
- design-systems/brand-inspiration/framer/DESIGN.md 28 KB
- design-systems/brand-inspiration/framer/README.md 200 B
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.
- 2mo ago First seen · 478 lines · 65 tokens per session scan A 00ce381ee9fa
Design Skill is a skill published in the GitHub repository ssmurfgg04-gif/context-m (2 stars, last pushed yesterday), licensed Apache-2.0. It adds 65 tokens to every session and 11,279 once invoked, about $0.0003 per session on Opus 5.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.
Design Skill compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| Design Skillssmurfgg04-gif/context-m | Skill | 2 | yesterday | Apache-2.0 | A | 65 | Claude Code, Codex |
| agent-state-barbojieli/ai-agent-book | Skill | 57k | 1mo ago | Apache-2.0 | A | 105 | Claude Code, Codex |
| post-training-strategybojieli/ai-agent-book | Skill | 57k | 1mo ago | Apache-2.0 | A | 159 | Claude Code, Codex |
| ai-stylebojieli/ai-agent-book | Skill | 57k | 1mo ago | Apache-2.0 | A | 25 | Claude Code, Codex |
| agent-evolutionbojieli/ai-agent-book | Skill | 57k | 1mo ago | Apache-2.0 | A | 126 | Claude Code, Codex |
| computer-usebojieli/ai-agent-book | Skill | 57k | 1mo ago | Apache-2.0 | A | 139 | Claude Code, Codex |
| context-compressionbojieli/ai-agent-book | Skill | 57k | 1mo ago | Apache-2.0 | A | 92 | Claude Code, Codex |