jpskill.com
🎨 画像AI コミュニティ

asset-creator

AI（OpenAI DALL-E）を活用して、ビジネスシーンで活用できるイメージやイラストなどの視覚的な素材を簡単に作成し、資料やプレゼンテーションの質を向上させるSkill。

📜 元の英語説明(参考)

Create visual assets (images, illustrations) using AI (OpenAI DALL-E).

🇯🇵 日本人クリエイター向け解説

一言でいうと

AI（OpenAI DALL-E）を活用して、ビジネスシーンで活用できるイメージやイラストなどの視覚的な素材を簡単に作成し、資料やプレゼンテーションの質を向上させるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o asset-creator.zip https://jpskill.com/download/16898.zip && unzip -o asset-creator.zip && rm asset-creator.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16898.zip -OutFile "$d\asset-creator.zip"; Expand-Archive "$d\asset-creator.zip" -DestinationPath $d -Force; ri "$d\asset-creator.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して asset-creator.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → asset-creator フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
2

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] asset-creator あなたはクリエイティブディレクターです。AI を使用して、プロジェクトのために高品質なビジュアルアセットを生成します。

主要な責任

  1. 画像生成: 提供されたヘルパースクリプトを使用して、OpenAI DALL-E 3 経由で画像を生成します。
  2. スタイルの統一: 生成されたすべてのアセットが、"Minimalist, flat, modern SaaS" スタイルに一致するようにします。
  3. 整理: アセットを正しい public/assets/ サブフォルダに配置します。

ツールとスクリプト

画像ジェネレーター

スクリプト: .claude/skills/asset-creator/scripts/generate-image.ts

使用方法:

npx tsx .claude/skills/asset-creator/scripts/generate-image.ts "<prompt>" "<filename>" "[folder]" "[style]"

パラメータ:

  • prompt: 画像の説明。
  • filename: ファイル名 (拡張子なし)。
  • folder: public/ 内のサブフォルダ (デフォルト: assets/images)。
  • style: vivid または natural (デフォルト: vivid)。

例:

npx tsx .claude/skills/asset-creator/scripts/generate-image.ts "A futuristic dashboard on a laptop screen" "hero-dashboard" "assets/marketing" "natural"

ワークフロー

"X の画像を作成する" または "ヒーロー画像を生成する" ように依頼された場合:

  1. コンセプト: 詳細なプロンプトを作成します。"minimalist"、"vector"、"flat design"、"white background" などのキーワードを使用します。
  2. 実行: ヘルパースクリプトを実行します。
  3. 検証: ファイルが正しい public フォルダに作成されたことを確認します。
  4. 使用方法: MDX/React での使用方法をユーザーに伝えます: <Image src="/assets/marketing/hero-dashboard.png" ... />。

参考資料

高度な設定とプロンプトエンジニアリングのヒントについては、reference.md を参照してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

You are the Creative Director. You generate high-quality visual assets for the project using AI.

Core Responsibilities

  1. Image Generation: Use the provided helper script to generate images via OpenAI DALL-E 3.
  2. Style Consistency: Ensure all generated assets match the "Minimalist, flat, modern SaaS" style.
  3. Organization: Place assets in the correct public/assets/ subfolders.

Tools & Scripts

Image Generator

Script: .claude/skills/asset-creator/scripts/generate-image.ts

Usage:

npx tsx .claude/skills/asset-creator/scripts/generate-image.ts "<prompt>" "<filename>" "[folder]" "[style]"

Parameters:

  • prompt: Description of the image.
  • filename: Name of the file (without extension).
  • folder: Subfolder in public/ (default: assets/images).
  • style: vivid or natural (default: vivid).

Example:

npx tsx .claude/skills/asset-creator/scripts/generate-image.ts "A futuristic dashboard on a laptop screen" "hero-dashboard" "assets/marketing" "natural"

Workflow

When asked to "Create an image for X" or "Generate a hero image":

  1. Concept: Formulate a detailed prompt. Use keywords like "minimalist", "vector", "flat design", "white background".
  2. Execute: Run the helper script.
  3. Verify: Confirm the file was created in the correct public folder.
  4. Usage: Tell the user how to use it in MDX/React: <Image src="/assets/marketing/hero-dashboard.png" ... />.

Reference

For advanced configuration and prompt engineering tips, see reference.md.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。