ui-gen-record は何をしますか？

「UI ページ生成系リクエスト」のメタ情報（コスト、モデル、変更回数、成果物）を同一の Feishu 多次元テーブルにアーカイブします。

トリガーシナリオ

核心：.config.json は常に「現在アクティブなテーブル」を指します。「新規作成 / リンク」はこのポインタを変更するだけで、既存テーブル内のデータには影響しません。

シナリオ	ユーザーの発言	アクション
初回 + 「整理して」のみ	「テーブルに整理して / 多次元テーブルにアーカイブして / このリクエストを記録して」	`bootstrap.sh` を実行して新しいテーブルを作成し、その後 append
初回 + Feishu テーブルリンクあり	「このテーブルに整理して https://xxx.feishu.cn/base/...」	`link.sh <url>` を実行して既存テーブルにバインドし、その後 append
設定済み + 「整理して」のみ	「テーブルに整理して」	`.config.json` が現在指しているテーブルに直接 append
設定済み + 「新規作成」	「新しいテーブルを作成して / 新しく作り直したい」	`bootstrap.sh --force` を実行して新しいテーブルを作成し、ポインタを切り替え
設定済み + 新しいリンクを提示	「このテーブルに切り替えて https://...」	`link.sh --force <url>` を実行して新しいテーブルに切り替え

Feishu Base URL が明示的に付与された場合のみバインド分岐へ進みます。それ以外はデフォルトで新規作成または直接 append します。

依存関係

lark-cli（lark-cli auth login が完了していること）
実行ユーザーが Feishu にアカウントを持っており、open_id が lark-cli auth list で取得可能であること

テーブル作成 / テーブルバインド：`.config.json` の初期化

スキルを Feishu 多次元テーブルに紐付けるには、以下のいずれかの方法を使用します。

方法 A：新しいテーブルを作成（初回ユーザーに推奨）

bash ~/.cursor/skills/ui-gen-record/scripts/bootstrap.sh
# .config.json が既に存在する場合、強制的に新規作成してポインタを上書きするには：
bash ~/.cursor/skills/ui-gen-record/scripts/bootstrap.sh --force

方法 B：既存のテーブルにバインド

ユーザーが Feishu Base リンク（例 https://xxx.feishu.cn/base/<base_token>?table=<table_id>）を提示した場合：

bash ~/.cursor/skills/ui-gen-record/scripts/link.sh <base_url>
# .config.json が既に存在する場合、新しいリンクに切り替えるには：
bash ~/.cursor/skills/ui-gen-record/scripts/link.sh --force <base_url>

link.sh は以下の処理を行います：

URL から base_token（およびオプションの table_id / view_id）を解析
lark-cli でフィールド一覧をスキャンし、フィールド名から全ての field_ids を逆引き
必須フィールド 10 個（「リクエスト名 / リクエスト日 / プレビューリンク / デザインリンク / 使用モデル / ファイル / 変更回数 / トークン消費 / ドルコスト / 月」）が全て存在することを検証。1つでも欠けているとエラーで終了
.config.json に書き込み。以降 append.sh は自動的にこのテーブルにレコードを追加するため、リンクを再度指定する必要はありません

注意：link.sh のバインドを成功させるには、対象テーブルのフィールド名が本スキルで定義されたものと完全に一致している必要があります（型も一致する必要があります。特に トークン消費=number 千分位、ドルコスト=number USD 通貨、月=formula）。最も安全な方法は、このテーブルを本スキルの bootstrap.sh で作成することです。

`bootstrap.sh` の具体的な処理内容：

lark-cli auth list で現在のユーザーの open_id を取得
Bot として Base を作成。内部のテーブル名は「UIページ生成記録」
標準フィールド + 3 つの補助数式フィールドを構築（下表参照）
ビューを 月 の降順でグループ化
ダッシュボード「UI生成リアルタイム統計」を作成し、6 つのブロックを配置（後述）
現在のユーザーを full_access として追加し、その後オーナーをそのユーザーに移譲
base_token / table_id / view_id / dashboard_id / field_ids / owner_open_id を .config.json に書き込み
標準出力の末尾に、一回限りの手動微調整 手順を echo します（「月」列の非表示、グラフの色設定）。これらは Open API でサポートされていないため、ユーザーにブラウザで操作してもらう必要があります

