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

基于 DESIGN.md 自动美化网站 UI，支持 16 种设计风格，提供样式差异报告和 CSS 变量覆盖方案。

Security Scan

The skill's requested resources and runtime instructions match its stated purpose — it reads project files, generates CSS/design artifacts, and writes preview files into the project; nothing in the package requires unrelated credentials, external installs, or hidden network calls.

Purpose & Capability

The name/description (UI beautification, style templates, project detection) aligns with the included script and SKILL.md. The script declares a 30-style template library, detects project types (package.json, file layout), generates DESIGN.md, CSS overrides, preview HTML, tokens and snippets — all coherent with the stated features.

Instruction Scope

Runtime instructions explicitly tell the agent to read the project path, inspect package.json and files, generate CSS and preview HTML, and (optionally) inject or copy files into assets. These actions are within scope for a UI-beautification tool; the SKILL.md also warns that the skill will modify project files and recommends backups. No instructions ask the agent to access unrelated system files or external endpoints.

Install Mechanism

No install specification (instruction-only skill) and the included Python script claims zero external dependencies (uses only Python standard library). No downloads, brew/npm/go installs, or archive extraction are present in the metadata.

Credentials

The skill declares no required environment variables, no credentials, and no config paths. The script reads only project files (package.json, source files) as expected; there is no request for unrelated secrets or external service tokens.

Persistence & Privilege

The skill is user-invocable and not forced-always. It can be invoked autonomously by the agent (platform default), which is expected for skills; this combined with file-modifying behavior is normal but the SKILL.md warns users to backup first. The skill does not request persistent system-wide privileges or modify other skills' configs.

Assessment

This skill appears coherent with its description but it will modify files in the target project. Before running: (1) inspect scripts/beautify.py yourself (it uses only the Python stdlib and webbrowser), (2) run with --dry-run or --preview first, (3) ensure the project is backed up or under Git so changes can be reverted, (4) review generated DESIGN.md and styles/theme-override.css for any aggressive use of !important or global overrides, and (5) run it in a safe/dev environment before applying to production. If you need higher assurance, request the full script for review or run it inside an isolated container.

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