分類 デザイン · インテリジェンス Apache-2.0 · 地球製
Open Source Claude Design · テンプレート

プロトタイプ.

インタラクティブなプロダクトモックアップ — ダッシュボード、アプリ、ランディングページ、社内ツール。ステークホルダーに渡してクリックスルーするようなもの。

合計 · 80
シーン
3D クリエイターポートフォリオ — Jack のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

3D クリエイターポートフォリオ — Jack

ダークでプレミアムな 3D クリエイターのポートフォリオ LP:グラデーション見出しとマウス追従の磁石効果付き 3D ポートレートを備えた全画面ヒーロー、スクロール連動の横スクロール画像マーキー、四隅に 3D 装飾と一文字ずつ表示するテキストを備えた About セクション、白背景の Services 一覧、そしてスクロールで縮小しながら重なるプロジェクトカード。

AeroCore — シネマティックな航空宇宙エンジンのランディング のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

AeroCore — シネマティックな航空宇宙エンジンのランディング

プレミアムでスクロール連動のシネマティックな航空宇宙推進マーケティングサイト:パララックスのワードマークとエンジンの静止画を備えた青から暖白へのグラデーションヒーロー、サムネイルが全画面の固定動画へと拡大するミッション演出、固定タブの showcase、ループ動画カードとツールマーキーを備えた bento 機能グリッド、アニメーション付きのダークな統計チャート、横スクロールの動画ストーリーレール、そして星空のフッター。

AI デザイナーポートフォリオ — Viktor Oddy のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

AI デザイナーポートフォリオ — Viktor Oddy

白背景のプレミアムなクリエイティブスタジオ LP:セリフ体をアクセントにしたヒーロー、無限スクロールの GIF マーキー、パララックスの推薦文、2 枚カードの料金表、自動スクロールの推薦文カルーセル、縦型のプロジェクト紹介、マウス軌跡のパートナー CTA、そして画面下部に固定されたフローティングナビ。

シネマティック・ランディングページ のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

シネマティック・ランディングページ

GSAP 駆動のプレミアムなシネマティック B2B ランディングページ:clip-path 楕円トランジションのスクロール連動フルスクリーン動画スライダーヒーロー、SplitText の文字単位リビール見出し、メイソンリー型のプロダクトギャラリー、スクロールで現れる紹介テキスト、パートナーのマーキー、Lottie の機能カード、そして複数拠点のフッター。

CodeNest — コーディングプラットフォームのヒーロー のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

CodeNest — コーディングプラットフォームのヒーロー

コーディング教育プラットフォーム向けのハイエンドでダークかつシネマティックなヒーロー:全画面 HLS 背景動画、リキッドグラスのカード、グリーンアクセントの大文字タイポグラフィ、中央のグロー、デスクトップのグリッドライン、そして機能するモバイルのハンバーガーメニュー。

デザイン評価 のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

デザイン評価

プロジェクト内の任意の HTML 成果物に対して 5 次元の専門デザインレビューを実施——哲学/視覚階層/ディテール/機能性/革新性を各 0-10 で採点。レーダーチャート、根拠に基づくスコア、3 つのリスト(維持/修正/クイックウィン)を含む単一の HTML レポートを出力します。

デート ウェブ のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

デート ウェブ

コンシューマー向けのマッチングダッシュボード。左サイドナビゲーション、コミュニティシグナルのティッカーバー、主要KPI、30日間の相互マッチング棒グラフ、マッチ率トレンドブロックを含む。エディトリアルタイポグラフィと控えめなアクセント。デートサイト、マッチング、コミュニティダッシュボード、SNSダッシュボードなど、データが主役の消費者向け製品に最適。

デジタルガイド のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

デジタルガイド

2ページのデジタルガイドプレビュー。1ページ目はカバー(タイトル、著者、『含まれる内容』統計、目次のティーザー)、2ページ目は見開き(引用文とステップリスト付きのレッスン本文)。ライフスタイル/クリエイターブランドのトーン。『電子ガイド』『デジタルガイド』『lookbook』『リードマグネット』『クリエイターガイド』『playbook』『PDFガイド』または『電子指南』が求められる場合に使用。

ドリームコア・ランディング — パララックス・ポータルヒーロー のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

ドリームコア・ランディング — パララックス・ポータルヒーロー

没入感のある単一ページのパララックス・ランディング。スクロールに合わせて固定ビューポートがポータル画像をあなたに向かってズームし、入場時にカーテンが左右に開き、シーン2では弧を描くカードスライダーが9つの夢世界の目的地を見せます。

