当前位置：首页 > news >正文

ColorAid —— 一个面向设计师的色盲模拟工具开发记

news 来源：原创 2025/7/27 20:37:41

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

起初只是一个随口的想法——我想做一个“色盲辅助工具”，让设计师可以方便地测试图像或配色在不同色盲视角下的显示效果。于是我打开了 CodeBuddy，对它说：

“我要用 Vue3 + Canvas 实现 ColorAid，支持图片上传或颜色代码输入，模拟多种色盲类型，实时对比原图和模拟图，界面风格偏医疗蓝绿色调，并支持导出结果。”

话音未落，CodeBuddy 立刻进入了状态。没有问我是不是确定，也没有让我选技术方案，它直接从零开始搭建整个项目。这种果断让我非常惊讶，也开启了我们这段默契开发旅程。

因为项目是全新开始，CodeBuddy 首先通过 npm init vue@latest ColorAid 指令创建了一个干净的 Vue3 工程，功能选择方面干净利落：不带 Router，不加 Pinia，空白模板，专注开发核心功能。

然后，它接着安装必要依赖，包含：

这些选择精准又实用，让我对 CodeBuddy 的技术判断力赞叹不已。

项目创建完成后，它紧接着清理了 Vue 默认带的一堆欢迎组件和图标资源，例如 HelloWorld.vue、TheWelcome.vue、logo.svg、base.css 等等。这一步做得非常细致，连 assets 下多余的样式都一一剔除，只留下主干骨架。

随后，它快速重写了 main.js 和 App.vue。在 main.css 中，它定义了整套医疗蓝绿色调风格的 UI 主题，色彩搭配既有专业感，又不失视觉亲和力。

在这里插入图片描述

App.vue 文件中的整体结构也很清晰：顶部是应用标题区域，中间是上传模块和模拟区域，底部则预留导出操作的位置。

为了提升项目可维护性，CodeBuddy 没有把逻辑堆在 App.vue 里，而是果断提出了组件化拆分方案：

虽然这一步我们还没写组件内容，但模块设计的思路已经非常明确。它让我意识到，哪怕是一个中小型工具项目，也应该做到功能职责清晰、分工合理。

清理默认文件时发生了个小插曲，由于是在 Windows 下操作，CodeBuddy 一开始用的是 Unix 风格的 rm -rf 命令，结果被 PowerShell 拒之门外。之后它尝试用 del 和 Remove-Item 一一删除文件，期间遇到了一些路径找不到的小错误。

但让我惊讶的是，它总能迅速根据错误调整策略，最终成功清理了多余资源，整个过程几乎没有让我出手帮忙。

在这里插入图片描述

最后，CodeBuddy 启动了开发服务器，Vite 在几个端口尝试后终于成功运行，页面在浏览器中亮了起来。尽管页面还只是雏形，但整个基础框架已经搭建完毕，UI 色调统一，文件结构干净，功能分区明确。

在这一天的对话中，我们一起完成了：

这一切都由 CodeBuddy 主动发起、组织并实现。我几乎只需要给出一次 prompt，剩下的全是它的自动执行。不得不说，这已经不是简单的代码补全工具，更像是一个能与我并肩作战的工程搭档。

回顾这次与 CodeBuddy 的协作，我最深的感受是：它做的不只是“按照你说的写代码”，更是在主动思考如何把一个项目做得更清晰、更规范、更易维护。

它能合理拆解需求，预判我可能需要的功能模块，自动搭建项目结构，帮我选择合适的依赖，甚至在遇到平台兼容性问题时也能快速修正命令……这一切让我节省了大量精力，专注在逻辑和交互设计上。

未来 ColorAid 项目还将继续完善，比如实现色盲模拟算法、支持自定义色弱强度、添加辅助说明文本等。而我相信，在 CodeBuddy 的陪伴下，每一次开发都是一次高效、愉悦、安心的过程。

在这里插入图片描述