莫兰迪渐变色：在 2025 年 8 月看现有的 Vibe Coding 体验

结论先行

• Claude Code + Claude 4 Sonnet / Opus 的组合还是当之无愧的 NO.1 T0 皇帝。
• Trae 的 Builder 模式现在已接近 T0 梯队，甚至能实际解决一些 CC + C4S 无法解决的问题。
• 如果你的预算实在有限，但是又计划使用 CLI + LLM 的工具链，那么 GLM 4.5 (Air) 是一个很好的替代品。

惊艳

很高兴的，2025 年 7 月这个时间点，国产模型给我们带来了一系列非常大的惊喜，前后有：Kimi K2，qwen-coder，以及 GLM 4.5（之前我甚至没听过智谱家的模型）的发布。

• 各家模型供应商的定价策略都非常优惠。
• 他们额外提供了 /anthoripic 接口，以更好的融入 Claude Code 生态。
• 现在模型的发展趋向于两种形式：Chat OR Coding，后者就是我们工程师应该关注的领域。

作为一些个人的思考：

• 在这个时间点，作为工程师，我们还是最好做到这些：要熟悉各个模型的能力边界在哪里；对不同的 Task 划分，搜索，Background，Thinking 都适合什么模型；他们的定价策略是怎样的；他们的生成速度是否可以不成为业务瓶颈。
• 不要用不太行的模型写代码，只会浪费你的时间，增加屎山代码。
• AI 时代，订阅不要买一年份的了，很可能今天上午奉为神明的东西，周五就被淘汰了。

引入主题

最终的成品（Trae2.0）在这里 → http://morandi-wallpaper.chienerrant.com/

有时候我想换一些渐变壁纸，如下图，一定得是 Apple 那种高级色的，每次都得去小红书搜索下载，在周末的一个下午，决定开发一个小工具帮我定制。

写出需求点

先创建需求，写出第一版本的需求要点，以便喂给 LLM，产出 PRD。这部分自然是纯手工写的，还是手动写的一下比较好，简单一点就可以，不需要太复杂。

• 整体风格

  • 现代化 App 风格
  • 简约
  • 美学至上

• 功能

  • 生成莫兰迪渐变色壁纸
  • 大约有 100 个候选预设
    • 数据源
      • 网络搜索
      • github：https://github.com/narcisoyu/moRandi
  • 预览
    • 中间放一个原型机进行预览
    • 2D：提供 mockup
    • 3D：提供可旋转的多角度模型（废弃）
  • 信息提供
    • 提供现在的配色信息
  • 可点击下载
    • 可定制提供壁纸尺寸，包含常见的手机分辨率
    • 一键下载至 PNG 格式

• 风格参考

  • 参考当前目录 docs/refs 下的图片

创建需求文档

我选取 Gemini Pro 作为 PRD 的生成模型，这里没有什么理由，只是个人偏好，Gemini Pro 更为循规蹈矩一点。

# **莫兰迪渐变壁纸应用 \- 最终产品需求文档 (Master PRD)**

版本：3.1 (2D版)  
日期：2025年8月3日

### **1\. 产品概述**

#### **1.1. 项目简介**

“莫兰迪渐变壁纸 (Morandi Wallpaper)” 是一个以“玻璃拟态 (Glassmorphism)”为核心设计语言的在线工具，专注于为用户提供极致美学体验的莫兰迪色系渐变壁纸。应用通过沉浸式的界面和流畅的交互，让用户能够轻松创造、预览并下载个性化的高品质手机壁纸。

#### **1.2. 产品目标**

* **核心目标**：打造一个具有顶级设计美感的在线壁纸生成器，让功能与艺术完美融合。  
* **用户目标**：提供一种充满仪式感和愉悦感的壁纸定制体验，让用户在创造中感受美。  
* **商业目标**：打造一个具有良好口碑和用户粘性的品牌工具，成为美学和壁纸定制领域的标杆应用。

#### **1.3. 目标用户**

* **设计爱好者与学生**：对色彩和视觉美学有较高追求，喜欢简约、干净的设计风格。  
* **追求生活品质的白领**：希望通过个性化的手机界面来彰显品味，缓解工作压力。  
* **所有智能手机用户**：厌倦了系统自带壁纸，希望寻找独特、宁静且不干扰视觉的背景。

