用途:Design Elite 是一个企业级 UI/UX 审计技能,用于审计或重构 UI 组件(React/Qwik)、从零创建企业级组件,以及检查无障碍、Tailwind 与原子设计规范。针对小型 LLM 优化,建议先阅读 QUICKSTART.md 作为快速参考。
主要能力:按四步强制协议工作——扫描组件/视图的全部文件(父级、子级、原子),对照关键规则逐文件审计,按顺序修正(Qwik 序列化、Tailwind 令牌、原子与原生元素、无障碍),最后逐项核对收尾清单,未通过则回到修正步骤。
关键规则:Qwik 序列化方面,允许通过 props 传字符串、无捕获闭包,禁止传 JSX/函数、捕获含函数的对象、在 props 或闭包内联 t(),要求先提取 t()。Tailwind 令牌方面,gap 仅允许 gap-1/2/3/4/6/8,控件高度用 h-8/h-9/h-10,浅色边框用 border-gray-200,深色用 dark:border-githubDark-border,禁止任意值。要求使用 ~/atoms 原子而非带 Tailwind 类的原生 HTML,Input 的 bind:value 用条件展开。无障碍要求所有交互元素有 focus-visible,纯图标按钮有 aria-label。
使用方式:按四步协议执行,并逐项勾选收尾清单(无任意值、gap 用 DS 令牌、控件显式 h-*、边框一致、无内联 t()、图标传字符串、focus-visible、aria-label、使用原子、bind:value 条件展开、Skeleton 与真实内容 gap 一致、模态标题左对齐/页脚右对齐/次要按钮 outline)。详细规则见 references 下的 agents、rules、patterns 文档。
适用场景:SaaS 前端组件审计与重构、企业组件创建、设计系统一致性检查。限制:资料未提供安装命令、收费、价格、平台支持与效果数据。