beautiful-article
把用户提供的素材(网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料)编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议:不手写裸 HTML/CSS,而用语义组件 + 受主题约束的 Raw 自由层;按…
面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用:(A) Garden 本地模式,通过 OpenAI 兼容接口直接出图并落盘;(B) Host-Native 模式,把本 Skill 当作提示词工程指引,把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图;(C) Advisor 模式,宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板,覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 /
$ npx -y skills add conardli/web-design-skill --skill gpt-image-2 --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/gpt-image-2Context preview
The summary Claude sees to decide when to auto-load this skill.
面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用:(A) Garden 本地模式,通过 OpenAI 兼容接口直接出图并落盘;(B) Host-Native 模式,把本 Skill 当作提示词工程指引,把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图;(C) Advisor 模式,宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板,覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 /
name: gpt-image-2 description: 面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用:(A) Garden 本地模式,通过 OpenAI 兼容接口直接出图并落盘;(B) Host-Native 模式,把本 Skill 当作提示词工程指引,把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图;(C) Advisor 模式,宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板,覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。
这是一个面向 GPT Image 2 的聚焦型技能,在 3 种运行环境下都能用,但行为差异显著。**第一步必须先确定当前运行模式**。
它只做两类图像任务:
本文件保留:运行模式、技能结构、环境变量、保存 / 命名规则、模板索引、模式感知工作流。详细模板全部放在 `references/`,分层组织:
本 Skill 自带一个轻量探测脚本,先跑一次,再根据结果决定怎么干活:
node skills/gpt-image-2/scripts/check-mode.js # 想拿结构化结果给上层程序用: node skills/gpt-image-2/scripts/check-mode.js --json
输出会给出 `mode = A` / `A?` / `B-or-C` 以及 `recommendation`。三个模式定义如下:
**触发条件**:环境变量 `ENABLE_GARDEN_IMAGEGEN` 为真(`1` / `true` / `yes` / `on`)**且** 存在 `OPENAI_API_KEY`。
**行为**:完整端到端跑通"选模板 → 写 prompt → 调用脚本 → 出图落盘"。
**触发条件**:未启用 Garden(`ENABLE_GARDEN_IMAGEGEN` 未设置 / 为假),但**当前宿主 Agent 自带图像生成工具或图像 MCP**。
**典型识别信号**(你应该自检):
**行为**:本 Skill **退化成提示词工程指引**——
1. 仍按"选模板 → 填字段 → 渲染最终 prompt"的流程走。 2. **不要调用 `node scripts/generate.js`**(没有 API key、必失败)。 3. 直接调用宿主自带的图像工具,把渲染好的 prompt 作为输入。 4. 如用户希望可顺手把 prompt 文件保存到 `garden-gpt-image-2/prompt/`,但图片去向由宿主决定,不强制。
**触发条件**:未启用 Garden,**且**宿主 Agent 也没有任何图像生成工具。
**行为**:本 Skill 退化为"高质量 prompt 撰写顾问"——
1. 按"选模板 → 填字段 → 渲染最终 prompt"流程走,缺信息就问用户。 2. 把最终 prompt **直接打印给用户** + 保存一份到 `garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md`。 3. 附一句简短的"如何使用"建议(如:丢进 ChatGPT / Midjourney / DALL·E / Sora / Nano Banana / 自己后端 / 第三方 GPT Image 2 网关)。 4. **不要假装出图成功**。明确告知用户:"已生成可直接复用的高质量 prompt,请用你的图像工具执行。"
| 条件 | 模式 | 调用脚本? | 落盘 prompt? | 落盘图片? | |---|---|---|---|---| | `ENABLE_GARDEN_IMAGEGEN=1` + 有 KEY | **A** | ✅ `generate.js` / `edit.js` | ✅ 自动 | ✅ 自动 | | `ENABLE_GARDEN_IMAGEGEN=1` 但没 KEY | A? | ❌(先要 KEY) | — | — | | 未启用 + 宿主有图像工具 | **B** | ❌(用宿主工具) | 可选 | 由宿主决定 | | 未启用 + 宿主无图像工具 | **C** | ❌ | ✅ 必须 | ❌(无法) |
当此技能需要向用户提问时,遵循以下规则:
1. 优先使用当前运行时提供的用户输入工具。 2. 如果没有对应工具,则用简短的纯文本编号问题提问。 3. 能合并的问题尽量一次问完。
按以下顺序读取配置:
1. CLI 参数 2. `process.env` 3. `<cwd>/.env` 4. `<cwd>/.gateway.env` 5. `~/.gateway.env`
核心变量:
默认实现按 OpenAI 兼容接口工作,不写死任何第三方网关。
如果用户没有明确指定输出路径,统一使用当前工作区下的:
如果目录不存在,脚本(Mode A)必须自动创建;Mode B / C 在写 prompt 前手动 `mkdir -p`。
如果用户没有明确指定文件名,脚本应自动生成与当前任务相关的文件名,并追加当前时间戳,避免重名。
命名规则:
其中:
示例:
| 模式 | 是否必须保存 prompt | 说明 | |---|---|---| | Mode A | ✅ 必须 | 进入实际生成 / 编辑流程必落盘 | | Mode B | 推荐 | 默认建议保存方便复用;用户说"不用"就略过 | | Mode C | ✅ 必须 | 用户拿走 prompt 自己执行,不落盘等于白干 |
通用规则(适用三种模式):
1. 如果用户显式给了 prompt 文件路径,可直接使用该文件作为输入。 2. 如果用户直接给的是文本 prompt,也要先把最终 prompt 保存到 `garden-gpt-image-2/prompt/`。 3. 如果用户显式指定了 `--prompt-output`,则尊重用户指定路径。 4. 否则使用默认命名规则自动保存。
1. 如果用户显式指定了 `--image` 或 `--output`,则尊重用户指定路径。 2. 否则默认保存到 `garden-gpt-image-2/image/`。 3. 文件名应和当前任务语义相关,并附加时间戳。
Mode B 由宿主图像工具决定保存方式;Mode C 不产生图片。
node skills/gpt-image-2/scripts/check-mode.js
输出会告诉你当前是 Mode A / B / C,决定后续是否调用 `generate.js` / `edit.js`。下面 1~4 仅在 **Mode A** 下使用。
node skills/gpt-image-2/scripts/generate.js \ --prompt "A cute baby sea otter" \ --size 1024x1024 \ --quality high
node skills/gpt-image-2/scripts/generate.js \ --promptfile garden-gpt-image-2/prompt/poster-20260424-153045.md
node skills/gpt-image-2/scripts/edit.js \ --image assets/source.png \ --prompt "Replace the background with a clean studio scene"
node skills/gpt-image-2/scripts/edit.js \ --image assets/source.png \ --mask assets/mask.png \ --prompt "Replace only the masked area with a glass vase"
没有命令行入口——本 Skill 此时只是**提示词工程指南**:
当 `references/` 中提供 JSON 模板时,按下面规则使用:
1. 先从 `SKILL.md` 找到最贴近的分类目录。 2. 再定位到具体模板文件。 3. 模板中的 `{argument ...}` 表示可替换参数。 4. 用户明确提供的值,直接填入。 5.
A curated collection of production-ready Agent Skills for Claude Code, Cursor, Codex, and other AI coding agents.
把用户提供的素材(网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料)编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议:不手写裸 HTML/CSS,而用语义组件 + 受主题约束的 Raw 自由层;按…
面向本地知识库目录的检索和问答助手。核心流程:(1)分层索引导航 (2)遇到PDF/Excel时必须先读取references学习处理方法 (3)处理文件后再检索。按文件类型组合使用 grep、Read、pdfplumber、pandas…
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI…
把一篇文章或口播稿,做成"看起来像视频"的点击驱动 16:9 网页演示,可选合成口播音频。流程:原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事(稿子 / outline / 主题 / 素材 / 开发模式)→ 网页开发(逐章 / 顺序 / 并行)→…