核心用法
Elite Frontend Design 是一个针对网页、Landing Page、Dashboard 及 React/Vue 组件开发的前端设计技能。它通过系统性的设计约束和代码生成规范，确保输出具有高度辨识度的界面。
显著优点
1. 反同质化设计系统
- 明确禁用 Inter、Roboto 等通用字体，强制使用 JetBrains Mono、Playfair Display 等具有场景特征的字型
- 禁止"白底+淡紫渐变"的 SaaS 默认配色，要求从 Dracula、Nord、Tokyo Night 等 IDE 主题或复古、赛博朋克等风格汲取灵感
- 每次输出强制尝试不同字体组合与审美倾向，确保视觉多样性
2. 工程级代码输出
- 直接使用 CSS 变量管理设计令牌（Design Tokens）
- 提供框架特定的动效实现方案：纯 CSS
@keyframes、Framer Motion、Vue<Transition> - 代码可直接运行，包含 Google Fonts 动态加载等工程细节
3. 深度视觉构建
- 多层 CSS 渐变叠加创造空间深度
- SVG pattern、噪点纹理等高级背景技法
- 排版层面强制执行 100 vs 900 字重对比、3 倍字号跳跃等专业原则
潜在缺点与局限性
- 学习成本：使用者需理解"Bento Grid"、"交错显现"等设计术语才能准确调用
- 风格激进：强制拒绝"居中 Hero + 三列 Feature"等经过验证的高转化结构，可能影响特定商业场景（如需要快速建立信任感的 B2B SaaS）
- 无视觉预览：仅输出代码，依赖用户渲染后才能验证效果
- 无交互原型：不涉及 Figma/Sketch 等设计文件导出
适合人群
- 追求视觉差异化的独立开发者、设计工程师
- 需要快速生成"有设计感"代码原型的前端工程师
- 厌倦了模板化 AI 输出的创意型技术用户
- 具备基础审美判断力、能评估代码输出质量的中高级开发者
常规风险
- 代码体积：动效和复杂背景可能生成较重 CSS，需用户自行优化
- 可访问性：高对比度设计系统虽美观，但未明确提及 WCAG 色彩对比度合规检查
- 字体加载：依赖 Google Fonts CDN，存在网络不稳定时的 FOUT（Flash of Unstyled Text）风险
- 浏览器兼容性：CSS 嵌套、
:has()等现代特性可能需降级处理
技术定位
这是一个"设计系统编码器"而非通用前端助手——它通过强约束条件（禁用列表、强制规范）将"好设计"转化为可执行的代码策略，适合作为创意项目的起点而非生产代码的直接交付物。