プロンプトからデザインを生成
ターミナルでランディングページや再設計の要件を記述すると、CLI が複数の AI モデルを並列に使ってデザインを生成します。
Design CLI
Design CLI は、Shuffle のターミナル型ツールです。新規ランディングページの生成や既存サイトの再設計に対応し、編集可能な HTML と Tailwind CSS を出力します。
概要
Design CLI は、Shuffle が提供するコマンドライン型のデザインツールで、新しいランディングページの生成や既存 Web サイトの再設計に対応します。自動化ワークフロー向けに設計されており、ターミナルからページの説明や対象 URL を指定すると、ブラウザエディタを使わずに編集可能なデザイン出力を生成できます。
公開されている出力は、主にきれいな HTML と Tailwind CSS を中心としており、複数の AI モデル、ダウンロード可能なプロジェクト、スクリーンショット、プレビューリンクに対応しています。Shuffle はこれを、スクリプト、CI ジョブ、社内ツールで再現性のあるデザイン生成を行いたいチーム向けの、ターミナルファーストのワークフローとして位置づけています。
機能
既存サイトを再設計
既存の Web サイト URL と方向性を CLI に指定すると、ページをスクリーンショット化し、同じコンテンツを保った再設計版を生成します。
1 回のコマンドで案を比較
1 回のコマンドで複数のデザイン案を受け取り、ダウンロードや確認の前に選択できます。
編集可能なソース出力
生成されたプロジェクトを編集可能な HTML と Tailwind CSS としてダウンロードし、確認、修正、公開に使えます。
自動化しやすいコマンドオプション
モデル選択、全モデル実行、スクリーンショット生成、出力保存などのフラグを使って、スクリプトや自動化ワークフローに組み込めます。
再利用可能なワークフロー例
Slack ボットやアウトリーチ自動化フローなど、CLI をデザインエンジンとして使う例をベースに活用できます。
利用例
新しいランディングページを作成する
開発者やデザイナーは、ターミナルでランディングページのプロンプトを入力し、いくつかの編集可能なレイアウト案を生成してから、続ける案を選べます。
既存サイトを再設計する
チームは、既存サイトの URL と再設計の方向性を指定して、元のコンテンツを維持しつつ見た目を変更した更新版を作成できます。
デザイン生成を自動化する
ワークフローの担当者は、CLI をスクリプト、CI ジョブ、社内ツールに組み込み、毎回同じ方法でデザイン生成を実行できます。
Slack からデザインを依頼する
チームは Slack ボットの例を使って、CLI を手動で開かずに、チャンネルでのメンションやダイレクトメッセージからデザイン作成を開始できます。
再設計アウトリーチを実行する
営業やアウトリーチのワークフローでは、見込み先サイトの再設計を生成し、ローカルでプレビューして、再設計リンク付きのメールアウトリーチを送れます。
Pros and Cons
Pros
- ターミナルから新規ページ生成と再設計の両方を行えます。
- 複数の AI デザインモデルをサポートし、並列実行も可能です。
- ロックされたモックアップではなく、編集可能な HTML と Tailwind CSS を出力します。
- ダウンロード、プレビュー、保存済み出力を含むスクリプト化ワークフローに適しています。
- Slack や自動化アウトリーチ向けのドキュメント化された例があります。
Cons
- 公開情報からは、製品ページ上で Design CLI 単体の料金は確認できません。
- Slack ボットの利用やアウトリーチ自動化など、一部のワークフローは別個のサンプル設定や Resend のような追加ツールに依存します。
FAQ
Design CLI は誰向けですか?
Design CLI は、ブラウザのエディタを使わずにターミナルから Web ページを生成または再設計したいユーザー向けです。元のページでは、自動化ワークフロー、スクリプト、CI ジョブ、内部ツールに適していると説明されています。
ワークフローはどのように動作しますか?
基本的な流れは、CLI をインストールして認証し、`design create` のようなコマンドでページを生成するか、`redesign create` で既存の URL を再設計します。生成されたプロジェクトはダウンロード、プレビュー、確認ができ、編集可能な HTML と Tailwind CSS として扱えます。
どのような出力が生成されますか?
Design CLI は編集可能な HTML と Tailwind CSS を出力し、再設計フローはライブの Web サイト URL とプロンプトまたは方向指定から始まります。アウトリーチ自動化の例では、確認フローの一部としてスクリーンショットとローカルプレビューも示されています。
Design CLI の料金はいくらですか?
Shuffle サイト上の料金情報では、Shuffle Editor の有料ライセンスとして月額、年額、買い切り、チーム向けのサブスクリプションが示されています。提供された証拠には、Design CLI 単体の別料金は記載されていません。
利用できる連携や関連ワークフローはありますか?
ソースでは、複数の AI モデルを並列で使ってデザインを生成できることが示され、プレビューリンク、スクリーンショット、ダウンロード可能なプロジェクトファイルなどの出力にも触れています。また、Slack 起点のデザイン生成やアウトリーチ自動化といった関連ワークフローも示されていますが、具体的な連携設定は利用する例やドキュメントによって異なります。
Quick Facts
- カテゴリ
- 開発者向けツール
- 主な用途
- ターミナルから Web サイトを生成または再設計する
- 出力形式
- 編集可能な HTML と Tailwind CSS
- プラットフォーム
- コマンドラインワークフロー向け CLI
- ソースドメイン
- shuffle.dev
- 料金形態
- 料金ページには有料の Shuffle ライセンスが表示されており、提供された証拠には Design CLI 単体の別料金は記載されていません
Design CLIの代替品
图像大厨imgcook
imgcookは、デザイン稿をフロントエンドコードに変換するデザイン-to-codeツールです。Sketch、Photoshop、VS Code、CLIに対応し、プラグインと開発者向けのワークフローを提供します。
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
CreateOS Sandbox
CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。
hob
hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。
Ably Chat
Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。
Manta AI
Manta AIは、URLからアプリの挙動を把握し、回帰を検出し、スクリプトやセレクタ管理なしでテストを生成できる自律型Webアプリテストツールです。