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