getdesign

www.getdesign.app

公開サイトのデザインシステムを抽出し、design.md ファイルに書き出します

公式サイトへ新しいウィンドウで開きます

公式サイトへ

getdesignとは？

getdesignは、公開ウェブサイトからデザインシステムを抽出します。実ブラウザでサイトを開き、サイトのCSSを読み取り、レンダリングされたページをキャプチャしたうえで、そのサイトの実際のCSSに基づいた色・タイポグラフィ・余白・コンポーネントを design.md ファイルに書き出します。出力はスタイルガイドとして読むことも、インターフェースを構築する際のコンテキストとしてコーディングエージェントに渡すこともできます。

このツールは、単一のエージェントコアを共有する5つのサーフェスに加え、コーディングエージェント内で動作するSkillとして提供されています。現在ベータ版であり、ホスト実行ではgetdesignのAPIキーではなく、ご自身のプロバイダーキーに依存します。

getdesignの使い方

Webダッシュボード

ダッシュボードにサインインし、AccountでDaytonaとOpenAIのキーを保存してから、Agentに公開ウェブサイトのURLを貼り付けて design.md を生成します。プロバイダーを実行せずに、キャッシュされたサンプルを試すこともできます。

API

api.getdesign.app の GET /v1/design はMarkdownまたはJSONを返します。WorkOSのベアラー認証とプロバイダーキーが必要です。

CLI

Bun上で bunx @getdesign/cli を、DaytonaとOpenAIのキーを指定して実行します。design.md がローカルファイルに書き出されます。

SDK

bun add @getdesign/sdk で @getdesign/sdk をインストールすると、プロバイダーキーを使ってBun上でエージェントをインプロセス実行でき、型付きの結果と進捗イベントが得られます。

Skill

ポータブルな SKILL.md を skills add MohtashamMurshid/getdesign で追加します。Claude Code、Codex、Cursorの内部で、エージェント自身のツールを使って動作します。

getdesignの主な機能

デザインシステムの抽出

getdesignは公開サイトのCSSトークンを読み取り、ブラウザでページをキャプチャし、色・タイポグラフィ・余白・コンポーネントを網羅したデザインドキュメントを生成します。

design.md出力

結果は、ウェブサイトのデザインシステムを記述したMarkdownドキュメントとして提供されます。ビジュアル実行では、キャプチャしたスクリーンショットも含まれます。

複数のアクセスサーフェス

Web、API、CLI、TypeScript SDKは同じエージェントコアにアクセスします。Skillはご自身のコーディングエージェント内で動作します。CLIとSDKはBun上でローカルに実行され、HTTP APIはホスト実行をサポートします。

プライベート実行と任意の公開

ダッシュボードでの実行は、公開するまでプライベートのままです。公開すると、誰でもデザインドキュメントとスクリーンショットを表示・ダウンロードできるリンクが作成されます。実行を再びプライベートにすることもでき、将来のアクセスを閉じられますが、すでにダウンロードされたコピーは受け取った人のもとに残ります。

getdesignのユースケース

公開サイトからスタイルガイドを作成する

公開ウェブサイトから、その色・タイポグラフィ・余白・コンポーネントを記述した読みやすいデザインドキュメントを生成します。

コーディングエージェントにデザインコンテキストを与える

生成された design.md とそのスクリーンショットをコーディングエージェントに渡すか、Skillをインストールして、エージェントが自身のツールでデザインコンテキストを抽出できるようにします。

ローカルまたはホストのワークフローで抽出を実行する

Bun上でのローカル実行にはCLIまたはTypeScript SDKを、MarkdownやJSONを返すホスト実行にはHTTP APIを使用します。

デザインドキュメントを共有する

ダッシュボードでの実行を公開すると、他の人がデザインドキュメントとスクリーンショットを表示・ダウンロードできるリンクが作成されます。

getdesignに関するよくある質問

design.mdファイルとは何ですか？

design.md は、ウェブサイトのデザインシステムを記述したMarkdownドキュメントです。スタイルガイドとして読むことも、インターフェースを構築する際のコンテキストとしてコーディングエージェントに渡すこともできます。ビジュアル実行では、キャプチャしたスクリーンショットも含まれます。

ウェブサイトの色とフォントを抽出するにはどうすればよいですか？

AccountでDaytonaとOpenAIのキーを保存し、Agentに公開ウェブサイトのURLを貼り付けます。getdesignはCSSトークンを読み取り、ブラウザでページをキャプチャし、ダウンロード可能なデザインドキュメントを生成します。プロバイダーを実行せずに、キャッシュされたサンプルを試すこともできます。

getdesignをコーディングエージェントと併用できますか？

はい。生成された design.md とそのスクリーンショットをコーディングエージェントに渡すか、getdesign Skillをインストールして、エージェント自身のツールでデザインコンテキストを抽出させます。CLIとTypeScript SDKはBun上でローカルに実行でき、HTTP APIはホスト実行をサポートします。