一键在 Manus 中运行任何 Skill

design-review

星标0

分支0

更新时间2026年6月16日 12:44

生成した HTML / スライドが「見た目 human friendly」か、ノンデザイナーズ・デザインブックの C.R.A.P. (Contrast/Repetition/Alignment/Proximity) + タイポグラフィで品質レビューする。「デザインを見て」「読みやすい見た目か」「レイアウトをレビュー」で起動。機械監査 (design-audit.sh) を先に走らせ、静的に測れない整列・近接・視覚的印象を補う。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

linnefromice

linnefromice/ai-research-lab

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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 が担う。

同仓库更多 Skills

同仓库

md-to-html

linnefromice/ai-research-lab

Markdown を共通テーマの HTML（画面ダーク / 印刷は A4 ライトテーマ）に変換する。「HTML 化して」「HTML 版を作って」「PDF にしたい」で起動。調査/設計/レポート md の配布・印刷用途に。素早く出すなら scripts/render-html.sh、リッチな card/box レイアウトが要るときは LLM 整形。

2026-06-160

md-to-slide

linnefromice/ai-research-lab

調査/レポート md を発表スライド (Marp) に昇華する。report.md を要約・分割して slides.md を作り、HTML/PDF/PPTX に書き出す。「スライドにして」「発表資料を作って」「Marp で」で起動。文書とスライドは編集距離があるため別ファイル (slides.md) として作る。

2026-06-160

readable-md

linnefromice/ai-research-lab

Markdown を「人が読みやすく、かつ機械が HTML/スライドへ変換しやすい」構造に執筆・整形する。新規に調査/設計 md を書くときや、既存 md を昇華 (md→HTML→slide) の前に整えるときに使う。「読みやすい md にして」「昇華しやすく整形して」「調査 md を書いて」で起動。

2026-06-160

breakdown-design

linnefromice/ai-research-lab

[2] design を実装単位に分解し、複数の [3] impl issue を起票する ([2]→[3] のブレイクダウン)。[2] を review + needs-human に遷移する。

2026-05-250

breakdown-request

linnefromice/ai-research-lab

[1] request を入力に [2] design issue を起票する ([1]→[2] のブレイクダウン)。元の [1] は close する。

2026-05-250

claim-issue

linnefromice/ai-research-lab

status:ready の issue を claim する。遷移直前に ready を再確認してから in-progress へ atomic 遷移し、二重取得のレース窓を最小化する。issue を処理開始する直前に必ず使う。

2026-05-250

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 スキル (品質レビュー)

評価軸

原則	問い	担当
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. 採点と改善提案

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 が担う。