📦 その他コミュニティ

cocos2d-cli

ユーザーが提供したUIスクリーンショットから、白抜きデザインのプレハブを自動生成するSkill。

📜 元の英語説明(参考)

用户提供 UI 截图并要求生成白盒预制体时，使用此技能

🇯🇵 日本人クリエイター向け解説

一言でいうと

ユーザーが提供したUIスクリーンショットから、白抜きデザインのプレハブを自動生成するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

cocos2d-cli

Cocos Creator CLI ツールは、JSON 記述によるプレハブ/シーンの生成、およびスクリーンショットプレビューをサポートしています。

使用する場面

UI デザインを Cocos Creator のホワイトボックスプレハブに再現する必要がある場合
エディターを開かずに JSON 記述の UI 効果を素早くプレビューする必要がある場合
既存のシーン/プレハブに対して一括クエリまたは変更を行う必要がある場合

手順

1. コアワークフロー

JSON 記述 → screenshot プレビュー → 繰り返し調整 → create-prefab 生成

# JSON 効果をプレビュー
npx cocos2d-cli screenshot panel.json

# プレハブを生成
npx cocos2d-cli create-prefab panel.json assets/Panel.prefab

1.1 ホワイトボックスプレハブの作業サイクル

ユーザーが画像を入力し、「ホワイトボックスプレハブを生成」と要求した場合、直接一度にプレハブを出力するのではなく、以下の閉ループプロセスを実行します。

標準サイクル

まず UI スクリーンショットを分析します
- ページ全体のサイズと主要な領域の分割を識別します
- 背景、ヘッダー、カード、ボタン、タイトル、本文、リスト、区切り線、ポップアップ、マスク、角マークなどの構造を識別します
- 各要素のおおよその位置、幅、高さ、階層関係、配置方法、余白、カラーブロック、テキストスタイルを識別します
- ホワイトボックス段階で優先的に再現するもの：構造、階層、位置、サイズ、間隔、配置、カラーブロック、テキストプレースホルダー
- ホワイトボックス段階では、実際の画像リソースやピクセルレベルの視覚的詳細を要求しません
最初の JSON を生成します
- まずルートノードと主要なレイアウトの骨格を構築し、その後詳細ノードを補完します
- sprite を使用して背景、カード、ボタン、画像プレースホルダー、グループブロックを表現します
- label または richText を使用してタイトル、本文、説明テキストを表現します
- 命名は明確で読みやすいようにします。例：Root、Header、Panel、Title、Desc、BtnConfirm
CLI を使用して JSON をスクリーンショットします
- まず JSON をファイルに書き込む必要があります
- その後 npx cocos2d-cli screenshot <jsonファイル> ... を実行します
- スクリーンショットの幅と高さは、元の画像とできるだけ一致させるか、近づけます
スクリーンショットと元の画像を比較します
- 全体構造が一致しているか確認します
- 主要なブロック領域の位置、サイズ、上下関係が一致しているか確認します
- テキスト領域、ボタン領域、カード領域の配置と余白が近いか確認します
- 差異の種類を記録します：位置ずれ、サイズエラー、階層エラー、配置エラー、間隔の不一致、ノードの欠落、ノードの過剰、カラーブロックの不適切さ
差異がある場合は、JSON を修正します
- まずレイアウトの骨格の問題を修正し、その後局所的な問題を修正します
- 全体的にずれている場合は、まず親ノードのサイズ、アンカー、子ノードの配置方法を確認します
- テキストが揃っていない場合は、まず anchorX、width、horizontalAlign を確認します
- ブロック構造が似ていない場合は、まずコンテナの幅と高さ、子ノードの階層と間隔を確認します
再度スクリーンショットを撮り、比較を続けます
- JSON を修正 → screenshot → 元の画像と比較 を繰り返し実行します
- ホワイトボックスの結果に明らかな構造的差異がなくなるまで続けます
最終的な JSON からプレハブを生成します
- スクリーンショットの比較が通過した後のみ、npx cocos2d-cli create-prefab <jsonファイル> <出力.prefab> を実行します

強制要件

スクリーンショットの分析後、直接プレハブを生成しないでください
少なくとも1回の screenshot プレビューを必ず経てください
スクリーンショットの結果と元の画像にまだ明らかな差異がある場合、必ず JSON の修正を続けてください
「差異がない」とはホワイトボックスの基準で理解してください：実際の素材や装飾的な詳細は欠けていても構いませんが、主要な構造、主要な位置関係、主要なサイズ比率に明らかな誤りがあることは許されません

推奨される実行ペース

