智能 UI 美化技能，支持30种设计风格（Notion/Figma/Linear/Apple 等），自动检测项目类型并生成实时预览

beautify-ui - 智能 UI 美化技能 v3.3.0

🎨 一键应用 30 种知名设计风格（Notion/Figma/Linear/Apple/Alibaba/Shopify 等），自动检测项目类型并生成实时预览页

功能特性

30 种设计风格：Notion、Figma、Linear、Vercel、Stripe、Apple、Tesla、Spotify、GitHub、Discord、Slack、Telegram、Alibaba、ByteDance、Tencent、Ant Design、Huawei、Xiaomi、JD、Meituan、Shopify、Amazon、Taobao 等

智能项目检测：自动识别 Vite/Next.js/Nuxt.js/Remix/SvelteKit/Tailwind/CRA 等项目类型

自动风格推荐：根据内容类型（教育/文档/电商）推荐最佳风格

实时预览：生成增强版预览页，支持暗色模式、响应式测试、交互式色彩调整

智能 CSS 注入：支持多种框架，自动处理构建项目

Tailwind 配置生成：自动生成 tailwind.config.js 配置（含颜色、字体、圆角、阴影）

Design Tokens 导出：支持 JSON/JS 格式的设计令牌

组件代码片段：自动生成按钮、卡片、表单等组件代码

A/B 风格对比：并排对比两种风格效果

中国厂商风格：支持 Alibaba、ByteDance、Tencent、Ant Design、Huawei、Xiaomi、JD、Meituan 风格

电商风格：支持 Shopify、Amazon、Taobao 风格

使用方法

基础用法

# 指定风格
py skills/beautify-ui/scripts/beautify.py <项目路径> linear
智能推荐（自动检测并推荐最佳风格）
py skills/beautify-ui/scripts/beautify.py <项目路径> --auto
生成实时预览页（不修改原项目）
py skills/beautify-ui/scripts/beautify.py <项目路径> apple --preview
查看帮助
py skills/beautify-ui/scripts/beautify.py --help

使用示例

# 示例 1：教育网站美化（自动推荐 Notion 风格）
py skills/beautify-ui/scripts/beautify.py C:\projects\edu-site --auto
示例 2：技术文档美化（指定 Vercel 风格）
py skills/beautify-ui/scripts/beautify.py C:\projects\docs vercel
示例 3：生成 Apple 风格预览页
py skills/beautify-ui/scripts/beautify.py C:\projects\my-site apple --preview
示例 4：批量处理多个项目
for project in project1 project2 project3; do
  py skills/beautify-ui/scripts/beautify.py C:\projects\$project linear
done

支持的 30 种风格

教育文档类（4 种）

notion - 温暖简约，适合教育/文学/阅读

vercel - 黑白科技感，适合技术文档/API

claude - 温暖陶土色，适合阅读写作

cursor - 暗黑编辑器风，适合开发工具

创意设计类（5 种）

figma - 活泼多彩，适合互动/创意/年轻

elevenlabs - 暗黑电影感，适合音频/媒体

spotify - 绿黑音乐风，适合娱乐媒体

airbnb - 珊瑚旅行风，适合生活摄影

bytedance - 字节跳动渐变活力，适合社交/短视频

工具效率类（4 种）

linear - 极简精准，适合工具/逻辑/效率

raycast - 暗铬渐变，适合效率工具

superhuman - 高级键盘流，适合邮件效率

ollama - 终端单色，适合极客开发者

商务金融类（5 种）

stripe - 专业紫色，适合商务/金融/企业

tesla - 未来科技感，适合汽车/科技

apple - 高级留白电影感，适合高端零售

github - 开发者友好，适合代码/开源

antdesign - 蚂蚁金服企业级，适合企业/后台/中台

社交娱乐类（4 种）

discord - 社交娱乐，活力社区

slack - 协作办公，色彩丰富

telegram - 简洁快速，蓝色为主

tencent - 腾讯蓝色社交，适合即时通讯

中国厂商类（8 种）

alibaba - 阿里云橙色科技，适合云服务/企业

bytedance - 字节跳动渐变活力，适合社交/短视频

tencent - 腾讯蓝色社交，适合即时通讯

antdesign - 蚂蚁金服企业级，适合企业/后台/中台

huawei - 华为红色科技，适合企业/云服务

xiaomi - 小米橙色活力，适合科技/硬件

jd - 京东红白信任，适合电商/数码

meituan - 美团黄色生活，适合外卖/旅游

电商生活类（3 种）

shopify - 简洁专业电商风，适合在线商店

amazon - 橙黑电商风，适合零售/市场

taobao - 淘宝活力橙色，适合购物/拍卖

输出内容

执行后生成：

1. DESIGN.md - 完整设计规范文档 - 色彩系统 - 字体规范 - 组件样式 - 布局原则

2. styles/theme-override.css - CSS 变量覆盖文件 - 全局样式覆盖 - 组件样式优化 - 使用 !important 确保优先级

3. assets/theme-override.css - 构建项目专用（如适用） - 自动复制到 assets 目录 - 支持 Vite/Next.js/Nuxt.js/Remix/SvelteKit/CRA 项目

4. preview-{style}.html - 实时预览页（使用 --preview 时） - 完整 HTML 页面 - 交互式色彩系统（实时调整主色调） - 暗色/亮色模式切换 - 响应式断点测试工具 - 按钮/卡片/表格/表单等组件展示