エンジニアリングランブック のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

エンジニアリングランブック

エンジニアリングランブック — サービス概要、アラート表、ダッシュボードリンク、コピペ可能なコマンド付き運用手順、オンコールローテーション、インシデント対応チェックリストを含みます。ランブック、運用ドキュメント、オンコールガイド、SREドキュメント、運維手册が必要な場面で使用します。

Evergreen Finance — Kova フィンテックのランディング のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Evergreen Finance — Kova フィンテックのランディング

プレミアムな Kova フィンテック LP:順再生/逆再生のブーメラン動画を背景にした全画面ヒーロー、FadeUp のぼかし表示アニメーション、フローティングのダッシュボードカード(貯蓄の折れ線+支出の棒グラフ)、正方形の自動再生動画を配した左右分割の推薦文セクション、そして画像カードとドーナツ型の支出チャートを含む 4 分割の機能グリッド。

Flowai ライブダッシュボードテンプレート のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Flowai ライブダッシュボードテンプレート

FlowAI スタイルのチーム管理ダッシュボード。3つのタブ(チームメンバー、チーム詳細、アクティビティログ)、KPI統計行、メンバーテーブル、役割分布バーチャート、オンライン状態とアクティビティのスパークライン、トップ貢献者パネルを搭載。ライト/ダークテーマ、チャートツールチップ、パネルのクリック拡大、CSV エクスポートに対応。

ゲーミフィケーションアプリ のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

ゲーミフィケーションアプリ

3画面のゲーミフィケーションアプリプロトタイプ:カバー画面、XPリボンとレベルバー付き今日のクエスト、クエスト詳細。ゲーミフィケーションアプリ、習慣トラッカー、RPG風ライフアプリ、レベルアップアプリ、デイリークエスト、XP/連続記録アプリに最適。

GitHub ダッシュボード のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

GitHub ダッシュボード

GitHub リポジトリ分析ダッシュボード — スター、フォーク、コントリビューター、イシュー、プルリクエスト、最近のアクティビティ、トップコントリビューター。GitHub リポジトリダッシュボード、オープンソース成長レポート、リポジトリヘルスページ、GitHub 分析ビューに使用。

Html Ppt Taste Brutalist のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Html Ppt Taste Brutalist

16:9 HTML デッキ、タクティカルテレメトリー / CRT ターミナルスタイル。非アクティブ CRT チャコールスライド、白色リン光モノスペース、ハザードレッドアクセント、スキャンラインオーバーレイ、ASCII 構文、装飾より密度を優先。Leonxlnx/taste-skill `brutalist-skill`(タクティカルテレメトリーモード)から抽出。

Innovation — ダークなエディトリアル・ランディング のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Innovation — ダークなエディトリアル・ランディング

高級感のあるダークなエディトリアル・エージェンシー向けランディングページ。自動でクロスフェードするフルスクリーン動画の上に Instrument Serif のヒーロー見出しを重ね、リキッドグラスのナビとボタン、スクロールで現れる About / Featured Video / Philosophy / Services セクションを備えます。

Kami Landing のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Kami Landing

印刷品質のシングルページ紙文書を生成——温かみのある羊皮紙キャンバス、インクブルーのアクセント、単一ウェイトのセリフ体、イタリック無し、クールグレー無し。アプリUIではなく、プロフェッショナルなホワイトペーパーやスタジオワンページャーのような出力。多言語対応設計(EN · zh-CN · ja)。単一の自己完結型HTMLファイル、依存関係ゼロ。

Layered Depth — Qelora 建築スタジオ のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Layered Depth — Qelora 建築スタジオ

建築スタジオ向けの映画的なレイヤード・パララックス・ランディングページ。全画面の背景動画、パララックスする彫刻のスラブの後ろに置かれた巨大なブランドのワードマーク、鳥のアニメーション動画のステートマシン、すりガラス調のナビピルと情報パネル、そして中央寄せのエディトリアル見出しを備えた2つ目のフルビューポート動画セクションで構成されます。

Liquid Glass Agency — ダーク&ラグジュアリーなランディングページ のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Liquid Glass Agency — ダーク&ラグジュアリーなランディングページ

AI ウェブデザインエージェンシー向けのダークでラグジュアリーな1ページ型ランディング。シネマティックな動画背景、Instrument Serif のイタリック見出し、リキッドグラスのカードと CTA、BlurText の単語ごとの出現演出、セクションごとのストーリーテリング。

