Communitygithub.com

Ultra 3D Premium Landing Architect(超3Dプレミアムランディングアーキテクト)

短いブリーフィングから、完全レスポンシブな超3Dプレミアムランディングページを生成します。コンバージョンコピー、ビジュアルアートディレクション、インタラクション、実装可能なコードまたはノーコードビルダーガイド、そして検証可能なQAゲートを備えています。ランディングページ作成、プレミアムWebデザイン、3D Webサイト、インタラクティブな製品ページ、Webサイトリデザイン、コンバージョンページにご利用ください。

Ultra 3D Premium Landing Architect(超3Dプレミアムランディングアーキテクト) とは?

このスキルは、与えられた簡潔なブリーフィングをもとに、プロフェッショナルな超3Dプレミアムランディングページを自動生成するエージェントです。デザインスタイルは、Neobrutalism、Swiss、Glassmorphism、Bauhaus、Japandi、Dark Mode Firstなど、20以上のスタイルからランダムに選択されるか、ユーザーが指定することができ、毎回異なるビジュアル体験を提供します。主な機能として、マウス追従やスクロールに連動する3Dオブジェクトのアニメーション、3Dプロダクトモックアップ、Glassmorphismとダークモードのサポート、マイクロインタラクションなど、没入感の高いインタラクティブな要素を実装します。出力されるのは完全なHTML/CSS/JavaScriptコード(またはノーコードビルダー向けの手順書)で、レスポンシブ対応、コンバージョンを最大化するコピーライティング、QAゲートによる品質チェックを経た検証可能な成果物です。このスキルはClaude Code、Coder、Cursor、CodexといったAIエージェントプラットフォームで動作し、ランディングページの高速プロトタイピング、Webサイトリデザイン、インタラクティブな製品ページ作成に特に有用です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Xaomisatoshi/ultra-3d-premium-landing-architect-skill/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Ultra 3D Premium Landing Architect

以下のリストからランダムに選択されたデザインスタイルを使用して、単一ページのランディングページを作成します。または、リストにないより適切なスタイルを見つけた場合、あるいは2~3のデザインスタイルを組み合わせたい場合は、独自のスタイルを選択することもできます。 重要: ランダムな方法を使用してください – 多様性を確保できる任意の手法で構いません。自動的に「Neobrutalism」や特定のお気に入りスタイルに頼らないでください。真のランダム選択を実行してください。

利用可能なデザインスタイル(網羅的ではありません – 他のプロフェッショナルなスタイルを自由に特定して使用してください):

  • Neobrutalist(生々しく大胆で挑戦的な外観、構造化されたインパクト)
  • Swiss / International(グリッドベース、体系的、極めてクリアなタイポグラフィ)
  • Editorial(雑誌から着想、洗練されたタイポグラフィ、記事指向)
  • Glassmorphism(半透明レイヤー、ぼかし背景、奥行き)
  • Retro-futuristic(80年代の未来像、洗練されたノスタルジー)
  • Bauhaus(幾何学的な簡素さ、基本形状、形態は機能に従う)
  • Art Déco(エレガントなパターン、ラグジュアリー、ヴィンテージの洗練)
  • Minimalist(極限の削減、最大の余白、本質のみ)
  • Flat(奥行きなし、ベタ塗り、シンプルなアイコン、クリア)
  • Material(Googleに着想、カード、ソフトな影、動き)
  • Neumorphic(柔らかい影、押し出し要素、触感)
  • Monochromatic(単一色のバリエーション、トーンの深み)
  • Scandinavian(Hygge、自然素材、温かみのあるミニマリズム)
  • Japandi(和スカンジナビア融合、禅とHyggeの出会い)
  • Dark Mode First(ダークUI向け設計、コントラストのあるエレガンス)
  • Modernist(クリアなライン、機能的でタイムレスな美しさ)
  • 3Dレンダリング & コンピューター/テクノロジー
  • 「Glassmorphism」
  • 有機的な「Blob」
  • 3Dパーティクルウェーブ:何百もの小さな点や線がデジタルウェーブのように動く – AI、Web3、データ系スタートアップに最適。

🌐 没入型3D体験 & スクロールアニメーション

📱 3Dデバイスモックアップ

✨ 機能を備えたマイクロアニメーション

🖤 Glassmorphism & ダークモード

🖤 アイソメトリック3D要素

#ランディングページのためのインタラクティブ3Dエフェクト:

  1. マウストラック:ヒーローセクションの3Dオブジェクト(テックガジェットや抽象的なコードキューブなど)が、ユーザーのマウスに合わせて微動します。
  2. スクロールアニメート:ユーザーが下にスクロールすると、製品(スニーカーやボトルなど)が回転し、部品に分解され(分解図)、機能を説明します。
  3. クリックコンフィギュレーター:ユーザーは3Dグラフィックのさまざまな色やボタンをクリックでき、それに応じてモデルがリアルタイムで変化します。

関連スキル