设计 AI 工具链
这是我为自己设计的一套产品设计排版 Skill，用来帮助设计师完成海报、封面、宣传图等排版工作。它用 HTML/CSS 替代像素级修图，让文字永不乱、随时可改、精确可控——从根上改善设计师的工作质量与效率。
🎯 为什么做这个 Skill · Why
传统排版靠 Photoshop 等位图工具，存在三个痛点：文字是像素，改一次就糊一次、越改越脏；一次改动要重新导出、重新套版，效率极低；产品图一旦被 AI 重绘或过度处理，结构就会失真。这套 Skill 的出发点，就是把这些痛点一次性解决——让排版变成「可编辑、可复用、可精确控制」的工程，而不是反复修图的苦力活。
✨ 这套 Skill 的核心优点 · Strengths
文字用 HTML/CSS 渲染，是矢量文字而非像素。改字号、改内容都不会变糊、不会错位，永远保持清晰锐利。
排版完成后不是死图。想改文字、换颜色、调位置，改一个 CSS 变量即可秒级生效，不用从头重做。
每个元素都有独立的定位变量，可以拖拽、也可以输入精确数值。位置、字号、颜色、间距全都精确到像素，还能自动吸附对齐。
最终成果一键导出高清 PNG，2x Retina 画质，自动隐藏编辑器界面，直接用于印刷、投递、发布。
HTML/CSS 本身就是源文件——纯文本、可版本管理、可交接复用。不像 PSD 那样依赖专有软件，任何同事拿到都能继续改、继续用。
把「改一次图 → 重新导出 → 重新套版」的循环，压缩成「改变量 → 秒级预览 → 一键导出」。设计师把时间花在真正的设计决策上，而不是反复修图。
🖼️ 组成一 · 产品设计排版工作流
把「渲染图」推进到「成稿」的完整闭环。核心是让 AI 处理排版与文字，产品图本身保持像素级不变——设计可以无限迭代，产品结构误差永远为零。
🔄 工作流闭环 · Pipeline
① 渲染图输入 —— 在 3D 软件中渲染产品图，丢入 renders/ 文件夹
② AI 分析排版 —— 读取图片，设计排版，生成 HTML 设计稿
③ 浏览器预览 —— 打开本地预览链接，所见即所得
④ 迭代修改 —— 直接改 CSS 变量（字号、位置、颜色），随时可调
⑤ 导出 PNG —— Puppeteer 一键导出最终图片
🧲 组成二 · 图片编辑器框架
一套本地部署的可视化设计编辑器，通过 CSS 变量 + HTML 属性驱动，让设计师无需写代码，就能像用 Figma 一样直接拖拽调整海报的每个元素。
⚡ 编辑器功能 · Features
拖拽移动 —— 选中元素后鼠标拖拽，自动吸附对齐（阈值 5px）
侧边栏控制 —— 字号、位置、颜色、尺寸，滑块 + 输入框 + 颜色选择器
修改文字 —— 文字通过 CSS ::before 实现，改变量即改内容
撤销 / 重做 —— 最多记忆 80 步
导出 PNG —— 2x Retina 画质，自动隐藏编辑器 UI
复制 CSS —— 一键复制当前所有变量到剪贴板
🏗️ 技术架构 · Architecture
editor.css（137 行）—— 编辑器 UI 样式，所有设计共用
editor.js（752 行）—— 编辑器全部逻辑，所有设计共用
每个设计一个 HTML —— 约 200 行，通过 data-editor-* 属性声明可拖拽元素
