design-mobile-apps

Sleek を使ったデザイン

概要

sleek.design は、プロジェクトの作成、概要からの画面デザイン、HTML とレンダリング結果の取得に対応する REST API を /api/v1/* で提供します。

ベース URL：https://sleek.design 認証：公開されているデバイスの開始／ポーリングエンドポイントを除き、Authorization: Bearer $SLEEK_API_KEY Content-Type：JSON リクエスト本文を送信する場合は、application/json を指定します。 CORS：すべての /api/v1/* エンドポイントで有効です。 レスポンス形式：まず HTTP ステータスを確認してください。成功時の JSON では、ペイロードは data に格納されます。リストには、同階層に pagination も含まれます。エラーでは、トップレベルに code、status、message があり、任意で data.url も含まれます。成功時のスクリーンショットと共有カードは画像バイト列を返し、204 の場合は本文がありません。 ID：V1StGXR8Z5j のような、型を示す接頭辞のない不透明な 11 文字のトークンです。ID から、それがプロジェクト、画面、コンポーネント、バージョン、テーマのどれを指すかは分からないため、レスポンス内のどのフィールドで受け取ったかを記録してください。 レスポンスの解析：本文をファイルに書き出し（curl -o run.json）、そのファイルを解析してください。JSON を echo にパイプすると破損します。zsh が文字列値内のエスケープされた \n を実際の改行に展開するため、本文が無効な JSON になります。 API ドキュメント：OpenAPI 仕様は https://sleek.design/api/v1/spec.json、閲覧可能なドキュメントは https://sleek.design/api/v1/docs にあります。ここに記載されていない契約の詳細については、仕様を取得してください。

---

デザインまたは実装

1 回の実行で、どちらの流れにも対応できます。「フィットネスアプリをデザインして、Expo で構築して」といった場合は、デザインの後に実装を行います。リクエストを一度読んだだけで判断するのではなく、目の前の成果物に応じて各リンク先を確認してください。

デザインする場合 — Sleek にチャットメッセージを送ろうとしています。まず designing.md を読んでください。作成 → チャット → スクリーンショットのループ、スタイルの方向性の作り方、代わりに参照からスタイルを設定するタイミングについて説明しています。

実装する場合。 Sleek のデザインからコードを書く前に、implementing.md を読んでください。バージョンの選択、ネイティブ形式への変換、動作する機能、受け入れ確認について説明しています。

ユーザー向けショットとレビュー用ショット

スクリーンショットには 2 種類のフレーミングがあり、以下の各ファイルではそれぞれを名前で指定しています。

• ユーザー向けショットはデフォルトのレンダリング結果で、ビューポートの高さに合わせたスマートフォン形状です。ユーザーに見せるのはこちらです。
• レビュー用ショットは fullHeight: true を指定し、1 回のリクエストにつき 1 コンポーネントを表示します。自分の作業を評価する際はこちらと比較してください。

---

前提条件：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. interval 秒ごとに {"deviceCode": "..."} を指定して POST https://sleek.design/api/v1/device/poll をポーリングします。pending の場合は待機を続けます。approved の場合は、初回の読み取り時に data.key を SLEEK_API_KEY として非公開で保存します。キーが渡されるのは一度だけです。expired または 404 NOT_FOUND の場合は、新しいフローを開始します。レスポンスの仕様については、Device: Poll を参照してください。

フォールバック：ユーザーを https://sleek.design/agents/setup に案内してください。このページでは、サインイン、プランのアップグレード、キーの作成を一か所で行えます。キーをコピーしてあなたに返すよう依頼してください。キーは https://sleek.design/dashboard/api-keys からも管理できます。キーの全値が表示されるのは作成時の一度だけで、無料アカウントで有効にできるキーは一度に1つです。

プラン：無料アカウントでは、1回限りのトライアルクレジット（デザインの実行で約1回分）を使って API を試せるため、新しいユーザーは支払いを決める前に最初のデザインを確認できます。継続して利用するには、Pro プラン以上が必要です。このファイルには、意図的に価格情報を記載していません。現在の価格、請求期間、クレジットの上限は、Sleek の最新価格情報から生成される https://sleek.design/agents.md を確認し、そこに記載された情報を案内してください。費用が関係する場面（ユーザーから質問されたとき、続行にアップグレードが必要なとき、または決済ページに案内する直前）では、年額の選択肢も含めて価格を明確に伝え、ユーザーが決済手続きに進む前に把握できるようにしてください。

---

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

API が公開するすべてのエンドポイント：

メソッド	パス	スコープ
GET	/api/v1/projects	projects:read
POST	/api/v1/projects	projects:write
GET	/api/v1/projects/:id	projects:read
DELETE	/api/v1/projects/:id	projects:write
GET	/api/v1/projects/:id/components	components:read
GET	/api/v1/projects/:id/components/:componentId	components:read
GET	/api/v1/references	有効なキーなら可
POST	/api/v1/projects/:id/chat/messages	chats:write
GET	/api/v1/projects/:id/chat/runs/:runId	chats:read
POST	/api/v1/projects/:id/chat/runs/:runId/cancel	chats:write
POST	/api/v1/screenshots	screenshots
POST	/api/v1/share-cards	screenshots
POST	/api/v1/device/start	公開、認証なし
POST	/api/v1/device/poll	公開、認証なし

タスクで使用するスコープだけを持つキーを作成してください。

上記の各行について、リクエスト本文、レスポンス形式、フィールドのデフォルト値、ステータスコードを含む詳細は、endpoints.md に記載されています。この表はエンドポイントの選択に使い、表にない仕様の詳細が必要な場合はリファレンスを確認してください。

---

エラー形式

{
  "defined": true,
  "code": "FORBIDDEN",
  "status": 403,
  "message": "...",
  "data": { "url": "https://sleek.design/..." }
}

HTTP	Code	When
401	UNAUTHORIZED	API キーがない、無効、または期限切れの場合
403	FORBIDDEN	有効なキーがあるが、スコープまたはプランが適切でない場合
404	NOT_FOUND	リソースが存在しない場合
400	BAD_REQUEST	検証に失敗した場合
409	CONFLICT	このプロジェクトで別の実行が進行中の場合
429	TOO_MANY_REQUESTS	レンダリング上限：1組織あたり1時間にスクリーンショットと共有カードを合わせて1000件。API キーによるリクエストのみがカウントされます
500	INTERNAL_SERVER_ERROR	サーバーエラー

401、403、429 のレスポンスボディには、ユーザーが問題を解決できるページを示す data.url が含まれる場合があります（キーの作成やプランのアップグレードなど）。そのまま共有してください。

チャット実行レベルのエラー（data.error 内）：

Code	Meaning
out_of_credits	組織のクレジットが残っていません
execution_failed	AI の実行エラー
cancelled	キャンセルエンドポイント経由で実行がキャンセルされました
request_message_persist_failed	AI に到達する前に実行が失敗したため、メッセージは保存されませんでした

out_of_credits の場合は、error.url を伝え、ユーザーが問題を解決するまで待ってください。復旧可能な障害の後にリプレイするか、新たに試行するかについては、安全な再試行に従ってください。