design-mobile-apps

Sleekを使ったデザイン

概要

sleek.design は、AIを活用したモバイルアプリデザインツールです。REST API（/api/v1/*）を介して、プロジェクトの作成、作成したいものをプレーンな言語で記述し、レンダリングされた画面を受け取ることができます。すべての通信はベアラートークン認証を使用した標準的なHTTPです。

ベースURL: https://sleek.design 認証: すべての /api/v1/* リクエストに Authorization: Bearer $SLEEK_API_KEY を付与 Content-Type: application/json（リクエストとレスポンス） CORS: すべての /api/v1/* エンドポイントで有効 レスポンスの解析: ボディをファイル（curl -o run.json）に書き出して解析してください。JSONを echo でパイプしないでください。zshでは、文字列値内のエスケープされた \n が実際の改行に展開され、ボディが無効なJSONになります。 APIドキュメント: OpenAPIスペックは https://sleek.design/api/v1/spec.json で、ブラウザ閲覧可能なドキュメントは https://sleek.design/api/v1/docs にあります。ここに記載されていない契約の詳細については、スペックを取得してください。

---

前提条件: APIキー

SLEEK_API_KEY が設定されていない場合は、デバイスフローを使用して、ユーザーが生のキーを直接扱わないようにします。

1. POST https://sleek.design/api/v1/device/start（認証不要）にボディ {"source": "your-tool-slug"} を付けてリクエストします。レスポンスには、verificationUrl、人間が確認可能な userCode、秘密の deviceCode、およびポーリング間隔 interval（秒）が含まれます。
2. ユーザーに verificationUrl と userCode を表示し、承認する前にコードが一致することを確認するよう伝えます。
3. POST https://sleek.design/api/v1/device/poll に {"deviceCode": "..."} を付けて、interval 秒ごとにポーリングします。ユーザーが承認すると、ポーリングは {"status": "approved", "key": "sk_..."} を1回だけ返します。これを SLEEK_API_KEY として保存します。コードは15分で期限切れになります。expired が返された場合は、最初からやり直します。

フォールバック: ユーザーを https://sleek.design/agents/setup に送信します。このページでは、サインイン、プランアップグレード、キー作成がまとめて行われます。そして、キーを貼り付けて返すよう依頼します。キーは https://sleek.design/dashboard/api-keys でも管理できます。完全なキー値は作成時に一度だけ表示されます。

プラン: 無料アカウントは、1回限りのトライアルクレジット（約1回のデザイン実行分）でAPIを試すことができます。そのため、新規ユーザーは支払い前に最初のデザインを見ることができます。継続的な使用には、Proプラン以上（月額$49.99、年額$360で月額$30、年間20,000 AIクレジット、約650画面相当）が必要です。コストが重要になる場合（ユーザーが尋ねた場合、継続にアップグレードが必要な場合、支払いページに誘導しようとしている場合）、年間オプションを含めて、この価格を明確に伝えてください。支払いのステップを予告なく行わないでください。

キーのスコープ

スコープ	有効になる操作
projects:read	プロジェクトの一覧表示/取得
projects:write	プロジェクトの作成/削除
components:read	プロジェクト内のコンポーネントの一覧表示
chats:read	チャット実行ステータスの取得
chats:write	チャットメッセージの送信
screenshots	コンポーネントのスクリーンショットをレンダリング

タスクに必要なスコープのみを使用してキーを作成してください。

---

セキュリティとプライバシー

• 単一ホスト: すべてのリクエストは https://sleek.design にのみ送信されます。データがサードパーティに送信されることはありません。
• HTTPSのみ: すべての通信はHTTPSを使用します。APIキーは、Sleekエンドポイントへの Authorization ヘッダーでのみ送信されます。
• 最小限のスコープ: タスクに必要なスコープのみを使用してAPIキーを作成します。短期間または失効可能なキーを推奨します。
• 画像URL: チャットメッセージで imageUrls を使用する場合、それらのURLはSleekのサーバーによってフェッチされます。機密コンテンツを含むURLを渡さないでください。

---

デザイン

以下で使用されるすべてのエンドポイントの完全なリクエスト/レスポンス形式は、APIリファレンス にあります。

1. プロジェクトを作成する

プロジェクトがまだ存在しない場合は、POST /api/v1/projects で作成します。リクエストから名前を派生させます。

各プロジェクトには、独自のテーマ、スタイル、デザインシステムがあります。ユーザーが複数のデザインバリエーションを希望する場合は、バリエーションごとに個別のプロジェクトを作成します。

2. チャットメッセージを送信する

POST /api/v1/projects/:id/chat/messages でリクエストを送信します。Sleekはメッセージから画面のコンテンツとレイアウトを計画し、スタイルを指定しなければ視覚的なスタイルを考案します。リクエストを画面ごとに分解したり、ユーザーが要求していない製品詳細を追加したりせず、意図全体を単一のメッセージとして送信してください。ユーザーが特定の画面を説明した場合は、それらを含めてください。Sleekは、計画する余地を与えられると、よりリッチなデザインを生成します。

スタイルの方向性を記述する: ユーザーがそれを根拠づける何か（参考画像、好きなアプリ、雰囲気を表す形容詞、避けたいもの）を与えた場合、またはバリエーションを生成する場合（バリエーションごとに1つの方向性）に、必ず記述します。リクエストが裸のままの場合のみ、そのまま変更せずに渡します。スタイルの方向性は、1つの包括的な段落で、メッセージに含めます。内容は、ムード（2〜3の形容詞）、カラー戦略（ロジック。16進数コードではない）、タイポグラフィの雰囲気、レイアウトの哲学、コンポーネントスタイル（radius、ボーダーとシャドウの使い分け、ナビゲーションの扱い）、画像とイラストのスタイル、1つか2つの特徴的なディテールをカバーします。パレット、タイプの方向性、全体的な雰囲気を決定してください。単にムードを設定するだけでは、方向性ではなくヒントとして読み取られます。意見を持ち、曖昧にしないでください。個性は、珍しいレイアウトやナビゲーションではなく、色、タイプ、画像に込めてください。

ユーザーが与えたものを拡張し、決して矛盾しないでください。ユーザーが参考画像や好きなアプリを指し示した場合、それぞれを調査し、方向性に取り入れたものを反映させてください。Sleekは imageUrls として渡された画像のみを見るため、ローカルのものについては、方向性を通じてそれらの参考情報がSleekに伝わります。パターンを借用しても、ソースのブランディング、コンテンツ、名前は借用しないでください。

スタイルの方向性または referenceId のいずれかを使用し、両方は使用しないでください。リファレンスには、独自の完全なスタイルガイドが既に含まれています。

リファレンスでスタイルをシードする: Sleekは、デザインリファレンスのカタログをキュレーションしています。ユーザーが特定のルック＆フィールを希望したり、スタイルオプションを尋ねたりした場合は、GET /api/v1/references でそれらを一覧表示し（各リファレンスには name と表示可能な previewImageUrls があります）、選択されたIDをプロジェクトへの最初のメッセージで referenceId として渡すことで、そのスタイルガイドがデザイン全体にシードされます。

使用ツールを特定する: リクエストを行っているツールのスラグである source を常に送信してください。Sleekエディターは、これを使用して、実行がストリーミングされている間に誰がデザインしているかをユーザーに表示します。認識されている値: claude-code、claude、codex、chatgpt、cursor、openclaw、grok。使用ツールがリストにない場合は、短いケバブケースのスラグを送信してください（最大64文字）。認識されない値でも問題なく、汎用ラベルが表示されます。

ライブで見る: 実行はSleekエディターでリアルタイムにレンダリングされます。プロジェクトに最初のメッセージを送信した後、ユーザーにSleekで画面がデザインされる様子をライブで見ることができると伝え、エディターリンク https://sleek.design/project/:projectId を共有してください。ユーザーが要求しない限り、自分でブラウザを開かないでください。

ポーリング: チャットメッセージはデフォルトで非同期です。runId を受け取り、GET /api/v1/projects/:id/chat/runs/:runId をポーリングします。2秒間隔で開始し、10秒後に5秒にバックオフし、5分後にタイムアウトします。completed または failed で終了します。ステータスを読み取れない場合は、停止して報告し、「まだ完了していない」とは見なさないでください。?wait=true を使用してブロッキング呼び出しにすることもできます（最大300秒。タイムアウトして 202 が返された場合はポーリングにフォールバックします）。

特定の画面を編集する: target.screenId を使用して、変更を正しい画面に向けます。screenId は、実行の result.operations から、または GET /api/v1/projects/:id/components によって返される各コンポーネントの screenId フィールドから取得します。コンポーネントIDではありません。

一度に1つの実行: プロジェクトごとに許可されるアクティブな実行は1つだけです。409 CONFLICT が返された場合は、現在の実行が完了するまで待ってから次のメッセージを送信してください。ユーザーが気が変わった場合や、古い実行がプロジェクトをブロックしている場合は、それをキャンセルします（実行のキャンセル を参照）。異なるプロジェクトへのメッセージは並行して実行できます。複数のプロジェクトを同時に実行する場合は、非同期ポーリング（?wait=true ではなく）を使用してください。

安全な再試行: idempotency-key ヘッダー（255文字以下）を追加して、再送信が安全にリプレイされるようにします。サーバーは、重複を作成する代わりに、既存の実行を返します。

3. 結果を表示する

screen_created または screen_updated 操作を生成したチャット実行の後は常に、POST /api/v1/screenshots を使用してスクリーンショットを撮り、ユーザーに表示します。このステップは、実行が作成または更新したすべての画面のスクリーンショットをユーザーが確認した場合のみ完了と見なされます。実行を黙って完了しないでください。

• 新しい画面: 画面ごとに1枚のスクリーンショット + プロジェクト内の全画面の結合スクリーンショット1枚。
• 更新された画面: 影響を受ける画面ごとに1枚のスクリーンショット。

ユーザーが特定の背景色を明示的に要求しない限り、background: "transparent" を使用してください。

スクリーンショットはプロジェクトディレクトリに保存し（一時フォルダーではなく）、ユーザーが簡単に表示できるようにします。

表示とレビュー: デフォルトではビューポートのみをキャプチャします。これはユーザーにとって適切なフレーミングです。画面は電話画面のように見えます。しかし、自分の作業を評価するには不適切なフレーミングです。スクロールして見える部分はすべて切り取られてしまうからです。実行結果をレビューするときは、fullHeight: true（リクエストごとに1画面）で画面を再撮影し、スクロール可能なページ全体を確認してください。

スクリーンショットのリクエストは独立しているため、並行して発行してください。ユーザー向けのショットと fullHeight のレビューショットは同時に送信され、異なる画面のショットも同様です。「リクエストごとに1画面」というのは、各画像に何を含めるかを決定するものであり、送信速度を決定するものではありません。実際に 429 を受け取った場合にのみバックオフしてください。

ビューポートのみのスクリーンショットから、画面が不完全だと決して判断しないでください。 コンテンツが欠けているように見えても、ほとんどの場合は単にスクロールした先にあります。何かが欠けているとユーザーに伝えたり、Sleekにそれを追加するようフォローアップメッセージを送信したりする前に、fullHeight: true のスクリーンショット、または GET /api/v1/projects/:id/components/:componentId からのコンポーネントHTML（画面に何があるかの真実の情報源）で、画面全体を確認してください。スクリーンショットがデフォルトであり、ほとんどのレビューの質問にそれだけで答えることができます。コードを確認するのは、何かが欠けていると主張しようとする場合のみにしてください。レンダリングでは、実際に存在するものが省略される可能性があるため（高さ制限を超えた部分、折りたたまれたセクション、後続のカルーセルスライドなど）、否定的な結論を出す場合にのみ、第二の情報源を確認する価値があります。逆もまた真です。HTMLに存在する要素でも、ユーザーに表示されない可能性があります。

---

デザインの実装

ユーザーがデザインをコードで実装したい場合（プレビューだけでなく）、必ずコンポーネントのHTMLコードを取得してください。スクリーンショットだけに依存しないでください。

GET /api/v1/projects/:id/components/:componentId を使用して、各画面のコードを取得します。componentId はチャット実行の result.operations から取得します。

コンポーネントコードは大きくなる可能性があります。ファイルに保存するときは、テキスト出力にコンテンツを書き出さないでください。遅く、トークンを浪費します。代わりに、シェルコマンドを使用してAPIレスポンスをフェッチし、ディスクに直接書き込んでください（例：レスポンスボディをファイルにパイプする）。

使用するバージョン

各コンポーネントには versions[] 配列と activeVersion: number があります。デフォルトでは、versions[i].version === activeVersion のエントリを使用します。これは、Sleekに現在表示されているコードです。

ユーザーのプロンプトが特定のバージョンを指定している場合は、それに従います（下記のピン留めされたバージョンを参照）。

ピン留めされたバージョン

ユーザーのプロンプトには、現在のバージョンではなく特定の履歴バージョンを実装するように指示するピンブロックが含まれる場合があります。例：

... プロジェクトの現在のバージョンではなく、以下の正確な状態で:
- コンポーネント cmp_abc: バージョン ver_001
- コンポーネント cmp_def: バージョン ver_002
- テーマ thm_ghi: バージョン ver_003

ピンブロックを確認した場合は、activeVersion ではなく、これらの正確なバージョンを実装します。ピンブロックに指定されていないコンポーネントは、アクティブバージョンを引き続き使用します。テーマIDはピンブロック内でのみ現れます。このスキルは、それらを列挙するための個別のエンドポイントを公開していません。

正しいコードの取得

ピン留めされた各コンポーネントについて、versions[i].id が指定されたバージョンID（例：ver_001）と一致する versions[] 内のエントリを見つけ、その code を使用します。ピン留めされたコンポーネントに対して activeVersion にフォールバックしないでください。

ピン留めされたバージョンのスクリーンショット

componentVersionOverrides と themeVersionOverrides を POST /api/v1/screenshots に渡します。

{
  "componentIds": ["cmp_abc"],
  "projectId": "proj_xyz",
  "componentVersionOverrides": { "cmp_abc": "ver_001" },
  "themeVersionOverrides": { "thm_ghi": "ver_003" }
}

キーはコンポーネント/テーマの公開ID、値は対応する versions[i].id です。マップに存在しないエンティティは、アクティブバージョンにフォールバックします。プロンプトでピン留めされたバージョンが指定されている場合は、常にオーバーライドマップを含めてください。

HTMLプロトタイプ

コンポーネントの code は完全なHTMLドキュメントです。そのまま .html ファイルに保存します。ビルド手順は必要ありません。

ネイティブフレームワーク（React Native、SwiftUIなど）

HTMLコードとスクリーンショットの両方を一緒に使用します。

• HTMLコードは実装のリファレンスです。正確な構造、レイアウト、スタイリング、色、スペーシング、コンテンツ、画像URL、アイコン名が含まれています。
• スクリーンショットは視覚的なターゲットです。実装が意図された外観と一致しているかどうかを確認するために使用します。

HTMLは、どのように 構築するかを示し、スクリーンショットは、どのように見えるべきか を示します。

アイコン

Sleekは、prefix:name 形式（例：solar:heart-bold、material-symbols:search-rounded、lucide:settings）の Iconify アイコンを使用します。最も一般的なセットは Solar、Hugeicons、Material Symbols、MDI です。

HTMLコードから正確なアイコンを使用してください。異なるアイコンセットに置き換えないでください。アイコンのマッチング

---

クイックリファレンス: すべてのエンドポイント

プロジェクト

POST /api/v1/projects — プロジェクトを作成する

リクエスト:

{
  "name": "アプリ名"
}

レスポンス:

{
  "id": "proj_abc123",
  "name": "アプリ名",
  "createdAt": "2024-01-01T00:00:00Z"
}

GET /api/v1/projects — プロジェクトを一覧表示する

レスポンス:

{
  "data": [
    {
      "id": "proj_abc123",
      "name": "アプリ名",
      "createdAt": "2024-01-01T00:00:00Z"
    }
  ]
}

DELETE /api/v1/projects/:id — プロジェクトを削除する

---

チャット

POST /api/v1/projects/:id/chat/messages — チャットメッセージを送信する

リクエスト:

{
  "message": "買い物リストアプリを作成して。メイン画面にはアイテム一覧と追加ボタンが欲しいです。",
  "source": "claude-code",
  "referenceId": "ref_xyz",
  "imageUrls": ["https://example.com/reference.png"]
}

レスポンス:

{
  "runId": "run_def456",
  "status": "pending"
}

GET /api/v1/projects/:id/chat/runs/:runId — 実行ステータスをポーリングする

レスポンス:

{
  "status": "completed",
  "result": {
    "operations": [
      {
        "type": "screen_created",
        "screenId": "screen_ghi789",
        "componentId": "cmp_jkl012"
      }
    ]
  }
}

POST /api/v1/projects/:id/chat/cancel — アクティブな実行をキャンセルする

---

コンポーネント

GET /api/v1/projects/:id/components — プロジェクト内のすべてのコンポーネントを一覧表示する

レスポンス:

{
  "data": [
    {
      "id": "cmp_abc",
      "name": "メイン画面",
      "screenId": "screen_def",
      "activeVersion": 1,
      "versions": [
        {
          "id": "ver_001",
          "version": 1,
          "code": "<html>...</html>",
          "createdAt": "2024-01-01T00:00:00Z"
        }
      ]
    }
  ]
}

GET /api/v1/projects/:id/components/:componentId — 単一のコンポーネントを取得する（コードを含む）

---

スクリーンショット

POST /api/v1/screenshots — スクリーンショットを生成する

リクエスト:

{
  "componentIds": ["cmp_abc"],
  "projectId": "proj_def",
  "background": "transparent",
  "fullHeight": false,
  "componentVersionOverrides": {},
  "themeVersionOverrides": {}
}

レスポンス:

{
  "url": "https://sleek.design/screenshots/proj_def/shot.png"
}

---

リファレンス

GET /api/v1/references — 利用可能なデザインリファレンスを一覧表示する

レスポンス:

{
  "data": [
    {
      "id": "ref_abc",
      "name": "ミニマル＆クリーン",
      "previewImageUrls": ["https://..."]
    }
  ]
}

---

デバイス認証

POST /api/v1/device/start — デバイス認証フローを開始する

POST /api/v1/device/poll — ユーザーの承認をポーリングする