Luxury Botanical — Beyond The Collection のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Luxury Botanical — Beyond The Collection

映画的なラグジュアリーフレグランスのランディングページ。全画面の動画ヒーロー、スクロール連動の楕円クリップパスによる演出、焦点で拡大する香水瓶の周回カルーセル、ニュースレターセクション、そして温かみのある羊皮紙調のフッターを備えます。

Mindloop Landing — モノクロームのコンテンツプラットフォーム のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Mindloop Landing — モノクロームのコンテンツプラットフォーム

純黒モノクロームのニュースレター/コンテンツプラットフォームのランディングページ:全画面動画ヒーロー、Instrument-Serif のイタリック強調語、リキッドグラスのコントロール、スクロールで一語ずつ浮かび上がるミッション、そして HLS 動画の CTA。

モバイルアプリ のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

モバイルアプリ

ピクセル単位で正確な iPhone 15 Pro フレーム内にレンダリングされるモバイルアプリ画面。assets/template.html をコピーし、references/layouts.md から1つの画面アーキタイプを貼り付けて構築します。ブリーフで『モバイルアプリ』『iOS アプリ』『Android アプリ』『スマホ画面』『アプリ UI』が求められた際に使用します。

モバイルオンボーディング のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

モバイルオンボーディング

3つのスマホ画面を並べたマルチスクリーンのモバイルオンボーディングフロー(スプラッシュ、バリュープロップ、サインイン)。ステータスバー、スワイプドット、プライマリCTAを含む。『モバイルオンボーディング』『iOSオンボーディング』『スマホサインアップ』『移动端引导』に関する要件に対応。

Motion Frames のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Motion Frames

ループするCSS アニメーション(回転するテキストリング、アニメーション地球儀、タイマー、パララックスラベル)を含む単一フレームのモーションデザイン合成。HyperFrames や任意のキーフレームベースのエクスポーターに直接渡せるヒーロー動画ポスターとしてレンダリング。モーションデザイン、アニメーションヒーロー、ループ、動画ポスター、タイトルカードの要件に対応。

Mythic Naturecore — Reverie のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Mythic Naturecore — Reverie

シネマティックな mythic-naturecore のランディングページ:480vh のスクロールでポータルをズームスルーし、層状のワールド背景の上でミラーリングされたカーテンが開く。マウスパララックスによる 3D の奥行きと、Viaoda-Libre/Imprima のセリフ&サンセリフのペアリングを備える。

Nimbus Grid — セキュアなクラウドストレージ のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Nimbus Grid — セキュアなクラウドストレージ

セキュアなクラウドストレージ製品向けの、ダークでウォームゴールド調の単一ページ・マーケティングサイト。シェーダーのヒーローにライブコンソールとタイプライター演出、スクロール連動の固定プラットフォーム・アコーディオン、スクロールで変形する料金バー群、セキュリティカード、3Dで傾くコンソールのショーケース、クリックで爆発するオペレーションキューブを備えます。

Open Design ランディングページ のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Open Design ランディングページ

Atelier Zero ビジュアル言語(Monocle / Apartamento / Études エディトリアルコラージュ)を使用した単一ページのランディングサイトを生成。ブランドブリーフから inputs.json を入力し、gpt-image-2 で最大16枚のコラージュアセットを生成、自己完結型 HTML を出力。スクロールアニメーションと固定ナビゲーションを自動実装。

Orbit 総合ブリーフィング のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Orbit 総合ブリーフィング

2つ以上のコネクタを接続すると、Orbit が自動的に起動し、過去24時間のすべての認証済みコネクタ(GitHub、Linear、Notion、Slack、飞书、カレンダー、Gmail、ドライブ、Sentry、Vercel など)からアクティビティを取得し、「我的设计」の上部にアダプティブなベントグリッドダッシュボードを生成します。Orbit の日次ダイジェストスケジューラーによって自動実行されます。

Orbit Linear のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Orbit Linear

Linearがユーザーの唯一の接続済みコネクタである場合、またはユーザーがデイリーダイジェストをLinearに明示的にスコープした場合にOrbitパイプラインによって自動的にトリガーされます。過去24時間の課題の動き、ステータス変更、アサイン、サイクル進捗を取得し、Linearネイティブの受信トレイビジュアル言語でレンダリングします。

