VibeBlog-AI 时代个人博客Agent项目开源之路[9]: 基于ui-ux-pro-max 的前端重新设计

开篇先介绍自己的开源项目vibe-blog, 一个基于多 Agent 架构的 "长文专业博客"的创作助手，支持深度调研、智能配图、Mermaid 图表、代码集成等写作能力，简化写作的重复劳动, 让写作更有趣.
我基于它已经创作了一个面向大模型应用开发者的微调（Fine-tuning）技术全栈教程Hello-LLM-FineTuning, 40 万字,100+章配图.
感兴趣的同学可以了解下,如果该项目对你有用, 欢迎 star🌟 & fork🍴

Vibe-Blog开源项目地址: https://github.com/datawhalechina/vibe-blog

先看前端重构效果:

怎么样😄, 还可以吧, 程序员的终端风格, 我超级喜欢!

缘起

Vibe-Blog 已经具备了一键生成长文博客的能力, 也支持异步创作的能力,即你可以直接将你想要创作博客的想法直接扔给 Vibe-Blog, 然后就可以去忙其他的了, 等过一段时间它自己生成好了, 你可以直接阅读他的成果, 也可以发布到一些博客平台上, 比如 ZEEKLOG 上(ps: vibe-blog支持一键发布到 ZEEKLOG 平台的能力,着实为我生了很多功夫, 节省了内容发表的重复的时间).

但其前端页面属于理工男的风格, 谈不上什么设计, 也不能说是丑陋难看, 但只能勉强可用, 功能堆砌在上面,可以作为调试来用,

vibe-blog的页面起点

先给大家看下vibe-blog 页面当前的样子:

上图就是 vibe-blog当前的首页😄, 一个大大的输入框, 下面有一些控制博客生成的配置项.

然后下面紧接着是一个中间过程的实时状态推送窗口, 用来展示博客创作过程的中间结果, 比如搜索了那些 query, 生成的大纲是什么?

在下面又是一个窗口, 这个窗口就是用来预览博客内容,

再然后继续往下滚动, 是热门示例, 就是一些预设的体验示例,方便用户快速上手.

接下来是个历史博客的列表, 卡片形式, 这个看起来其实还行.

整个前端排版的设计就很简单,非常线性的结构,没有复杂的交互, 核心功能的组件从上到下的堆在了一起.

对于一个毫无前端经验的 Vibe-coder,我刚开始对第一版还是很满意,毕竟看上去不丑😄, 但时间久了就觉得这个前端风格很普通了, 而且一看就是小作坊式搭建的,同时随着后端系统的复杂, 很多新的功能我只能罗列式的堆在前端页面, 久而久之前端就变成了个大杂烩.

这就让我产生了要优化下前端的交互风格和页面设计的想法. 奈何自己纯纯的后端开发不具备前端的设计能力和审美口味,在这方面大模型比我强不到哪去.

然后在我以为前端就这样了的时候, claude skill 突然火了, 有很多非常棒的 skill 可以集成到 windsurf 中来作为 vibe-coding 的提效工具, 这其中就包含了 ui-ux-pro-max 这个前端设计skill.

ui-ux-pro-max是什么?

ui-ux-pro-max 本质是为网页和移动应用提供全面设计指导的工具库(也是个 UI 设计指南)，包含：67 种设计风格 - 不同的视觉设计方向; 96 个颜色调色板 - 行业特定的配色方案; 57 个字体配对 - 精选的排版组合; 99 条 UX 指南 - 用户体验最佳实践; 25 种图表类型 - 数据可视化推荐; 13 个技术栈支持 - 适配不同的开发框架; 智能推荐系统 - 基于优先级的可搜索数据库.