作成された Base URL は標準出力に echo されるので、ユーザーに伝えてください。

テーブル構造

フィールド	型	説明
リクエスト名	text	ページ名またはリクエスト概要
リクエスト日	datetime	`YYYY-MM-DD HH:mm:ss`、デフォルトは「現在時刻」
プレビューリンク	text (url)	ローカルプレビューアドレス（例 `http://localhost:5173/xxx`）
デザインリンク	text (url)	Figma / Motiff / Pencil リンク
使用モデル	select（色ラベル付き）	オプション：`Claude Opus 4.7`(紫) / `Claude Sonnet 4.6`(青) / `GPT-5.4`(緑) / `Gemini 3 Pro`(橙) / `Gemini 3.1 Pro`(赤)、拡張可能
ファイル	attachment	`.tsx` ソースコード + エクスポート `.zip`（複数可）
変更回数	text	ユーザーが提示した全ての小変更点（重複含む）、左揃え
トークン消費	number(plain)	`precision=0, thousands_separator=true`、フロントエンド表示 `1,000,000`；ダッシュボードは直接 SUM
ドルコスト	number(currency)	`currency_code=USD, precision=2`、フロントエンド表示 `$25.00`；ダッシュボードは直接 SUM
月	formula(text)	`TEXT([リクエスト日], "YYYY-MM")`、ビューグループ化用。Bitable API は datetime のグループ化をデフォルトで日単位とするため、月単位で分類するにはこのテキストフィールドが必要

append.sh の外部パラメータは互換性を維持：従来通り --token-usage "1,000,000" と --usd-cost "$25.00" を渡すことができ、スクリプト内部でカンマ / ドル記号を除去して数値として トークン消費 / ドルコスト に書き込みます。

デフォルトのビューは 月 の降順でグループ化されます（2026-05 / 2026-04 がそれぞれグループになります）。列を非表示にする必要はありません。

ダッシュボード

bootstrap は「UI生成リアルタイム統計」というダッシュボードを作成し、6 つのブロックを含みます：

全体統計

最も使用されたモデル（円グラフ）：使用モデル フィールドでカウント、数量降順
トークン総消費 / ドル総コスト（インジケーターカード）：SUM(トークン消費) / SUM(ドルコスト)

月次統計

月別最も使用されたモデル（積み上げ棒グラフ）：x=月 色=使用モデル y=count_all
月別トークン総消費（棒グラフ）：x=月 y=SUM(トークン消費)
月別ドル総コスト（棒グラフ）：x=月 y=SUM(ドルコスト)

append.sh でレコードを追加するたびにダッシュボードを更新すると新しいデータが表示されます。

グラフの色調整（手動、一回限り）

Bitable Open API はグラフ系列の色設定を公開していません。グラフ内のモデル色をテーブル select の色ラベルと一致させるには、ユーザーがブラウザで手動で調整する必要があります（調整後は永続的に保存されます）。bootstrap の終了時に以下の対応表が echo されます：

モデル	色系	近似 hex
Claude Opus 4.7	紫	`#B66CFF`
Claude Sonnet 4.6	青	`#5B9FFF`
GPT-5.4	緑	`#67D474`
Gemini 3 Pro	橙	`#FF9944`
Gemini 3.1 Pro	赤	`#FF6B6B`

操作手順：グラフ右上編集 → 右側 スタイル → グラフの色 → カテゴリ別に設定 → 1 つずつ配色 → 保存。「最も使用されたモデル」と「月別最も使用されたモデル」のモデル次元に関わる 2 つのグラフのみ調整が必要です。

その後の使用：レコードの追加

ユーザーが「テーブルに整理して」などの指示を出した場合：

ステップ 1：データ収集

現在の会話コンテキストから推測するか、ユーザーに確認して以下の情報を取得します。明確でないものは空文字列 "" を許可：

