AIによる自動生成のテクニック
espar form のスキル ccskill-esparform は、Claude Code の他のスキルと組み合わせて使うことができます。制作系の知識を持つ他のスキルと組み合わせて使うことで、良いアウトプットを得られる可能性があります。
本ページでは、ccskill-esparform と併用すると良いスキルを紹介します。
frontend-design
Claude Code 開発元の Anthropic社 公式のデザインスキルです。プラグインとして公開されています。詳しくは公式サイトをご覧下さい。
最新のフロントエンドデザインについての知識が包含されています。本スキルを併用すると、モダンな配色やタイポグラフィ、レイアウトなどで制作をしてもらいやすくなります。
frontend-design を使って、@docs ディレクトリ配下の会社情報ファイルを参考にして、落ち着いた信頼感のあるコーポレートサイトをデザイン・制作して下さい。問い合わせフォームは espar form で実装して下さい。フォームIDは espf です。ccskill-nanobanana
弊社が開発・公開している、Google の画像生成AI Nano Banana (2 Lite / Pro) を使って画像を生成するスキルです。ロゴやイラストから写真調の画像まで幅広く対応します。詳細は GitHub の公開リポジトリ feedtailor/ccskill-nanobanana をご覧ください。
SaaSプロダクトのLPヘッダー用画像が必要です。サイトのダッシュボード画面を操作している様子の写真調の画像を、ccskill-nanobanana を使って描いて下さい。ダッシュボードの画面キャプチャ画像は @capture.png にありますので参照して下さい。
ccskill-gptimage
OpenAI の画像生成AI GPT Image 2.0 を使って画像を生成するスキルです。日本語の文字入りデザインやインフォグラフィックを得意としています。詳細は GitHub の公開リポジトリ feedtailor/ccskill-gptimage をご覧ください。
ccskill-gptimage で、コーポレートLPの「選ばれる3つの理由」のセクション用に、日本語の見出し付きインフォグラフィックを作ってください。
詳しくはリポジトリの README をご覧下さい。
ccskill-omniflash
Google の動画生成AI Gemini Omni Flash を使って、オーディオ付きの短い動画(約10秒)を生成するスキルです。詳細は GitHub の公開リポジトリ feedtailor/ccskill-omniflash をご覧ください。
ccskill-omniflash で、ウェルネス系LPのヘッダー用に、観葉植物の葉が穏やかに揺れる短い動画を作って画像・動画をページに組み込む
生成した画像や動画は、そのまま LP やフォームの HTML・CSS に組み込めます。Claude Code は会話の文脈を把握しているため、以下のような端的な依頼でも組み込みを行えます。
作った画像を、さっきの LP のヘッダーと問い合わせ完了画面に入れて