ui-ux-pro-max为前端页面提供了全面的 UI/UX 设计指导,原谅我犯懒,把一些AI 生成的对该 Skill 组件的介绍贴在了下面.

 ## 核心功能 ### 1. **设计系统自动生成（v2.0 新增）** - 🎨 **智能推理引擎**：分析项目需求，自动生成完整的设计系统 - 📊 **100+ 行业特定规则**：针对不同行业（SaaS、电商、医疗、金融等）的设计推理规则 - ⚡ **秒级生成**：在几秒内生成包含颜色、字体、布局、动画的完整设计系统 **示例输出**： 目标：Serenity Spa（宁静水疗馆） 推荐设计系统： - 模式：Hero-Centric + Social Proof - 风格：Soft UI Evolution（柔和 UI 进化） - 颜色：柔和粉色 + 鼠尾草绿 + 金色 - 字体：Cormorant Garamond / Montserrat - 效果：柔和阴影 + 平滑过渡 + 温和悬停状态 - 检查清单：无 emoji 图标、cursor-pointer、悬停状态、对比度 4.5:1 等 ### 2. **丰富的设计资源库** - **67 种 UI 风格**：玻璃态、粘土态、极简主义、暴力美学、新拟态、Bento 网格、深色模式、AI 原生 UI 等 - **96 个颜色调色板**：按行业分类（SaaS、电商、医疗、金融、美容等） - **57 个字体配对**：精选的 Google Fonts 组合 - **25 种图表类型**：仪表板和分析推荐 - **99 条 UX 指南**：最佳实践、反模式、无障碍规则 ### 3. **多技术栈支持** 支持 13 种技术栈的特定指导： - **Web**：React、Next.js、Astro、Vue、Nuxt.js、Svelte、HTML+Tailwind、shadcn/ui - **移动**：React Native、Flutter、SwiftUI - **其他**：Jetpack Compose --- ## 使用方式 ### 方式 1：技能模式（自动激活） 支持：Claude Code、Windsurf、Antigravity、Codex CLI、Continue 等 直接自然语言交互： > Build a landing page for my SaaS product ### 方式 2：工作流模式（斜杠命令） 支持：Cursor、Kiro、GitHub Copilot、Roo Code /ui-ux-pro-max Build a landing page for my SaaS product ### 示例提示词 - Build a landing page for my SaaS product - Create a dashboard for healthcare analytics - Design a portfolio website with dark mode - Make a mobile app UI for e-commerce - Build a fintech banking app with dark theme --- ## 工作流程 1. **提出需求** → 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进） 2. **自动生成设计系统** → AI 使用推理引擎生成完整的设计系统 3. **智能推荐** → 根据产品类型和需求，找到最佳匹配的风格、颜色、字体 4. **代码生成** → 使用正确的颜色、字体、间距和最佳实践实现 UI 5. **交付前检查** → 验证常见 UI/UX 反模式 --- ## 主要特性 ### 设计智能 - ✅ 上下文感知的布局建议和响应式组件组合 - ✅ 自动生成设计指南亮点和风格变体，提高视觉一致性 - ✅ 多平台适配建议（移动、Web、桌面），关注无障碍和交互细节 ### 开发友好 - ✅ 与现有 UI 组件库和设计系统集成 - ✅ 结构化的组件建议和样式令牌 - ✅ 接受多模态输入（文本 + 设计描述） ### 质量保证 - ✅ 自动检查：无 emoji 图标、cursor-pointer、悬停状态、对比度、焦点状态、响应式设计等 - ✅ 反模式识别：避免亮色霓虹、刺眼动画、不适当的深色模式等 --- ## 应用场景 | 场景 | 用途 | |------|------| | **产品设计** | 快速获得多个布局方案和权衡分析，加速迭代 | | **前端实现** | 生成组件实现思路和样式示例，加速交付 | | **设计审查** | 自动总结设计决策供团队共享和复用 | | **快速原型** | 从概念到可交付 UI 的快速转换 | 

有了ui-ux-pro-max这个审美外挂,我感觉vibe-blog 的前端又可以拯救了.

如何拯救我的vibe-blog 前端? UI-UX Skill 实践

其实 ui-ux-pro-max的使用还是非常简单的, 但是需要先准备 npm, 所以第一步就是先检查 下npm

