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 Basic-XYZ/baku-skills --skill baku-design-systemgit clone --depth 1 https://github.com/Basic-XYZ/baku-skillsWrote 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/basic-xyz/baku-skills/baku-design-system)<a href="https://agentmods.dev/skills/basic-xyz/baku-skills/baku-design-system"><img src="https://agentmods.dev/badge/skills/basic-xyz/baku-skills/baku-design-system/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/basic-xyz/baku-skills/baku-design-system"><img src="https://agentmods.dev/badge/skills/basic-xyz/baku-skills/baku-design-system.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.00149 | $0.01561 |
| Opus 5 | $0.00075 | $0.00781 |
| Sonnet 5 | $0.00030 | $0.00312 |
| Haiku 4.5 | $0.00015 | $0.00156 |
Grade A, and why
baku-design-system 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 12d 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 — 76 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Baku Design System
概览
用 Baku 的品牌 DNA 生成可直接打开的 HTML 页面、图文卡片和个人虚拟形象。这个 skill 复用 esther-design-system 的结构：先读品牌 DNA，再选择页面风格和场景参考，最后用 checklist 验收；但颜色、字体、气质和头像都换成 Baku 自己的方向。
8 步工作流
-
澄清需求。 只问缺失的必要信息：类型、受众、屏数/卡片数、已有文案或素材、硬约束。用户已经给出明确内容时不要重复问。
-
读取品牌 DNA。 必读
brand-dna.md。如果用户说“换颜色、字体、气质关键词”，直接更新这个文件，不要把变化散落到模板里。 -
选择视觉风格。 默认使用
references/style-baku-workbench.md。如果用户提到 Notion、暖白、文档型官网、极简产品页、notion-like，但又明确不想替换 Baku 主风格，则读取references/style-notion.md。如果用户提到复古未来、retro future、mainframe、terminal、暗色技术作品集、个人网站那种黑底网格霓虹风，则读取references/style-retro-future-mainframe.md。不要把多套风格混在同一页面里，除非用户明确要求混合。 -
根据场景读取参考。
- 教程型、介绍型、科普型：
references/scene-tutorial.md - 活动页、分享会、landing page：
references/scene-landing.md - App 型、工具型、看板型页面：
references/scene-app.md - 图文卡片、小红书卡片、文章转卡片：
references/scene-cards.md - 个人虚拟形象或头像：
references/virtual-avatar.md
- 教程型、介绍型、科普型：
-
从模板开始。 优先复制并修改
assets/template-tutorial.html、assets/template-landing.html、assets/template-app.html、assets/template-cards.html、assets/template-notion.html或assets/template-retro-future.html。Notion Warm Doc 风格优先从assets/template-notion.html开始；Retro Future Mainframe 风格优先从assets/template-retro-future.html开始。不要从空白 HTML 开始，除非用户明确要求。 -
组合布局和组件。 从
references/layouts.md选择 3-5 种布局模式，从references/components.md选择组件。每个主要 section 的布局应有差异，避免整页都是同一种卡片网格。 -
处理虚拟形象。 默认兼容头像资产是
assets/avatar.jpg，多头像库在assets/avatars/。头像不是所有页面的必选项；只有个人介绍、作者页、品牌页、图文卡片封面或用户明确要求使用 Baku 形象时才放头像。使用前读取references/virtual-avatar.md，按页面风格选择合适头像，不要每次机械使用同一张。 -
自检并交付。 对照
references/checklist.md，P0 项必须全过。最终交付 HTML 文件、更新过的品牌文件或头像资产，并说明验证方式。
沟通调整位
- 改品牌：编辑
brand-dna.md，集中调整颜色、字体、气质关键词、禁忌和头像使用规则。 - 换默认头像：替换
assets/avatar.jpg，保持文件名不变，避免旧模板引用失效。 - 扩展头像库：把新头像放入
assets/avatars/，使用baku-avatar-风格-场景.png命名，并同步更新references/virtual-avatar.md的选择规则。 - 改模板：优先改对应
assets/template-*.html，再把可复用规则沉淀回references/。
场景速查
| 需求 | 读取 | 起点 |
|---|---|---|
| 教程/介绍/科普页 | references/scene-tutorial.md |
assets/template-tutorial.html |
| 活动页/Landing | references/scene-landing.md |
assets/template-landing.html |
| App/工具/看板 | references/scene-app.md |
assets/template-app.html |
| 图文卡片/小红书 | references/scene-cards.md |
assets/template-cards.html |
| 虚拟形象/头像 | references/virtual-avatar.md |
assets/avatar.jpg、assets/avatars/ |
| Notion 暖白文档页 | references/style-notion.md |
assets/template-notion.html |
| 复古未来个人网站/暗色技术作品集 | references/style-retro-future-mainframe.md |
assets/template-retro-future.html |
What ships with it
27 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 292 B
- assets/avatar.jpg 290 KB
- assets/avatars/baku-avatar-anime-warm-desk.png 1390 KB
- assets/avatars/baku-avatar-crayon-dark-portrait.png 734 KB
- assets/avatars/baku-avatar-crayon-light-desk.png 1229 KB
- assets/avatars/baku-avatar-line-art-portrait.png 286 KB
- assets/avatars/baku-avatar-marker-desk.png 1293 KB
- assets/avatars/baku-avatar-soft-3d-portrait.png 784 KB
- assets/template-app.html 2.7 KB
- assets/template-cards.html 2.8 KB
- assets/template-landing.html 3.3 KB
- assets/template-notion.html 7.3 KB
- assets/template-retro-future.html 17 KB
- assets/template-tutorial.html 3.1 KB
- brand-dna.md 3.9 KB
- README.md 1.4 KB
- references/checklist.md 1.6 KB
- references/components.md 1.5 KB
- references/layouts.md 1.2 KB
- references/scene-app.md 808 B
- references/scene-cards.md 685 B
- references/scene-landing.md 662 B
- references/scene-tutorial.md 721 B
- references/style-baku-workbench.md 1.7 KB
- references/style-notion.md 2.6 KB
- references/style-retro-future-mainframe.md 4.2 KB
- references/virtual-avatar.md 5.1 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.
- 12d ago First seen · 76 lines · 149 tokens per session scan A 8dfce4c40048
baku-design-system is a skill published in the GitHub repository Basic-XYZ/baku-skills (2 stars, last pushed 1mo ago), licensed MIT. It adds 149 tokens to every session and 1,561 once invoked, about $0.0007 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
figma-to-elementor
Use when the user says 'figma to elementor', 'build this figma design in elementor', or hands over a Figma frame to rebuild in WordPress. Maps the Figma node tree to Elementor widgets and containers and writes clean Elementor JSON into a draft duplicate, so nothing live is touched.
figma-to-bricks
Use when the user says 'figma to bricks', 'build this figma design in bricks', or hands over a Figma frame to rebuild on a Bricks Builder site. Maps the Figma node tree to native Bricks elements with BEM global classes, imports the frame's palette into the Bricks design system, and writes to a draft, so nothing live…
figma-to-divi
Use when the user says 'figma to divi', 'build this figma design in divi', or hands over a Figma frame to rebuild in WordPress on a Divi site. Maps the Figma node tree to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes, auto-detected) and writes to a draft, so nothing live is…
figma-to-gutenberg
Use when the user says 'figma to gutenberg', 'figma to blocks', or hands over a Figma frame to rebuild on a WordPress site that uses the block editor. Maps the Figma node tree to core Gutenberg blocks, registers the frame's palette in Global Styles, and writes to a draft, so nothing live is touched.
html-to-bricks
Use when the user says 'convert this html to bricks' or 'paste html into bricks', or has a Webflow, Framer, CodePen, or old static export to bring into a Bricks site. Converts raw HTML and CSS into native Bricks elements, mapping colors, type, and spacing to design tokens, plus ACSS classes when installed.
build-oxygen6-page
Use when building or rebuilding a page, header, footer, or template on an Oxygen 6 (Jenga) site, or when a previous attempt produced a blank page, one raw HTML block, or 'Unknown element'. Hands the agent the Oxygen 6 element schemas and the Template Content Area rule. Not for Oxygen Classic.