Open source · AI-ready UI governance

给 AI 生成的前端界面装上风格驾驶仪

UI Style Pilot 把前端标准、Usp 组件模式、AI Skill 和审查清单整理成一套可执行上下文。 人类定规则，AI 按规则交付，后台页面不再越写越散。

阅读使用手册 查看源码
Style Control Deck LOCKED
USP Style Pilot
12+ 标准模块
14 组件模式
4 AI Skills
Token drift PASS Component reuse PASS Review checklist WATCH

Why it exists

AI 可以很快，界面仍然要稳

当团队把页面交给 AI 协作时，真正的风险不是写不出来，而是每次都写出一点点不同。 UI Style Pilot 把“先读规范、先找组件、最后自查”变成可复制的交付路径。

01

规范先行

用 Markdown 描述设计 Token、布局、交互、编码规则。

02

组件复用

把列表、搜索、表格、表单等高频模式沉淀为 Usp 组件资产。

03

审查闭环

让 AI 和代码评审都对照同一份 Checklist 验收。

What is included

不是一页说明，而是一套前端治理材料

Tokens

视觉与布局标准

颜色、字号、间距、圆角、导航、页面模板和图表规则，给页面生成提供边界。

Components

Usp 组件模式库

记录 UspPage、UspSearchPanel、UspDataTable 等后台高频结构的职责和交互。

Skills

AI 工作流定义

页面构建、设计审查、组件复用、样式迁移四类 Skill，让 AI 知道先做什么。

Checklist

上线前一致性验收

从 Token、布局、导航、公共组件、交互、编码六个方向复查生成结果。

Operating loop

把风格治理嵌进日常开发流程

Read

读规范

从 USAGE、组件清单、审查清单开始，统一上下文。

Reuse

找组件

优先复用公共组件和已沉淀的 Usp Pattern。

Build

写页面

只补业务结构和必要局部样式，不另起一套视觉语言。

Review

按清单验收

让 AI 生成后的页面也能被同一套标准审查。

Quick start

三步接入你的项目

复制规范，接入 AI Skill，再让每次页面生成都从同一份上下文开始。

查看完整接入手册
terminal 
# 1. 克隆并预览
git clone https://github.com/wanghuanlab/ui-style-pilot.git
cd ui-style-pilot
npm install
npm run dev

# 2. 复制规范和 AI Skills
cp -r docs/frontend-standards/ your-project/docs/
cp -r docs/ai-skills/ your-project/docs/

# 3. 生成前读取关键上下文
docs/frontend-standards/USAGE.md
docs/frontend-standards/09-review-checklist.md