# 检查是否已安装npm --version # 如果未安装，访问 https://nodejs.org/ 下载安装

第二步呢就是基于 npm 安装Skill 到 Windsurf(我喜欢用 Windsurf, 其他 Cursor 应该也是类似的), 这里使用的是 CLI 安装方式, 也是最简单/官方最推荐的方式

# 1️⃣ 全局安装 CLI 工具npminstall -g uipro-cli # 2️⃣ 进入你的项目目录cd /Users/coyote-ll/Documents/git/AiSlide/vibe-blog # 3️⃣ 为 Windsurf 安装 Skill uipro init --ai windsurf # 完成！Skill 会自动安装到正确的位置

这个命令会自动做以下事情：

• ✅ 创建 .windsurf/ 目录结构
• ✅ 下载最新的 Skill 资源（67 个 UI 样式、96 个配色方案等）
• ✅ 配置 Python 搜索脚本
• ✅ 生成平台特定的配置文件

预期输出：

✓ Installing UI UX Pro Max Skill for Windsurf ✓ Creating .windsurf/skills/ directory ✓ Downloading design assets... ✓ Setting up search engine... ✓ Installation complete! 

最后我们还需要验证下是否安装成功了, 在 Windsurf 中验证非常简单. 就是检查下项目目录下是否多了一个.windsurf 的文件夹, 然后该文件夹下有个 skills的子文件夹, 最后发现一个ui-ux-pro-max.md静静的躺在 skills 下

安装了 ui-ux-pro-max 后呢, 就要对vibe-blog 前端进行优化了. Skill 的使用还是非常简单的, 两种方式: 一种是自动识别的方式, 即 windsurf 自动识别,当用户咨询设计/UI设计相关的问题时, Skill 会自动激活：比如

"帮我优化这个表单的交互设计" "改进这个按钮的视觉层级" "推荐一个现代化的配色方案" "为我的 SaaS 产品设计一个登录页面" "创建一个医疗健康应用的仪表板" 

还有一种方式是显示调用.

在任何地方输入 \ui-ux-pro-max 后跟你的需求：

\ui-ux-pro-max 帮我设计一个现代化的输入框样式 \ui-ux-pro-max 为我的电商网站推荐配色方案 \ui-ux-pro-max 生成一个 SaaS 仪表板的设计系统 

这里我就踩了一个坑, 后面会讲, 因为 windsurf 没有显式列出调用的 Skill, 所以你可能对 Skill 是否触发式无感的, 所以很容易你以为触发了 Skill,但实际上没触发导致你觉得这个 Skill 不行的 case.

在 vibe-blog 前端是怎么做优化的呢?

先进行整体的设计, 后局部优化个别组件的设计.

在整体设计部分, 我因为特别喜欢https://skillsmp.com/的代码风格, 所以我就想尝试复现该风格到我的vibe-blog 中, 设计初衷是将一篇篇博客作为一个个 Skill 的代码卡片展示风格, 增加vibe-blog 的逼格.
整体 code-style 风格首页的设计的 Prompt

