Sleek Agent Skills — AIでモバイルアプリをデザインするClaude Codeスキル
Sleekは、自然言語でモバイルアプリのUIをデザインできるAIツール。このリポジトリは、SleekをClaude Codeから操作するためのスキルを提供する。
仕組み
npx skills add sleekdotdesign/agent-skillsでインストールすると、Claude Codeから「ランニングアプリを作って」のような指示でSleekのAPIを叩き、画面を自動生成できるようになる。プロジェクト作成、チャットによるデザイン指示、スクリーンショット取得、コンポーネントHTMLの取得まで一通りカバーしている。
APIの構成
REST APIは9エンドポイントで構成される:
- Projects: 一覧・作成・取得・削除
- Components: プロジェクト内の画面コンポーネント取得
- Chat: 自然言語でデザイン指示を送り、非同期でAIが画面を生成
- Screenshots: レンダリング済みコンポーネントのPNG/WebPスクリーンショットを生成
チャットは非同期がデフォルトで、runIdをポーリングして完了を待つ。?wait=trueで最大300秒の同期モードも使える。
実装への橋渡し
生成されたデザインはHTMLコンポーネントとして取得でき、そのまま.htmlファイルとして保存できる。React NativeやSwiftUIなどネイティブフレームワークへの実装時は、HTMLコードを構造の参照に、スクリーンショットを見た目の照合に使う。アイコンはIconify形式（Solar、Hugeicons等）で、Iconify APIからSVGを取得して埋め込む。
要件
Sleek Proプラン以上のアカウントと、SLEEK_API_KEY環境変数が必要。
