
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- ランディング、料金、サインイン、ワークスペース、管理の各画面に加え、導入事例、変更履歴、規約、404 ページ。すべてルーティングされ、1 つのライブなデモ状態を共有
- 主要なオブジェクトのための実際に動くワークスペース:作成、クレジットを使った AI 下書き、予約配信、購読者管理、各操作が管理画面のアクティビティフィードに反映される様子まで確認可能
- Instrument Sans と Geist Mono の書体、ティールのピル型ボタン、やわらかなカード、コマンドパレット、ライト/ダークテーマ、役割に応じた写真を 1 つのオフラインファイルに
向いている人
- バックエンドができる前から、製品全体を本物らしく見せたい SaaS アイデアのピッチをする創業者
- マーケティング、アプリ、管理画面を通して、関係者や投資家へのウォークスルーを行うプロダクトマネージャー
- 公開サイトとサインイン後の製品で 1 つのデザインシステムを共有したい個人開発者
向いていない人
- 実際の認証、決済、データを扱う本番アプリ。サインイン、チェックアウト、クレジットはフロントエンドのシミュレーションです
- 単体のランディングページ。マーケティングページだけが必要なら、ランディングページ用の Skill のほうが向いています
- にぎやかでカラフルな消費者向けブランド。Harbor はティールのアクセント 1 色の、落ち着いたプロダクト主導のデザインです
プロダクトローンチ・アプリグロースWeb デザイン・デジタル体験ホームページ作成LP 作成スタイル固定編集可能な出力スピード納品ポーセリンティールピル型インターフェースソフトな浮き上がりカードウィンドウ枠モックアップライト/ダーク UI
この Skill について

SaaS の概要を伝えるだけで、製品の全体像が一度に手に入ります。マーケティングサイト、料金、サインイン、主要なオブジェクトを作るワークスペース、そしてビジネスを見守るバックオフィス。すべての画面が磁器のような白とティールの 1 つのデザインと 1 つのライブなデモ状態を共有するため、アプリでの操作が管理画面に反映されます。すべてが、どのブラウザでもオフラインで開ける 1 ファイルで届きます。

手に入るもの
- 製品ウィンドウ、使い方のタブ、機能の Bento、導入事例、引用、FAQ、サインアップの帯を備えたランディングページ
- 請求サイクルの切り替え、プランカード、クレジットパック、比較表付きの料金ページ
- 下書き、予約配信、購読者、設定を備えたサインイン後のワークスペースと、売上チャート、期間切り替え、並べ替え可能な表を備えた管理画面
- 導入事例、公開の変更履歴、規約、404 の各ページ、コマンドパレット、ライト/ダークテーマ
- フォントと写真を埋め込み、ページはネットワークリクエストを一切行いません

使い方
- 製品名、ユーザーがその中で作るもの、3〜6 個の機能、料金体系、ビジネスで追っている数値を Skill に伝えます。
- ワークスペース、パネル、アクションの名前を主要なオブジェクトに合わせて変更し、不足しているコピーを作成して確認用に一覧で示します。
- ファイルを開いてデモにサインインし、メインのアクションを実行して管理画面を確認したら、普段の言葉で修正を依頼します。

新しい写真はエージェントの画像ツールで用意するため、そのツール独自の利用料金がかかる場合があります。
始める前に必要なもの
- 用意するもの
- 製品名と、ユーザーが作成・管理する主要なオブジェクト · 3〜6 個の機能、料金体系、ビジネスで追っている 3〜4 個の数値 · 導入事例 1 つと、サイトに実在の人物を載せる場合は実際の写真
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · サインイン、導入事例、ポートレートの写真用に、エージェントの画像ツール(ご自身の写真を用意する場合は任意)
- 外部コスト
- 用意していない写真はエージェント自身の画像ツールで生成するため、そのツールの利用料金がかかる場合があります。製品ウィンドウはコードで描画され、完成ファイルはネットワークリクエストを一切行いません。作例の閲覧は無料です。
- 最終検証
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…









