Codex・Claude Codeで使う無料UIデザインスキル

スキルを導入して、最初の画面を設計

ZIPをダウンロードして展開し、ai-ui-designer フォルダーをお使いのCodexまたはClaude Codeのスキルディレクトリに配置します。

1. 1.スキルのファイルを配置

   SKILL.mdが ai-ui-designer フォルダーの直下にあることを確認します。設計指示、参考資料、補助スクリプトが含まれます。

   Codex

   ~/.agents/skills/ai-ui-designer/

   Claude Code

   ~/.claude/skills/ai-ui-designer/

   展開時にフォルダーが二重になっていないか確認してください。

2. 2.ページの目的と主要操作を指定

   アシスタントでスキルを呼び出し、対象ユーザーと必要な内容を伝えます。

   Codex: $ai-ui-designer
   Claude Code: /ai-ui-designer
   
   価値提案、機能紹介、登録ボタンを含む製品トップページのSVGワイヤーフレームを作ってください。

3. 3.SVGを開いて修正を依頼

   ブラウザーやSVGビューアーで確認し、見出しを目立たせる、主要ボタンの周囲を広げるなど具体的に指示します。

   見つからない場合は配置先とSKILL.mdを確認。Codexは変更を自動検出しますが、表示されなければ再起動してください。Claude Codeでは / メニューを確認します。

アシスタントとモデルへのアクセスは別途ご用意ください。ローカルのパック補助スクリプトにはPython 3.9以上が必要です。任意のサイト配布パックのダウンロードには有効な有料サブスクリプションが必要です。

画面設計の判断を、一段階ずつ

無料ダウンロードに含まれるもの

導入前によくある質問

サブスクリプションやパックの購入は必要？

スキルは無料でダウンロードでき、自分の要件から設計できます。このサイトの任意のシーンパックをダウンロードする場合のみ、有効な有料契約が必要です。

CodexとClaude Codeでどう呼び出す？

指定の場所に配置後、Codexでは $ai-ui-designer、Claude Codeでは /ai-ui-designer を使い、設計したい内容を伝えてください。

動くアプリも生成できる？

このワークフローの出力は静的SVGのワイヤーフレームとUIデザインです。コード、バックエンド、実際の操作の実装は別途必要です。

スキルが一覧に出ないときは？

ai-ui-designer 直下にSKILL.mdがあるか、配置先が正しいか確認してください。Codexは再起動もお試しください。Claude Codeでは /ai-ui-designer を確認します。