デザインカンプJSON(座標・フォント・色・余白)とCSSを照合して自動修正
デザインカンプ(JSON)をもとにHTML/CSSの値を自動照合・修正するスキル
/auto-kanpu
ズレ一覧をユーザーに提示して「修正して」と言われるまで、CSSを1行も書いてはいけない。 ❌ 照合途中でEditツールを使う → 禁止 ❌ 「たぶんここがズレてる」と思っても先に直す → 禁止 ✅ 全項目照合 → ズレ一覧提示 → ユーザーOK → 一括修正 → 正しい順序
TodoWrite([
{ content: "デザインカンプ(JSON)を受け取る(既にあればスキップ)", status: "in_progress", activeForm: "JSON受け取り中" },
{ content: "rem基準をユーザーに確認(自分でGrepしない)", status: "pending", activeForm: "rem基準確認中" },
{ content: "対象セレクタをGrepで特定", status: "pending", activeForm: "セレクタ特定中" },
{ content: "全項目照合(font/color/spacing/余白/サイズ)→ ズレ一覧作成", status: "pending", activeForm: "全項目照合中" },
{ content: "🚫 ズレ一覧をユーザーに提示・OKをもらう(修正はまだしない)", status: "pending", activeForm: "ズレ一覧提示中" },
{ content: "一括修正(ユーザーOK後のみ実行)", status: "pending", activeForm: "一括修正中" },
{ content: "残り問題をユーザーに報告", status: "pending", activeForm: "残り報告中" }
])
スキル開始時に Grep Edit Read Glob を並列でToolSearchして取得する。
1つずつ取得すると待ち時間が増えるため、まとめて呼ぶこと。
ユーザーが貼り付けるJSONはこの形式:
[
{
"label": "お 知 ら せ",
"w": "36px",
"h": "144px",
"x": "1130.81px",
"y": "784px",
"textContent": "お\n知\nら\nせ",
"textSize": "36px",
"textFamily": "Yu Mincho",
"letterSpacing": "0px",
"lineHeight": "36",
"color": "#000000",
"opacity": "100%",
"css": "top: 784px;left: 1131px;width: 36px;height: 144px;",
"distanceToRight": "233.2px",
"distanceToLeft": "1130.8px",
"distanceToTop": "784.0px",
"distanceToBottom": "-328.0px"
}
]
ユーザーにJSONを貼り付けてもらう。
JSONが届いたら:
y 座標と textContent でページ上の位置関係を把握するGrep で HTML の class= を抽出し、各クラスがどのJSONエントリに対応するかを把握する。
まずユーザーに1行聞く(自分でGrepしない):
「
html { font-sizeの行を貼ってもらえますか?(style.css か reset.css にあります)」
ユーザーが貼った行を見て判断する:
| htmlのfont-size | 1rem = ? | px → rem 変換 |
|---|---|---|
62.5% | 10px | px ÷ 10 |
calc(10 / 1400 * 100vw) | 1400px幅で10px | px ÷ 10 |
100%(未指定) | 16px | px ÷ 16 |
work.css → 「見つからない」 → style.css → ... と複数ファイルを探し回る会話の中に font-size: calc(...) や font-size: 62.5% が出ていればそれを使う(改めて聞かない)
🚨 照合チェックリスト(絶対厳守・セクションごとに必ず全項目確認)
JSONとCSSの比較を1文字も始める前に、必ず以下のTodoWriteを実行する。 ❌ このTodoWriteを出さずに照合を始めた → 全部やり直し ❌ 「目視でまとめて比較する」はNG → 必ず1項目ずつTodoWriteで潰す ✅ TodoWrite → 1項目ずつ確認 → completed → 次の項目 → 正しい順序
TodoWrite([ { content: "font-size 確認(textSize)", status: "in_progress", activeForm: "font-size 確認中" }, { content: "font-family 確認(textFamily)", status: "pending", activeForm: "font-family 確認中" }, { content: "letter-spacing 確認(letterSpacing)",status: "pending", activeForm: "letter-spacing 確認中" }, { content: "line-height 確認(lineHeight)", status: "pending", activeForm: "line-height 確認中" }, { content: "color 確認(color)", status: "pending", activeForm: "color 確認中" }, { content: "background-color 確認(shapeの色)", status: "pending", activeForm: "background-color 確認中" }, { content: "width / height 確認(w, h)", status: "pending", activeForm: "width/height 確認中" }, { content: "margin / padding 確認(x, y座標)", status: "pending", activeForm: "余白 確認中" }, { content: "ズレ一覧をユーザーに報告", status: "pending", activeForm: "ズレ一覧 報告中" } ])🚨 未設定チェック(絶対厳守・各項目で必ず確認)
各プロパティを確認するとき「値が違う」だけでなく「CSSにそのプロパティ自体がない」も必ずチェックする。 未設定 = 親やbodyの値を継承 = デザインと違う値になっている可能性がある。
チェック手順(font-sizeを例に): 1. JSONの textSize を確認 → 例: 14px = 1.4rem 2. 対象クラスのCSS を確認 → font-size が書いてある場合 → 値を比較する → font-size が書いていない場合 → 親から何を継承しているか確認する → htmlのfont-sizeが10pxなら、未設定 = 10px表示 ≠ 14px → ❌ 追加が必要❌ 「値が書いてないから問題なし」と判断してはいけない ✅ 「値が書いていない = 継承値を確認する」が正しい手順
| JSON フィールド | CSS プロパティ |
|---|---|
textSize | font-size |
textFamily | font-family |
letterSpacing | letter-spacing |
lineHeight | line-height |
color | color |
y(要素間の距離) | margin-top / padding-top |
x(要素間の距離) | margin-left / padding-left |
w, h | width, height |
要素Aのy + 要素AのH = 要素Aの下端
要素Bのy - 要素Aの下端 = AとBの間の余白
セクション間の余白を計算するとき、タイトルではなく主要コンテンツ(画像など)の座標を基準にする。
❌ タイトル(y=2042)を基準にして計算 → ズレる
✅ 画像(y=2138)を基準にして計算 → 正しい
手順:
ただし、ページ先頭の要素(メインビジュアルなど)の高さが現在のCSSと異なる場合は補正が必要:
補正値 = 現在のページ先頭高さ - デザインカンプのページ先頭高さ
各要素の実際のY = JSONのy + 補正値
| クラス | CSS現在値 | JSON正解 | ズレ |
|---|---|---|---|
| .news_title | font-size: 3.0rem | 36px = 3.6rem | ✅修正対象 |
| .news_title | margin-top: 18rem | 184px = 18.4rem | ✅修正対象 |
既存の値を更新することを最優先
margin-top: 18rem → margin-top: 18.4rem に書き換える個別ルールの追加は最小限にする
/* ✅ 良い例 */
#products1, #products2 { margin-top: 2.4rem; } /* デフォルト */
#products2 { margin-top: 11.9rem; } /* 差分だけ上書き */
/* ❌ 悪い例 */
#products1 { margin-top: 2.4rem; } /* 個別に追加 */
#products2 { margin-top: 11.9rem; } /* 個別に追加 */
font-family / color は上位クラスにまとめる
body に1箇所font-size のズレ修正font-weight のズレ修正(Regular→400 / Bold→bold)letter-spacing のズレ修正line-height のズレ修正(計算方法: lineHeight ÷ textSize の数値で指定)
line-height: 1line-height: 1.5body { line-height: 1.8 } が全体に効くため、カンプと異なる場合は必ず明示的に上書きするcolor のズレ修正margin / padding のズレ修正(座標計算から算出)/* ○○px - JSON */ など)CSSを1つ書いたら、適用前に以下を声に出して確認する:
① この値は親要素の高さ・幅に依存していないか?
例: height: 100% → 親にheightが設定されていないと効かない / 子が崩れる
② 子要素に想定外の影響が出ないか?
例: .item { height: 23rem } → 中の img が height:100% を使っていたら崩れる
③ 他のプロパティと矛盾していないか?
例: display: flex と float の併用 / position: absolute と margin: auto の混在
NGがあれば修正してから報告する。OKなら適用してよい。
照合が終わったら、修正対象を全件チェックリスト形式で提示してユーザーに確認してもらう。 ユーザーが「修正して」と言ったら一括で全部修正する。
## 修正チェックリスト(全○件)
### ヘッダー
- [ ] .header_area: background-color gray → white
- [ ] .header_area: padding-left 0 → 9.1rem
- [ ] .header_button: width 14rem → 20rem
### NEWSセクション
- [ ] .title: font-size 2.4rem → 3.6rem
- [ ] .news_date: font-size 1.2rem → 1.4rem
...
全部まとめて修正しますか?
## auto-kanpu 結果
### ✅ 自動修正済み(○件)
- .news_title: margin-top 18rem → 18.4rem
- .products_title: font-size 3.0rem → 3.6rem
### ⚠ 手動対応が必要なもの
- ...
@media 内は修正しない(SP用スタイルは対象外)デザインカンプの座標が左右で微妙に違う(中央のはずがズレている)場合は、 マージンで数値合わせしようとしない。
text-align: center → テキストや inline 要素のズレmargin: 0 auto → ブロック要素を親の中央に配置justify-content: center → flex の主軸方向の中央align-items: center → flex の交差軸方向の中央/* ❌ 左右のズレをmarginで数値合わせしない */
.title { margin-left: 12px; } /* 「なんか3pxずれてるから足す」はNG */
/* ✅ 中央揃えのプロパティで解決する */
.title { text-align: center; }
.box { margin: 0 auto; }
.flex-parent { justify-content: center; }
デザインカンプ側の微妙なズレは意図的でないことが多い。 中央揃えで解決できるなら、そちらを優先する。