まず UI 構造分析を出力します
次に JSON を生成します
次にスクリーンショットプレビューを実行します
次にスクリーンショットと元の画像の差異を説明します
次に JSON を修正します
通過するまで繰り返します
最後にプレハブを生成します

直接従うことができる疑似フロー

UI スクリーンショット + 「ホワイトボックスプレハブを生成」を受信
→ UI スクリーンショットを分析
→ first-pass JSON を生成
→ json ファイルとして保存
→ screenshot を実行
→ スクリーンショットと元の画像を比較
→ まだ明らかな差異がある場合は、JSON を修正して再度 screenshot
→ 明らかな差異がなくなった場合は、create-prefab を実行

2. JSON ノード記述形式

{
  "name": "ノード名称",
  "width": 400,
  "height": 300,
  "x": 0,
  "y": 0,
  "anchorX": 0.5,
  "anchorY": 0.5,
  "color": "#336699",
  "opacity": 255,
  "components": [
    "sprite",
    { "type": "label", "string": "テキスト", "fontSize": 32, "horizontalAlign": "left" },
    { "type": "richText", "string": "普通<color=#ff0000>赤色</color>文字", "fontSize": 28 }
  ],
  "children": []
}

ノード属性の説明

属性	タイプ	説明
name	string	ノード名称、エディターの階層に表示されます
x, y	number	親ノードの中心からのオフセット（座標系の説明を参照）
width, height	number	ノードの幅と高さ
anchorX, anchorY	number (0-1)	アンカーポイント、デフォルト 0.5 は中心を表します
color	string (#RRGGBB)	ノードの色、Sprite の塗りつぶし/Label の文字色に影響します
opacity	number (0-255)	透明度
rotation	number	回転角度（度）
scaleX, scaleY	number	スケール
active	boolean	アクティブかどうか
components	array	コンポーネントリスト（コンポーネントの説明を参照）
children	array	子ノードリスト（再帰的）

3. 座標系の説明（Cocos 中心アンカー）

Cocos のデフォルトアンカーはノードの中心（anchorX=0.5, anchorY=0.5）にあり、x/y は親ノードの中心からのオフセットです。

計算例：親ノードの幅 660、子ノードの幅 150、左に 30px の余白を空ける場合

x = -(660/2) + 30 + (150/2) = -225

左寄せ/右寄せレイアウトの推奨記述方法（anchorX + horizontalAlign を使用）：

// 左寄せテキスト：ノードアンカーを左に設定し、テキスト配置を left に設定
{
  "anchorX": 0,
  "x": -330,
  "width": 300,
  "components": [
    { "type": "label", "string": "送金者", "horizontalAlign": "left" }
  ]
}

// 右寄せテキスト：ノードアンカーを右に設定し、テキスト配置を right に設定
{
  "anchorX": 1,
  "x": 330,
  "width": 300,
  "components": [
    { "type": "label", "string": "¥40.00", "horizontalAlign": "right" }
  ]
}

この方法の利点：アンカーがノードの配置基準を制御し、horizontalAlign がノード内のテキストの配置を制御するため、セマンティクスが明確になり、オフセット量を暗算する必要がありません。

4. コンポーネントタイプの説明

sprite

スプライト、単色の四角形として表示されます（色はノードの color で制御されます）

"sprite"
// または
{ "type": "sprite", "sizeMode": 0 }

label

テキストコンポーネント

{
  "type": "label",
  "string": "テキスト内容",
  "fontSize": 28,
  "lineHeight": 40,
  "horizontalAlign": "left",    // left / center / right、デフォルトは center
  "verticalAlign": "center",      // top / center / bottom、デフォルトは center
  "color": "#ffffff"              // 互換性のある記述方法、ノードの color と同じ効果
}

注意：label の文字色は実際にはノードの color で制御され、コンポーネント内の color は互換性のある記述方法です。

重要な補足：

label はデフォルトで内容に合わせて自動調整して表示されるため、width / height を安定したテキストレイアウトの手段として使用しないでください
anchorX / anchorY はノードをアンカーし、テキストのストローク自体の視覚的な中心ではありません
horizontalAlign / verticalAlign は主にノード内のテキストの配置を制御し、複数のテキストノードを組み合わせたレイアウトを自動的に解決できるわけではありません
重要なテキストに遭遇した場合は、screenshot の実際のレンダリング結果を基準にし、JSON パラメータだけで最終的な効果を想像しないでください

richText

リッチテキスト、BBCode の部分的なスタイルをサポートします

{
  "type": "richText",
  "string": "申請<color=#3cb034>40円の送金準備</color>を開始しました<br/>速やかに承認してください！",
  "fontSize": 28,
  "lineHeight": 40,
  "maxWidth": 600,
  "horizontalAlign": "left"       // left / center / right
}

サポートされている BBCode タグ：

<color=#RRGGBB>テキスト</color> — 部分的な色変更
<size=30>テキスト</size> — 部分的なフォントサイズ
テキスト — 太字
テキスト — 斜体
テキスト — 下線
  — 改行

重要：richText のノード color と BBCode color を混用しないでください。実行時には BBCode が優先されます。

widget

アラインメントコンポーネント

{
  "type": "widget",
  "isAlignLeft": true,
  "isAlignRight": true,
  "isAlignTop": true,
  "isAlignBottom": true,
  "left": 0,
  "right": 0,
  "top": 0,
  "bottom": 0
}

button

ボタンコンポーネント（通常は sprite と組み合わせて使用します）

"button"

5. CLI コマンドリファレンス

# JSON 効果をプレビュー（スクリーンショット）
npx cocos2d-cli screenshot <jsonファイル> [オプション]
  -o, --output <ディレクトリ>     出力ディレクトリ、デフォルトは現在のディレクトリ
  --width <数値>          ビューポートの幅、デフォルトは 750
  --height <数値>         ビューポートの高さ、デフォルトは 1334
  --debug-bounds          ノードの境界ボックスと名前を重ねて表示

# プレハブを生成
npx cocos2d-cli create-prefab [JSONファイル] <出力.prefab>

# シーンを生成
npx cocos2d-cli create-scene [JSONファイル] <出力.fire>

# ノードツリーを表示
npx cocos2d-cli tree <シーンまたはプレハブファイル>

# ノード属性を取得
npx cocos2d-cli get <ファイル> <ノードパス> [属性名|コンポーネントタイプ]

# ノード属性を設定
npx cocos2d-cli set <ファイル> <ノードパス> <属性名> <値>

# コンポーネントを追加
npx cocos2d-cli add-component <ファイル> <ノードパス> <タイプ>

6. 注意事項

JSON パラメータはファイルパスである必要があります。JSON 文字列を直接渡すことはサポートされていません。
色の説明：ノードの color は Sprite の塗りつぶし色と Label の文字色を制御します。Label コンポーネント内の color は互換性のある記述方法であり、実際にはノードに同期されます。
richText の色：BBCode <color=#xxx> を使用して部分的な色を設定し、ノードの color に依存しないでください。
座標計算：デフォルトのアンカーは中心にあります。複雑なレイアウトでは、anchorX=0（左寄せ）または anchorX=1（右寄せ）を horizontalAlign と組み合わせて使用することをお勧めします。
テキストの組み合わせルール：複数のテキストが視覚的に一体となって構成される場合、それらを互いに独立した通常の label としてバラバラに配置しないでください。まず親ノードを確立し、このテキストグループを組み合わせブロックとしてレイアウトを構成し、その後それぞれの子 label を配置すべきです。
スクリーンショットの修正ルール：大きな数字 + 小さな文字、金額 + 単位、タイトル + ステータスワードのような組み合わせテキストは、screenshot で実際の効果を確認し、微調整する必要があります。一度のパラメータ設定で直接正しい視覚結果が得られると仮定してはいけません。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

cocos2d-cli

Cocos Creator CLI 工具，支持通过 JSON 描述生成预制体/场景，以及截图预览。

When to use

需要将 UI 设计稿还原为 Cocos Creator 白盒预制体时
需要快速预览 JSON 描述的 UI 效果而不打开编辑器时
需要对现有场景/预制体进行批量查询或修改时

Instructions

1. 核心工作流

JSON 描述 → screenshot 预览 → 迭代调整 → create-prefab 生成

# 预览 JSON 效果
npx cocos2d-cli screenshot panel.json

# 生成预制体
npx cocos2d-cli create-prefab panel.json assets/Panel.prefab

1.1 白盒预制体工作循环

当用户输入一张图，并要求“生成白盒预制体”时，执行下面这个闭环流程，而不是直接一次性输出 prefab。

标准循环

先分析 UI 截图
- 识别页面整体尺寸和主要区域划分
- 识别背景、头部、卡片、按钮、标题、正文、列表、分割线、弹窗、遮罩、角标等结构
- 识别每个元素的大致位置、宽高、层级关系、对齐方式、留白、颜色块、文字样式
- 白盒阶段优先还原：结构、层级、位置、尺寸、间距、对齐、颜色块、文本占位
- 白盒阶段不要求真实图片资源，不要求像素级视觉细节
生成第一版 JSON
- 先搭建根节点和主要布局骨架，再补充细节节点
- 使用 sprite 表示背景、卡片、按钮、图片占位、分组块
- 使用 label 或 richText 表示标题、正文、说明文字
- 命名保持清晰可读，例如：Root、Header、Panel、Title、Desc、BtnConfirm
使用 CLI 对 JSON 截图
- 必须先把 JSON 写入文件
- 然后执行 npx cocos2d-cli screenshot <json文件> ...
- 截图宽高尽量与原图一致或接近
对比截图与原图
- 检查整体结构是否一致
- 检查主要块级区域的位置、大小、上下关系是否一致
- 检查文本区、按钮区、卡片区的对齐和留白是否接近
- 记录差异类型：位置偏移、尺寸错误、层级错误、对齐错误、间距不一致、漏节点、多节点、颜色块不合理
如果有差异，修改 JSON
- 优先修正布局骨架问题，再修正局部问题
- 如果整体偏移，优先检查父节点尺寸、锚点、子节点定位方式
- 如果文字不对齐，优先检查 anchorX、width、horizontalAlign
- 如果块级结构不像，优先检查容器宽高、子节点层级和间距
再次截图，继续对比
- 重复执行：修改 JSON → screenshot → 对比原图
- 直到判断白盒结果已经没有明显结构性差异
从最终 JSON 生成 prefab
- 只有在截图对比通过后，才执行：npx cocos2d-cli create-prefab <json文件> <输出.prefab>

强制要求

不要在分析完截图后直接生成 prefab
必须至少经过一轮 screenshot 预览
如果截图结果和原图仍有明显差异，必须继续修改 JSON
“没有差异”按白盒标准理解：允许缺少真实素材和装饰细节，但不允许主要结构、主要位置关系、主要尺寸比例明显错误

可直接遵循的伪流程

收到 UI 截图 + “生成白盒预制体”
→ 分析 UI 截图
→ 生成 first-pass JSON
→ 保存为 json 文件
→ 执行 screenshot
→ 对比截图与原图
→ 如果仍有明显差异，则修改 JSON 并再次 screenshot
→ 如果已无明显差异，则执行 create-prefab

2. JSON 节点描述格式

{
  "name": "节点名称",
  "width": 400,
  "height": 300,
  "x": 0,
  "y": 0,
  "anchorX": 0.5,
  "anchorY": 0.5,
  "color": "#336699",
  "opacity": 255,
  "components": [
    "sprite",
    { "type": "label", "string": "文本", "fontSize": 32, "horizontalAlign": "left" },
    { "type": "richText", "string": "普通<color=#ff0000>红色</color>文字", "fontSize": 28 }
  ],
  "children": []
}

节点属性说明

属性	类型	说明
name	string	节点名称，显示在编辑器层级中
x, y	number	相对于父节点中心的偏移（见坐标系说明）
width, height	number	节点宽高
anchorX, anchorY	number (0-1)	锚点，默认 0.5 表示中心
color	string (#RRGGBB)	节点颜色，影响 Sprite 填充/Label 文字色
opacity	number (0-255)	透明度
rotation	number	旋转角度（度）
scaleX, scaleY	number	缩放
active	boolean	是否激活
components	array	组件列表（见组件说明）
children	array	子节点列表（递归）

3. 坐标系说明（Cocos 中心锚点）

Cocos 默认锚点在节点中心（anchorX=0.5, anchorY=0.5），x/y 是相对父节点中心的偏移。

计算示例：父节点宽 660，子节点宽 150，要靠左留 30px 边距

x = -(660/2) + 30 + (150/2) = -225

靠左/靠右布局推荐写法（使用 anchorX + horizontalAlign）：

// 靠左对齐文字：节点锚点设为左边，文字对齐设为 left
{
  "anchorX": 0,
  "x": -330,
  "width": 300,
  "components": [
    { "type": "label", "string": "打款人", "horizontalAlign": "left" }
  ]
}

// 靠右对齐文字：节点锚点设为右边，文字对齐设为 right
{
  "anchorX": 1,
  "x": 330,
  "width": 300,
  "components": [
    { "type": "label", "string": "¥40.00", "horizontalAlign": "right" }
  ]
}

这样做的好处：锚点控制节点定位基准，horizontalAlign 控制文字在节点内的排列，语义清晰，不需要心算偏移量。

4. 组件类型说明

sprite

精灵，显示为纯色方块（颜色由节点 color 控制）

"sprite"
// 或
{ "type": "sprite", "sizeMode": 0 }

label

文本组件

{
  "type": "label",
  "string": "文本内容",
  "fontSize": 28,
  "lineHeight": 40,
  "horizontalAlign": "left",    // left / center / right，默认 center
  "verticalAlign": "center",      // top / center / bottom，默认 center
  "color": "#ffffff"              // 兼容写法，效果等同于节点 color
}

注意：label 的文字颜色实际由节点 color 控制，组件内的 color 是兼容写法。

重要补充：

label 默认按内容自适应显示，不要把 width / height 当成稳定的文本排版手段
anchorX / anchorY 锚定的是节点，不是文字笔画本身的视觉中心
horizontalAlign / verticalAlign 主要控制文字在节点内的排列，不等于能自动解决跨多个文本节点的组合排版
遇到关键文本时，必须以 screenshot 的实际渲染结果为准，不要只凭 JSON 参数脑补最终效果

richText

富文本，支持 BBCode 局部样式

{
  "type": "richText",
  "string": "发起<color=#3cb034>准备40元打款</color>的申请<br/>请及时审批！",
  "fontSize": 28,
  "lineHeight": 40,
  "maxWidth": 600,
  "horizontalAlign": "left"       // left / center / right
}

支持的 BBCode 标签：

<color=#RRGGBB>文字</color> — 局部变色
<size=30>文字</size> — 局部字体大小
文字 — 加粗
文字 — 斜体
文字 — 下划线
  — 换行

重要：richText 的节点 color 和 BBCode color 不要混用，运行时以 BBCode 为准。

widget

对齐组件

{
  "type": "widget",
  "isAlignLeft": true,
  "isAlignRight": true,
  "isAlignTop": true,
  "isAlignBottom": true,
  "left": 0,
  "right": 0,
  "top": 0,
  "bottom": 0
}

button

按钮组件（通常配合 sprite 使用）

"button"

5. CLI 命令参考

# 预览 JSON 效果（截图）
npx cocos2d-cli screenshot <json文件> [选项]
  -o, --output <目录>     输出目录，默认当前目录
  --width <数值>          视口宽度，默认 750
  --height <数值>         视口高度，默认 1334
  --debug-bounds          叠加节点边界框和名称

# 生成预制体
npx cocos2d-cli create-prefab [JSON文件] <输出.prefab>

# 生成场景
npx cocos2d-cli create-scene [JSON文件] <输出.fire>

# 查看节点树
npx cocos2d-cli tree <场景或预制体文件>

# 获取节点属性
npx cocos2d-cli get <文件> <节点路径> [属性名|组件类型]

# 设置节点属性
npx cocos2d-cli set <文件> <节点路径> <属性名> <值>

# 添加组件
npx cocos2d-cli add-component <文件> <节点路径> <类型>

6. 注意事项

JSON 参数必须是文件路径，不支持直接传递 JSON 字符串
颜色说明：节点 color 控制 Sprite 填充色和 Label 文字色；Label 组件内的 color 是兼容写法，实际同步到节点
richText 颜色：使用 BBCode <color=#xxx> 设置局部颜色，不要依赖节点 color
坐标计算：默认锚点在中心，复杂布局建议使用 anchorX=0（靠左）或 anchorX=1（靠右）配合 horizontalAlign
文本组合规则：当多个文本共同组成一个视觉整体时，不要把它们当作互相独立的普通 label 分散硬摆；应先建立父节点，把这组文本作为一个组合块来组织布局，再分别放置子 label
截图校正规则：大数字 + 小文字、金额 + 单位、标题 + 状态词这类组合文本，必须通过 screenshot 回看实际效果并微调，不能假设一次参数设置就能直接得到正确视觉结果

cocos2d-cli

🇯🇵 日本人クリエイター向け解説

🎯 このSkillでできること

📦 インストール方法 (3ステップ)

📖 Skill本文(日本語訳)

cocos2d-cli

使用する場面

手順

1. コアワークフロー

1.1 ホワイトボックスプレハブの作業サイクル

標準サイクル

強制要件

推奨される実行ペース

直接従うことができる疑似フロー

2. JSON ノード記述形式

ノード属性の説明

3. 座標系の説明（Cocos 中心アンカー）

4. コンポーネントタイプの説明

sprite

label

richText

widget

button

5. CLI コマンドリファレンス

6. 注意事項

cocos2d-cli

When to use

Instructions

1. 核心工作流

1.1 白盒预制体工作循环

标准循环

强制要求

推荐执行节奏

可直接遵循的伪流程

2. JSON 节点描述格式

节点属性说明

3. 坐标系说明（Cocos 中心锚点）

4. 组件类型说明

sprite

label

richText

widget

button

5. CLI 命令参考

6. 注意事项