什么是 flawless-ui-ux？
flawless-ui-ux 是一个面向编码代理的 UI/UX 设计技能和本地检查 CLI。它帮助代理围绕产品受众、内容和品牌标识创建、重新设计、优化和审查界面。
该技能指导 Web、原生移动和桌面应用的布局、排版、色彩和交互决策。CLI 检查选定的源文件和浏览器界面，提供可供代理查找问题并验证修复的观察结果。您描述任务；您的编码代理在现有项目中应用指导。
无技能对比有技能
在 Codex 中使用 GPT 6.1 Sol (low) 创建，然后使用相同的模型和推理设置通过 flawless-ui-ux 优化。
安装
在项目目录中，使用您偏好的包管理器运行一个命令：
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
需要 Node 22.12+。在终端中，选择项目或全局范围，选择一个或多个代理，并在复制前确认目标。使用空格键选择，按回车键继续。在安装文件写入前，按 Ctrl+C 取消。
显式标志可直接运行：
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes 跳过菜单，并在未提供其他标志时使用默认值：当前项目中的所有受支持代理。JSON 输出、CI 和非终端执行保持非交互。使用 --format json 获取机器可读输出。
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
这将通过 Skills CLI 安装该技能。其运行时要求和代理选择遵循该安装程序。检查 CLI 可通过本指南中的 npm 命令单独使用。
bash /绝对/路径/flawless-ui-ux/install.sh --codex --project
Bash 替代方案需要 --project 进行本地安装；其默认值为全局安装。Windows 用户需要 Git Bash 或 WSL。
使用技能
描述您需要的界面并指定技能：
使用 flawless-ui-ux 技能为自由职业者构建一个财务仪表盘。
在 Codex 中，调用 $flawless-ui-ux。支持斜杠命令的主机使用 /flawless-ui-ux；Pi 使用 /skill:flawless-ui-ux。您还可以通过主机技能机制按名称请求该技能。如果发现需要刷新，请在安装后启动新会话。
随着界面的开发，在同一对话中继续：
| 任务 | 示例请求 |
|---|---|
| 创建 | 为一个协调部署和事件交接的应用构建一个落地页。 |
| 重新设计 | 使用提供的品牌调色板为移动端重新设计此账户界面。保留其内容和行为。 |
| 优化 | 在保留页面视觉特性的同时，提升主要操作的视觉存在感。 |
| 专注 | 改进排版和间距。保留措辞、颜色和功能。 |
| 审查 | 审查此仪表盘的可读性、导航、可访问性和重复的通用模式。报告发现，但不要编辑文件。 |
工作原理
该技能指导设计和实现。 它将产品上下文与构图、排版、色彩、密度、图像和交互联系起来。集中化的参考支持在现有技术栈中进行创建、重新设计、优化和审查。
对于新界面和广泛重新设计，代理在实现之前至少考虑三种有意义的、不同的内部构图，然后为产品和任务选择一种方法。专注的优化保留授权的范围和已建立的决策。
设计指导适用于 Web、原生移动和桌面界面。CLI 的渲染检查覆盖浏览器界面；原生验证使用适当的平台和项目工具。
优化发展预期的特性。 一个界面可能需要更强的存在感、减少竞争性强调或更一致的完成度。正确的干预取决于内容和任务。通用副本、重复的装饰和熟悉的模式将在上下文中，连同可用性和可访问性一起被审查。
CLI 检查实现。 收集项目上下文，检查选定的源文件或正在运行的界面，并在修正后比较结果。您的代理进行更改；CLI 提供观察结果并记录实际检查的内容。
产品上下文和工作流
将产品事实和设计决策保存在您现有的 Markdown 文档中。代理会在不同任务中重复使用它们；上下文文件是可选的。使用 context --source docs/brief.md 选择传统位置之外的文档。
要准备缺失的记录，请运行：
npx flawless-ui-ux init
CLI 会创建产品/设计 Markdown 模板，或重新使用受支持的现有文档，保留其内容。您的代理会根据项目和您的决策填写记录。稍后使用 context 读取它们；初始化不会生成摘要或选择视觉样式。
使用重复的 --url 输入和 --consistency 检查相关屏幕，以进行上下文样式清单。在允许的测试环境中，使用 --flow flows/edit-member.json 来执行明确定义的 UI 操作、期望和命名状态。验证需要再次选择未更改的流程文件。请参见工作流示例和限制。
检查与验证
直接使用 CLI，或让您的代理在其工作中包含这些检查。在整个过程中将 npx 替换为 pnpm dlx 或 bunx。
从上下文和源开始
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
检查正在运行的界面
启动您的应用并准备浏览器一次：
npx [email protected] install chromium
# 或者: pnpm dlx [email protected] install chromium
# 或者: bunx [email protected] install chromium
检查实际的开发服务器 URL 并保存基线：
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
在修正后，重复已保存的范围：
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
该比较区分持久的、新的和不再观察到的发现。缺少已确认的目标和更改的条件仍将保持未验证状态。
| 领域 | 收集的证据 |
|---|---|
| 可访问性 | 选定的 axe 对比度和可访问名称规则，包括需要审查的不完整结果 |
| 文本和布局 | 在采样宽度下计算的字号和水平溢出 |
| 资源和运行时 | 可见的损坏图像和... |