AI
AI-RULES 控制面板 E:\AI-RULES · 中文优先 · 规则 / 技能 / 员工 / 外部仓库
最强设计师

把 UI、UX、组件认知、审美控制、可访问性和前端落地,统一成一个 Designer。

这不是一个单薄的 UI prompt,而是 AI-RULES 的设计总控层。你现在可以直接召唤 设计师, 让它根据项目、需求和上下文自动调用视觉、结构、品牌、可访问性、图标和交付能力。

能力融合

设计师是怎么拼出来的

我们没有再造一个空壳 prompt,而是把外部最强设计资产和 AI-RULES 现有设计员工体系做了分层融合。

组件认知层

ui-design-brain

给设计师补上组件级知识库,让按钮、卡片、表单、模态、表格等模式不再靠猜。

组件最佳实践组件别名识别组件反模式
审美与姿态层

taste-skill

把 taste 变成可控参数,而不是一句抽象的“做高级点”。

taste 模式改版优先密度 / 变化 / 动效控制
反模式与 polish 层

Impeccable

把设计批判词汇和 anti-pattern 检查流程做成可重复使用的质量门。

audit / polish 心智反模式清单命令化设计检查
图标层

better-icons

让图标选择从“随便找个 SVG”升级成有家族一致性的检索流程。

图标检索多库统一入口风格一致性
工作方法层

CL4R1T4S Claude Design Prompt

只借用安全的工作节奏:角色进入、先读系统、再产出 artifact、最后简短收尾。

artifact-first角色进入感先读系统再设计
员工栈

Designer 背后的默认支撑员工

Designer 不是替代这些员工,而是把他们变成一个统一调度入口。小任务由一个 lead 顺序覆盖,大任务再按 lane 拆开。

总控设计 lead

Designer

统一决策入口,负责方向、结构、质量门和交付闭环。

视觉系统

UI Designer

负责视觉语言、组件美感、排版、视觉一致性。

结构系统

UX Architect

负责信息层级、布局语法、状态和响应式基础。

叙事表达

Visual Storyteller

负责品牌情绪、营销叙事、页面情感曲线。

品牌守门

Brand Guardian

负责品牌身份、语气、视觉一致性与不跑偏。

可访问性门

Accessibility Auditor

负责对比度、键盘、屏幕阅读器和真实可用性。

交付 realism

Frontend Developer

负责把设计判断压成可实现、可上线、可验证的前端结果。

技能树

最强设计师技能树

这棵技能树把宏观方向、UX、组件认知、审美控制、质量门和交付层都拉平到一个页面里,方便你理解它到底强在哪。

技能树分支

方向层

先定产品调性和视觉家族,而不是先套模板。

产品类型判断参考家族选择保守 / 均衡 / 激进姿态DESIGN.md 输出
技能树分支

UX 层

把用户读、找、做三件事先理顺。

信息层级主流程空态 / 加载 / 报错响应式结构
技能树分支

组件层

补齐组件知识,防止 AI 靠直觉乱拼界面。

组件语义常见模式反模式识别状态系统
技能树分支

审美层

让审美成为明确参数,而不是玄学。

taste mode密度控制变化控制动效节制
技能树分支

质量层

上线前把通病都压掉。

反 slop 检查可访问性图标一致性实现现实性
技能树分支

交付层

最终产出必须能被工程稳定接住。

实现说明组件规范页面改版最终 polish 清单
React / Next 组件

设计师默认学习并优先考虑的组件库

我们把 GitHub 当前高星且真正适合 React / Next 工作流的组件库压成一个明确矩阵,设计师被召唤时会按场景选,而不是把所有组件库都当成一样。

GitHub Stars · 113k

shadcn/ui

最适合品牌化、代码归自己、需要定制感而不是库味感的 React / Next 项目。

定制产品 UINext.js SaaS设计感强的 app shell需要本地拥有组件代码 想要超大现成企业组件面团队不想维护拷贝到本地的组件代码
GitHub Stars · 98.2k

MUI

最适合成熟、稳定、数据密集型的 React 仪表盘和后台系统。

仪表盘管理后台数据表格和复杂表单成熟企业应用 视觉高度定制不想承受 Material 风格覆盖成本
GitHub Stars · 97.8k

Ant Design

最适合高密度企业工作流、表单、表格、运营系统和业务后台。

企业运营系统重表单重表格流程管理界面高密度后台 轻品牌、消费感、编辑感或 premium 定制视觉
React / Next 动效

设计师默认学习并优先考虑的动效库

动效库也不再靠直觉拍脑袋。产品界面、物理反馈、故事化时间轴,默认分别落到不同库上。

GitHub Stars · 31.6k

Motion

React / Next 产品界面的默认动效首选,最适合页面、布局、弹层、hover 和共享元素过渡。

产品 UI 动效Next.js 页面过渡模态 / 卡片 / 布局切换通用微交互 重时间轴的故事化编排
GitHub Stars · 29.1k

