UI Design Agent Kit

从口语需求到可验证界面的项目级 AI 设计工作流。

整理需求 · 查找素材 · 确认设计 · 实现交互 · 浏览器验收。

这不是独立 AI 客户端，也不是应用脚手架。

快速开始 ·
线上展厅 ·
产品案例 ·
使用说明 ·
交付标准

_{工作流成果展厅：展示已收录案例、入口与验证记录，不充当可执行 AI 客户端。}

_{产品介绍视频（20 秒）：由仓库 intro-video/ 的 Remotion 管线渲染，先学最好的界面，再交付有证据的产品。}

[!IMPORTANT]
这个仓库维护的是 UI 专业智能体，不是产品运行时。

demo 与 showcase 是已明确收录的教学与验收案例。案例截图证明对应页面的当次检查结果，不代表所有生成任务都已通过验收；主工具包不提供模型服务、账户、付费素材或后台业务接口。

为什么需要它

大多数 UI 生成把需求、设计决策和验收证据混在一段对话里。

UI Design Agent Kit 把它们拆成可确认的流程：

从一句话到可验收界面

1. 描述需求
   用日常语言说明产品、用户、核心流程和限制；不确定的部分交给可填写模板。

2. 联网调研
   查找相似产品、官方文档、素材来源和界面参考，先确认方向再动手。

3. 冻结计划
   输出信息架构、视觉方向、组件清单、动效规则、技术栈和验收方法，等待确认。

4. 实现与检查
   按契约实现界面，用浏览器采集截图，修复 P0/P1 问题并保留证据。

5. 写产品 README
   记录功能、截图、运行方法、限制、素材来源和验证结果，让成果可被复用。

在本项目的 AI 对话中可以直接开始：

$ui-design-agent 我想把采购申请集中起来，看谁还没处理。先整理第一版需求，由你联网找参考，再给我完整开发提示词，先不要开发。

不知道如何开头时，使用可填写模板。

不只是生成一屏 UI

库存运营台：列表、详情和演示数据	Tempo 今日节奏：任务管理与专注计时
积木小工坊：3D 自由拼搭与小挑战	NODEGRID：虚构云节点网络可视化

查看全部产品案例 →

产品案例

每个产品 README 都独立记录自己的界面、运行方法和边界。

生成的产品默认放在仓库外的独立工作区；这里只保留已明确收录的案例。根目录不导入产品运行代码。

提示词入口

需要迁移到其他智能体时，生成单文件提示词：

npm ci --ignore-scripts
npm run prompt:build

产物位于 output/ui-design-agent.system.md。单独导入提示词不会自动安装其他平台的 MCP 或 skills；目标环境仍需接入工具，缺失时按提示词中的替代流程执行。

工作流架构

flowchart TB
    Request["口语需求 / 模板"]
    Scout["联网调研<br/>产品参考 · 素材 · 文档"]
    Plan["冻结计划<br/>范围 · 设计契约 · 验收"]
    Build["界面实现<br/>HTML/CSS/JS 或项目技术栈"]
    Verify["浏览器验证<br/>桌面 · 移动 · 键盘 · 动效"]
    Delivery["产品 README<br/>截图 · 限制 · 来源"]

    Request --> Scout
    Scout --> Plan
    Plan -->|用户确认| Build
    Build --> Verify
    Verify -->|发现问题| Build
    Verify -->|通过| Delivery

主提示词保持单一维护源，视频流程由 Remotion 提示词承接，工具配置集中在 .codex/config.toml。

快速开始

需要 Node.js 20.18.1+、npm，以及能读取项目指令和技能的 AI 宿主。

git clone [email protected]:muzimu217/ui-design-agent-kit.git
cd ui-design-agent-kit

npm ci --ignore-scripts
npm run verify
npm test

然后在项目会话中描述需求。联网、浏览器和生图能力取决于当前宿主的实际工具，不因安装指令而自动获得。

验证

安装完成后依次运行，勿让 npm ci 与测试同时执行：

npm run verify
npm test
npm run doctor
npm run doctor:mcp

doctor 只检查本地配置；doctor:mcp 会访问公开服务并启动配置中的本地 MCP，进行只读调用，不登录付费服务。它不证明某个实际应用已通过视觉验收。

评测场景覆盖产品类型、动效参数、不可用工具、减少动效、长列表和视频转场。它们是可重复执行的行为评测规范；单元测试只检查结构，不代表已经逐场景运行了生成任务。

能力配置

项目配置位于 .codex/config.toml，skill 位于 .agents/skills。没有改动全局模型、权限或 MCP 配置，也没有启用自动 hooks。

素材检索

素材检索遵循候选排序规范：

1. 明确用途：先确定素材在界面中的位置、尺寸、情感目标和授权边界。
2. 按优先级检索：从官网、官方文档、开放素材库和高可信来源开始。
3. 少量候选：保留足够比较的候选，而不是无边界堆链接。
4. 结构化评分：把 MCP 或浏览器结果交给 npm run material:rank -- --input <candidate-json>。
5. 保留证据：记录来源、访问时间、用途和风险；不可达或低分来源进入 secondary 区。

长期目标、五步迭代循环与定时任务机制见目标与迭代机制，逐轮记录见迭代日志，思维链质量监控见质量监控。

Contributing

Issues、bug 报告、功能建议、文档改进和 Pull Request 都欢迎。

较大改动建议先开 issue 对齐范围。修改仓库指令时，请从 AGENTS.md 和主提示词开始，避免创建第二份长系统提示词。

报告问题 ·
查看开放 Issues

社区

本项目已获得 LINUX DO 社区收录与认可，感谢社区的支持与讨论。

访问 LINUX DO 社区

许可

这个仓库当前作为内部工具维护，没有把 Remotion skills 的整套产物宣称为可自由再分发的 MIT 项目。发布前需确认上游授权；版本和修改记录见来源锁定与第三方声明。