SuperAPI AI 工具集

design

设计与创作

查看项目

更新于 10-15 21:47

技能介绍

用途:在项目里添加、更新或换肤 UI,基于 freeCodeCamp UIKit 的 copy-source 注册表。组件以 shadcn 风格被复制进本项目源码,不从 npm 安装任何东西。

主要能力与用法:

  1. 获取清单:GET https://design.freecodecamp.org/registry/index.json,其中包含每个条目、其原始文件 URL、npm 依赖、注册表依赖以及注册表版本。
  2. 先复制 registryDependencies(始终包含 theme,有时包含共享 hooks)。
  3. 逐字抓取每个 files[].url,并写入 files[].target(默认 src/ui/<slug>/)。
  4. 全局导入一次组件 CSS。
  5. 需要 props 或用法时查看 https://design.freecodecamp.org/components/<slug>.md。

首次在项目中设置:按 https://design.freecodecamp.org/registry/starter.md 操作,包括主题安装、自托管字体、目录结构。

规则与限制:保持 CSS 自定义属性(token)名称不变,组件会引用它们;换色时编辑 src/ui/theme/tokens.css 中的 token 值,不要在组件 CSS 里硬编码颜色;默认深色,在 <html> 上加 class="light-palette" 切换浅色;复制来的源码属于本项目代码,可自由调整,但不要在未先对比本地修改的情况下重新抓取来“更新”。

适用场景:创建或编辑任何 UI,如按钮、弹窗、表单、标签页等。资料未提供收费、价格、平台或效果信息。