ランディングページ · ネットショップ · ダッシュボード · ポートフォリオ
Claude Code・Codex 向けフロントエンドデザインスキル
スタイルまで整った完成形のページに、エージェントがあなたの製品、言葉、ブランドカラーを入れていきます。そのまま静的ホスティングに置けます。
今週のおすすめWeb
3D アバター作成ツール
ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
コーディングエージェントにインストールする
手動でインストール
mkdir -p ~/.claude/skills && cd ~/.claude/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip$popnow-3d-avatar-maker
mkdir -p ~/.cursor/skills && cd ~/.cursor/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.gemini/skills && cd ~/.gemini/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
mkdir -p ~/.copilot/skills && cd ~/.copilot/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.config/opencode/skills && cd ~/.config/opencode/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
POPNOW_API_KEY に PopNow の API キーが必要です · API キーを取得
何を作りますか？
3D アバター作成ツール
+3ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
カレンダーヒートマップ
+31 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
AI SaaS ランディングページ
+3温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
アニメーション付きヒーローセクション
+3見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
シェーダーのヒーロー付きの代理店サイト
+3下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
ダークモード SaaS ランディングページ
+3動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
デザイナーのポートフォリオサイト
+3落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
エンジニア向けポートフォリオサイト
+3事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
雑誌風の SaaS サイト
+3ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
グラスモーフィズムのサイトテンプレート
+3ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
ハードウェア製品のサイト
+3銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
インタラクティブなアーキテクチャ図
+3検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
インタラクティブなグリッドのヒーロー
+3ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
ナレッジグラフ エクスプローラー
+3プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
KPI ダッシュボードのテンプレート
+3変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
AI モックアップからのランディングページ
+3まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
Web マガジンサイト テンプレート
+3記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
管理画面ダッシュボード テンプレート
+3グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
スクラップブック風ポートフォリオサイト
+3紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
スニーカーショップ サイトテンプレート
+3カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
本物のデザインシステム
余白、文字サイズの階層、コンポーネントがスキルに含まれているので、ありきたりではない完成度の高いページになります。
テンプレートではなく、あなたの内容
エージェントがすべてのセクションをあなたの製品向けに書き直し、合わない部分は削除します。
必要なときだけ画像を
メイン画像や商品写真を PopNow で生成するか、すっきりした CSS と SVG のプレースホルダーのままにできます。
エージェントスキルのしくみ
一度つなぐかインストール
PopNow を Claude や ChatGPT に接続するか、スキルをコーディングエージェントにインストールします。
普段の言葉で頼む
スキルを呼び出して作業内容を伝えると、スキル独自の手順、レイアウトのルール、チェックに沿って進めます。
支出はあなたが承認
AI の画像、動画、音声が必要な工程では、PopNow のクレジットを見積もり、あなたの承認を待ちます。
よくある質問
エージェントスキルとは？
エージェントスキルとは、SKILL.md の手順書に、テンプレート、スクリプト、参考資料を加えたフォルダです。AI エージェントは作業内容が合うとそれに従います。Claude Code、Codex、Cursor などは自動で読み込むため、その場限りのプロンプトではなく、検証済みのデザインシステムに沿った結果になります。
エージェントスキルと MCP の違いは？
MCP は、PopNow の画像・動画モデルのようなツールやデータにエージェントをつなぐしくみです。スキルは、レイアウトのルール、手順、チェックなど、ひとつの仕事をうまくこなす方法をエージェントに教える手引きです。両者は組み合わせて使えます。MCP で PopNow を接続すれば、アシスタントがこれらのスキルを見つけて使い、スキルは画像や音声のために PopNow を呼び出します。
スキルは無料ですか？
はい。PopNow のアカウントがあれば、すべてのスキルは無料です。Claude や ChatGPT で PopNow 経由で使う場合も、コーディングエージェントにインストールする場合も同じです。スキルが作る画像、動画、音楽、音声だけが PopNow のクレジットを使い、どれも実行前に料金を確認して承認します。
これらのスキルは Claude や ChatGPT で使えますか？
はい。PopNow を Claude、ChatGPT など MCP 対応のアプリに一度接続し、作りたいものを伝えてください。アシスタントが合うスタイルを見せ、選んだものを使い、生成する前に料金を確認します。スライド、ウェブサイト、HTML 動画のようにファイルを作るスキルは、Claude Code などのコーディングエージェントで使うのが最適です。
どのエージェントに対応していますか？
SKILL.md フォルダを読み込めるエージェントなら使えます：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode。スキルはどこでも同じで、違うのはインストール先のフォルダだけです。
PopNow のスキルとはどう違いますか？
メインのスキルページにあるスキルは、PopNow の中で Poppie と一緒に動きます。エージェントスキルは自分のパソコン上のコーディングエージェントで動くので、スライド、Web サイト、HTML ベースの動画など、編集し続けたいファイルに向いています。
作ったものは商用利用できますか？
はい。作ったものはクライアントワークも含めてあなたのものです。スキルのパッケージ自体はご自身での利用に限り、再販や再配布はできません。
どの AI ツールでプロダクトローンチ動画を作れますか？
PopNow です。Claude や ChatGPT に接続するか、コーディングエージェントにローンチ動画スキルをインストールし、20 種類以上の無料スタイルから選んでください。エージェントが実際の製品から MP4 を書き出し、料金を承認すると PopNow の音楽、ナレーション、効果音を加えます。「AI でプロダクトローンチ動画を作る方法」もご覧ください。
AI エージェントで動画、画像、スライドを作る一番よい方法は？
エージェントに仕事用のスキルと、メディアを作る場所を渡すことです。PopNow のエージェントスキルは PopNow 向けに書かれているため、レイアウト、プロンプト、モデルの選び方が最初から狙った雰囲気に合います。画像、映像、音楽、音声は 1 つの PopNow アカウントから作られ、すべての処理は実行前に料金が表示されます。