ui-design-brain
给设计师补上组件级知识库,让按钮、卡片、表单、模态、表格等模式不再靠猜。
我们没有再造一个空壳 prompt,而是把外部最强设计资产和 AI-RULES 现有设计员工体系做了分层融合。
给设计师补上组件级知识库,让按钮、卡片、表单、模态、表格等模式不再靠猜。
把 taste 变成可控参数,而不是一句抽象的“做高级点”。
把设计批判词汇和 anti-pattern 检查流程做成可重复使用的质量门。
让图标选择从“随便找个 SVG”升级成有家族一致性的检索流程。
只借用安全的工作节奏:角色进入、先读系统、再产出 artifact、最后简短收尾。
Designer 不是替代这些员工,而是把他们变成一个统一调度入口。小任务由一个 lead 顺序覆盖,大任务再按 lane 拆开。
统一决策入口,负责方向、结构、质量门和交付闭环。
负责视觉语言、组件美感、排版、视觉一致性。
负责信息层级、布局语法、状态和响应式基础。
负责品牌情绪、营销叙事、页面情感曲线。
负责品牌身份、语气、视觉一致性与不跑偏。
负责对比度、键盘、屏幕阅读器和真实可用性。
负责把设计判断压成可实现、可上线、可验证的前端结果。
这棵技能树把宏观方向、UX、组件认知、审美控制、质量门和交付层都拉平到一个页面里,方便你理解它到底强在哪。
先定产品调性和视觉家族,而不是先套模板。
把用户读、找、做三件事先理顺。
补齐组件知识,防止 AI 靠直觉乱拼界面。
让审美成为明确参数,而不是玄学。
上线前把通病都压掉。
最终产出必须能被工程稳定接住。
我们把 GitHub 当前高星且真正适合 React / Next 工作流的组件库压成一个明确矩阵,设计师被召唤时会按场景选,而不是把所有组件库都当成一样。
最适合品牌化、代码归自己、需要定制感而不是库味感的 React / Next 项目。
最适合成熟、稳定、数据密集型的 React 仪表盘和后台系统。
最适合高密度企业工作流、表单、表格、运营系统和业务后台。
动效库也不再靠直觉拍脑袋。产品界面、物理反馈、故事化时间轴,默认分别落到不同库上。
React / Next 产品界面的默认动效首选,最适合页面、布局、弹层、hover 和共享元素过渡。
适合更自然、更有物理感的连续反馈和交互过渡。
适合重编排、重故事、重滚动戏剧性的时间轴型动效。
这意味着它不只知道“该用哪个库”,还更接近知道“按钮、抽屉、表格、组合框、Tabs、空态、Toast 等组件该怎么做才对”。
现在已经不只是 vendor README,而是本地化成组件知识层。Designer 可以参考 60+ 组件的别名、最佳实践、布局模式和反模式来做组件决策。
默认流程不是先画,而是先读系统、定姿态、搭系统、再做产物,最后过质量门。
用户直接说“设计师”,系统进入统一设计 lead 模式。
读规则、读设计参考、读项目上下文,先理解再动手。
决定这次是保守、均衡还是激进,以及属于新建、审计还是改版。
同时定义视觉语言、UX 结构、组件规则、图标和质量门。
按任务输出 DESIGN.md、改版稿、实现指导或直接前端落地。
最后跑 anti-slop、a11y、图标一致性和实现现实性检查。
这部分不是概念说明,而是当前仓库里已经落成并验证过的命令入口:一个用来跨项目安装 Designer,一个用来实际搜索与读取图标。
把 Designer skill、项目本地 designer agent 和项目 AGENTS block 一次性装进目标项目。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\sync-designer-surface.ps1 -ProjectRoot C:\path\to\project -SyncProjectRules
通过 `better-icons` 的本地包装层查找统一风格图标。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-icons.ps1 -Action search -Query home -Prefix lucide -Limit 5 -Json
直接获取带颜色和尺寸参数的图标 SVG。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-icons.ps1 -Action get -IconId lucide:house -Color currentColor -Size 20 -Json
输出官方当前支持的 MCP 配置片段,方便进一步接到你的 agent harness。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-icons.ps1 -Action config
基于 `impeccable detect` 的本地审计入口,用来抓 UI anti-pattern、设计质量问题和典型 slop 信号。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-audit.ps1 -Target C:\path\to\project -Fast -Json
直接查询本地组件脑库,返回组件别名、最佳实践和常见布局,让 Designer 在组件层面不再靠记忆和直觉。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-components.ps1 -Query modal -Json
针对页面布局、间距和层级问题输出一份本地可执行的 layout 工作单。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-layout.ps1 -Target C:\path\to\project -RunAudit
针对字体、层级、可读性和版式结构输出 typeset 工作单。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-typeset.ps1 -Target C:\path\to\project -RunAudit
在功能完成后做最终对齐、交互状态和微细节 polish 工作单。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-polish.ps1 -Target C:\path\to\project -RunAudit
面向现有项目的审计后改造工作单,帮助保持现有栈的同时升级质感。
powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-redesign.ps1 -Target C:\path\to\project -RunAudit
这意味着 Designer 不只是一个统一设计 lead,它还能在 calm、minimal、redesign、high-agency、brutalist 等风格姿态间做有根据的切换。
最稳的通用 premium 前端姿态,适合作为 Designer 的默认 taste 基线。
更激进、更高变化率、更强视觉主张,适合高 agency 的 GPT/Codex 设计流。
专门用于现有项目升级,不从零开始,而是先审计再改造。
更柔和、更昂贵、更有留白感的 calm luxury 路线。
更偏编辑感和工具感的克制路线,适合 utilitarian premium 产品。
更硬、更实验、更偏 Swiss 和工业结构的路线。
推荐直接把它当一个统一设计 lead 来叫,而不是自己手动拆 UI / UX / 视觉 / 可访问性 / 前端。
会先选参考家族,再给出视觉方向、信息层级、组件系统和实现路线。
会先审计,再给出 keep / change / remove 方案和新的系统骨架。
会用更高强度的 taste / motion / hierarchy / collaboration posture 来做设计。