SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场visual-excellence-enforcer

visual-excellence-enforcer

前端与建站

查看项目

更新于 10-16 08:24

技能介绍

用途

Visual Excellence Enforcer 是一个 UI 质量把关技能，用于确保前端界面达到“Scientific Luxury”设计标准。该技能的核心立场是：系统不接受通用 LLM 生成的 UI 作为完成品，每个 UI 组件在交付前都必须通过视觉审查。它要求提供截图作为视觉证据，而不是文字描述。

主要能力

该技能提供以下能力：

  • 在 UI 组件、页面或布局被声称完成时进行审查
  • 在合并任何前端 PR 之前进行设计 QA
  • 在请求截图或视觉证明时触发审查流程
  • 依据 Scientific Luxury 设计标准检查截图和代码
  • 自动识别并拒绝通用 UI 模式
  • 生成视觉审计报告，给出通过或拒绝结论及具体修复项

设计标准

该技能依据 Scientific Luxury 设计系统执行审查，参考文档为 docs/DESIGN_SYSTEM.md。不可协商的规则包括：

  • 背景：必须使用 OLED Black #050505，禁止灰色、白色或其他颜色
  • 圆角：仅允许 rounded-sm，禁止 rounded-lg、rounded-full、rounded-xl、rounded-2xl、rounded-3xl
  • 动画：仅允许 Framer Motion，禁止 CSS transition: all linear 或无 Framer 的 animation
  • 字体（代码/数据）：必须使用 JetBrains Mono，禁止其他等宽字体
  • 字体（名称/标题）：必须使用 Editorial New，禁止系统字体
  • 边框：必须使用 border-[0.5px] border-white/[0.06]，禁止实心 1px 彩色边框
  • 颜色：必须使用光谱调色板（Cyan #00F5FF、Emerald #00FF88、Amber #FFB800、Red #FF4444、Magenta #FF00FF），禁止 Bootstrap 蓝、Material 绿
  • 阴影：无阴影或微妙发光效果，禁止通用 box-shadow: 0 4px 6px rgba(0,0,0,0.1)

批准的 CSS 缓动函数仅限以下四种：

--ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

自动拒绝的通用 UI 模式

以下模式表明是工厂默认的 LLM UI，会被立即拒绝：

  • 未定制的 shadcn 组件
  • 蓝色主按钮（bg-blue-500）
  • 白色卡片背景（bg-white、bg-gray-50、bg-gray-100）
  • 默认 Tailwind 灰色调作为主色
  • 没有悬停状态或动画的 <button>
  • 占位文本如“Lorem ipsum”或“Click here”
  • 灰色占位图
  • 默认浏览器滚动条（必须样式化或隐藏）

使用方式

该技能按以下步骤执行：

  1. 请求截图：如果没有提供截图，则输出“VISUAL REVIEW REQUIRED”，要求提供实际渲染组件/页面的截图，不接受 UI 描述作为视觉证明。
  2. 依据规则审查截图：检查背景色是否为 #050505、圆角是否锐利、数据/代码是否使用 JetBrains Mono、动画是否使用批准的缓动（静态截图无法验证，需检查代码）、是否存在被禁模式。
  3. 审查代码中的被禁模式：搜索 rounded-lg、rounded-full、rounded-xl、bg-white、bg-gray-、bg-slate-、transition-all linear、animate- Tailwind 动画类等。
  4. 生成视觉审计报告：报告包含组件名称、日期、截图审查结果、各设计规则检查的通过/失败状态、得分、状态（APPROVED 或 REJECTED），如被拒绝则列出所需的具体修复项。

验证门

在批准 UI 组件之前，必须满足以下条件：

  • 已提供截图（非描述）
  • 背景为 OLED Black #050505
  • 没有 rounded-lg、rounded-full 或更大圆角
  • 没有通用蓝/灰色调
  • 没有占位内容
  • 动画已验证（代码中使用 Framer Motion）
  • 任何数据/代码显示均使用 JetBrains Mono

失败模式与恢复

  • 未提供截图：阻止直到提供截图
  • 截图是 localhost，需要生产环境：请求生产 URL 截图
  • 发现 rounded-lg：替换为 rounded-sm
  • 发现 bg-white：替换为 bg-[#050505] 或正确的设计令牌
  • 通用动画：替换为 Framer Motion + 批准的缓动
  • 通用按钮样式：应用光谱调色板 + 悬停状态

适用场景

该技能适用于前端 UI 开发流程中的质量把关环节，特别是在以下场景：

  • UI 组件、页面或布局被声称完成时
  • 合并前端 PR 之前
  • 请求截图或视觉证明时
  • 需要进行设计 QA 时

限制

该技能依赖截图作为视觉证据，静态截图无法验证动画效果，需要检查代码。审查范围限于 Scientific Luxury 设计标准中定义的规则。该技能不涉及后端逻辑、性能优化或可访问性等其他质量维度。