REQ_NAME：リクエスト名（必須、通常はページパスまたは日本語ページ名）
REQ_DATE：リクエスト日（デフォルトは現在時刻 $(date +'%Y-%m-%d %H:%M:%S')；過去のファイルをアーカイブする場合は stat -f '%Sm' を使用）
PREVIEW_URL：プレビューリンク（通常 http://localhost:5173/<slug>）
DESIGN_URL：デザインリンク（Figma / Motiff / Pencil）
MODEL：使用モデル（select オプションにヒットする必要があります。ヒットしない場合は、まず lark-cli base +field-update で選択肢を拡張）
MOD_COUNT：変更回数（整数文字列）
TOKEN_USAGE：トークン消費（千分位文字列、例 1,000,000）
USD_COST：ドルコスト（$ で始まる文字列、例 $25.00）
ATTACHMENT_PATHS：ローカル添付ファイルの絶対パス配列

ステップ 1.5：添付ファイルの自動収集

添付ファイルは以下の 2 部構成です。エージェントはユーザーに質問する必要はなく、以下の固定フローで取得します：

1) ソースコード（必須）

ユーザーが手元に持っているページのソースコード。最も一般的なのは .tsx ファイルですが、.html や今回の成果物を代表するファイルであれば何でも構いません。パスは REQ_NAME から推測するか、直接ユーザーに尋ねます。

2) エクスポート zip（オプション、あれば添付、なければスキップ）

本プロジェクトの dev server には POST /__api/export-html エンドポイントが組み込まれています（ナビゲーションパネルの「エクスポート」ボタンもこれを呼び出します）。スキルはサイレントヘルパーを提供します：

ZIP_PATH="$(bash ~/.cursor/skills/ui-gen-record/scripts/try-export.sh "<pageName>")"
# 説明：
# - pageName = src/pages/ 以下の拡張子を除いた相対パス（例：「転送タスク-最終版」や「landing/index」）
# - 成功：ZIP_PATH は /tmp/<basename>.zip
# - 失敗（dev server がオフライン / インターフェース 404 / ページ名が存在しない / zip 以外の応答）：ZIP_PATH は空
# - いずれの場合も exit 0 し、agent のフローを中断しません

結果に応じて --attachment パラメータを組み立てます：

ATTACH_ARGS=(--attachment "/abs/path/to/source.tsx")
if [[ -n "$ZIP_PATH" ]]; then
  ATTACH_ARGS+=(--attachment "$ZIP_PATH")
fi
bash ~/.cursor/skills/ui-gen-record/scripts/append.sh ... "${ATTACH_ARGS[@]}"

原則：内部の同僚（dev server を実行している）は自動的に zip が添付されます。外部ユーザー（dev server がない、または本プロジェクトではない）は zip が静かにスキップされ、ソースコードとユーザーが手元に持っている他のファイルのみが残ります。いかなる状況でも zip の処理についてユーザーに確認してはいけません。

ステップ 2：append スクリプトの呼び出し

bash ~/.cursor/skills/ui-gen-record/scripts/append.sh \
  --req-name "<リクエスト/ページ名>" \
  --req-date "2026-01-01 12:00:00" \
  --preview-url "http://localhost:5173/<ページパス>" \
  --design-url "https://<デザインリンク>" \
  --model "Claude Opus 4.7" \
  --mod-count "10" \
  --token-usage "500,000" \
  --usd-cost "\$12.50" \
  --attachment "/absolute/path/to/export.zip" \
  --attachment "/absolute/path/to/source.tsx"

スクリプトは新しいレコード ID と Base URL を返します。Base URL をユーザーに伝えてください。

見積もりルール（必須、空欄禁止）

Agent は MOD_COUNT / TOKEN_USAGE / USD_COST を収集する際、以下の基準に従います。トランスクリプトが欠落している場合でも見積もり値を必ず算出しなければならず、これらの 3 つのフィールドを空欄にすることは固く禁止されています：

