
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- オフラインで開ける自己完結型の HTML ファイル 1 つにまとまった、開発ツール向けの完全なサイト:ホーム、ドキュメント、変更履歴、ダウンロード、セキュリティ、導入事例、サインアップ、サインイン、お問い合わせ、規約、404
- 実際に動く製品インターフェース:実行と再生ができるフローキャンバス、クリックできるノード、トリガーのスイッチ、調整可能なリトライポリシー、絞り込める実行履歴、期間を切り替えられるチャート、ライブのログテール
- ダークファーストのニュートラルグレーにシアンのアクセント 1 色、完全なライトテーマ、Hanken Grotesk と JetBrains Mono を埋め込み済み。写真は導入事例、ランナー、アバターにのみ使用
向いている人
- デスクトップアプリ、CLI、自動化プラットフォーム、オープンソースの開発ツールをローンチするチームで、デザイン作業なしに信頼感のあるダークなサイトがほしい方
- 実行、リトライ、ログ、ローカル実行など、強みを説明するより見せたほうが伝わりやすい製品
- 今すぐ単体のサイトが欲しい、または同じデザインを自分の Next.js、React、Vue、Svelte、Astro プロジェクトに移植したい開発者
向いていない人
- ライトファーストの見た目が必要なブランド:ライトテーマも完備していますが、デザインはダーク前提で作られています
- CMS 連携や多言語対応のサイトが最初から必要なチーム
- 本物の顧客ロゴやメディア掲載を期待する方:ブランド、人物、引用、数値はすべて架空で、差し替えるまでそのままです
プロダクトローンチ・アプリグロースWeb デザイン・デジタル体験ホームページ作成LP 作成ホームページテンプレート作成スタイル固定編集可能な出力ステップごとに確認シアンアクセントダーク優先チャートパネルノードキャンバス Heroグレインテクスチャ
この Skill について

開発ツールの概要を伝えるだけで、プロダクト自身が価値を語る、落ち着いたダークファーストの製品サイトが手に入ります。控えめな 2 行の見出しの下に、実行され、失敗したステップをリトライし、ログをストリーミングするフローキャンバスを配置。どのブラウザでも開けてオフラインで動く、自己完結型の 1 ファイルとして届きます。

手に入るもの
- タブ付きのフローエクスプローラー、ステップライブラリのレール、可観測性チャート、ローカルファーストの図解、flows-as-code セクション、導入事例、比較表付きの料金、FAQ、OS 別のインストールセクションを備えたランディングページ
- ドキュメント、変更履歴、ダウンロード、セキュリティ、導入事例、サインアップ、サインイン、お問い合わせ、プライバシー、利用規約、404 の各ページ
- インタラクティブな製品パネル:トリガーのスイッチ、調整してシミュレーションできるリトライポリシー、フィルターと検索付きの実行履歴、ライブのログテール
- 黒に近いグレーにシアンのアクセント 1 色、やわらかなグローと細かなグレイン、そして完全なライトテーマ
- 自分のプロジェクト内では、同じデザインを使用中のスタックのコンポーネントとルートとして構築

使い方
- 製品名、あなたの製品における「フロー」の意味、トリガーの種類、実行環境、インストール方法、プラン、CTA を伝えます
- キャンバス、エクスプローラー、ドキュメントをあなた自身のステップとコマンドに合わせて作り直し、仮に作成した導入事例・料金・セキュリティの情報を一覧にして示します
- 完成したファイルをブラウザで開き、「料金を 3 プランにして」「エクスプローラーのタブを変えて」など、普段の言葉で修正を依頼します

導入事例とアバターの写真はエージェントの画像ツールで生成するため、そのツールの利用料金がかかる場合があります。フォントと画像は完成ファイルに埋め込まれます。
始める前に必要なもの
- 用意するもの
- 製品名、一言で表す約束、あなたの製品における「フロー」とは何か、どこで実行されるか · トリガーの種類、ランタイムや連携先、インストール方法、プランと料金、CTA(ダウンロード、サインアップ、トライアル、スター)
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · 任意:導入事例、ランナー、アバターの写真用に、エージェントの画像生成ツール
- 外部コスト
- 導入事例、ランナーのショット、アバターの写真はエージェント自身の画像ツールで生成するため、そのツールの利用料金がかかる場合があります。ツールがない場合は、ご自身の写真か、明確にラベル付けされた画像枠を使います。
- 最終検証
- v1.0.6 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…









