Chiralkit

shadcn 迁移

你的 React 应用里有 shadcn/ui 组件。你希望在 Django 模板、纯 HTML 或 Chiralkit 支持的任何技术栈中使用同样的组件——而不必手动重写。流程如下。

前置条件

这份映射告诉提取器，哪些 Tailwind 类应视为 token，哪些属于未映射的样式。最小结构如下：

{
  "colors": {
    "bg-primary": "color.primary",
    "text-primary-foreground": "color.primary-foreground",
    "bg-destructive": "color.destructive"
  },
  "spacing": { "px-4": "spacing.4", "h-10": "spacing.10" },
  "radius": { "rounded-md": "radius.md" }
}

0. 迁移你的 token

先运行 ck tokens migrate。它不需要 AI，也不需要 API key：它通过 components.json 读取你的 shadcn globals.css，写出 ck/chiraltokens.css，你的颜色、圆角和字体都会映射到 ChiralUI token。然后在 @chiralkit/tokens/tokens.css 之后导入这个文件。

@import "@chiralkit/tokens/tokens.css";
@import "./ck/chiraltokens.css";

1. 提取规范

把 spec from-react 指向组件源文件和你的 token 映射。它借助 TypeScript 类型检查器推导 props，并扫描 cva 变体和 className 字符串中的 token 用法。

输出（节选）：

{
  "name": "shadcn-button",
  "version": "1.0.0",
  "props": {
    "variant": {
      "type": "enum",
      "values": ["default", "destructive", "outline", "secondary", "ghost", "link"],
      "default": "default"
    },
    "size": {
      "type": "enum",
      "values": ["default", "sm", "lg", "icon"],
      "default": "default"
    },
    "asChild": { "type": "boolean", "default": false },
    "disabled": { "type": "boolean", "default": false },
    "href": { "type": "string" }
  },
  "tokens_used": {
    "colors": ["color.primary", "color.primary-foreground", "color.destructive", ...],
    "spacing": ["spacing.10", "spacing.4", "spacing.9", ...],
    "radius": ["radius.md"],
    "font": ["font.size-sm", "font.weight-medium"],
    "_unmapped": ["inline-flex", "items-center", "focus-visible:ring-2", ...]
  }
}

2. 审阅规范

有两个字段值得再读一遍。props 记录了 React 组件的公开 API——任何你不想在 Web Component 版本中暴露的内容，都在这里删掉。tokens_used._unmapped 列出映射未能识别的每个 Tailwind 类；每一个要么是应当 token 化的真实样式（把它加入映射后重新运行），要么是有意保持原样的字面样式。

3. 生成实现

把规范交给 generate，并告诉它目标技术栈。Chiralkit 根据规范组装提示词，然后依据 registry/generator.config.json 的配置，要么启动你本地的智能体（Claude Code、Cursor、Aider），要么通过 AI SDK 调用 LLM。

生成器会在 registry/shadcn-button/implementations/<stack>/ 下产出各技术栈的源文件。像审阅任何代码一样审阅输出——规范是契约，实现只是对它的一种诠释。

4. 在你的项目中使用

模块进入注册表后，使用它就是标准的 add 流程——与任何 Chiralkit 模块相同。

文件会落入你的项目，随时可以作为你自己的代码提交和编辑。

ChiralFM