把 Claude Design 装进本地 coding agent

skills/baoyu-design/
├── SKILL.md              ← 入口：harness 检测 + 技能调度
├── system-prompt.md      ← 核心设计方法论（38 KB）
├── references/
│   ├── claude.md         ← Claude Code 工具映射
│   ├── cursor.md         ← Cursor 工具映射
│   └── codex.md          ← Codex Agent 工具映射
├── built-in-skills/      ← 设计类型专用子技能
│   ├── hi-fi-design.md       ← 默认：高质量 mockup
│   ├── interactive-prototype.md
│   ├── wireframe.md
│   ├── make-a-deck.md
│   ├── mobile-prototype.md
│   ├── create-design-system.md
│   ├── use-design-system.md
│   ├── design-system-authoring-guide.md
│   ├── save-as-standalone-html.md
│   ├── export-as-pptx-editable.md
│   └── ...（20+ 技能文件）
├── agents/
│   ├── compile-design-system.mjs   ← 写：编译 DS 为 bundle
│   ├── check-design-system.mjs     ← 读：验证 DS 完整性
│   ├── import-design-system.mjs    ← 消费者侧同步 DS
│   ├── record-asset.mjs            ← 记录 deliverable
│   ├── fork-verifier-agent.md      ← 验证子 agent
│   ├── design-system-checker.md
│   └── lib/
│       ├── ds-core.mjs       ← 读：DS 解析器（不写磁盘）
│       ├── ds-prompt.mjs     ← 生成 _ds_prompt.md
│       └── asset-store.mjs   ← _d_meta.json 读写
├── starter-components/   ← 设计构件（React + Babel）
│   ├── design-canvas.jsx     ← 多方案对比画布
│   ├── deck-stage.js         ← PPT 播放引擎
│   ├── tweaks-panel.jsx      ← 实时调参面板
│   ├── animations.jsx
│   ├── ios-frame.jsx / android-frame.jsx / macos-window.jsx
│   └── browser-window.jsx
└── vendor/
    └── babel.min.js      ← 3.1 MB，JSX 转译

system-prompt.md（设计方法论）
    ↓
    检测 harness 类型
    ↓
┌─────────────────────────────────────────────┐
│  references/claude.md   → Claude Code        │
│  references/cursor.md   → Cursor             │
│  references/codex.md    → Codex Agent        │
│  （fallback）           → 通用 agent          │
└─────────────────────────────────────────────┘

walk(root)          → 遍历目录，跳过 node_modules/.git/vendor
buildModel(root)    → 构建完整项目 model
    ├─ global CSS entry 查找（8 个已知文件名优先级）
    ├─ @import closure 解析（post-order，收集所有依赖）
    ├─ 组件模块解析（.jsx/.tsx → 命名导出）
    ├─ @dsCard 卡片提取（设计系统元信息）
    ├─ @startingPoint 起始点提取（模板）
    ├─ 品牌字体解析
    ├─ 命名空间提取
    └─ 问题列表（never writes，only reports）

{
  "designSystems": [{"slug": "...", "path": "_ds/...", "primary": true}],
  "assets": [
    {
      "name": "Reader Mac App",
      "path": "designs/reader-nods/Reader App.html",
      "status": "approved" | "changes-requested",
      "versions": [{"path": "...", "created": ISO8601}],
      "inheritFrom": null
    }
  ]
}

【设计系统创作】
设计系统作者
    ↓
写组件 .jsx + tokens.css
    ↓
node compile-design-system.mjs → _ds_bundle.js + manifest + lint config
    ↓
（可选）node check-design-system.mjs 验证完整性
    ↓
设计系统发布

【设计系统消费】
设计 agent 收到项目请求
    ↓
glob designs/*/_ds_manifest.json 发现已有 DS
    ↓
node import-design-system.mjs _ds/<slug>/ designs/<proj>/
    ↓
_ds/<slug>/_ds_prompt.md 生成（绑定视觉风格）
    ↓
读取 _ds_prompt.md → 设计时遵循 DS token/component
    ↓
record-asset.mjs 记录每个交付物
    ↓
fork-verifier-agent 验证
    ↓
交付 + 记录 approved/changes-requested

node compile-design-system.mjs <projectDir>
    ↓
buildModel(projectDir)              ← ds-core.mjs（零写磁盘）
    ├─ walk(root)              跳过 SKIP_DIRS（node_modules/.git/dist/vendor…）
    │                          + GENERATED 三件套（防止产物被当源码重新摄入）
    ├─ findGlobalCssEntry()    8 个已知入口名 × 最浅路径优先
    │    └─ miss → manifestCssEntry()  旧 _ds_manifest.json 的 globalCssPaths 兜底
    ├─ resolveCssClosure()     post-order @import 闭包（依赖先于入口）
    ├─ extractTokens()         DECL_RE 抓 --token + /* @kind */ 行尾注解
    ├─ detectFonts()           @font-face 家族 vs --fontFamily* 品牌字体
    ├─ collectExports()        .jsx/.tsx 顶层导出（function/class/const/export{}）
    ├─ findTagComment()        @dsCard / @startingPoint HTML 注释（限定文件前几行）
    └─ resolveNamespace()      manifest → bundle header → sha256 三级解析
    ↓