react-spring

适合更自然、更有物理感的连续反馈和交互过渡。

spring 物理动效更有弹性的交互反馈连续状态变化 想要最低决策成本的通用页面动效
GitHub Stars · 24.4k

GSAP

适合重编排、重故事、重滚动戏剧性的时间轴型动效。

hero 动效滚动叙事时间轴编排营销和展示型页面 普通产品界面的日常微交互默认方案
组件脑库

Designer 现在有本地组件知识层

这意味着它不只知道“该用哪个库”,还更接近知道“按钮、抽屉、表格、组合框、Tabs、空态、Toast 等组件该怎么做才对”。

组件脑库

ui-design-brain component knowledge base

现在已经不只是 vendor README,而是本地化成组件知识层。Designer 可以参考 60+ 组件的别名、最佳实践、布局模式和反模式来做组件决策。

60+ componentsbest practicescommon layoutsaliasesanti-pattern awarenessdesigner / componentsdesigner-components query
工作流

当你召唤“设计师”时,它会怎么工作

默认流程不是先画,而是先读系统、定姿态、搭系统、再做产物,最后过质量门。

工作流

召唤设计师

用户直接说“设计师”,系统进入统一设计 lead 模式。

工作流

读系统

读规则、读设计参考、读项目上下文,先理解再动手。

工作流

定姿态

决定这次是保守、均衡还是激进,以及属于新建、审计还是改版。

工作流

搭系统

同时定义视觉语言、UX 结构、组件规则、图标和质量门。

工作流

做产物

按任务输出 DESIGN.md、改版稿、实现指导或直接前端落地。

工作流

过质量门

最后跑 anti-slop、a11y、图标一致性和实现现实性检查。

真实工具

现在已经可执行的 Designer 工具层

这部分不是概念说明,而是当前仓库里已经落成并验证过的命令入口:一个用来跨项目安装 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

已落地工具

查看 Better Icons MCP 配置

输出官方当前支持的 MCP 配置片段,方便进一步接到你的 agent harness。

powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-icons.ps1 -Action config

已落地工具

Designer Audit Wrapper

基于 `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 Components Query

直接查询本地组件脑库,返回组件别名、最佳实践和常见布局,让 Designer 在组件层面不再靠记忆和直觉。

powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-components.ps1 -Query modal -Json

已落地工具

Designer Layout Wrapper

针对页面布局、间距和层级问题输出一份本地可执行的 layout 工作单。

powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-layout.ps1 -Target C:\path\to\project -RunAudit

已落地工具

Designer Typeset Wrapper

针对字体、层级、可读性和版式结构输出 typeset 工作单。

powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-typeset.ps1 -Target C:\path\to\project -RunAudit

已落地工具

Designer Polish Wrapper

在功能完成后做最终对齐、交互状态和微细节 polish 工作单。

powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-polish.ps1 -Target C:\path\to\project -RunAudit

已落地工具

Designer Redesign Wrapper

面向现有项目的审计后改造工作单,帮助保持现有栈的同时升级质感。

powershell -ExecutionPolicy Bypass -File E:\AI-RULES\sync\designer-redesign.ps1 -Target C:\path\to\project -RunAudit

taste modes

Designer 现在有本地风格模式矩阵

这意味着 Designer 不只是一个统一设计 lead,它还能在 calm、minimal、redesign、high-agency、brutalist 等风格姿态间做有根据的切换。

taste mode

taste-skill

最稳的通用 premium 前端姿态,适合作为 Designer 的默认 taste 基线。

general premiumsafe defaulthigh-end frontend baseline
taste mode

gpt-taste

更激进、更高变化率、更强视觉主张,适合高 agency 的 GPT/Codex 设计流。

higher variancestronger opinionaggressive anti-slop
taste mode

redesign

专门用于现有项目升级,不从零开始,而是先审计再改造。

existing UIaudit firsttargeted upgrades
taste mode

soft

更柔和、更昂贵、更有留白感的 calm luxury 路线。

calm luxurypremium whitespacesmooth spring motion
taste mode

minimalist

更偏编辑感和工具感的克制路线,适合 utilitarian premium 产品。

editorialrestrained paletteclean structure
taste mode

brutalist

更硬、更实验、更偏 Swiss 和工业结构的路线。

hard edgeSwiss-inspiredexperimental composition
调用方式

你以后可以怎么叫它

推荐直接把它当一个统一设计 lead 来叫,而不是自己手动拆 UI / UX / 视觉 / 可访问性 / 前端。

新建界面

设计师,给我做一个开发者产品首页

会先选参考家族,再给出视觉方向、信息层级、组件系统和实现路线。

现有改版

设计师,重做这个后台页面

会先审计,再给出 keep / change / remove 方案和新的系统骨架。

带姿态

设计师,按激进模式来

会用更高强度的 taste / motion / hierarchy / collaboration posture 来做设计。