我们做了什么
Vibe Coding正火，而Vibe Color已来。
PaletteFlow正是这样一款面向设计与开发场景的 AI 配色创作平台：用户用自然语言描述需求，即可快速获得可落地、可验证、可导出的配色方案，解决 “配色效率低、风格不稳定、无障碍校验成本高” 的问题。
演示地址
若无法打开，可尝试：
开源地址
亮点功能
新建会话前置配置
在“开始新一轮配色”后，先进入新建配置弹窗：
- 设定生成配色中的颜色数量（1~10 色）；
- 支持设置固定初始色（Seed Colors）。
在随后的生成流程中，已固定颜色将在首轮生成中保持不变，并作为模型重点参考。方便满足原有的配色思路或者固定品牌主色等要求，显著提升PaletteFlow的 “可控性” 和 “首稿命中率”。
新建完成后，聊天区自动生成一条初始配置的摘要消息，展示“当前颜色数量 + 固定色预览”，方便追溯本轮上下文。
智能配色生成与可持续迭代
在首轮生成中，在输入框中键入你的配色需求，AI将基于你的需求生成指定数量的颜色组合，满足快速生成初稿的需求。
接下来你可以根据需求进行配色方案调整，支持整体颜色的进一步调整，键入进一步调整的提示词，AI将根据原有配色进行微调。市面上确实有很多基于文字生成配色的Tool，然而能够拥有较好的上下文一致性，进行持续调整的工具是极少的，而这也是我们前期关注到的痛点之一。
在调整过程中，左侧的颜色面板中将展示上一次颜色与本次颜色的HSL的差异，方便更详细地了解颜色的调整情况。同时，由于选择了HSL差异，又更加符合人眼的感知力。
同时我们也适配了单种颜色的手工调整以及AI调整，特别是用于对某种颜色不满意需要调整的场景。调整将仅仅影响单个颜色，避免破坏全局颜色的协调性。
针对常见异常情况，我们同时适配了“还原”（CheckPoint）和“重试”（Retry），避免由于AI异常不可用的情况，同时也给了用户调整的后悔药
套色到图片（高频生产力功能）
传统的设计环节中，我们可以通过复制HEX色号、生成CSS、生成色卡等功能，将生成的配色应用到生产流程中。然而，为了降低门槛，也同时为了更直观便捷地预览配色情况，我们开发了图片套色的功能。
其中可以通过滑杆调整“现实”与“艺术”的程度，获得不同的效果：
为了保证输出的一致性与稳定性，该功能完全基于图形学开发。PreserveLuma算法通过对原图每个像素颜色明度的感知，映射到相应明度的配色，从而获得更加符合原图的“现实”结果。而NearestLAB算法通过计算在Lab中原图颜色与配色的距离，将原图颜色替换为最接近的配色，从而获得更加“艺术”的结果。SoftBlend算法则通过颜色软度的混合，获得适中的结果。
此功能可稳定地运用于AI生图的颜色一致性调整，使得同一范围内的图片具有较一致的主题色，解决了AI生图中颜色杂乱的问题，可以为科研绘图、AIGC艺术的主题统一等方面做出显著贡献！
内建可访问性能力
支持查看配色的WCAG对比度情况与等级判断（AA/AAA），同时提供色盲模拟（Deuteranopia / Protanopia / Tritanopia / Achromatopsia），把**“可访问性”前置到创作流程。PaletteFlow在作为生产力工具的同时，也注重社会关怀属性**。
我们为什么做
为什么做
配色是一个非常常用的需求，贯穿在PPT、制图、服装、开发等诸多常用流程中。然而，在真实设计与研发协作中，配色决策经常卡在三件事：
- 第一稿很快，但难以应用目标设计主题；
- 反复改色成本高，跨角色沟通困难；
- 美观与无障碍往往分开做，返工率高。
PaletteFlow的目标是把 “创意生成、参数控制、可访问性验证、结果应用” 放进同一条链路，让创作从“灵感型”升级为“可工程化复用”的流程。
洞察来源
- 设计师侧洞察：希望“先给方向，再保留关键品牌色不被 AI 漂移”。
- 开发侧洞察：希望输出可直接落地到代码与资源（HEX/CSS/JSON/图片效果）。
- 评审侧洞察：希望在提案阶段就能解释“为什么这样配”，并有可回溯的配置依据。
因此我们引入 “新建流程前置 + 固定色首轮锁定 + 会话摘要消息 + 套色到图像” 的组合能力，既保留 AI 生成效率，也强化可控与可解释。
技术架构
总体架构
我们总体采用前后端分离，Docker部署的现代化架构：
- 前端：Vue 3 + Vite，负责交互编排、会话状态、引导（Wizard）与本地算法。
- 后端：Go + Gin，负责 AI 编排、参数校验、任务处理与接口服务。
- 基础设施：Nginx + Supervisor + Docker，支持前后端一体化部署。
模型层
后端调用AI时采用惯用的OpenAI-Compatible Chat Completions协议，支持多模型/多厂商切换（通过环境变量配置模型与 Base URL）。配色生成使用结构化工具调用Tool Call约束输出，确保返回所有需要的参数，并配合文本解析与重试机制保证稳定性。
同时，在生成请求中显式注入主题色的Seed Colors约束；生成后服务端再次执行“色位锁定”验证以确保结果确定性。
Agent 设计
我们创建了产品层 Agent：以“配色对话助手”形态承载多轮上下文，统一处理生成、微调、单色替换、重试，通过模式识别（首轮/微调/单色）切换不同后端路径，形成可持续迭代的会话工作流，并通过规范化上下文实现记忆；交互层 Agent：引导系统（Wizard）作为任务流程Agent，按步骤驱动用户完成“新建配置 → 发送生成 → 结果应用”。
工具链与工程保障
采用惯用的工具链和可观测日志：
- 接口层：REST API（生成、微调、单色替换、图片套色任务）。
- 任务层：图片套色采用异步任务存储与状态查询，避免前端长请求超时。
- 观测层：结构化日志（含请求链路与 AI 响应日志）用于排障与质量监控。
- 质量层：前端本地算法承担对比度与色盲模拟，降低后端负担并提升响应速度。AI接口采取池式重试流程，确保AI可用性。
技术前瞻
图片匹配
我们预期实现一个根据配色反查设计案例的功能。我们将对经典的设计类图片提取主色，形成一个独有的素材库，再根据生成的配色反向匹配对应的图片，给用户提供相应的配色案例。同时在配色与图片建立匹配后，再将颜色与图片形成二次关联，更新素材库。
物料落地
以上图片是使用PaletteFlow，再结合手工设计的效果。【图片较大，请稍等其加载】
我们预期实现一个对更多落地效果预览的功能。我们将提供一系列经典物品的白模（袋子、T恤、杯子等），通过自动合成的技术，将配色更直观地落地到实际产品中，方便给用户提供更多设计参考。
Skill接入
我们预期实现一个MCP服务。可让AI调用MCP接口便捷地生成配色，这样可以在生成前端、文生图的AI服务中无感知地调用这一生成配色的能力，让配色服务对用户的可感知度降低，从而减少对原始AI工作流的破坏。
结语
PaletteFlow 的核心不是“再做一个配色工具”，而是把AI 生成、人工控制、无障碍验证与视觉落地打通为一条完整生产链路。通过 “固定色首轮锁定 + 单色迭代 + 套色到图片 + 可追溯会话摘要”，帮助用户将配色更快地从想法走到可交付结果。
