agentsclimarketplace

Baku design system

Skill Basic-XYZ/baku-skills/baku-design-system

Chinese-first Agent Skills for Codex, Claude Code, and coding workflows

Install
npx -y skills add Basic-XYZ/baku-skills --skill baku-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

当 Codex 需要为 Baku/Basic-XYZ 个人品牌构建 HTML 页面、个人网站、教程页、介绍页、landing page、App 型页面、作品集、图文卡片、小红书卡片，或需要根据品牌 DNA 与多套页面风格设计/更新个人虚拟形象、头像和视觉规范时使用。适用于前端视觉设计、品牌页面、Notion 风格暖白文档页、Baku workbench 工作台页、复古未来/主机终端/暗色技术作品集页面、图文转卡片、个人 IP 形象、设计系统复用和模板化 HTML 交付。

SKILL.md

5.6 KB, as published. Nobody here has run it

Baku Design System

概览

用 Baku 的品牌 DNA 生成可直接打开的 HTML 页面、图文卡片和个人虚拟形象。这个 skill 复用 esther-design-system 的结构：先读品牌 DNA，再选择页面风格和场景参考，最后用 checklist 验收；但颜色、字体、气质和头像都换成 Baku 自己的方向。

8 步工作流

  1. 澄清需求。 只问缺失的必要信息：类型、受众、屏数/卡片数、已有文案或素材、硬约束。用户已经给出明确内容时不要重复问。

  2. 读取品牌 DNA。 必读 brand-dna.md。如果用户说“换颜色、字体、气质关键词”，直接更新这个文件，不要把变化散落到模板里。

  3. 选择视觉风格。 默认使用 references/style-baku-workbench.md。如果用户提到 Notion、暖白、文档型官网、极简产品页、notion-like，但又明确不想替换 Baku 主风格，则读取 references/style-notion.md。如果用户提到复古未来、retro future、mainframe、terminal、暗色技术作品集、个人网站那种黑底网格霓虹风，则读取 references/style-retro-future-mainframe.md。不要把多套风格混在同一页面里，除非用户明确要求混合。

  4. 根据场景读取参考。

    • 教程型、介绍型、科普型：references/scene-tutorial.md
    • 活动页、分享会、landing page：references/scene-landing.md
    • App 型、工具型、看板型页面：references/scene-app.md
    • 图文卡片、小红书卡片、文章转卡片：references/scene-cards.md
    • 个人虚拟形象或头像：references/virtual-avatar.md

  5. 从模板开始。 优先复制并修改 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 开始，除非用户明确要求。

  6. 组合布局和组件。 从 references/layouts.md 选择 3-5 种布局模式，从 references/components.md 选择组件。每个主要 section 的布局应有差异，避免整页都是同一种卡片网格。

  7. 处理虚拟形象。 默认兼容头像资产是 assets/avatar.jpg，多头像库在 assets/avatars/。头像不是所有页面的必选项；只有个人介绍、作者页、品牌页、图文卡片封面或用户明确要求使用 Baku 形象时才放头像。使用前读取 references/virtual-avatar.md，按页面风格选择合适头像，不要每次机械使用同一张。

  8. 自检并交付。 对照 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.mdassets/template-tutorial.html
活动页/Landingreferences/scene-landing.mdassets/template-landing.html
App/工具/看板references/scene-app.mdassets/template-app.html
图文卡片/小红书references/scene-cards.mdassets/template-cards.html
虚拟形象/头像references/virtual-avatar.mdassets/avatar.jpg、assets/avatars/
Notion 暖白文档页references/style-notion.mdassets/template-notion.html
复古未来个人网站/暗色技术作品集references/style-retro-future-mainframe.mdassets/template-retro-future.html

风格速查

风格读取适合
Baku Workbenchreferences/style-baku-workbench.md工程报告、流程说明、工作台、技术总结、个人品牌页
Notion Warm Docreferences/style-notion.md暖白文档页、产品说明、知识库、极简 landing、内容型官网
Retro Future Mainframereferences/style-retro-future-mainframe.md个人网站、AI workbench、暗色技术作品集、主机终端感 landing、项目 case study

关键原则

  • Baku 的视觉应该像“有工程判断的个人工作台”，不是通用 SaaS 模板。
  • 页面第一屏必须让人知道这是 Baku/Basic-XYZ 的东西，不只在 nav 里出现小字。
  • 颜色要克制但有识别度；用户明确偏好黑色、暖白和 Baku Yellow。避免蓝紫渐变、玻璃拟态、AI 光效和泛滥卡片。
  • 文案要像真实工程师在说话，短、具体、可验证。
  • 产物必须可落地：HTML 能打开，图文卡片能截图，头像路径能被模板引用。

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.