5. tokens.json / tokens.js - Design Tokens（使用 --tokens 时） - JSON/JS 格式的设计令牌 - 包含颜色、字体、圆角、阴影等

6. snippets/ - 组件代码片段（使用 --snippets 时） - button.html - 按钮组件代码 - card.html - 卡片组件代码 - form.html - 表单组件代码

7. compare-{styleA}-vs-{styleB}.html - A/B 风格对比页（使用 --compare 时） - 并排对比两种风格 - 支持单独查看 A 或 B

智能检测能力

自动识别：

项目类型：Static HTML / Vite / Next.js / Nuxt.js / Remix / SvelteKit / Create React App

样式系统：Tailwind CSS / CSS Modules / Styled Components / Emotion

预处理器：SCSS / Less

内容类型：教育/文档/电商/通用

根据检测结果：

推荐最适合的风格

选择正确的 CSS 注入策略

处理构建项目的特殊需求

适用场景

✅ 快速美化教育网站/学习平台

✅ 为技术文档应用专业风格

✅ 电商网站风格统一

✅ 企业官网视觉升级

✅ 个人博客美化

✅ 原型设计快速出效果

✅ A/B 测试不同风格效果

注意事项

⚠️ 重要提示： 1. 本技能会修改项目文件，建议先备份或使用 Git 2. 构建项目（Vite/Next.js）需要手动添加 CSS 引用 3. 预览页会生成在项目目录中，可手动删除 4. 使用 --preview 参数不会修改原项目

💡 最佳实践：

首次使用建议先用 --auto 让技能推荐风格

使用 --preview 查看效果后再应用

生产环境使用前先在开发环境测试

保留 DESIGN.md 作为项目文档

技术细节

架构设计

单文件结构：为保持脚本可移植性，采用单文件设计

零外部依赖：仅使用 Python 3.8+ 标准库

模块化函数：虽然在同一文件，但函数职责清晰分离

项目类型检测

读取 package.json 判断框架（Vite/Next.js/CRA）

扫描依赖检测 Tailwind CSS

分析文件结构识别 CSS Modules

CSS 注入策略

1. 生成 CSS 变量（:root） 2. 全局覆盖（使用 !important） 3. 针对组件选择器优化 4. 构建项目自动复制到 assets/

预览页生成

完整 HTML 页面（含样式）

交互式色彩系统展示

按钮/卡片效果演示

对比区域（修改前后）

更新日志

v3.3.0 (2026-04-22)

✨ 新增 3 种电商风格：Shopify、Amazon、Taobao

✨ 新增 4 种中国厂商风格：Huawei、Xiaomi、JD、Meituan

✨ 增强预览页：交互式色彩系统、暗色/亮色模式切换、响应式断点测试

✨ 新增组件展示：表格、标签页、进度条、日期选择器

✨ 扩展框架支持：Nuxt.js、Remix、SvelteKit

✨ 新增 CSS-in-JS 检测：Styled Components、Emotion

✨ 新增 SCSS/Less 配置文件生成支持

✨ 新增 Design Tokens 导出功能（JSON/JS 格式）

✨ 新增组件代码片段生成（按钮、卡片、表单）

✨ 新增 A/B 风格对比功能

✨ 新增 --dry-run 预览模式

✨ 更新文档，风格数量更新为 30 种

v3.2.0 (2026-04-22)

✨ 新增 4 种中国厂商风格：Alibaba Cloud、ByteDance、Tencent、Ant Design

✨ 实现 Tailwind 配置自动生成功能（tailwind.config.js）

📝 更新文档，风格数量更新为 23 种

v3.1.0 (2026-04-21)

✨ 新增 4 种流行风格：GitHub、Discord、Slack、Telegram

✨ 实现 --help 参数功能

🐛 修复 Tesla 风格颜色不完整问题

🐛 修复宽泛异常捕获问题（改为捕获具体异常）

♻️ 重构变量命名，将 template 改为 style_data 避免歧义

📝 更新 SKILL.md 文档，修正风格数量（16→19）

v3.0.1 (2026-04-14)

📝 完善 SKILL.md 文档

📝 添加详细使用示例

📝 补充风格列表说明

📝 添加注意事项和最佳实践

v3.0.0 (2026-04-14)

✨ 新增实时预览功能（--preview）

✨ 风格库扩展至 16 种

✨ 智能项目检测（Vite/Next.js/Tailwind）

✨ 自动风格推荐

🐛 修复构建项目 CSS 注入问题

🐛 优化 Windows 编码兼容性

v2.0.0

✨ 智能项目检测

✨ 自动风格推荐

✨ Tailwind 配置支持

v1.0.0

🎉 初始版本发布

5 种基础风格

文件结构

beautify-ui/
├── SKILL.md              # 技能说明（本文件）
├── README.md             # 使用文档
├── scripts/
│   └── beautify.py       # 核心脚本（v3.1）

致谢

灵感来自 awesome-design-md 项目，感谢 VoltAgent 团队的出色工作！

许可证

MIT License

支持与贡献

问题反馈：欢迎提交 Issue

风格建议：欢迎 PR 新风格

功能建议：欢迎讨论改进方案

---

作者：OpenClaw Community 版本：3.3.0 最后更新：2026-04-22