我正在优化一个 AI 个人博客智能创作系统（vibe-blog）的 UI/UX 设计。 【项目信息】 - 项目名称：vibe-blog - 技术 Vibe 博客 Agent - 项目类型：SaaS 内容创作工具 - 用户群体：技术内容创作者、博主、知识工作者 - 主要功能：AI 驱动的博客文章生成、配图、视频封面动画等 - 当前技术栈：HTML + CSS + JavaScript（Vanilla） - 当前配色：#FF6B35（温暖橙色）+ #4ECDC4（清爽青色）+ 白色背景 【当前 UI 组件】 1. 导航栏 - 顶部导航，包含 Logo 和导航链接 2. Hero 区域 - 标题和副标题 3. 主卡片 - 中心内容区域，包含： - 标签页（Tab）切换 - 文本输入框（带彩虹渐变边框） - 下拉框选择： * 文章类型（教程型、问题解决、对比分析、科普绘本） * 文章长度（Mini、短文、中等、长文、自定义） * 配图风格（多种风格选择） * 视频尺寸（16:9 横屏、9:16 竖屏） - 复选框（生成封面动画） - 自定义配置面板（可折叠） - 生成按钮 4. 历史记录区域 - 显示之前生成的内容 5. 结果展示区域 - 显示生成的文章、图片、视频等 【存在的 UI/UX 问题】 6. 下拉框样式过于简陋，不够现代化 7. 表单缺少实时验证反馈 8. 自定义配置面板展开/收起没有动画，交互生硬 9. 整体配色虽然有特色，但在不同屏幕尺寸上显示效果不一致 10. 移动端布局拥挤，表单元素排列混乱 11. 缺少 hover/focus 状态的清晰视觉反馈 12. 加载状态和错误提示的视觉反馈不够明显 13. 深色主题支持不完整 14. 字体层级不够清晰，视觉优先级不明显 15. 响应式设计需要优化（平板端、移动端） 【优化需求】 16. 采用代码编辑器的视觉语言来设计博客创作工具： - 终端窗口头部（红黄绿三点） - 代码行号和语法高亮 - 代码命令提示符（$, $$） - 深色主题为主（类似 VS Code Dark+） - 浅色主题为辅 - 代码块风格的卡片设计 - 终端命令行的交互反馈 【UI 组件设计】 - 导航栏 - 顶部导航，包含 Logo 和导航链接 - Hero 区域 - 命令行风格的标题（> Browse Blog Posts） - 主卡片（code-input-card）- 中心内容区域： - 终端窗口头部（code-input-header） - 输入区域（code-input-body）： * 代码提示符（$） * 文本输入框（textarea） - 文档上传列表（code-input-docs） - 底部工具栏（code-input-footer）： * 附件按钮 * 高级选项按钮 * 生成按钮 - 高级选项面板（advanced-options-panel）： - 文章类型下拉框（select） - 文章长度下拉框（select） - 受众适配下拉框（select） - 配图风格下拉框（select） - 视频尺寸下拉框（select） - 生成封面动画复选框（checkbox） - 自定义配置面板（custom-config-panel） - 进度面板（progress-panel）- 实时日志输出 - 结果区域（result-section）- 生成的文章、图片、视频展示 - 博客列表（code-cards-grid）- 代码风格的卡片列表 【期望输出】 1. 推荐的代码编辑器风格设计系统 2. 完整的 CSS 样式代码 3. 交互动画的实现代码 4. 移动端优化建议 5. 深色主题的实现方案 【技术约束】 - 使用 Vue 3 + TypeScript - 保持现有的 HTML 结构（尽量不修改） - 使用 Tailwind CSS 或原生 CSS（优先 Tailwind） - 动画使用 CSS 而不是 JavaScript（性能优先） - 兼容现代浏览器（Chrome、Safari、Firefox、Edge） - 性能优先（动画帧率 ≥60fps，首屏加载 <3s） 【参考信息】 - 当前主色：#8b5cf6（紫色 - 代码编辑器感） - 当前辅助色：#06b6d4（青色 - 代码高亮） - 当前字体：JetBrains Mono（代码）+ Inter（UI） - 当前背景：深灰渐变（#1e293b） - 用户主要操作：填写主题 → 上传文档 → 选择配置 → 点击生成 → 查看结果 【代码编辑器风格的关键特征】 1. 终端窗口头部（红黄绿三点） 2. 代码行号和语法高亮 3. 代码命令提示符（$, $$） 4. 深色主题（类似 VS Code Dark+） 5. 代码块风格的卡片设计 6. 终端命令行的交互反馈 7. 代码字体（JetBrains Mono、Fira Code） 8. 高对比度的颜色方案 请为我生成一个完整的、现代化的、专业的代码编辑器风格的 UI/UX 优化方案，包括： 1. 代码编辑器风格的设计系统 2. 完整的 CSS/Tailwind 代码 3. 交互动画的实现 4. 响应式设计方案 5. 深色主题支持 谢谢！ 