### **2\. 功能规格**

#### **2.1. 核心功能：渐变壁纸生成**

* **描述**：应用的核心功能。系统根据预设的莫兰迪配色方案，自动生成高质量的线性渐变背景。  
* **规格**：  
  * 默认加载一个精心挑选的渐变方案。  
  * 渐变方向默认为从上到下的线性渐变，角度可设定为 180 度。  
  * 生成的渐变应平滑、无色带断层。

#### **2.2. 功能模块：预设配色库**

* **描述**：提供一个包含多种莫兰迪配色方案的库，供用户选择。这是用户发现和选择心仪壁纸的主要途径。  
* **规格**：  
  * **数量**：提供约 100 种精心挑选的预设配色方案。  
  * **数据来源**：  
    * 参考 [narcisoyu/moRandi](https://github.com/narcisoyu/moRandi) 项目中的配色数据。  
    * 通过网络搜索和设计趋势分析，补充和扩展配色库。  
  * **展示方式**：在右列面板中，以多行多列的网格布局展示。  
  * **交互**：用户单击任一配色卡片，整个页面背景和左侧预览区的壁纸应立即更新为所选方案。

#### **2.3. 功能模块：实时预览**

* **描述**：在页面左列提供一个高精度的 2D 手机模型，实时展示当前渐变壁纸的效果，为用户提供最直观的参考。  
* **规格**：  
  * **预览容器**：页面视觉中心放置一个高精度的现代智能手机模型。  
  * **2D 预览**：提供一个静态、正面的手机 Mockup，壁纸应完美填充 Mockup 的屏幕区域。

#### **2.4. 功能模块：配色信息与下载**

* **描述**：在页面中列向用户展示当前壁纸的详细信息，并提供强大的下载功能。  
* **规格**：  
  * **信息展示**：  
    * 在面板顶部，清晰展示当前渐变所使用的颜色及其 HEX 色值。  
    * 提供一键复制色值的功能，方便用户在其他设计软件中使用。  
  * **尺寸定制**：  
    * 提供一个下拉菜单，内置多种主流手机屏幕分辨率选项。  
    * **示例分辨率**：iPhone 14 Pro Max (1290x2796), Samsung Galaxy S23 Ultra (1440x3088), 通用高清 (1080x1920) 等。  
  * **下载功能**：  
    * 一个醒目的“下载壁纸”按钮。  
    * 点击后，系统会根据用户选择的分辨率，在前端 Canvas 生成对应尺寸的图片。  
    * 图片格式为 **PNG**，以确保最佳质量。  
    * 下载的文件名可以命名为 Morandi\_Wallpaper\_\[色值1\]\_\[色值2\].png，便于用户识别。

### **3\. 用户流程 (User Flow)**

1. **进入页面**：用户打开网页，看到默认的渐变壁纸作为全屏背景，同时左侧手机模型中也同步展示。  
2. **浏览配色**：用户在右侧的颜色选择面板中浏览不同的配色方案。  
3. **选择配色**：用户点击一个感兴趣的配色卡片。  
4. **实时更新**：整个页面背景和左侧手机模型立即平滑地过渡到新的渐变色。中列的信息面板也同步更新色值。  
5. **选择尺寸**：用户在中列的信息面板中，从下拉菜单里选择自己手机对应的分辨率。  
6. **下载壁纸**：用户点击中列面板底部的“下载壁纸”按钮。  
7. **完成**：浏览器触发下载，用户获得一张定制尺寸的 PNG 格式壁纸。

### **4\. 设计与用户体验 (UI/UX)**

#### **4.1. 核心设计语言：玻璃拟态 (Glassmorphism)**

* **整体风格**：应用界面将以**全屏渐变背景**为底，所有的UI面板和控件都以**毛玻璃**的形式悬浮其上，营造出一种深邃、通透、富有层次感的视觉体验。  
* **背景**：整个网页的背景就是当前选中的**莫兰迪渐变色**，它会随着用户的选择而实时、平滑地变化。这使得UI与内容（壁纸）融为一体。  
* **玻璃效果实现**：  
  * **模糊**：对UI面板后方的背景内容进行高斯模糊 (backdrop-filter: blur(20px);)。  
  * **透明度**：面板本身具有半透明的白色或黑色背景 (background-color: rgba(255, 255, 255, 0.1);)。  
  * **边框**：添加一个1px的、半透明的白色边框 (border: 1px solid rgba(255, 255, 255, 0.2);)，以在模糊背景中清晰地界定出面板轮廓，增加精致感。

#### **4.2. 布局：沉浸式三列布局**

* **整体构图**：严格遵循**左、中、右**三列式布局，确保视觉流线的清晰和操作的直观性。  
  * **左列 (预览区)**：**手机预览**。  
  * **中列 (信息区)**：**信息显示与操作**。  
  * **右列 (选择区)**：**颜色选择**。

#### **4.3. 核心组件设计**

* **手机预览 (左列)**：  
  * 使用极简、高保真的手机模型，带有轻微内部阴影和高光。  
* **信息与下载面板 (中列)**：  
  * 一个独立的、垂直的圆角矩形毛玻璃面板。  
  * 顶部用并排圆形色块和HEX值展示配色信息，并提供复制图标。  
  * 中部为玻璃质感的尺寸选择下拉菜单。  
  * 底部为带图标的“下载壁纸”按钮。  
* **颜色选择面板 (右列)**：  
  * 一个巨大的圆角矩形毛玻璃面板。  
  * 内部采用多行多列网格布局，展示小巧的实体色块及其名称。  
  * 单击色块可平滑切换全局背景和预览，悬停有光晕效果，选中态有高亮描边。

#### **4.4. 图标与字体**

* **图标库 (Icons)**：  
  * **推荐使用**：**Font Awesome** 或 **Material Symbols (Google)**，通过 CDN 引入。  
  * **应用范围**：复制、下载、下拉菜单箭头等所有功能性图标。  
* **字体 (Typography)**：  
  * **主标题**：使用优雅、醒目的无衬线粗体，如 Inter Bold。  
  * **UI文本/描述**：使用常规字重的同一款无衬线字体，如 Inter Regular。

#### **4.5. 微交互与动效**

* **平滑过渡**：所有颜色、背景的变化都必须使用平滑的CSS过渡效果 (transition: all 0.5s ease;)。  
* **光感交互**：鼠标在可交互元素上移动时，可叠加一层跟随鼠标的微弱光晕效果。

### **5\. 技术栈建议**

* **前端框架**：React / Next.js
* **图形生成**：HTML5 Canvas API  
* **样式**：Tailwind CSS  
* **图标库CDN**：  
  * **Font Awesome**: \<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" /\>  
  * **Material Symbols**: \<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /\>

### **6\. 成功指标**

* **用户活跃度**：日/月活跃用户数 (DAU/MAU)。  
* **核心功能使用率**：每日壁纸下载量。  
* **用户满意度**：通过社交媒体分享量、用户反馈和推荐度来衡量。

### **7\. 未来迭代方向 (Roadmap)**

* **V1.1 \- 更多定制选项**：  
  * 允许用户自定义渐变颜色（通过颜色选择器）。  
  * 增加径向渐变、对角线渐变等多种渐变模式。  
  * 增加添加噪点 (Noise) 或纹理的选项，提升壁纸质感。  
* **V1.2 \- 社区与分享**：  
  * 用户可以保存自己创建的配色方案。  
  * 建立一个用户分享社区，可以点赞和收藏他人分享的壁纸。  
* **V2.0 \- 桌面端支持**：  
  * 增加常用桌面分辨率选项，为 PC 和 Mac 用户提供服务。

修改步骤的 Prompts

// MVP
我们要搭建一个应用，先阅读 PRD，位于 docs/PRD.md 采取渐进式的开发模式，一步一步开发，切勿上来就完成整个功能 我们先搭建 MVP 版本，包含主界面和若干个可选的渐变选项

// 导入配色
现在导入更多的莫兰迪配色方案，注意，莫兰迪配色不是通过同一个颜色，如蓝色 + 浅蓝色，相近的两种颜色来搭配渐变，你可以随意选择两种莫兰迪颜色来搭配渐变
数据源可以使用我在 PRD 中提供的 github 链接，以及你需要自行通过浏览器上网查找

// 修正配色
莫兰迪的渐变色，对于 Start 和 End，不需要这么相近的颜色，可以组合随意一些，现在过于相近不像是渐变色

// 优化背景色
优化页面的背景色，当选择某个配色方案时，将背景色也改为被选择的渐变色

// 修改样式
整体的 UI 有一些太死板了，参考 docs/refs 下的图片，分析其设计美学风格，优化界面显示

// 新增标题
在三列布局之上，加上一个合适的标题区域

做一下模型 & 工具的对比

组合	整体评价	实拍图	流转流程
CC + CS4	极好 ⭐⭐⭐⭐⭐		MVP → 引入更多配色 → 同步改背景色 → 优化美学风格 → 加标题 → Done ✅ 流畅无比，无纠错，唯一可以正确的分析参考图片。
Trae 2.0 Solo + CS4	好 ⭐⭐⭐⭐		MVP → 引入更多配色 → 同步改背景色 → ⚠️ 需要微调背景色 → 优化美学风格 → ⚠️ 需要微调美学风格 → 加标题 → Done ✅ 需要手动在某些环节调整一下，主要是生成的样式不够满意，可能是抽卡的问题。
CC + GLM 4.5	不错 ⭐⭐⭐		MVP → 引入更多配色 → ⚠️ 需要强调配色的差异，否则做成相同色系 → 同步改背景色 → 优化美学风格 → ⚠️ 需要稍微改下样式 → 加标题 → Done ✅ 大致理解 80%，偶尔需要手动调整一下，没法根据图片自己调整样式。
CC + qwen-coder-plus	不行 🚫		MVP → 引入更多配色 → ⚠️ 需要手动强调数据源 → 同步改背景色 → 优化美学风格 → ❗ 需要改大量样式 → 加标题 → Done ✅ 偶尔卡死，没法根据图片自己调整样式，特别是美学方面总是差强人意。
CC + Kimi K2	一般 ⭐⭐		MVP → ❌ 需要抽卡 x3 构建 UI → 引入更多配色 → 同步改背景色 → 优化美学风格 → ❗ 需要改大量样式 → 加标题 → Done ✅ 构建第一个 MVP 版本时需要大量抽卡，第一次出的版本可能界面都显示不全。
Qwen-code + qwen-coder-plus	垃 ❌		MVP → ❌ 卡死 → 引入更多配色 → ❌ npm 卡住 → 同步改背景色 → 优化美学风格 → 加标题 → Done ✅ 垃圾的最大原因是坑了我 140 块钱，卡死以后得千万退出，别傻傻的在那边等。
Crush + GLM 4.5	不行 🚫		MVP → ❌ 修复编译错误 → 引入更多配色 → ❌ 网络请求必卡死，只能用背景知识的颜色 → 同步改背景色 → 优化美学风格 → 加标题 → Done ✅ 这几种场景必卡死：要求权限，网络请求。应该是工具缺陷导致，开源项目 + 多种模型适配，没办法。

描述一下作为开发者比较关心的部分

输出不同的 Tokens 量的花费

官方定价策略

• qwen3-coder-plus

https://help.aliyun.com/zh/model-studio/qwen-coder#a25371274dg1f

• GLM4.5 / 4.5 Air

https://bigmodel.cn/pricing

• Kimi-k2

https://platform.moonshot.ai/docs/pricing/chat#product-pricing

• Claude Sonnet 4

https://docs.anthropic.com/en/docs/about-claude/pricing

Coding Model 的 Benchmark 这玩意有没有用

有用，但是还是需要 case by case 看，从去年 Q4 在实践 ComfyUI + Flux 的在生产环境下的经验来说，肯定是“评分高的模型不一定你用的好，但是评分差的模型一定很差”。

• Artificial Analysis
  • https://artificialanalysis.ai/models/comparisons/glm-4-5-air-vs-glm-4-5-air?models=claude-4-sonnet%2Ckimi-k2%2Cglm-4-5-air%2Cglm-4.5%2Cqwen3-coder-480b-a35b-instruct%2Cqwen3-coder-30b-a3b-instruct

Intelligence vs Price	Output Speed vs Price	Input and Output Prices

Bad cases 汇总

Crush 请求权限卡住	Crush 请求网络卡住	GLM 4.5 无法读取图片

Qwen-coder 无法读取图片	Qwen-coder 超 Token