Claude Projectsを使って独自HTMLテンプレートを自動生成してみた

SELECT
    P.PRODUCT_NAME,
    P.PRICE,
    C.CATEGORY
FROM
    PRODUCTS P -- テーブル番号0
    LEFT JOIN CATEGORIES C -- テーブル番号1
        ON P.CAT_ID = C.ID

<!-- バインディング記法 -->
<div id="PRODUCT_NAME_0"></div>  <!-- メインテーブルのPRODUCT_NAME -->
<span id="PRICE_0"></span>        <!-- メインテーブルのPRICE -->
<p id="CATEGORY_1"></p>           <!-- JOIN先テーブルのCATEGORY -->

-- @page-title: 商品一覧
-- @style: modern
SELECT
  -- @label: 商品名
  P.P_NAME,
  -- @label: カテゴリ
  C.C_NAME,
  -- @label: 価格
  -- @type: number
  -- @format: currency
  P.PRICE,
  -- @label: 在庫数
  -- @type: number
  P.S_QTY,
  -- @label: 商品説明
  P.P_DESC,
  -- @type: image
  -- @image-base-url: ""
  P.P_IMG
FROM
  PRODUCTS P
  LEFT OUTER JOIN CATEGORIES C
    ON P.C_CODE = C.C_CODE
ORDER BY
  P.P_CODE

# SQLアノテーション仕様

## ページレベル設定
- @page-title: ページタイトル（表示用の見出し）
- @layout: grid|card|table|form|dashboard（レイアウトパターン）
- @style: modern|classic|minimal|glassmorphism（デザインスタイル）
- @responsive: true|false（レスポンシブ対応）

## フィールドレベル設定
- @label: フィールドの表示ラベル
- @type: text|number|image|badge|chip|progress（表示タイプ）
- @format: currency|date|percentage（データフォーマット）
- @hidden: 非表示フィールド
- @image-base-url: 画像のベースURL

# PHPQUERY HTMLテンプレート仕様書

## 基本ルール
1. フィールド値は id="フィールド名_テーブル番号" で埋め込む
2. _0はメインテーブル、_1以降はJOIN順
3. 複数行データは loop="true" 属性で自動繰り返し

## 記述形式
- テキスト表示: <span id="FIELD_NAME_0"></span>
- 入力フィールド: <input type="text" id="FIELD_NAME_0">
- 画像: <img img_url="画像のベースURL" img_id="IMAGE_FIELD_0" img_extension="jpg">
  - img_url: 画像のベースURL
  - img_id: フィールド名_テーブル番号
  - img_extension: 画像の拡張子（jpg, png, gif等）
- 非表示フィールド: <input type="hidden" id="ID_0">
- 繰り返し要素（重要）:  
  <div class="product-card" loop="true"><!-- この中の要素が行数分繰り返される --><span id="PRODUCT_NAME_0"></span><span id="PRICE_0"></span></div>

## テーブル番号の割り当て
FROM句のテーブル = _0  
1番目のJOIN = _1  
2番目のJOIN = _2