有了这个 Prompt, 接下来的事情就很简单了:

1. 打开 Windsurf
2. 进入项目目录
3. 在 Windsurf 的聊天框中，粘贴上面的" UI Prompt",记得加上/ui-ux-pro-max显式触发 Skill.
4. 按 Enter 发送
5. Skill 会自动激活并生成代码编辑器风格的优化方案

之后就是等待 Skill 生成方案, 整个 UI 设计工作就交给了UI-UX-PRO-MAX, Skill 会自动分析并生成：

• 代码编辑器风格的设计系统
• 完整的 CSS/Tailwind 代码
• 交互动画实现
• 响应式设计方案
• 深色主题支持

现在给大家展示下vibe-blog 新主页的页面效果, 也就是开篇展示的图片(当前也是持续迭代出来,首次生成的效果还是不太行.)

💡 常见问题

Q1：为什么要从原始样式转换到代码编辑器风格？

因为 vibe-blog 的作者(也就是我😄)是后端技术开发者，非常喜欢终端代码编辑器风格审美和习惯。同时这样的设计能提升页面设计感以及极客风范.

Q2：如何持续迭代优化?

示例 1：简单优化前端页面,

此时我也不知道哪里还有问题, 我就简单笼统的输入以下内容, 让 Skill 自己去发现问题和优化设计.

/ui-ux-pro-max 帮我设计下前端页面@Home.vue

然后 ui-ux-pro-max 就开始在之前页面的基础上挑问题, 比如本次就发现3 个需要改进的问题:

1. 部分按钮缺少 cursor-pointer
   • .option-tag 元素
   • .filter-btn 元素

导航栏缺少浮动间距

// 当前 .navbar{position: sticky;top: 0;}

建议：添加 top-4 left-4 right-4 浮动效果

图标使用 Emoji（违反 ui-ux-pro-max 规则）

// 当前使用 emoji 作为 UI 图标 <button>{{ isDarkMode ? '☀️' : '🌙' }}</button> <router-link>📕 小红书创作</router-link> <span>📚 文章类型:</span> 

建议：使用 SVG 图标（Lucide/Heroicons）替代所有 emoji

示例 2：优化表单设计

你的问题：

我的 vibe-blog 前端有一些表单需要优化。 当前包含： - 下拉框（文章类型、长度、配图风格） - 文本输入框（自定义配置） - 复选框（生成封面动画） 请帮我： 1. 改进下拉框的视觉设计 2. 添加输入验证反馈 3. 改进焦点状态的视觉反馈 4. 优化移动端表单体验 

Q3：踩了一个大坑, 新增了一个 Skill 后要先试用简单的 case 验证下 Skill 是否激活了.

刚开始我安装了ui-ux-pro-max Skill 后, 大模型告诉我可以通过$ui-ux-pro-max来显式激活, 如:

我信以为真, 就吭哧吭哧的通过$ui-ux-pro-max显式指定来激活, 但这个方式是错误的,

通过$ui-ux-pro-max也同样能生成新 UI 的优化指令, 但我感觉效果一般般, 就使劲的和大模型对话, 让他给我调优效果, 但始终不尽如意, 我知道最后才反应过来, 是不是$ui-ux-pro-maxSKill 没激活, 一直都是我以为激活了, 我就让大模型给我确认下, 结果大模型告诉我没有调用 $ui-ux-pro-max 这个 skill，因为这不是一个实际存在的工具或 MCP 服务器。用户在消息中提到它只是一种表达方式，表示希望获得专业的 UI/UX 设计帮助。

那一瞬间我觉得自己是个大傻逼, 心态很崩溃,而且再次体验了让 claude 模型在无$ui-ux-pro-max下, 来直接给我设计出一个好看的前端是多么的痛苦和心里憔悴, 真个上下文对话窗口已经长到爆炸,导致每次对话交互都极其的卡顿漫长, 这也更让我觉得ui-ux-pro-max真香.

最后真正显式激活的方式是/ui-ux-pro-max~