1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | Editable Design |
| 作者/维护者 | Junyan Ye（个人开发者，中山大学在读研究者；GitHub：yejy53） |
| 来源链接 | https://github.com/yejy53/Editable-Design |
| 许可证 | Apache-2.0（GitHub API） |
| GitHub Stars | 524（GitHub API） |
| Forks | 50（GitHub API） |
| 最新版本 | 无正式版本号 tag，仓库以 main 分支持续滚动更新（GitHub API：最近一次代码推送 2026-09-04） |
| 安装方式 | Codex 一句话安装指令，或手动 git sparse-checkout 拉取子目录 + npm ci + 字体套件安装脚本 |
项目自述名称为「Editable Visual Design」，正式名称按仓库名机械取为 Editable-Design。
2. 功能介绍与亮点
该技能让编码型 Agent 把一句设计需求变成一份“可继续编辑”的视觉设计成品，而不是一张一次性生成的位图。核心工作方式：先用图像模型生成一张构图参考（承担美术方向），再由 Agent 用真实文字、独立素材和语义化 HTML 图层把这张参考“重建”出来——参考图本身的像素不会进入最终交付物。
三个亮点：
- 可编辑而非一次成型：输出固定画布
index.html、可鼠标编辑的editor.html（含扫描视图与图层分解视图）、渲染好的 PNG，局部修改无需重新生成整张图。 - 过程可回放、可核查：附带
replay/index.html，完整记录输入、参考图、设计规划、素材提示词、代码与自检过程，任何一步都能倒回去看。 - 有配套学术论文：方法与实验发表于 arXiv（2609.04034，2026-09-03，cs.CV），提出“编码 Agent 作为创意大脑、图像模型作为按需素材生成器”的范式，不是一份临时拼凑的提示词合集。
仓库同时提供第二个配套技能 html-to-pptx，把生成的 HTML 设计转换为图层仍可独立选中的可编辑 PowerPoint，首次运行会自动准备好隔离的 Python 环境与 Playwright 浏览器内核，无需用户手动装依赖。
3. 适用场景
所属分类：前端与设计。 判定依据见第 5 节脚注；该技能产出的是海报、营销图、封面、菜单、横幅、社交卡片一类可编辑视觉设计稿，核心是视觉构图与 HTML/CSS 图层实现能力，而非文案写作或数据可视化。
典型场景：需要反复修改的海报/封面/Banner/社交卡片设计，尤其是希望设计过程留痕、素材可单独替换、后续还要转成可编辑 PPT 的用户——例如自己做活动物料的小型团队、需要频繁改稿的独立开发者，以及希望把设计生成过程用于教学或复盘的场景。项目文档也展示了学术海报场景，可从论文 PDF 直接生成信息完整的展示海报。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Codex | 原生支持 | README 全篇以 Codex 为目标平台，安装路径直接写入 ~/.codex/skills/，提供一键安装话术 |
| Claude Code | 需适配 | SKILL.md 遵循标准 Agent Skills 规范（YAML front matter + 指令正文），未发现 Codex 专有工具调用；但安装脚本硬编码 ~/.codex/skills/ 路径，需手动改放到 ~/.claude/skills/ 并自行执行字体套件与 doctor 脚本 |
| OpenClaw | 未验证 | 未在文档或社区讨论中找到相关信息 |
| Hermes Agent | 未验证 | 同上 |
5. 推荐理由
它把“图像模型出图快但改一处要整张重来”和“直接写代码可编辑但美术效果不稳定”这两条路线接了起来：图像模型只负责给一次构图方向，最终交付物是真文字、真图层、可继续改的 HTML/PPTX。设计过程本身可回放核查，适合需要反复修改、且希望看清 Agent 到底做了什么决定的用户。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | GitHub 524 stars（创建于 2026-08-24，两周内增长）；同时被 Composio、UI-Skills、OpenDesign、TypeUI 等至少 4 个独立第三方站点收录进 Codex/设计类技能榜单，满足多来源独立报道门槛 |
| 可用性 | 9 | 提供一键 Codex 安装话术与手动 git sparse-checkout 两条路径，配 doctor.sh 自检、字体套件安装脚本；SKILL.md 明确写了“图像生成不可用时如何优雅降级”的处理规则；近期（2026-09-04）仍有代码推送，维护活跃；全部开源免费，无付费依赖 |
| 安全性 | 9 | 逐项见下方检查清单；核心风险点全部可解释、可审计 |
安全检查清单：
① 执行 shell/Node 脚本（npm 安装、字体套件、Playwright 浏览器渲染），范围限于本地设计文件生成与校验，用途在脚本注释与文档中均有说明——通过；
② 未发现运行时向未声明地址外发数据的代码，图像生成调用的是宿主 Agent 自身能力而非本仓库内嵌的第三方 API 密钥——通过；
③ 不要求用户提供任何 API key 或凭据——不适用；
④ 抽查全部 scripts/*.mjs 与 shell 脚本，未发现可疑指令、混淆代码或隐蔽外发——通过；
⑤ 作者为可查证的真实个人（中山大学在读研究者），署名论文与仓库一致，未发现刷星或摆拍式营销措辞——通过；
⑥ License 为 Apache-2.0，条款明确——通过；
⑦ 最近一次提交为 2026-09-04，维护活跃——通过。
7. 跟同类 Skills 相比的优势
| 技能 | 核心定位 | 与 Editable Design 的差异 |
|---|---|---|
| Canva Skills | 调用 Canva 平台 API 生成/编辑设计稿 | 依赖 Canva 账号与平台生态，产出被限定在 Canva 的设计对象模型内；Editable Design 产出的是独立 HTML/PPTX 文件，不绑定任何第三方设计平台 |
| baoyu-design | 面向通用网页/界面的设计提示词与规范集合 | 偏 UI/网页设计准则输出，不生成带图层的可编辑最终画布文件，也无设计过程回放 |
| GPT-Image2-Skill | 直接调用图像模型一次性生成成品图 | 产出是扁平位图，局部修改需整图重来；Editable Design 用图像模型只做构图参考，最终以真实图层交付，可单独编辑局部元素 |
8. 用户评价
该技能目前在第三方平台尚无具名用户使用评价。GitHub Issues 中有一条来自外部用户的功能请求（希望 Design Replay 页面支持英文本地化），仓库维护者尚未回应；多个技能聚合类博客（如 Composio、UI-Skills、OpenDesign）将其收录进 Codex/设计类技能推荐榜单，但均为编辑整理性质的介绍，非具名使用体验反馈。
9. 其他补充
方法与实验已整理为学术论文发布于 arXiv（编号 2609.04034，cs.CV，2026-09-03），论文作者包含多所机构的多位研究者，仓库 README 附带完整引用格式。仓库致谢部分列出了其参考借鉴的多个同类开源项目（awesome-gpt-image、OpenDesign、AutoDesign、taste-skill 等），设计理念的来龙去脉较为透明。
10. 安装使用方式
方式一：让 Codex 代为安装（推荐）——把如下文本发给 Codex：
Install and initialize the editable-design Codex Skill from:
https://github.com/yejy53/Editable-Design/tree/main/skills/editable-design
Install its runtime dependencies and font kit, then run its doctor check.方式二：手动安装
git clone --depth 1 --filter=blob:none --sparse \
https://github.com/yejy53/Editable-Design.git
cd Editable-Design
git sparse-checkout set skills/editable-design
mkdir -p ~/.codex/skills
cp -R skills/editable-design ~/.codex/skills/
npm ci --prefix ~/.codex/skills/editable-design/scripts
~/.codex/skills/editable-design/scripts/install-font-kit.sh
~/.codex/skills/editable-design/scripts/doctor.sh如需把设计导出为可编辑 PowerPoint，可额外安装配套技能 html-to-pptx（安装方式同上，路径替换为 skills/html-to-pptx），首次转换会自动准备好隔离的 Python 环境与 Playwright 浏览器内核。安装完成后无需重启，直接在新任务中描述想要的设计即可触发。
11. 注意事项
- 官方文档与安装脚本均以 Codex 为第一目标平台，在 Claude Code 等其他 Agent 中使用需要手动调整技能目录路径；
- 依赖 Node.js ≥ 22.12 与本地网络以下载字体套件和 Playwright 浏览器内核，纯离线环境可能无法完成安装；
- 若宿主环境不具备图像生成能力，技能会退化为仅用现有素材与 HTML/CSS 几何图形完成设计，复杂场景（需要生成实景摄影、插画或抠图）会如实报告能力缺失，而不是用明显偏弱的替代方案蒙混过关；
- 项目仍处于早期阶段（无正式版本号，创建仅两周），文档明确标注推荐搭配高推理强度的图像/语言模型以获得最佳效果，效果因所用底层模型能力而异。