Archetype AI Design System 是一套真实发布在 npm 上、采用 MIT 许可的设计系统，用于搭建 Newton 演示前端。其核心理念是“脚手架，而非重新发明”：前端通过安装已发布的包来组装，而不是手工转录 token 或复制粘贴组件标记。ds CLI 会脚手架生成 SvelteKit + Tailwind v4 项目、安装相关包、接好顺序敏感的 CSS，并把设计系统自带的 agent 配置（CLAUDE.md/AGENTS.md 与 ds-manifest.json）放入仓库。之后应遵循该随附配置，它负责组件、字体、回退行为与样式。
适用场景：用户想新建 Newton 演示前端、仪表盘或监控 UI；想为现有 SvelteKit 应用加入 Archetype AI 品牌与 token；想使用带品牌的组件，如 menubar、logo、卡片、徽章、表格、对话框、传感器/散点/面积图、视频播放器、代码块、toast。不适用于 Newton API 或模型相关工作（文本·图像·视频推理、嵌入、KNN、数据准备），那应使用 atai-newton-fusion-model、atai-newton-omega-model 或 atai-newton-omega-model-data-prep 技能。
系统包含四个 @archetypeai/ 作用域下的包：@archetypeai/ds-lib-tokens 提供 Tailwind v4 主题，含 OKLCH 语义 token（background、foreground、card、primary、muted、destructive、border、ring、chart-1..5、sidebar、atai-{neutral,good,warning,critical}）、品牌色（brand-{babyblue,yellow,black,white}）、完整色阶（Tailwind 色阶加自定义 mauve/olive/mist/taupe，50–950）、间距/圆角/图标描边尺度、.dark 变体、带系统回退的字体栈，以及为裸 h1–h6/p/code 赋予品牌样式的语义 HTML 基础层，纯 CSS 无 JS。@archetypeai/ds-ui-svelte-console 提供约 24 个稳定的 Svelte 5 组件：alert、badge、button、card、checkbox、codeblock、collapsible、dialog、dropdown-menu、dropzone、empty-state、input、input-group、item、label、progress、select、separator、sonner、spinner、table、tabs、textarea、tooltip，外加主题辅助与工具（cn）。@archetypeai/ds-ui-svelte-labs 提供实验性组件（组合 console）：aspect-ratio、chart、kbd、logo、menubar、scatter-chart、sensor-chart、slider、switch、toggle、video-player，图表基于 layerchart（固定到精确预发布版本）。@archetypeai/ds-cli（ds）负责脚手架与 agent 配置，含 create / init / add，安装包与 peer 依赖、写入顺序敏感的 layout.css、设置 shadcn-svelte，并安装设计系统自带的 agent 配置。
导入采用按组件的子路径，例如 import { Button } from "@archetypeai/ds-ui-svelte-console/primitives/button"，import { Menubar } from "@archetypeai/ds-ui-svelte-labs/primitives/menubar"。所有组件的权威目录（导入路径、描述、用法配方、变体轴及默认值）是 CLI 安装的 ds-manifest.json，应读取它而非猜测。
组装路径是 ds CLI，优先于手动安装。始终使用 @latest 标签调用 CLI（npx @archetypeai/ds-cli@latest …），否则 npx 会静默复用缓存的 ds-cli 版本，可能针对过时包、过时 ds-manifest.json 或已被取代的 layerchart 固定版本进行脚手架。运行 create 前确认脚手架位置：ds create <name> 会在当前工作目录创建名为 <name> 的新文件夹，不会提示放置位置，应先检查 cwd 并与用户确认父目录与项目名。为现有项目添加系统时，先 cd 进该项目并使用 init 而非 create。脚手架前询问品牌字体：品牌字体（PP Neue Montreal + PP Neue Montreal Mono）有许可且不在 npm 上发布，CLI 仅在传入 --fonts <path-to-font-files> 时安装（复制到 static/fonts/，token 的 fonts.css 期望该位置）。没有字体文件时应用会静默回退到系统字体，品牌观感明显下降。应询问用户是否拥有授权字体文件并通过 --fonts 传入其文件夹；仅在用户没有时使用 --no-fonts，并告知视觉后果。切勿自行下载或替换字体。由于字体为商业许可，切勿将字体文件提交到公开仓库；若使用了 --fonts 且项目公开或将公开，应将 static/fonts/ 加入 .gitignore。
常用命令示例：npx @archetypeai/ds-cli@latest create my-app --codeagent claude（新项目：SvelteKit TS + Tailwind v4 + tokens + console + labs + 演示页）；cd my-existing-app && npx @archetypeai/ds-cli@latest init --codeagent claude（现有 SvelteKit 项目就地添加，无演示页）；npx @archetypeai/ds-cli@latest add ds-ui-svelte（可编辑组件源码，修改工作流）；npx @archetypeai/ds-cli@latest add ds-lib-tokens（仅 token 与 CSS 导入）；npx @archetypeai/ds-cli@latest add ds-config-codeagent --claude（仅重新安装 agent 配置）。create 完成全部工作：脚手架 SvelteKit 应用、修补 svelte.config.js 使 Svelte 5 runes 在第三方包内可用、安装三个 DS 包与 peer 依赖（将 layerchart 固定到 labs 图表所需的精确预发布版本）、初始化 components.json 与 src/lib/utils.ts（树中仅一个 cn）、写入顺序敏感的 src/routes/layout.css、安装 agent 配置并写入演示 +page.svelte。CLI 具备 agent 感知：无 TTY 或使用 --defaults 时，它会列出仍需的选项（--pm、--fonts/--no-fonts、--codeagent）并退出，以便先询问用户而非猜测。
两种安装模型：默认从 npm 包组合，create/init 从已安装包导入组件，升级通过 npm update；源码安装/“修改”工作流，ds add ds-ui-svelte 通过 shadcn-svelte 将可编辑组件源码 vendor 进项目，来自两个注册表（labs: https://design-system-labs.archetypeai.workers.dev，console: https://design-system-console.archetypeai.workers.dev），单个组件可用 npx shadcn-svelte@latest add <registry>/r/<name>.json。
脚手架后应遵循随附配置：--codeagent claude 会在项目根写入两个文件（--codeagent cursor 写 AGENTS.md 而非 CLAUDE.md）。ds-manifest.json 是机器可读目录，扁平列出每个组件的导入子路径、注册表源 URL、一行描述、从真实产品用法提炼的用法配方及带默认值的变体轴，是组件的事实来源。CLAUDE.md 说明如何消费该系统：技术栈、顺序敏感的 CSS 接线、语义/状态/品牌 token、排版规则（mono 仅用于系统已使用处，以及 id 和易偏移数字）、暗色模式、页面外壳模式、API key 处理、图表指引、自定义组件约定、无障碍要求与硬性规则（绝不编辑 node_modules、console 产品专属变体名不可用、layerchart 保持固定）。非独立原语的复合演示件（回放/拖动条、按子系统阶段面板、日志行项、状态徽章网格）基于原语（slider + button + card + badge）按 manifest 的逐组件用法配方与 CLAUDE.md 模式构建，不要期望它们作为导入存在，而应复用原语层而非原始标记。
技术栈：打包组件目前面向 Svelte 5 + SvelteKit + Tailwind v4 + bits-ui（即 ds create 脚手架的技术栈），React 移植进行中。Newton 演示前端优先使用该技术栈，并使用已发布原语而非基于原始 token 手工构建或复制资产。非 Svelte 技术栈仍可使用 @archetypeai/ds-lib-tokens，它是纯 CSS，适用于任何框架。
常见陷阱：不要手工转录 token、字体或组件样式，它们存在于包与 ds-manifest.json 中，手工复制的第二事实来源会静默漂移；优先使用 CLI 而非手动安装，它会应用 svelte.config.js runes 补丁、固定 layerchart 精确预发布版本并保持树中单一 cn，手动安装需复现这三点否则组件无法编译或图表损坏；优先 Svelte 技术栈；CLI 始终加 @latest；确认脚手架位置；裸内联元素不继承 font-size——ds-lib-tokens/theme.css 在 @layer base 中为 span、strong、em、a、code 显式设置尺寸（均为 text-sm），显式值胜过继承，类规则无法挽救，可用 :where(span, strong, em, b, i, code, a) { font-size: inherit; } 恢复继承（不置于 layer 以压过 @layer base，且置于 :where() 内不携带特异性）；不要静默跳过字体；文件布局为 skills/atai-design-system/SKILL.md，此处按设计没有参考脚本，设计系统即已发布的 npm 包与 ds CLI，组件用法、字体与样式由 CLI 安装到项目中的 CLAUDE.md + ds-manifest.json 负责，本技能指向它们而非重复。