원클릭으로 Manus에서 모든 스킬 실행

codex-imagegen

스타3

포크0

업데이트2026년 7월 7일 03:58

Generate or AI-edit images by delegating to the Codex CLI ($imagegen / gpt-image) — sample banners, hero visuals, demo assets, image-to-image edits. Use whenever a task needs image GENERATION or AI photo editing (Claude Code cannot generate images itself). 日本語の依頼例:「画像を生成して」「サンプル画像を作って」「この写真を加工して」「バナー/ヒーロー画像が必要」。NOT for resizing/compressing existing assets (use `images-media`).

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Syo-M

Syo-M/fable-frontend-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Codex imagegen — delegate image generation, keep the code here

Claude Code cannot generate images. When a task needs generated or AI-edited images, delegate to the Codex CLI's built-in $imagegen tool (gpt-image): it runs on the operator's ChatGPT subscription — no API key, no per-call billing, i2i editing included. Division of labor: code and prompts are authored here; pixels come from Codex.

Invocation

Scriptable default: codex exec -C <workdir> -s workspace-write --skip-git-repo-check "<instruction>" via execFileSync (array args, never shell strings). Timeout ~15 min per call; run batches sequentially (rate limits), support --slug re-runs and skip-existing + --force.
Resolve the binary: $CODEX_BIN env → codex on PATH → /Applications/Codex.app/Contents/Resources/codex (macOS app bundles the CLI). Verify with --version before batching.
MCP registration (claude mcp add --transport stdio codex -- codex mcp-server) is the interactive alternative; codex exec stays the default for reproducible pipelines.

Sandbox isolation — non-negotiable

Point -C at a scratch dir (os.tmpdir() subdir), NEVER the repo. The instruction embeds content-derived text (templates, user-editable YAML), so prompt injection through content must not reach a repo-writable agent — with -C repoRoot an injected instruction could rewrite package.json and land RCE on the next npm run dev. The wrapper script alone copies finished artifacts from the scratch dir into the repo.

Instruction anatomy (what actually controls quality)

Verbatim prompt block: wrap the exact prompt in --- delimiters with "Use EXACTLY this prompt, verbatim, without rewriting it" — otherwise Codex paraphrases and the published prompt no longer matches the sample it claims to produce.
Native sizes only: gpt-image emits 1024x1024 / 1536x1024 / 1024x1536. Other ratios: generate the nearest orientation → center-crop → resize (sips on macOS, sharp elsewhere).
Bleed instruction whenever cropping: "the image will be center-cropped to WxH; treat the outer Npx as expendable bleed — background only; ALL text and critical elements inside the surviving central region." Without it, edge-anchored text gets cut (bottom ribbons are the classic casualty).
i2i is two steps: generate the source image first, then EDIT mode referencing the input path ("treat 'the attached photo' as the input image at "). Keep the source artifact — before/after is the proof the edit works.
Close with "Save the final image to (PNG). Do not edit any other files."

Quality gate — generation is not done at exit 0

Review every image visually before publishing. For Japanese text: character-by-character — models garble kanji, and a wrong glyph on a shipped banner is worse than none.
Check the crop actually preserved all text, and (i2i) that the source subject/label survived the edit.
Retakes are normal (budget 2–3 per image); re-run per slug, never the whole batch. Trial ONE image before any batch — composition bugs (missing bleed, wrong ratio) waste a full batch otherwise.
Quota is the operator's ChatGPT plan: dozens of images per session is fine, plan accordingly.

Pipeline sketch

const work = path.join(os.tmpdir(), 'imagegen-work');           // sandbox, not the repo
execFileSync(codex, ['exec', '-C', work, '-s', 'workspace-write',
  '--skip-git-repo-check', instruction(prompt, workFile)], { timeout: 900_000 });
if (!existsSync(workFile)) throw new Error('not saved');
execFileSync('sips', ['-c', cropH, cropW, workFile]);            // center-crop to target ratio
execFileSync('sips', ['-z', finalH, finalW, workFile]);          // resize to target px
copyFileSync(workFile, repoTarget);                              // script does the repo write

Derive the filled prompt from the same single source the app renders (shared data + one fill function, parity-tested) — a stored copy of the prompt WILL drift from the template that generated it.

이 저장소의 다른 Skills

같은 저장소

astro

Syo-M/fable-frontend-skills

Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

2026-07-123

nextjs

Syo-M/fable-frontend-skills

