uix-skill 是做什么的？
构建看起来经过设计、而非生成的UI。一次确定外观（DESIGN.md），基于它进行构建，并通过脚本检查结果。
路径：以下所有 references/、data/ 和 scripts/ 路径均相对于包含此SKILL.md的文件夹。从用户的项目根目录以 node <该文件夹>/scripts/<名称>.mjs 运行脚本。脚本需要 Node 22。
命令
| 命令 | 作用 |
|---|---|
/uix init | 读取项目，询问3个问题，提供3个方向，编写并进行lint检查DESIGN.md。 |
/uix build | 根据DESIGN.md构建页面、界面或组件，进行检查并修复。默认命令。 |
/uix audit | 运行检查并报告。不编辑任何内容。 |
/uix polish | 修复最顶层的审计问题。保持逻辑、路由和文案含义不变。 |
/uix motion | 在回答4个问题后，审查或添加动效。 |
动词可以以 /uix-skill <动词>、uix <动词> 或直接请求（“制作设置页面”、“审计这个界面”）的形式出现。将直接请求映射到最接近的动词。无明显匹配：使用 build。
硬性规则
- DESIGN.md存在：先读取它并进行构建。跳过需求收集和方向选择。绝不能使用其未定义的颜色、字体或圆角。
- 在
scripts/rules.mjs运行完毕且对于Web技术栈scripts/check.mjs也运行完毕之前，绝不能报告完成。如果检查无法运行（参见检查部分），报告unverified: <原因>。 - 检查后最多进行2轮修复。然后报告剩余问题。
- 图片：优先使用项目资源，然后是Openverse/Wikimedia资源（需注明出处），最后是CSS/SVG艺术图。绝不能使用空的占位符。
- 仅限免费工具。无付费API，无密钥。
- 不要编辑请求UI范围之外的文件。
/uix audit不编辑任何内容。 - 只加载下表中命名的文件。加载一个技术栈文件，但
shadcn和nuxt-ui除外：加载该指南以及宿主框架的指南。
运行顺序
- 读取项目：package.json、配置、现有样式、DESIGN.md、
public/或assets/。 - 检测技术栈（下表）。加载其指南。
- 需求收集。一次性在一则消息中问3个问题：受众、界面的任务、语气。移动端技术栈：语气还需问“平静还是活泼的动效？”；将答案记录为DESIGN.md中的动效层级（
references/design-md.md）。跳过用户或项目已回答的任何问题。 - 从
references/directions.md中提供3个在语气、密度和色温上明显不同的方向。等待选择。如果所有者已预先选择了方向，则跳过提供。 - 编写DESIGN.md（
references/design-md.md）并进行lint检查。修复每个lint错误。 - 从
references/layouts-web.md（营销、内容）或references/layouts-app.md（已登录界面）中选择一个结构。 - 构建第一个部分。使用真实文案、真实图片、所有组件状态。
- 检查（如下）。修复错误，然后修复警告。最多2轮。
- 报告。
步骤3到5属于 init。build 使用已有的DESIGN.md；如果没有，则先运行 init。
现有设计系统优先
- DESIGN.md存在：读取它，进行lint检查，基于它构建。
- 没有DESIGN.md但项目有自己的令牌或主题（Tailwind配置、CSS变量、主题文件）：
/uix init从这些令牌中编写一个DESIGN.md（在项目根目录）。除非用户要求新外观，否则不要提供新方向。 - 两者都没有：完整的
init。 - 自有令牌指的是超出框架默认起始值的颜色、字体或间距，位于Tailwind v4的
@theme块、Tailwind config、CSS自定义属性或平台主题文件中。create-next-app默认的--background/--foreground不计入。
加载内容
在需要之前不加载任何其他内容。
| 时机 | 加载 |
|---|---|
| 任何 build、polish 或 audit | references/anti-slop.md、references/components-a11y.md |
init，或任何DESIGN.md写入 | references/design-md.md |
init（提供方向时） | references/directions.md，然后加载 data/fonts.csv、data/palettes.csv、data/styles.csv 中选定的行 |
| 营销、内容、目录页面 | references/layouts-web.md |
| 仪表盘、表格、表单、设置、认证 | references/layouts-app.md |
任何动效，或 /uix motion | references/motion.md |
| 移动端 build、polish 或 audit | references/mobile-foundations.md、references/mobile-patterns.md |
| 移动端动效 | 加载 references/mobile-motion.md 替换 references/motion.md |
| 移动端：安全查看应用、Expo Go与开发构建对比、点击和滑动检查 | references/mobile-testing.md |
移动端应用的 init | 加载 data/mobile-styles.csv 替换 data/styles.csv（选定的行） |
| 任何图片插槽 | references/images.md |
| 样本DESIGN.md形状 | data/examples/ledger.md、field-notes.md 或 harbor.md。仅一个。 |
| 每项任务 | 一个 references/stacks/<id>.md。对于 shadcn 或 nuxt-ui，还需要宿主指南（参见技术栈检测）。 |
技术栈检测
首次匹配获胜，从上到下。无匹配：使用 html-tailwind。匹配确切的依赖名（next，而不是 next-themes）。
| 信号 | 技术栈标识 |
|---|---|
package.json 中的 @nuxt/ui | nuxt-ui |
包含 shadcn 的 components.json，或 @/components/ui | shadcn |
artisan 文件或 composer.json 中的 laravel/framework | laravel |
package.json 中的 nuxt | nuxtjs |
package.json 中的 next | nextjs |
@angular/core 或 angular.json | angular |
package.json 中的 astro 或 astro.config.* | astro |
svelte 或 @sveltejs/kit | svelte |
package.json 中的 vue | vue |
package.json 中的 three | threejs |
package.json 中的 react-native 或 expo | react-native |
package.json 中的 react | react |
pubspec.yaml | flutter |
包含 Compose（androidx.compose）的 build.gradle(.kts) | jetpack-compose |
*.xcodeproj 或包含 SwiftUI 的 Package.swift | swiftui |
包含 Avalonia 的 *.csproj | avalonia |
包含 Uno. 或 Uno.WinUI 的 *.csproj | uno |
包含 Microsoft.WindowsAppSDK 的 *.csproj | winui |
包含 <UseWPF>true</UseWPF> 的 *.csproj | wpf |
包含 TargetPlatformIdentifier UAP 或 Microsoft.NETCore.UniversalWindowsPlatform 的 *.csproj | uwp |
包含 javafx 的 pom.xml 或 build.gradle | javafx |
| 以上均否 | html-tailwind |
Web标识：angular, astro, html-tailwind, laravel, nextjs, nuxt-ui, nuxtjs, react, shadcn, svelte, threejs, vue。其余为原生。
“移动端技术栈”指 react-native、flutter、swiftui 或 jetpack-compose。它们的请求也会加载“加载内容”中的移动端行。
更具体的栈优先：nextjs 优先于 react，react-native 优先于 react，laravel 优先于其 JS 前端。
组件层技术栈加载两个指南：shadcn 加上宿主指南（nextjs、react、astro、laravel，……由本表检测，跳过 shadcn 行），以及 nuxt-ui 加上 nuxtjs。其他所有项目只加载一个。
检查
从用户的项目根目录运行。将 <skill> 替换为包含此 SKILL.md 的文件夹。
node <skill>/scripts/rules.mjs [--design DESIGN.md] <path...>
node <skill>/scripts/check.mjs <url|file> [--widths 375,768,1280] [--out .uix/shots] [--themes attr=v1,v2]
node <skill>/scripts/images.mjs "<query>" [--count 6]
- 三个命令均输出JSON。
rules.mjs输出{findings, skipped}：文件过小、超过 1 MB 或不可读的文件会进入skipped并附带原因，这不是错误。check.mjs输出{shots, findings, notes}；阅读notes（例如加载超时提前探测，或截图失败）。退出码0：干净。退出码1：存在错误发现问题（rules.mjs、check.mjs）。退出码2：用法或环境问题（全部三个）。images.mjs仅退出0或2。 - 退出码2绝不是干净结果，也不计为修复轮次。如果
check.mjs无法访问页面且项目有明显的开发脚本（npm run dev等），则在后台启动一次并重试。否则询问用户。指出缺少什么（Chrome、Node 22、未运行的服务器）。 - 如果检查仍然无法运行，报告中显示
unverified: <原因>。 - Web技术栈：先在源代码上运行
rules.mjs，然后在开发服务器URL或构建文件上运行check.mjs。宽度为375、768和1280。截图保存在.uix/shots：<w>.png为全页，<w>-<n>.png为最多1600像素的图块。查看图块，而非全页截图；全页截图会缩小到不可读。check.mjs会先滚动页面，以便滚动后显示的内容得以展示。 - 当项目定义了多个主题（
[data-theme]、[data-skin]、.dark）时，使用--themes传递，例如--themes data-skin=oatmeal,rose或--themes class=dark。每个主题在最后一个宽度下进行探测；其发现问题会携带theme。 - 对比度发现按每对颜色分组（
count、sample、selectors）。修复令牌，而不是每个元素。 - React Native (Expo)：运行
rules.mjs，然后对正在运行的Metro服务器运行node <skill>/scripts/check-mobile.mjs --app exp://127.0.0.1:<port>；为Android模拟器添加--platform android（标志和路由文件在栈指南中）。它输出{shots, findings, notes}并像check.mjs一样退出0、1或2。以maestro missing:开头的注释意味着层次结构和流程未运行；报告为unverified: <原因>，而非成功运行。截图保存在.uix/mobile-shots。发现route-not-navigated是一个错误且绝非干净结果：截图显示的是另一个界面。修复循环：使用--only <routes>和一个--devices条目重新检查，而非完整矩阵。 - 其他移动端技术栈：运行
rules.mjs。原生iOS应用（SwiftUI）随后使用check-mobile.mjs --native（标志在栈指南中）；在审计阶段使用--out "$(mktemp -d)"。其他使用栈文件“如何检查”中的手动截图配方（浅色、深色、xxxl文本）。无模拟器可用：unverified: <原因>。2轮上限适用。 - 其他原生技术栈：运行
rules.mjs，然后执行栈文件“如何检查”中的手动检查清单。无浏览器检查。 - 先修复
error级别的发现问题，再修复warn。保留的警告需要一行原因。 - 修复循环：检查、修复、重新检查。最多2轮。然后停止并报告。
- 规则ID及其修复方法在
references/anti-slop.md中。它还列出了脚本无法捕获的判断规则；请自行审查这些规则。
命令契约
init
- 读取项目，检测技术栈，加载其指南。
- 存在自有令牌或DESIGN.md：参见“现有设计系统优先”。
- 否则询问3个问题，提供3个明显不同的方向，等待选择。
任何技术栈：检测内容语言（
lang、i18n文件、文案），并仅选择data/fonts.csv中scripts列覆盖该语言的行。 - 编写DESIGN.md。进行lint检查：
npx --yes @google/[email protected] lint DESIGN.md。修复错误。 - 报告所选方向、已写入的文件以及lint结果。
build
- 读取DESIGN.md、技术栈指南和布局文件。
- 选择一个结构。用一行说明选择了哪个以及原因。
- 先完整构建第一个部分。然后构建其余部分。
- 运行检查。最多2轮修复。
- 报告。
audit
- 检测技术栈并加载其指南。
- 运行检查。审查判断规则。将
--out "$(mktemp -d)"传递给check.mjs和check-mobile.mjs，以便审计不在项目中写入任何内容。 - 输出一个表格。不编辑任何内容。
| 修改前 | 修改后 | 原因 |
|---|---|---|
| 当前内容 | 应有内容 | 规则ID或原因 |
polish
- 检测技术栈并加载其指南。
- 先运行审计。
- 修复最顶层的问题，错误优先。不得改变逻辑、路由或文案含义。
- 重新运行检查。最多2轮。报告。
motion
- 加载
references/motion.md（移动端技术栈：references/mobile-motion.md）。为每个动画用书面形式回答其4个问题：是否有必要、它传达了什么、使用哪种缓动函数、持续时间多长。 - 删除任何没有明确答案的动画。添加
prefers-reduced-motion处理（技术栈指南中命名了原生等效项）。 - 输出一个 修改前 / 修改后 / 原因 表格。仅在用户要求添加或修复动效（而非审查）时应用更改。
报告
每次运行结束时：
- 更改了哪些内容（文件）。
- 仍存在的发现问题，每个都附带规则ID和原因。
.uix/shots中的截图和图块路径（Web）、.uix/mobile-shots中的截图路径（移动端）或已完成的手动检查（其他原生）。- 添加的图片出处。