数字
安装并上载CTDS的CLI,即混合设计系统.
所需资源
- 节点.js 18+
- A Next.js App 路由器项目(一个
app/或者说src/app/目录)
兼容性和核查
CLI 宣布节点.js 18+, 反应 >=18.2 <20下一个.js >=14 <17 兼容性。 这些是宣布的相容范围,而不是一个经过充分测试的版本矩阵. 安装当前的目标 Next.js App Router; Vite 尚未被验证为安装目标.
Repository CI使用Node.js 24(包括测试中的本土类型Script执行)和准确的Next.js/React版本 web/package-lock.json它运行林特、源码/登记/目录检查、单元测试、TypeScript、文档建设、闸门集成和孤立的柏油球安装。 套装烟雾测试核实了套装资产;它们尚未证明每个申报的同级版本都有全新的消费者应用程序。 扩大的消费者/版本测试另行计划.
发行门使用精确的Playwright Chromium版本并运行Core键盘/状态/轴/回流测试. Ubuntu CI在烟雾模式下制作精确的模板;一个单独的macOS 26 arm64任务比较了经过审查的Core和模板像素基线,并在失败时保留可视的diffs/跟踪. 基线使用定型OS倒置字体,远程请求被屏蔽,并被平台/建筑相隔. 基线缺失。 这些检查不会取代真实的屏幕阅读器或下载-webfont审查. 见 web/tests/quality/README.md 用于命令和范围.
自动下一个.js 16相容修补. 这个 turbopack.rules["*.css"] + @tailwindcss/turbopack 组合 create-next-app@latest 发射绕过涡轮包的内置闪电 CSS CSS 模块路径,这使得 .module.css 分类名称解析到 undefined。 。 。 . ctds init 探测到这个和 自动数字 :
- 删除
turbopack.rules["*.css"]块从next.config.ts - 创建新
postcss.config.mjs并登记@tailwindcss/postcss插件 - 打印控制台倒置 解释如何删除
@tailwindcss/turbopack
在接下来的15个LTS项目上,这些改动都没有被应用,设置工作是按原样进行的.
安装( 终端用户)
cd my-next-app
npx @conscience-technology/ctds init
什麽 init 是否为:
- 检测项目(检查)
package.json加一个app/目录) - 复制这些资产:
components/→components/ctds/(或src/components/ctds/(中文(简体) ) (可重复使用的组件加tokens.css带有字体、符号和每个轴选择器)prompts/→prompts/.claude/skills/ctds/→.claude/skills/ctds/
- 创建
app/ctds/page.tsx(登机路线) - 印刷品 两个人工步骤 转到控制台 :
- 添加
@import "../components/ctds/tokens.css";到顶端app/globals.css - 环绕
app/layout.tsx与<ThemeController>
- 添加
安装后 :
npm run dev
# Open http://localhost:3000/ctds, finish onboarding, click "Apply"
点击“ Apply” 将两个文件写入工程根 :
ctds.config.json: 轴值。 由AI代理商(Claude Code和朋友)和ThemeController。 。 。 .DESIGN.md:主题和轴的散文摘要. 由人类和AI共同阅读.
提交两个文件 . 其他开发商和AI代理商需要阅读.
选项
npx @conscience-technology/ctds init # default
npx @conscience-technology/ctds init --dry # print planned writes without touching disk
npx @conscience-technology/ctds init --force # overwrite existing files
调试 :
CTDS_DEBUG=1 npx @conscience-technology/ctds init
地方发展(捐助者)
为了编辑和测试CTDS repo内部的CLI:
cd packages/ctds-cli
npm link # symlink the `ctds` binary globally
cd /tmp/test-next-app # a Next.js project to test against
ctds init --dry # assets are pulled from the CTDS repo directly (no bundle step needed)
何时 assets/components 失踪了, getAssetSources() 自动倒回还原根
(单位:千美元)../../web/components, (中文(简体) ), ../../prompts, (中文(简体) ), ../../.claude/skills/ctds) (中文(简体) ).
发布
从寄存器根 :
npm run check:release
npm run pack:cli
npm run verify:cli-tarball
pack:cli 创建前重生资产 packages/ctds-cli/ctds-package.tgz. 核查安装了精确的线下沥青并检查清单投影、公共出口/即时、目录、WIP排除和私人食谱界限。 Tag Plash 运行与 PR 相同的要求的质量工作流程,然后包装,校验,并发布已禁用寿命周期脚本的柏克球. 不在核查和公布之间重新包装.
安装测试浏览器 cd web && npx playwright install chromium。用于本地模板烟雾检查,设置 CTDS_VISUAL_MODE=smoke;没有烟雾模式,经过审查的特定平台像素比较运行.
根部保持组件状态和稳定的ID component-manifest.json。在有意变更后,运行 npm run build:registry;运行时间注册和目录生成. 内部运行时间帮助器仍被安装,但被排除在UI目录之外.
已知差距(在端到端阶段2前已解决)
现状. 内幕 /ctds 应用流程(第1阶段)工程。 运行 ctds init 在一个单独的Next.js项目(第2阶段)中,用来弥补以下差距。 每一个问题都得到了解决.
1. 联合国. tokens.css 未取出 (已解决2026-10-07)
tokens.css 未取出符号和轴选择器块(1至718行)已移出 web/app/globals.css 输入 web/components/tokens.css,包括字体加载。 在CLI复制资产后,单曲 @import "../components/ctds/tokens.css"; 在顶端 app/globals.css 使 CTDS 完全活动.
2. 联合国. ThemeController 引用 web/app/data.ts (已解决2026-10-07)
ThemeController 引用 web/app/data.tsweb/app/data.ts 被批发移动到 web/components/_data.ts,同时包含轴类型和预设数据。 每个进口商(Theme Captain、登机轴板、图标等)现在都指向 @/components/_data 或者说 ../_data因此复制 components/ 自动携带数据文件.
3. 所复制的部件 @/components/* 别名 (已解决2026-10-07)
@/components/* 别名全体 @/components/<name> 进口 components/ 被重写到相对路径( e)../<name>) (中文(简体) ). 这个 @/lib/cn 财务报告和审定财务报表 @/lib/color 水电费移至 components/_cn.ts 财务报告和审定财务报表 components/_color.ts 以及所有与相对进口相关的参考文献。 复制的树现在不管消费者项目的tsconfig别名如何都有效.
4.四. OnboardingPage 导出形状 (已解决2026-10-07)
OnboardingPage 导出形状整个登机UI从 web/app/onboarding/ 改为 web/components/Onboarding/。 。 。 . OnboardingPage 现在是一个命名导出。 CTDS雷波号 /onboarding 路由仍然通过默认出口包装程序运行. ThemeController 财务报告和审定财务报表 axisOptions 移动到下面 web/components/ 我也一样。 复制的项目导入通过 ../../components/ctds/Onboarding。 。 。 .
5. 依赖兼容性 (已解决2026-10-07)
现在的CLI读消费者 package.json 文档和打印 an npm install ... 命令任何缺失的 CTDS 运行时软件包。 见 CTDS_RUNTIME_DEPS 内 src/utils/deps.js. 端到端测试通过"下16"和"回放"18.3.
6. 服务器动作 process.cwd() 假设 (已解决2026-10-07)
process.cwd() 假设findProjectRoot() 内 actions.ts 现在从当前工作目录上走出来并选择 最外侧目录 包含 package.json。这解决了在repo测试案例(web/ vs root)和端到端测试项目的右根.
已知小缺口(在端到端测试中发现,无阻断)
7. 联合国. .visually-hidden 全球效用(已解决)
SelectableCard 参考文献 className="visually-hidden"但那个班级只住 globals.css 因此没有复制。 它现在生活在一个新的 web/components/_utils.css 存档 tokens.css 车通过 @import "./_utils.css"。本地收音机和复选框输入现已正确隐藏.
8. 联合国. web/public/onboarding/*.png 未复制( 已解决)
登入主题徘徊预览( O)pure.png, (中文(简体) ), spare.png, (中文(简体) ), expressive.png)被添加到复制计划. 捆绑者bundle-assets.mjs)和后退(getAssetSources两者均包括 public/onboarding。 。 。 .
端到端测试结果 (2026-10-07)
小兰 node bin/ctds.js init 在新的 Next.js 16 工程中,遵循 CLI 的手动步骤,打开 /ctds,并点击"Apply".
- 复制资产
components/ctds/, (中文(简体) ),prompts/, (中文(简体) ),.claude/skills/ctds/, (中文(简体) ),public/onboarding/(中文(简体) ) /ctds/page.tsx创建- 手动设置已打印( globals.css 导入,布局.tsx 包装, npm 安装道克)
- Dev 服务器已正确渲染( 辐射、 标题、 背景)
- 应用已写
ctds.config.json财务报告和审定财务报表DESIGN.md到测试项目根 findProjectRoot()选择 cwd (/private/tmp/ctds-e2e(按预期)
许可证
麻省理工学院