Next.js App Router conventions — routing and adding pages, Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, env vars. Use for any work inside a Next.js app. 日本語の依頼例:「Next.jsで〜」「ページを追加/新規作成して」「ルーティング」「Server Action」「ルートハンドラ」「RSC/サーバーコンポーネント」「キャッシュ」。

2026-07-123

css-modules

Syo-M/fable-frontend-skills

CSS Modules and styling conventions — design tokens, naming, variants, responsive design, layout, dark mode/theming. Use when styling or visually adjusting components, or editing any *.module.css, tokens, or global styles. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」「CSS書いて」。

2026-07-073

governance

Syo-M/fable-frontend-skills

Repository governance — CI merge gates, toolchain pinning, dependency lifecycle and license policy, secrets scanning, change control for rules and sensitive paths, Git/PR conventions, observability, performance budgets, browser support. Use when setting up CI/CD, repo configuration, releases, adding dependencies, or defining team policy. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス確認」「秘密情報スキャン」「リポジトリ設定」「ブランチ/PR運用」「パフォーマンスバジェット」。

2026-07-073

motion

Syo-M/fable-frontend-skills

Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。

2026-07-073

storybook

Syo-M/fable-frontend-skills

Storybook conventions — CSF3 stories, play functions as Vitest component tests, decorators, a11y. Use when writing or editing *.stories.tsx or Storybook config, AND whenever asked to write tests for a component — stories with play functions are this repo's component-test layer. 日本語の依頼例:「Storybook/ストーリー書いて」「コンポーネントのテスト書いて」「play関数」「interaction test」。

2026-07-073

name

codex-imagegen

description

Codex imagegen — delegate image generation, keep the code here

Invocation

Scriptable default: codex exec -C <workdir> -s workspace-write --skip-git-repo-check "<instruction>" via execFileSync (array args, never shell strings). Timeout ~15 min per call; run batches sequentially (rate limits), support --slug re-runs and skip-existing + --force.
Resolve the binary: $CODEX_BIN env → codex on PATH → /Applications/Codex.app/Contents/Resources/codex (macOS app bundles the CLI). Verify with --version before batching.
MCP registration (claude mcp add --transport stdio codex -- codex mcp-server) is the interactive alternative; codex exec stays the default for reproducible pipelines.

Sandbox isolation — non-negotiable

Instruction anatomy (what actually controls quality)

Verbatim prompt block: wrap the exact prompt in --- delimiters with "Use EXACTLY this prompt, verbatim, without rewriting it" — otherwise Codex paraphrases and the published prompt no longer matches the sample it claims to produce.
Native sizes only: gpt-image emits 1024x1024 / 1536x1024 / 1024x1536. Other ratios: generate the nearest orientation → center-crop → resize (sips on macOS, sharp elsewhere).
Bleed instruction whenever cropping: "the image will be center-cropped to WxH; treat the outer Npx as expendable bleed — background only; ALL text and critical elements inside the surviving central region." Without it, edge-anchored text gets cut (bottom ribbons are the classic casualty).
i2i is two steps: generate the source image first, then EDIT mode referencing the input path ("treat 'the attached photo' as the input image at "). Keep the source artifact — before/after is the proof the edit works.
Close with "Save the final image to (PNG). Do not edit any other files."

Quality gate — generation is not done at exit 0

Review every image visually before publishing. For Japanese text: character-by-character — models garble kanji, and a wrong glyph on a shipped banner is worse than none.
Check the crop actually preserved all text, and (i2i) that the source subject/label survived the edit.
Retakes are normal (budget 2–3 per image); re-run per slug, never the whole batch. Trial ONE image before any batch — composition bugs (missing bleed, wrong ratio) waste a full batch otherwise.
Quota is the operator's ChatGPT plan: dozens of images per session is fine, plan accordingly.

Pipeline sketch

const work = path.join(os.tmpdir(), 'imagegen-work');           // sandbox, not the repo
execFileSync(codex, ['exec', '-C', work, '-s', 'workspace-write',
  '--skip-git-repo-check', instruction(prompt, workFile)], { timeout: 900_000 });
if (!existsSync(workFile)) throw new Error('not saved');
execFileSync('sips', ['-c', cropH, cropW, workFile]);            // center-crop to target ratio
execFileSync('sips', ['-z', finalH, finalW, workFile]);          // resize to target px
copyFileSync(workFile, repoTarget);                              // script does the repo write

Derive the filled prompt from the same single source the app renders (shared data + one fill function, parity-tested) — a stored copy of the prompt WILL drift from the template that generated it.