用途：在 Lovable 平台上构建、编辑或审查面向用户的软件时，提供专业级界面设计与开发规范，涵盖 web 应用、仪表盘、营销站点、SaaS 界面与组件。
主要能力：
- 设计哲学：先明确用途、基调（如 editorial、technical、playful）与差异化记忆点，避免折中；强调留白、统一 token、具体而非泛化的文案与图像。
- 颜色系统：3–5 色规则（1 主色、2–3 中性色、1–2 强调色）；用 oklch 定义语义 token，渐变/阴影/过渡定义为复合 token；避免紫色主色与对立色温混用。
- 排版：最多 2 种字体，区分 display 与 body；避免 Inter/Poppins/Roboto 等默认字体；给出字号、行高、字距与 text-balance 换行规则。
- 布局与间距：移动优先，优先 Flexbox 与 CSS Grid，使用 gap 而非 space-*；给出 4px–128px 间距刻度与容器模式。
- 动效：动画只作用于 transform/opacity，时长 150–250ms（UI）与 400–700ms（入场），尊重 prefers-reduced-motion。
- 组件架构：采用 shadcn/ui 为基础，通过 cva 变体扩展而非内联覆盖；文件放在 src/routes/、components/、hooks/、lib/、assets/，token 在 styles.css。
- 路由：使用 TanStack Start 文件式路由，多分区内容各建独立 route 与 meta，不用 hash 锚点。
使用方式：作为技能参考，在编码前先回答用途、基调、差异化三个问题；组件只消费 token，不写 hex/纯黑纯白；渐变、阴影、过渡统一定义在复合 token；后端能力使用 Lovable Cloud（数据库、认证、存储、边缘函数）。
适用场景：Lovable 上的营销页、仪表盘、SaaS 界面与组件开发、审查和重构。
限制：资料未提供定价、收费、平台支持范围或具体效果数据；暗色模式需为每个 token 提供 .dark 对应值。