| name | design-review |
| description | 生成した HTML / スライドが「見た目 human friendly」か、ノンデザイナーズ・デザインブックの C.R.A.P. (Contrast/Repetition/Alignment/Proximity) + タイポグラフィで品質レビューする。「デザインを見て」「読みやすい見た目か」「レイアウトをレビュー」で起動。機械監査 (design-audit.sh) を先に走らせ、静的に測れない整列・近接・視覚的印象を補う。 |
| user_invocable | true |
| argument_hint | <generated.html | slides.html> [--theme <report-theme-head.html>] |
| origin | ai-research-pipeline/deep-research/readable-markdown-to-html-slide-presentation-2026 + Robin Williams "The Non-Designer's Design Book" |
design-review スキル (品質レビュー)
md→HTML→slide の生成物が見た目 human friendly かを、デザイン原則で評価する。
内容の正しさ (忠実性) ではなく、構造の見やすさを担保するのが目的。
レンズは Robin Williams『ノンデザイナーズ・デザインブック』の C.R.A.P. 4 原則 +
タイポグラフィ。「デザインの大半は theme の CSS トークンに集約されている」ため、
まず機械監査でトークンを定量化し、静的に測れない部分を目視で補う。
評価軸
| 原則 | 問い | 担当 |
|---|
| Contrast (対比) | 図と地・見出しと本文の強弱が十分か。色のコントラスト比は AA 以上か | 機械 (design-audit) + 目視 |
| Repetition (反復) | 同じ役割の要素が一貫して同じ見た目か。場当たりな装飾がないか | 機械 (inline style 検出) + 目視 |
| Alignment (整列) | すべての要素が見えない線に揃っているか。端・グリッドの乱れがないか | 目視 (LLM) |
| Proximity (近接) | 関連する要素が近く、無関係な要素が離れているか。余白でグループ化できているか | 目視 (LLM) |
| Typography | 行長・行間・書体階層が読みやすいか | 機械 (design-audit) |
実行手順
1. まず機械監査を走らせる
./scripts/design-audit.sh <generated.html> [--theme <theme>]
出力 (コントラスト比 / 行長 / type scale / インライン style / パレット) を読み込み、
FAIL/WARN を起点にする。コントラスト AA 未満は最優先で直す。
2. レンダリング結果を見る (Alignment / Proximity)
補足: Alignment/Proximity は本質的に「目でしか測れない」わけではない。レンダリングして
要素の座標を測れば決定論で数値化できる (左端 X のクラスタ数 / ギャップ比)。これは
DESIGN-CEILING.md の Lv2 (geometry-audit) の領分。本スキルの目視は
その自動監査が無いときの fallback。
- スクリーンショットが撮れる環境 (chromium 等) があれば、HTML をレンダリングして
画像を Read し、整列・近接・視覚的リズムを評価する。
- 無い環境では、HTML 構造 + theme トークンから推論する (ピクセルは見えないが、
マークアップの入れ子・余白クラス・カードのグルーピングから判断できる)。限界は明記する。
評価の着眼点 (C.R.A.P.):
- Alignment: 見出し・本文・カードが同じ左端に揃っているか。中央寄せと左寄せの混在がないか。
- Proximity: セクション間の余白 > セクション内の余白 になっているか (関連が近接)。
見出しが「次の段落」に近く「前のセクション」から離れているか。
- Contrast: 一番言いたいことが視覚的に一番目立つか。全部同じ強さで平板になっていないか。
- Repetition: 見出しスタイル・タグ・カードが一貫しているか。1 箇所だけ違う装飾がないか。
3. スライド特有の観点 (slides.html のとき)
- 1 スライド 1 メッセージが視覚的にも成立しているか (詰め込み過多でないか)。
- 各スライドで内容がスライド枠をオーバーフローしていないか (Marp は溢れる)。
- 余白が十分か。箇条書きが画面を埋め尽くしていないか。
4. 採点と改善提案
各軸を 5 段階 (1=要改善 … 5=良好) で採点し、根拠と具体的な直し方を出す。
直す対象は原則 theme の asset (report-theme-head.html) ―― 単一ソースを直せば
全生成物に反映される。個別 HTML を手で直さない。
design-review 結果: <file>
Contrast : 4/5 本文 15:1 と高コントラスト。ただし h3 が本文と同サイズで弱い
Repetition : 5/5 インライン style なし。カード/タグ一貫
Alignment : 4/5 左端揃え。表のセル内改行が不揃い
Proximity : 3/5 セクション間余白が section 内と差が小さく、区切りが弱い
Typography : 3/5 行長 68 字/行は JP に広い。h3 のサイズ強弱を付けたい
→ 推奨: asset の h3 を 16→17-18px、--text-sub を一段明るく、.container を 760px 前後に
注意事項
- 内容ではなく見た目を見る。事実誤りや情報欠落は別のレビュー (忠実性) の担当。
- 直しは単一ソースへ。theme asset を直す。生成 HTML を手編集しない。
- 過剰装飾を足さない。読みやすさのための引き算を優先 (デザインブックの精神)。
- スクショが撮れないなら正直に。「ピクセル未確認、マークアップからの推論」と明記する。
- 由来: deep-research レポートの可読性原則 + 『ノンデザイナーズ・デザインブック』の
C.R.A.P.。機械部分は
scripts/design-audit.sh が担う。
