結論
デザインのルールを、機械チェックで守れる形にした
これまで人の手作業と記憶に頼っていたデザインのルールを、正本ファイル1つ+機械チェックで守る仕組みに作り替えた。変更は4トラック・13ファイル。色のズレは機械チェックで0を確認済み。
新モード
1
design-proposal
絶対ルール
10個
principles.md に集約
色ズレ検査
62識別子
ズレなし
ファイル変更
新規5
編集8
Before / After 比較
今回の変更で何がどう変わったか。
| 観点 | Before | After |
|---|---|---|
| 色の同期 | コメント頼みの手動更新 | tokens.json が正本。ズレは機械チェックで検知 |
| デザイン提案 | 1案を直接作る | 複数案→推し案→最終仕様の design-proposalモード |
| 品質ルール | 3ヶ所に分散 | principles.md に絶対ルール10個として集約 |
| 提示前チェック | 決まりなし | checklist.md で機械+目視を全項目確認 |
| 部品の組み立て単位 | 階層の決まりなし | 部品の4階層を両正本に記載 |
| DADS要約 | 2スキルに重複 | html-css-delivery側に一本化 |
| imagegen青系パレット | 位置づけ不明 | 図解PNG専用。HTMLでは使わない |
| pulseGlow | ルールと実使用が矛盾 | creative系エディタの選択ハイライトのみ許可 |
トラック別の内容
4つの作業のまとまりごとに、やったことを短く示す。
Track A
正本を1つに集約
色・フォント・影の値を design/tokens.json に集めた。ズレは scripts/check_design_tokens.py が機械チェックする。今回の検査はズレなし。
Track B
デザイン提案の手順化
SKILL.md に design-proposalモードを追加。複数案を作り、推し案と理由を示し、最終仕様を1枚HTMLにまとめる流れ。守るルールは references/principles.md など新設3ファイルに書いた。
Track C
部品の4階層
部品を ui-component / domain-component / section / page の4段に分けた。下の部品を組み合わせて上を作り、新部品をゼロから発明しない。この考え方を両方の DESIGN.md に書いた。
Track D
細かな矛盾の整理
2スキルに重複していたDADS要約を1つにまとめた。青系パレットは図解専用と明記。pulseGlow は実際に使われていたので、ルール側を実態に合わせた。
絶対ルール10個（principles.md）
どの案でも必ず守る10個。1〜4は機械チェック、5〜10は目視で確認する。
| # | 原則名 | 確認方法 |
|---|---|---|
| 1 | 色付き左アクセントバーを使わない | 機械（lint FAIL） |
| 2 | 色は柔らかく、塗りCTAは1画面に1つ | 機械（lint WARN） |
| 3 | コントラスト実測AAを死守する | 機械（lint FAIL） |
| 4 | brand.cssのトークン外の色を持ち込まない | 機械（lint WARN） |
| 5 | 形状はブランド基準に従う（角丸12px・弱い影） | 目視 |
| 6 | タイポは規定フォント固定・文字間0 | 目視 |
| 7 | 色だけで状態を伝えない | 目視 |
| 8 | 結論先出し・情報階層を明確にする | 目視 |
| 9 | 前例ベースで組む（32ブロック・ゼロイチ発明禁止） | 目視 |
| 10 | ページ内にデザイン説明を書かない・成果物が主役 | 目視 |
ファイル変更一覧
plugin側は自動同期されるため一覧から省略。
新規（5ファイル）
| パス | 変更量 |
|---|---|
design/tokens.json | 45行 |
scripts/check_design_tokens.py | 142行 |
.claude/skills/html-css-delivery/references/principles.md | 54行 |
.claude/skills/html-css-delivery/references/proposal-rules.md | 54行 |
.claude/skills/html-css-delivery/references/checklist.md | 63行 |
編集（8ファイル）
| パス | 変更量 |
|---|---|
.claude/skills/html-css-delivery/SKILL.md | +27 |
.claude/skills/html-css-delivery/DESIGN.md | +14/-2 |
.claude/skills/html-css-delivery/assets/brand.css | +2/-1 |
.claude/skills/html-css-delivery/references/imagegen_kaisetsu.md | +7 |
.claude/skills/html-css-delivery/references/imagegen_kaisetsu.json | +1 |
web_ui/DESIGN.md | +14/-2 |
.claude/skills/ad-ops-experiment-board/references/dads_design_summary.md | 49→21行 |
留意点
MCPでの配信は見送り
記事にあったMCP経由の配信は、手間の割に効果が薄いので見送った。スキルがファイルを直接読む方式で同じことができる。
一部だけ先にコミット済み
DADS整理分だけ、別作業の自動コミット 19d7f2669 に含まれて先にコミット済み。残りは未コミット。
次アクション
1
残りをコミット
feat: デザインシステムnewt移植
2
新モードを試す
次のレポートで「デザイン案A/B/Cで提案して」と頼む
3
色を変える時は新フローで
tokens.json を直し、check_design_tokens.py で確認