designmdme-cli

designmdme CLI

designmdme は、公開されている任意のウェブサイトを DESIGN.md に変換します。サイトのデザインシステム（カラートークン、タイポグラフィのスケール、間隔、角丸、シャドウ／エレベーション、コンポーネントのパターン）を構造化された Markdown 仕様としてまとめます。オプションで、これらのトークンをライブのビジュアル見本として表示する、自己完結型の HTML プレビューも生成できます。

DESIGN.md はコーディングエージェントに渡すことを想定して作られています。実際のブランドに合わせた UI の構築やスタイル変更を依頼された場合は、まず仕様を生成して読み込み、色やフォントを推測するのではなく、正確なトークン値を使ってコードを作成してください。

このスキルを使う場面

実際に公開されているサイトの正確なデザインシステムが必要なタスクでは、いつでも使用してください。

• 「stripe.com のスタイルでランディングページを作って」→ stripe.com を生成し、DESIGN.md を読み込んで、実際のカラーコードとフォントスタックを使って実装します。
• 「マーケティングサイトのデザインに合わせて」／「ブランドイメージに合うようにして」→ その URL を抽出します。
• 「linear.app のカラーパレット／フォントは？」→ 生成して、該当セクションを読み込みます。
• 既存の参考サイトをもとに、新しいプロジェクトのデザイントークンを設定します。

ユーザーがコード作成を伴わない手早い見た目の確認だけを求めている場合、共有可能な成果物として HTML プレビュー（--html）を使います。コード関連の用途では、Markdown を信頼できる唯一の情報源とします。

インストール

バイナリは designmdme で、@crowdlinker/designmdme として公開されています。

# One-off (no install)
npx @crowdlinker/designmdme stripe.com

# Or install globally so the `designmdme` command is always available
npm install -g @crowdlinker/designmdme

認証（初回のみ、対話形式）

CLI の使用にはアカウント認証が必要です。生成にはログイン済みのトークンが必要です。認証ではブラウザーを使ったデバイスコードフローを実行し、トークンを ~/.designmdme/auth.json に保存します（トークンと有効期限のみで、その他の個人情報は含まれません）。トークンの有効期間はデフォルトで30日間です。

designmdme login     # opens a browser, prints a fallback URL + code, then polls
designmdme whoami    # prints the logged-in email + token expiry
designmdme logout    # deletes ~/.designmdme/auth.json

login は対話形式です（ブラウザーを開き、ユーザーが承認するまで最大10分待機します）。無人で実行しないでください。コマンドが「Not logged in」または「Token expired」で失敗した場合は処理を中断し、ユーザー自身で designmdme login を実行するよう依頼してください。ブラウザーでの承認をユーザーに代わって完了することはできません。

DESIGN.md を生成する（デフォルトのコマンド）

URL は位置引数として渡すことも、-w／--website で指定することもでき、どちらも同じです。http／https と www. は自動的に正規化されます。

designmdme stripe.com
designmdme --website https://stripe.com

実行内容：CLI がトークンを確認し、URL にアクセスできることを検証してから、サイトをスキャンし、仕様をストリーミングしてファイルに書き込みます。出力ファイル名のデフォルトは、カレントディレクトリ内の DESIGN-<slug>.md です。<slug> はホスト名から www. を取り除き、英数字以外の文字をハイフンに置き換えたものです（例：stripe.com → DESIGN-stripe-com.md）。

オプション

フラグ	意味
-w, --website <url>	ウェブサイトの URL。位置引数のエイリアスです。
-o, --output <path>	DESIGN-<slug>.md の代わりに、指定したパスへ書き込みます。存在しない親ディレクトリは作成されます。
--single-page	ランディングページのみを抽出します（4クレジット）。抽出モードを参照してください。
--multi-page	サイトの主要ページをクロールし、より詳細な仕様を作成します（8クレジット）。
--html	Markdown と合わせて HTML プレビューも生成します（+8クレジット。クレジット料金を参照してください）。Markdown と同じパスに、拡張子を .md から .html に変えて書き込みます。

designmdme stripe.com --output ./docs/stripe-design.md
designmdme stripe.com --single-page           # cheapest, predictable 4 credits
designmdme --website stripe.com --html        # writes DESIGN-stripe-com.md + .html