変更回数：今回の会話でユーザーが提示した個別に実行可能な小要件の数。重複も含みます。初期の「ページ生成」も 1 としてカウントします。
- 過去のファイルをアーカイブする場合（トランスクリプトが不可視）、最低 1 を入力
トークン消費（千分位文字列、例 160,000）：
- 現在のセッションが可視の場合：セッションの文字数 + ツールの往復 + 大きなファイルの読み書き回数 で見積もり
- 過去のファイルのみをアーカイブする場合：生成ファイルサイズから逆算。経験値：1KB のソースコード ≈ 15K 総トークン（Cursor がデフォルトで注入するプロジェクトコンテキストを含む）
- 中国語 ≈ 1.3 tokens/char；Opus セッションは通常 50万～300万トークンの範囲
ドルコスト（$ プレフィックス付き、例 $0.42）：モデルの現在の公式価格帯に基づいて見積もり
- 計算式：cost = input_tokens × input_rate + output_tokens × output_rate
- 典型的な比率：input : output ≈ 15 : 1（Cursor agent セッションの場合）

モデル価格表（2026年参考値）

モデル	Input ($/M)	Output ($/M)
Claude Opus 4.7	15	75
Claude Sonnet 4.6	3	15
GPT-5.4	10	30
Gemini 3 Pro / 3.1 Pro	2	12

見積もり値の誤差は許容されます。ユーザーは正確な請求書を入手した後、テーブル上で手動で上書きできます。

エラーハンドリング

config.json が存在しない
- ユーザーがリンクを提示していない → bootstrap.sh を実行して新規作成
- ユーザーがリンクを提示した → link.sh <url> を実行してバインド
link.sh が「テーブルに必須フィールドが不足しています」と報告 → 対象テーブルは本スキルで作成されたものではなく、スキーマが一致しません。ユーザーに手動でフィールドを補完するか、bootstrap.sh で新しい標準テーブルを作成するよう促します。
base_token invalid → ユーザーがテーブルを削除したか、アクセス権がない可能性があります。bootstrap または link で別のテーブルに再バインドするよう促します。
OpenAPIUpdateField limited（レート制限） → sleep 2 後に再試行。
添付ファイルが見つからない → パスが存在するか確認します。~/Downloads 内の URL エンコードされたファイルの場合は、最初に cp で /tmp にコピーしてからアップロードします（lark-cli は相対パスを要求します）。
モデルが select オプションにない → まずユーザーに新しいオプションを追加するか確認します。lark-cli base +field-update で options を更新します。

ui-gen-record

ui-gen-record とは？

お気に入りのAIに質問する

ドキュメント

ui-gen-record は何をしますか？

トリガーシナリオ

依存関係

テーブル作成 / テーブルバインド：`.config.json` の初期化

方法 A：新しいテーブルを作成（初回ユーザーに推奨）

方法 B：既存のテーブルにバインド

`bootstrap.sh` の具体的な処理内容：

テーブル構造

ダッシュボード

グラフの色調整（手動、一回限り）

その後の使用：レコードの追加

ステップ 1：データ収集

ステップ 1.5：添付ファイルの自動収集

1) ソースコード（必須）

2) エクスポート zip（オプション、あれば添付、なければスキップ）

ステップ 2：append スクリプトの呼び出し

見積もりルール（必須、空欄禁止）

モデル価格表（2026年参考値）

エラーハンドリング

関連ファイル

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

お気に入りのAIに質問する

ドキュメント

ui-gen-record は何をしますか？

トリガーシナリオ

依存関係

テーブル作成 / テーブルバインド：.config.json の初期化

方法 A：新しいテーブルを作成（初回ユーザーに推奨）

方法 B：既存のテーブルにバインド

bootstrap.sh の具体的な処理内容：

テーブル構造

ダッシュボード

グラフの色調整（手動、一回限り）

その後の使用：レコードの追加

ステップ 1：データ収集

ステップ 1.5：添付ファイルの自動収集

1) ソースコード（必須）

2) エクスポート zip（オプション、あれば添付、なければスキップ）

ステップ 2：append スクリプトの呼び出し

見積もりルール（必須、空欄禁止）

モデル価格表（2026年参考値）

エラーハンドリング

関連ファイル

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

テーブル作成 / テーブルバインド：`.config.json` の初期化

`bootstrap.sh` の具体的な処理内容：