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

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

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "智能 UI 美化技能，支持30种设计风格（Notion/Figma/Linear/Apple 等），自动检测项目类型并生成实时预览" with this command: npx skills add xcya01/beautify-ui

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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open Registry RecordOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Automation

Design Agent

Design consultation skill for AI agents. Invoke when another agent, skill, or user requests design review, design tokens, or UI美化 (UI beautification). Provid...

Registry SourceRecently Updated
640Profile unavailable
Security

Frontend Design Pro — 专业前端设计规范

前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。 参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等设计审查命令。 触发词：/audit /polish /critique /colorize /animate /bold...

Registry Source
5.6K11Profile unavailable
General

TailwindCss Complete Documentation

Complete Tailwind CSS documentation. Use when working with Tailwind CSS utility classes, responsive design, dark mode, animations, custom configurations, plugins, or styling questions. Covers all utility classes, modifiers, configuration options, and best practices.

Registry SourceRecently Updated
2K0Profile unavailable
General

DESIGN.md — AI时代设计规范技能

DESIGN.md 设计与品牌规范技能。当用户需要创建项目设计规范文档、为AI编写品牌规范、让AI生成符合品牌风格的页面时激活。 触发词：DESIGN.md、设计规范、品牌规范、设计系统、生成设计文档、写DESIGN.md、设计语言。 用于：创建新项目的 DESIGN.md、更新已有设计规范、让AI按规范生成UI。

Registry SourceRecently Updated
3930Profile unavailable