1. 我用 TraeCode 半小时做成了上线可用的免费证件照工具（零前端基础）
投稿话题：TraeCode的100种用法 ｜ 方向：跨职能工作流重构（非程序员角色）· 从 0 到 1 · 上线闭环
2. 我是谁，以及我遇到了什么问题
我是一名宝爸，懂一点后端，但是前端0基础。
事情起因很生活化：我要给家里小孩准备一张证件照，规格是 26mm（宽）× 32mm（高）。手头只有一张普通照片，遇到三个现实问题：
- 不知道 26×32mm 换算成像素是多少，DPI 该怎么定；
- 冲印/上传常有体积限制（比如 20–50KB），要在清晰度和体积之间平衡；
- 网上在线证件照工具大多要收费，还要把孩子的照片上传到别人服务器，隐私上我不放心。
我想要的其实很简单：一个能精确控制尺寸/DPI/体积、又不把照片传到服务器的工具；如果能顺手分享给同样有需要的家长就更好了。
3. 我是怎么用 TraeCode 解决这件事的
全程使用 TraeCode 的 IDE 模式，从一次问答开始，一路做到工具上线。
第 1 步：先把原理问清楚（尺寸/DPI 换算）我先问 AI「26mm×32mm 对应多少像素」。它没有直接甩一个数字，而是讲清了换算依赖 DPI：像素 = 毫米 ÷ 25.4 × DPI，并给出常见 DPI 对照表（72/150/300/600）。据此定下：证件照冲印用 300DPI → 307×378 像素。
- 提示词示例：
照片规格：26mm(宽)x32mm(高)，对应像素是多少*多少
第 2 步：让 AI 直接用命令行把照片处理出来我把照片给它，让它按 300DPI 处理。它用系统自带工具完成等比缩放 + 居中裁剪、写入 300DPI 元数据，并如实提醒「原图只有 72DPI，放大到 300DPI 只是元数据标注，有效清晰度受原始像素限制」。随后我又要了 600DPI 版，以及「DPI 在 300–600 之间且体积 <60KB」的版本，它用质量二分压缩精确命中体积。
- 提示词示例：
按照300dpi，我给你照片，你处理下、给一个dpi 300-600之间的版本，确保最后体积小于60k
第 3 步：落地一个 Chrome 插件：我发现这套逻辑完全可以产品化，就给它常用尺寸信息（社保卡照片采集：宽 358/高 441px、350ppi、20–50KB、底色可选），让它设计一个「输入原图+要求，输出证件照」的 Chrome 插件。它先出了一版精简落地方案（预设规格库 + 手动参数、纯本地 Canvas 处理、不引第三方依赖），我确认后它把 MV3 插件骨架和核心图像处理全部写好，本地自测通过。
第 4 步：迭代细节（logo、缩略图占位）让它生成 logo 并做成扩展图标，又把上传区改成显示原图缩略图占位，体验更接近成熟产品。
第 5 步：遇到分发问题，转做网页版准备上架时发现 Chrome 应用商店要一次性 $5 注册费，且普通用户装插件门槛高。于是让它把同一套逻辑改造成纯前端网页版，链接即用。
第 6步：解决「怎么分享给普通人」——最终选定豆包工作平台托管这是最费周折、也最有价值的一步（详见第 6 节经验总结）。最终把网页版部署到豆包（AI 应用）平台，拿到一个链接，普通用户点开即用，还能方便地更新发布。
4. 成果展示
-
一个响应式证件照网页工具（桌面 + 移动端通用）和一个 Chrome 插件版；
-
能力：按预设规格（社保卡/一寸/二寸等）或自定义参数，自动裁剪缩放、写入 DPI、压缩控体积，导出 JPG；
-
纯浏览器本地处理，图片不保存到服务器，免费；
-
已上线，链接即用： 证件照工作台
-
效果
5. 效率对比
| 维度 | 以前 | 现在（用 TraeCode） |
|---|---|---|
| 做一次证件照 | 买付费 App，单次花钱 | 本地工具一键生成，免费、尺寸/DPI/体积可控 |
| 想做成工具 | 不会前端，基本只能放弃或找人帮忙 | 半小时，从问答到上线，全程 AI 驱动 |
| 分享给别人 | 无从谈起 | 一个链接，谁都能用，还能持续更新 |
| 隐私 | 照片要上传第三方服务器 | 纯本地处理，不出浏览器 |
一句话：一个零前端基础的宝爸，用 TraeCode 在半小时里，把「给孩子做张证件照」的小需求，变成了一个能分享给所有人的上线工具。
6. 经验和技巧总结
- skill / 图片分发的坑：一开始想做成豆包平台的 skill 分享给普通人，实操发现平台会对图片做默认处理（转码/压缩/加水印），证件照这种对尺寸和字节精度敏感的产物会失真、效果不符预期；改成让用户传 zip 绕过平台图片链路虽可行，但对普通用户太复杂。结论：图片精确处理类工具不适合走 skill / 传图路线。
- 分发渠道选型（最关键的一课）：Chrome 商店要付费 + 安装门槛高；本地 zip 静态站分享难；普通静态托管不稳定或收费。最后选择基于豆包工作平台托管网页——一键部署、方便更新、链接即用，实测体验最好，是把「个人小工具」低成本变成「人人可用」的关键。
- DPI 认知：DPI 只是「像素 ÷ 打印尺寸」的标签，本身不改清晰度；把图缩小不失真、放大才会糊，有效画质上限取决于原始像素数。
- 隐私即卖点：证件照涉及人脸，坚持用浏览器本地 Canvas 处理、不上传服务器，既是技术选择，也是对用户的承诺。
- 让 AI 如实说边界：过程中 AI 会主动提示「放大到高 DPI 只是标注、清晰度不会凭空增加」「浏览器导出 JPEG 默认 72dpi，需手动写 JFIF 字节」等，这些如实的边界说明能帮我避免踩坑。