抽出モード

仕様は、ランディングページだけから生成することも、サイトの主要ページを複数クロールして統合して生成することもできます。

• 単一ページ（--single-page、4 クレジット）— 指定した URL のみを読み取ります。
• 複数ページ（--multi-page、8 クレジット）— 主要ページ（料金、製品、機能など）を検出して読み取り、より完全なデザインシステムを生成します。

どちらのフラグも指定しない場合、CLI はアカウントに保存された設定（複数ページ、つまり 8 クレジットの場合があります）を使用し、生成前に解決されたモードとコストを表示します。 コストを予測可能にするには、モードを明示的に指定してください。トークンを低コストで取得するだけなら --single-page、完全性を重視するなら --multi-page を使用します。

CLI が自動的に処理することが 2 つあります。

• アカウント残高が 8 クレジット未満の場合、複数ページモードは単一ページモードに切り替わります。
• サイトが単一ルート（追加でクロールするページがない）と判明した場合、--multi-page を指定していても単一ページとして請求され（4 クレジット）、その旨を示すメモが表示されます。

重要：対話型の上書き確認を避ける

出力先のファイルがすでに存在する場合、CLI は「置き換えるか、コピーを作成しますか？（replace/copy）」と対話形式で確認し、入力を待ちます。非対話型（エージェントでは通常こちら）で実行すると、処理が停止します。安全に実行するには、次のいずれかを行ってください。

• まだ存在しない、一意の --output パスを明示的に指定する、または
• デフォルトの DESIGN-<slug>.md が存在するか確認し、削除しておきます。

確認に「copy」と回答した場合（デフォルト）、コピーには DESIGN-<slug>-YYYYMMDD.md という名前が付けられます（日付入り）。

HTML デザインプレビューを生成する

--html を追加すると、抽出したデザインシステムを実際に表示するサンプルとして描画する、自己完結型の HTML ページも生成されます。これには、16 進数のラベル付きカラースウォッチ、サイトで実際に使われているフォントで設定された文字サイズのサンプル、間隔と角丸のバー、シャドウ／エレベーションのカード、コピーしてすぐ使える :root CSS 変数ブロックが含まれます。CSS がすべてインライン化され、外部依存関係のない単独の .html ファイルです。デザイナーとの共有、Wiki への追加、構築前のブランド確認に便利です。

designmdme stripe.com --html     # writes DESIGN-stripe-com.md AND DESIGN-stripe-com.html

動作：

• HTML はMarkdown と同じ場所に、.md の代わりに .html として書き込まれます（ベースパスは --output で指定します）。同じ上書き確認の対象となります。
• HTML はMarkdown の仕様から生成されるため、必ず Markdown が先に生成されます。HTML の処理が失敗した場合（クレジット不足など）でも、.md ファイルは保存されます。
• コード関連のタスクでは、Markdown を優先してください。これは機械可読な信頼できる情報源です。ユーザーが表示または共有するビジュアル成果物を求めている場合に限り、--html を使用してください。

クレジット費用

生成にはアカウントのクレジットを消費します。正確な費用は次のとおりです。

生成するもの	クレジット
DESIGN.md — 単一ページ（--single-page）	4
DESIGN.md — 複数ページ（--multi-page）	8
HTML プレビュー — --html の追加分	8
単一ページ ＋ HTML	合計 12（4 + 8）
複数ページ ＋ HTML	合計 16（8 + 8）

注：

• クレジットが請求されるのは成功した場合のみです。生成に失敗した場合やキャンセルした場合、費用はかかりません。
• キャッシュ済みの結果は0 クレジットです。すでに生成済みのサイトを再生成すると、キャッシュされた Markdown が返されます（CLI は「Served from cache · 0 credits」と表示します）。
• HTML プレビューも同様に、初回のみ請求されてキャッシュされます。同じサイトに対して --html を再実行すると、キャッシュされたファイルが返され、再度請求されることはありません。
• --html で**「Insufficient credits」**と表示された場合、Markdown はすでに正常に保存されています。スキップされたのは HTML の追加分のみです。ループで再試行せず、https://designmd.me/pricing でクレジットを追加するようユーザーに伝えてください。
• 複数ページモードには 8 クレジットが必要です。残高がそれ未満の場合、CLI は通知せずに単一ページモードを使用します。コストが重要な場合は、事前に designmdme usage を確認してください。

