
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- 実際に動くプロダクトの Hero を備えた開発者ツールのサイト:落ち着いた中央揃えの見出しの下に、エントリー、ステータスのピル、フィルター、検索、API プレイグラウンドを備えたコンテンツスタジオ
- 機能の Bento、モデル同期デモ、クイックスタートの Tab、ブランチのマージフロー、セキュリティ、導入事例、料金、FAQ に加え、ドキュメント、更新履歴、認証、問い合わせ、ステータス、法務ページ
- ライトとダークのテーマと、導入事例、メディアライブラリ、アバター用に生成したエディトリアル写真。すべてオフラインで動く 1 つのファイルに埋め込まれています
向いている人
- API、ヘッドレス CMS、SDK、インフラ製品を立ち上げ、実際に動く UI でプロダクトに自らを語らせたいチーム
- ランディングページと統一感のあるドキュメント、更新履歴、料金、認証、ステータスのページが必要な開発者向けプロダクトの創業者
- デモやローンチ用のオフラインの 1 ファイル、または既存のフレームワークプロジェクトへ移植した同じデザインが欲しいチーム
向いていない人
- コンシューマー、ライフスタイル、小売のブランド:罫線グリッド、等幅フォントのディテール、コードの Tab は開発者向けの表現です
- データベース連携の CMS や本格的なブログが必要なチーム:コンテンツはページ内の静的データとして保存されます
- 実際の登録、請求、稼働監視:フォームとステータスページはプレースホルダーのデータを使ったフロントエンドのシミュレーションです
プロダクトローンチ・アプリグロースWeb デザイン・デジタル体験ホームページ作成LP 作成ホームページテンプレート作成スタイル固定編集可能な出力コンバージョン重視ライト優先罫線グリッドコードタブフラット UI モックアップグリーンアクセント等幅フォント装飾
この Skill について

Contexa CMS ランディングページは、実際に動く UI で自らを説明する開発者向けプロダクトのマーケティングサイトを作ります。ライトを基本としたほぼニュートラルな配色にグリーンのアクセント 1 色、細い罫線グリッドの中に詰めたディスプレイ書体と等幅フォントのディテールを配置します。サンプルは架空のヘッドレス CMS、Contexa で、顧客ワークスペース Halvorne Travel とともに紹介しています。

手に入るもの
- Hero 内のクリックできるコンテンツスタジオ:ステータスのピル付きエントリー、フィルターチップ、空の状態付きの検索、リクエストとレスポンスのパネル
- 多彩なレイアウトのランディングセクション:機能の Bento、モデルからスタジオへの同期デモ、フレームワーク別クイックスタートの Tab、マージフロー付きのコンテンツブランチ、セキュリティとステータス、導入事例、請求期間切り替え付きの料金、FAQ、サインアップ
- 下層ページ:検索付きのドキュメント、更新履歴とロードマップ、サインアップ、サインイン、営業問い合わせ、導入事例、ステータス、プライバシー、利用規約、Not Found ページ
- ライトとダークのテーマ、巨大で薄いワードマークの下に置いた反転フッター、そしてどのブラウザでも開けてオフラインで動く 1 つのファイル

使い方
- プロダクト名、一文の提供価値、中核となるオブジェクト、対応フレームワーク、プランを共有します。足りない部分は下書きして一覧にします。
- エージェントがあなたのプロダクトのオブジェクトに合わせてスタジオを作り直し、すべてのセクションとページを書き換え、合う写真を生成します。
- ファイルを開いてライトとダークを切り替え、すべての Tab、フォーム、ページを確認し、修正したい点を普段の言葉で伝えます。

写真は、エージェントに画像ツールがあればそれで作成され、そのツールの利用料金がかかる場合があります。サンプル内の顧客、人物、数値はすべて架空のもので、あなたの事実か、明確に一覧化したプレースホルダーに置き換えられます。
始める前に必要なもの
- 用意するもの
- プロダクト名、一文の提供価値、中核となるオブジェクト(エントリー、リクエスト、ジョブ、デプロイなど) · 対応フレームワークまたは SDK、インストールコマンド、プラン名と価格 · 確認できるセキュリティ上の事実、顧客、引用(任意。不足分は一覧化したプレースホルダーになります)
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · エディトリアル写真用の、エージェントの画像ツール(任意。ない場合は写真を用意するか、ラベル付きの枠になります)
- 外部コスト
- 導入事例、メディアライブラリ、アバターの写真は、利用可能であればエージェントの画像ツールで生成するため、そのツールの利用料金がかかる場合があります。ツールがない場合は、あなたの写真を使うか、明確にラベル付けした枠を残します。それ以外に有料サービスは使いません。
- 最終検証
- v1.0.6 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…