buildBundle(model)     → _ds_bundle.js（IIFE，逐文件 try/catch）
buildManifest(model)   → _ds_manifest.json（model 字段直通）
buildAdherence(model)  → _adherence.oxlintrc.json（.d.ts 派生 lint 规则）
    ↓
fs.writeFileSync ×3    ← 整条管道唯一写磁盘的位置（main 段落里的 w() helper）

/* @ds-bundle: {"format":3,"namespace":"...","sourceHashes":{...}} */
(() => {
const __ds_ns = (window.Namespace = window.Namespace || {});
const __ds_scope = {};
(__ds_ns.__errors = __ds_ns.__errors || []);

// components/button.jsx
try { (() => {
  /* transpiled body */
  Object.assign(__ds_scope, { Button });
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/button.jsx",
  error: String((e && e.message) || e) }); }

__ds_ns.Button = __ds_scope.Button;
})();

ImportDeclaration(p) {
  const src = p.node.source.value;
  if (src === 'react' || src === 'react-dom' || src === 'react-dom/client') {
    p.remove();
    return;
  }
  if (src.startsWith('.') || src.startsWith('/')) {
    // relative sibling import → pull the names out of __ds_scope
    // import { Icon } from './icon'  ⇒  const { Icon } = __ds_scope;
    p.replaceWith(
      t.variableDeclaration('const', [
        t.variableDeclarator(t.objectPattern(names), t.identifier('__ds_scope')),
      ]),
    );
  }
  // bare external imports (e.g. a CDN lib) are left as-is for the author to resolve
}

const DECL_RE =
  /(--[A-Za-z0-9-]+)\s*:\s*([^;]+);[ \t]*(?:\/\*\s*@kind\s+([A-Za-z]+)\s*\*\/)?/g;

syntax.push({
  selector: `JSXOpeningElement[name.name='${name}'] > JSXAttribute > JSXIdentifier[name!=/${allowedRe}/]`,
  message: `<${name}> doesn't accept that prop. Declared props: ...`,
});
// 纯字符串 union 类型的 prop 还会得到「值级别」的规则：
syntax.push({
  selector: `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='${p.name}'] > Literal[value!=/${valRe}/]`,
  message: `<${name}> ${p.name} must be one of 'a' | 'b'.`,
});

// 1. existing manifest（_ds_manifest.json 的 namespace 字段）
// 2. existing bundle header（首行 @ds-bundle: {...} JSON 注释里的 namespace）
// 3. derive fresh, deterministic from the project name:
const hash = crypto.createHash('sha256').update(projectName).digest('hex').slice(0, 6);
return `${pascalCase(projectName)}_${hash}`;

node import-design-system.mjs <dsDir> <projectDir> [--primary]
    ↓
前置校验：<dsDir> 根必须有 _ds_manifest.json（没编译过 → 直接报错退出）
    ↓
buildModel(dsDir)               ← 复用 ds-core，决定精确复制集
    ↓
copy set（copyOnce() 按相对路径去重）：
  ① model.globalCssPaths        @import 闭包里的全部 CSS（post-order）
  ② cssAssetTargets(css)        每个 CSS 引用的本地 url() 资产
  │                             （字体二进制/图片；剥掉 ?v=… 与 #iefix；
  │                              relToDs.startsWith('..') ⇒ 越界路径直接跳过）
  ③ _ds_bundle.js + _ds_manifest.json + _adherence.oxlintrc.json
     + README.md + SKILL.md + assets/ 整目录
    ↓
_d_meta.json merge：designSystems[] 按 slug upsert；
  primaryDesignSystem 首次 import 自动认领，--primary 显式覆盖
    ↓
renderDsPrompt(...) → _ds/<slug>/_ds_prompt.md（绑定提示词）
    ↓
stdout 报告：精确 wiring 顺序（React UMD → 每个 <link> 按闭包序 → bundle）
  + @startingPoint 种子清单 + warnings（model.issues 全量透传）

// diagnose the constraint before reporting
const el = document.querySelector('...'); const p = el.parentElement;
const pick = (e, cs) => ({rect: e.getBoundingClientRect(), boxSizing: cs.boxSizing,
  display: cs.display, position: cs.position, width: cs.width, height: cs.height,
  minHeight: cs.minHeight, flexDirection: cs.flexDirection});
JSON.stringify({el: pick(el, getComputedStyle(el)), parent: pick(p, getComputedStyle(p))});