履歴と使用状況を確認する

designmdme list      # recent generations (CLI + web), with share URLs and local file paths
designmdme usage     # credit balance, credits used vs received, generation counts, recent transactions

list は各行に [multi-page] タグ（該当する場合）とステータス （● queued ／ ● processing ／ ● failed ／ ● cancelled）を付けます。成功した行には共有リンクまたはファイルのみが表示されます。生成は永続的なバックグラウンドジョブとして実行されるため、処理中のジョブを確認したり、中断後に再開したりするには list を使います。

複数の生成を行う前に designmdme usage を確認し、クレジットが十分にあることを確かめてください（Markdown 1 件あたりシングルは 4 クレジット、マルチは 8 クレジット、--html にはさらに 8 クレジット）。残高が空の場合は、https://designmd.me/pricing でチャージするようユーザーに伝え、ループして再試行しないでください。

バックグラウンド生成

生成は永続的なサーバー側ジョブとして実行されます。通常の designmdme <url> 呼び出しは、ファイルが書き込まれるまで引き続きブロックします。ライブステータス（Queued → Generating）を表示し、完了すると結果を返すため、エージェントのワークフローは変わりません（負荷が高いと、少し時間がかかることがあります）。中断（Ctrl+C ／接続切断）しても、ジョブはキャンセルされず、サーバー上で実行を続けます。その後 designmdme list を実行してステータスを確認し、完了したら結果を取得してください。

推奨されるエージェントのワークフロー

1. 必要な場合にのみ認証を確認します。ログインしていない場合、生成呼び出しは明確なメッセージとともにすぐに失敗します。login は対話型のため、先回りして実行しないでください。
2. 予測可能なコストにするため、明示的なモードを指定し、既知のパスに生成します。 designmdme <url> --single-page --output <unique-path>.md（または、より包括的な複数ページ横断の仕様に 8 クレジットを使う価値がある場合は --multi-page）。
3. 生成された DESIGN.md を読み、正確な値（16 進カラーコード、フォントファミリーとサイズ、間隔の単位、角丸、シャドウの値、コンポーネントのスタイル）を確認します。作成するコードにはそれらをそのまま使用し、近似値に置き換えないでください。
4. ユーザーがビジュアルリファレンスも必要としている場合は、--html を追加して .html ファイルを開きます。

トラブルシューティング

症状	原因／対処方法
Not logged in ／ Token expired ／ Token is no longer valid	designmdme login を実行するようユーザーに依頼します。認証は対話型のため、代わりに実行することはできません。
"already exists" の後に停止する	対話型の上書き確認です。一意の --output パスを指定して再実行してください。
Insufficient credits for HTML preview	--html 用のクレジットが不足しています。Markdown の生成は成功している場合があります。https://designmd.me/pricing でチャージするようユーザーに伝えてください。
予期しない 8 クレジットの請求	モードフラグが指定されておらず、アカウントのデフォルトがマルチページです。予測可能な 4 クレジットで実行するには --single-page を指定してください。
URL にアクセスできない	サイトがダウンしている、ボットをブロックしている、または URL が間違っています。ユーザーに URL を確認してください。
出力が空	生成結果がありません。1 回再試行し、それでも続く場合は報告してください。

クイックリファレンス

designmdme login                              # one-time browser auth
designmdme whoami                             # who am I + token expiry
designmdme stripe.com --single-page           # → DESIGN-stripe-com.md (4 credits)
designmdme stripe.com --multi-page            # richer, cross-page spec (8 credits)
designmdme stripe.com                         # uses account default mode (prints cost first)
designmdme stripe.com --output ./docs/s.md    # custom path (avoids overwrite prompt)
designmdme stripe.com --single-page --html    # also write .html preview (+8 credits)
designmdme list                               # recent generations (with mode + status)
designmdme usage                              # credits + generation stats
designmdme logout                             # remove stored credentials