2026 · OPEN SOURCE UI SKILLS

让 AI 长出设计师的眼睛

四个爆火的开源前端界面技能:从配色知识库到确定性审美校验,把「AI 画页面」变成「AI 画好页面」。

57套 UI 风格
95组配色方案
56套字体配对
52项确定性检测规则

四大开源技能

各自解决 AI 生成界面的一块短板,组合使用效果最佳。

🎨
Knowledge Base · MIT

UI UX Pro Max

可检索的专业设计知识库,AI 不再凭空猜测页面样式,一条命令调用成熟素材库。

  • 57 套 UI 风格 · 95 组配色 · 56 套字体配对
  • 29 个落地页模板 · 24 种图表类型
  • 8 套技术栈 + 完整 UX 设计准则
🔍
Taste Skill · Automated Review

UI Craft

把「人眼审美」翻译成自动化校验:内置 52 项确定性 UI 检测规则,自动给页面打设计分。

  • 低于阈值直接阻断构建,倒逼合格界面
  • 可无缝接入 CI 流水线
🧬
Multi-Direction · MIT

oil-ui

不给静态模板,而是先让 AI 产出多个不同方向的方案横向对比,选定后再基于真实截图持续迭代打磨,把 AI UI 设计的上限拉高。模型无关,任意大模型可接入。

01生成多个方向的设计方案
02横向对比,选定最优方向
03基于截图逐轮迭代细节
🛠️
Design System · Apache 2.0

Design System Enforcer

从零搭建或优化已有页面,全程严格遵循项目设计系统,不开发中途跑偏,直接打磨到可上线交付水平。

  • 兼容 Cursor / Claude Code / Copilot 等主流 Agent
  • 产出即交付级,无需二次返工
⚡
Workflow · Best Practice

组合拳打法

先用知识库定风格,再多方案对比选型,最后用确定性规则验收——形成完整闭环。

  • 知识库选型 → 多方案迭代 → 规则打分验收
  • 每一层都消除 AI 的随机性

拿走就能用的设计原则

本页面即按这些规则构建。

📐 8px 间距系统所有留白取 8 的倍数,节奏统一,页面自动显贵。
🎯 明确的视觉层级字号、字重、颜色三线分层,重要信息一眼可见。
🌗 克制的配色深底 + 单一渐变主色 + 中性灰,克制才高级。
🫧 微交互反馈hover 位移、光晕呼吸、滚动渐入,页面是活的。
📱 响应式断点clamp() 流式字号 + 网格降级,手机端不塌。
♿ 对比度达标正文与背景对比度 ≥ 4.5:1,好看也要看得清。