用途:面向需要“好看且有记忆点”的前端界面工作,包括项目展示页、系统演示、大屏可视化、可视化平台、微信小程序 UI、移动端界面、设计系统,以及基于 Tailwind v4、shadcn/ui、Next.js、React、Vite 的界面实现和重设计审计。
主要能力:写码前先定设计方向,明确 Purpose(问题、用户、场景)、Tone(基调,如科技、极简、玻璃拟态、卡片、大屏、管理系统、编辑风、粗野风等)、Constraints(框架、性能、可访问性、信息密度)与 Differentiation(唯一视觉或交互记忆点)。据此确定设计语言:调色板、字体系统、间距栅格、圆角阴影、图标风格,并落到 Design Tokens。强调设计长在已有品牌或代码库语境上,避免跨页风格漂移。提供可量化设计原则:层次、留白、对齐、字体配对、组件复用与 token 化、CSS 变量主题、WCAG 2.1 AA 对比度与键盘可达、尊重 prefers-reduced-motion、克制动效(载入编排优先于散落微交互,过渡 150-300ms)。给出反 AI-slop 禁令,如避免紫粉渐变配白底、emoji 当图标、CSS 剪影冒充产品图、千篇一律模板布局。
使用方式:按需参考技术要点:Next.js 默认 Server Components 并守客户端边界,shadcn/ui 通过 npx shadcn@latest init 后按需 add;Tailwind v4 采用 CSS-first(@import "tailwindcss" 与 @theme);移动端触控目标 iOS ≥44pt、Android ≥48dp,正文 ≥16,tabBar 3-5,小程序组件库在 TDesign/Vant/WeUI/Ant Design Mini/NutUI Taro 间选一不混搭;可视化可用 ECharts/D3/Plotly。交付前运行机械门禁:python scripts/audit_checklist.py 与 python scripts/ai_tell_lint.py,并提供 assets 中的可运行骨架,如 gsap-sticky-stack.tsx、gsap-horizontal-pan.tsx、motion-scroll-reveal.tsx。
适用场景与限制:适合答辩演示、数据平台大屏、落地系统等,按场景调整 VARIANCE/MOTION/DENSITY。涉及具体品牌前应收集素材并核实。分类细节、字体禁用清单、设计系统映射、redesign 审计协议、生态版本快照等见同目录 references 文件;未提供的收费、平台与具体效果信息暂未提供。