用途：指导创建独特、生产级的前端界面，避免通用“AI slop”审美，在实现可运行代码的同时关注美学细节与创意选择。
主要能力：先检测项目技术栈并匹配实现方式，写代码前阅读现有配置文件（package.json、tailwind.config.、globals.css、Blade 布局）。对 Next.js / App Router 项目默认使用 Server Components，仅在需要状态/交互时用 'use client'；项目自带自定义 CSS 设计系统就用它，不引入 Tailwind；自带 Tailwind 就用 Tailwind，不引入并行自定义系统；优先用 CSS 动画配合 Intersection Observer，而非动画库；复用已有设计令牌（--color-、--space-、--font-、--ease-*）。对 Laravel（Blade + Alpine / Livewire）项目使用 Blade 组件语法与插槽，Tailwind 为标准，Alpine.js 处理客户端状态，若用 Tailwind JIT，新增工具类需出现在被扫描文件中并重新构建。独立页面（落地页、工具、微型站点）用纯 HTML/CSS/JS，自包含、无构建步骤，创意自由度最大。
设计思路：编码前明确用途、语气、约束与差异化，选定清晰的美学方向并精确执行。美学指南涵盖字体（避免无意图的通用默认字体，搭配展示字体与正文）、颜色与主题（用 CSS 变量保持一致的调色板）、动效（优先 CSS 动画，聚焦高冲击时刻，默认 cubic-bezier(0.16, 1, 0.3, 1)、400ms）、空间构图（非对称、重叠、打破网格）以及背景与视觉细节。
2026 审美基线：以 OKLCH 构建颜色；近中性基础色加一个克制强调色；避免“Tech Bro Gradient”（近黑背景上的紫→蓝网格）。强调排版作为结构、4/8px 网格间距、克制调色板、编辑级图像、有意义的动效、把性能当作美学。
参考文档按需加载：references/design-tokens.md、references/premium-rubric.md、references/motion-library.md、references/imagery-and-icons.md。
限制：需先阅读现有 CSS/Blade/组件代码以匹配约定；若项目有 BRAND_GUIDE.md、DESIGN.md 等应先读；注意性能（自托管字体、最少 JS）；滚动触发类常用 opacity: 0 直到添加 .visible，避免在包装器和子元素上重复触发类。