Roblox UI メーカーは何をしますか？

ライセンスが最優先。 アイコンは開発者が所有する1つのライセンス済みアイコンパックからのみ使用します。このスキルはアイコンやテクスチャをバンドルしていません。あなたのパックのライセンスを確認してください。ほとんどの有料パックは自分のゲームでの使用を許可していますが、再販、再配布、アセットパック、AI トレーニングは禁止しています（その場合、パックの PNG を画像モデルに送らないでください）。ゲームリポジトリでは、icons.json + コピースクリプトをコミットし、ライセンスが許可しない限りパック自体はコミットしないでください。テクスチャは https://ui-resources.com (UI_RESOURCES.md) から開発者自身がダウンロードします。クリエイターのクレジットを記載してください。

Figma インポートツールは既に Figma に存在するデザインのためのものです。このスキルは新しい UI のデザイン（またはスクリーンショットからの再作成）を HTML ファーストで行います。

ループ: リファレンス → トークン → HTML（全状態）→ 開発者が確認 → 学習 → インポート → 検証。 LESSONS.md を最初に読んでから何かに触ること（これまでに学んだすべてのルールと、その背景にあるバグが書かれています）。これは以下のどの記述よりも優先されます。

このスキルのファイル

ファイル	内容
`LESSONS.md`	すべてのルール + 理由。最初に読む。開発者のフィードバックをここに書き込む (REVIEW_LOOP.md)
`STYLE.md`	リファレンスをトークンに変換する方法、プリセット、CSS トークン → Roblox テーブル
`UI_RESOURCES.md`	ui-resources.com の説明、検索/ダウンロード方法、Stud テクスチャと配置場所
`PATTERNS.md`	HUD、ショップ、クレートリール + 確率、トースト、確認、ローディング、チュートリアル、バブル、ゴールピル、リスト
`PIPELINE.md`	HTML → JSON → Roblox の詳細: rbx.json、エクスポートマーカー、マッピングテーブル、元帳、テンプレート、コピー
`REVIEW_LOOP.md`	画面の表示方法、フィードバックの受け取り方、承認取得方法
`VERIFY.md`	モックレンダリング、プロパティスイープ、編集モードハーネス、プレイテストクリック、チェックリスト
`ROBLOX_FACTS.md`	測定済みエンジン + MCP ツールの事実 (inset, TextSize, uploads, captures)
`styles/`	`stud.css` (デフォルトプリセット)、`glass.css` (ダークシミュレータープリセット)
`templates/examples/`	動作する UI プロジェクト: `build.py`, `kit.css`, `icons.json`, `rbx.json`
`templates/luau/`	Builder, UIKit, NumberFormat, Theme, client/UI + Controller, Toasts, UpdateInPlace, PixelRows, ProgressiveReveal, NextGoal, CrateRoll, LoadingScreen, PropertySweep, WorldHitTest
`scripts/`	read_reference, copy_icons, cdp/export/dump, gen, ledger, assets, bundle, mock/mockshot/mockdiff, check_copies, luau_to_rbxmx; `remake/` = 1:1 測定ツール

以下では SK=<このスキルのフォルダ>（この SKILL.md が置かれているフォルダ）とします。必要なツール: python3 (PIL + numpy あり)、node 22+、Google Chrome（ヘッドレスレンダリング用、環境変数 CHROME で macOS のパスを上書き可能）、luau-analyze、ページ表示用のブラウザペインまたはブラウザ自動化ツール（Claude Code デスクトップでは mcp__Claude_Browser__*、ToolSearch でロード）、Luau を実行して .rbxmx ファイルをインポートできる Studio MCP サーバー（このスキルはコミュニティの robloxstudio MCP に合わせて作成されています）、および upload_image 用の組み込み Roblox_Studio MCP（ROBLOX_FACTS.md）。

1. 概要、リファレンス、スタイル（必須：スタイルリファレンス）

概要を取得する: どの画面か、何をするか、どのデータを表示するか、PC + スマホ。それぞれが必要とするすべての状態を列挙する。
スタイルリファレンス画像は必須です。 開発者が指定したものを使ってください。ない場合: 一度だけ尋ねます（「希望のスタイルのスクリーンショットを送ってください。または Stud スタイルを使用します」）。開発者が「そのままで」と言ったら Stud プリセット。ほとんどのゲームは Stud です。
まず手順4でプロジェクトセットアップを行います（ui/ を作成します）。その後、リファレンスを ui/ref.png として保存します。レイアウトリファレンス（別のゲームのショップなど）は STYLE リファレンスとは別です。
ui/ 内から読み取ります（STYLE.md セクション2）: python3 $SK/scripts/read_reference.py ref.png → パレット、アウトラインピクセル、テクスチャヒント、テキストスタイル、密度 + ref_palette.png、ref_zoom.png（Stud/光沢を確認するため）およびドラフト style.css。各値を目視で確認し、選択したプリセットの上書きのみを保持します。
「ゲームXのように」= インスパイアされたものであり、コピーではありません。開発者が「これを1:1で再作成して」と言った場合を除きます（その場合は LESSONS セクション7と scripts/remake/ を参照）。

2. ui-resources.com からのテクスチャ

Stud スタイルには必ず Stud テクスチャが必要です。このスキルはバンドルしていません。自分で https://ui-resources.com から「Stud texture」（タグ Stud）をダウンロードし、必要に応じてリアルな PNG に変換し、プロジェクト内の ui/stud.png として保存します（タイルあたり4x4 Stud、112px でタイル、オーバーレイブレンド）。その他（紙、サンバースト、ハーフトーン、背景）については、最初にサイトを検索し、ダウンロードを ui/tex/ に保存します（UI_RESOURCES.md: フィルター、?tag=Stud、遅延ロード URL の読み取り、WebP という名前の PNG に対する file + sips）。 build.py のヘッダーにクリエイターのクレジットを記載します。

3. アイコン: あなたのアイコンパックのみ

アイコンは開発者が所有する1つのライセンス済みベクターアイコンパックからのみ使用します（プロジェクトごとに1つのベクターパック。パックを混在させないでください）。絵文字は絶対に使用しません。アイコンは、パックのフォルダまたはカタログを参照または検索して見つけます（例: find <pack> -iname '*coin*'）。手順4のセットアップ後、ui/icons.json を編集し（`{

Roblox UI メーカー