Orbit Notion のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Orbit Notion

Open Orbit ブリーフィングスキル — Notion がユーザーの唯一の接続コネクタである場合、またはユーザーがデイリーダイジェストを明示的に Notion にスコープした場合に Orbit パイプラインによって選択されます。過去24時間のドキュメント編集、コメント、メンション、データベース行の変更をユーザーの認証済み Notion 接続から取得し、ネイティブ Notion ページ(コールアウト/トグル/データベーステーブル)としてダイジェストをレンダリングします。このスキルは手動でトリガーすべきではありません — Orbit のデイリーダイジェストスケジューラによってライブ Notion データに対して呼び出されます。

Portfolio Cosmic — ダークなランディングページ のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Portfolio Cosmic — ダークなランディングページ

プレミアムなダークのシングルページ・ポートフォリオ LP:シネマティックな HLS ヒーロー動画、Instrument Serif のイタリック表示書体、000→100 のローディングカウンター、交互配置の bento 作品グリッド、スクロールで固定されるパララックスの探求ギャラリー、そして固定された #89AACC→#4E85BF のアクセントグラデーションを使ったマーキーのコンタクトフッター。

ソーシャルカルーセル のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

ソーシャルカルーセル

1080×1080の正方形で構成される3枚のソーシャルメディアカルーセル。映画的でブランドに沿った3つのパネルに、シリーズ全体で連続する見出し(『前へ。』→『次へ。』→『先を見据えて。』)を配置。各カードにはブランドマーク、番号/総数、キャプション、「ループ」アフォーダンスが含まれます。『カルーセル投稿』『ソーシャルカルーセル』『Instagram カルーセル』『LinkedIn シリーズ』『X スレッドカード』『三連発』などの要件に対応。

ソーシャルメディアダッシュボード のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

ソーシャルメディアダッシュボード

クリエイター向けソーシャルメディア分析ダッシュボード、単一 HTML ファイル。プラットフォーム切り替え(X / LinkedIn / YouTube / Instagram)、KPI カード(フォロワー数、エンゲージメント率、いいね数、リポスト数)、フォロワー成長チャート、今週のトップ投稿プレビュー、トレンドトピック/トップコメントサイドパネルを搭載。

スプライトアニメーション のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

スプライトアニメーション

ピクセルアート風のアニメーション解説スライド。クリーム色の背景、太字の年号表示、ピクセルアートのマスコット(花札カード、キノコ、8ビットゲーム機など)、動的な日本語タイポグラフィとタイムラインリボンを特徴とします。CSS アニメーションのみで、縦動画として録画可能。

Stellar Launch — Launchex Awards のプレビュー プロトタイプ
@eli Open Design
プロンプト全文を読む →

Stellar Launch — Launchex Awards

プレミアムなアワード/ベンチャー賞のランディングページ。角丸のインセット白カードシェル、面取り clip-path CTA を備えたフルスクリーン動画ヒーロー、正方形動画を囲む角張ったノミネートカードの3カラム応募セクション、そして plus-darker の画像カードとグラデーション文字の数字を用いた創業者紹介の統計グリッド。

Velar. — ラグジュアリー不動産 のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Velar. — ラグジュアリー不動産

シネマティックな1ページ型ラグジュアリー不動産ランディング。タイプライター式プリローダーがせり上がって消え、下からせり上がりつつ拡大してダークなステートメントセクションに張り付くスクロール連動の建物画像、数字がカウントアップする固定式のダーク統計バー、そしてダークセクションの上にせり上がってくるホバー展開の動画ギャラリーを備える。

ウェイトリストページ のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

ウェイトリストページ

メールアドレス収集、ブランドロゴ、オプションの装飾レイヤーを備えたミニマルなプレローンチランディングページ。DESIGN.md から配色、タイポグラフィ、レイアウトルールを読み込みます。製品ローンチ、ベータサインアップ、早期アクセスプログラム、インディープロジェクトに最適。

Web Prototype Taste Brutalist のプレビュー プロトタイプ
@open-design Open Design
プロンプト全文を読む →

Web Prototype Taste Brutalist

スイス産業印刷スタイルのウェブプロトタイプ。新聞紙キャンバス、モノリシックな黒のグロテスク書体、ビューポートから溢れる数字、ヘアライングリッド分割、ハザードレッドアクセント、ASCII シンタックス装飾。Leonxlnx/taste-skill `brutalist-skill`(スイス産業印刷モード)より抽出。