review-web-design

pjt222

更新日 6 days ago

17 閲覧

デザインdesign

について

このスキルは、ウェブデザインのモックアップや公開サイトを、レイアウト、タイポグラフィ、色彩、余白、レスポンシブ対応などの主要基準に沿ってレビューします。デザイン原則に基づき、評価と改善提案を行います。開発者は、デザインレビュー時、実装前、あるいは既存サイトのデザイン品質やブランド一貫性を評価する際に活用できます。

クイックインストール

Claude Code

推奨

メイン

npx skills add pjt222/agent-almanac -a claude-code

プラグインコマンド代替

/plugin add https://github.com/pjt222/agent-almanac

Git クローン代替

git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/review-web-design

このコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします

ドキュメント

察網設

評視之質、一致、跨機之效也。

用

察樣稿前→用
察既釋之網→用
設察會予反→用
評跨頁牌一致→用
跨段點察應變→用

入

必：所察之設（URL、稿、截、源）
可：牌則或設系文
可：標眾述
可：參設或競例
可：所慮處

行

一：察視階

視階導目歷重要之容。

焦點明：每屏有明入點乎？
題階：題降序合理乎（H1 → H2 → H3）？
尺對：要素大於輔乎？
色對：CTA 顯著乎？
白：間隔組分有效乎？
讀流：合自然式（F、Z）乎？

## Visual Hierarchy Assessment
| Page/Section | Focal Point | Hierarchy Clear? | Issues |
|-------------|-------------|-----------------|--------|
| Homepage | Hero section CTA | Yes | Secondary CTA competes with primary |

得：各要頁皆察。

敗：無稿→活碼以開發工具察。

二：察字體

字選：合牌與容乎？
字配：題體相得（≤2-3 族）乎？
字階：一致比例乎？
行高：體 1.4-1.6、題 1.1-1.3
行長：體 45-75 字（佳 ~66）
重：權變一致表階
大：體 ≥ 16px

:root {
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
}

得：字察一致、可讀、階。

敗：> 3 族→宜整。

三：察色用

盤合：盤有意而限（3-5 + 中）乎？
牌合：色合牌則乎？
對比：文達 WCAG AA
語色：紅誤、綠成一致乎？
色盲：訊不僅賴色乎？
明暗模：兩模可讀且牌一致乎？

## Colour Assessment
| Usage | Colour | Contrast Ratio | WCAG AA |
|-------|--------|----------------|---------|
| Body text on white | #333333 | 12.6:1 | Pass |
| Muted text on light gray | #9ca3af on #f3f4f6 | 2.1:1 | FAIL |

得：盤察合、達、語一致。

敗：用對比器（WebAIM）驗確比。

四：察排與間

得：排用系格與間階一致。

敗：間不一→宜採間階（如 Tailwind space-*）。

五：察應變

跨段點測：

段點	寬	代
行	375px	iPhone SE
行 L	428px	iPhone 14
板	768px	iPad
桌	1280px	標筆
廣	1536px+	桌屏

各段點查：

排適：合理重排乎？
觸標：行上 ≥ 44x44px 乎？
文讀：字大適視口乎？
圖縮：不形變不溢乎？
導：行導可達乎？
無橫卷：容不橫溢

得：諸段點測、問題錄。

敗：無應變測工→察 CSS 媒詢覆蓋。

六：察牌一致

得：牌元驗、具偏錄。

敗：無牌則→記為建、察內一致代。

七：書設察

## Web Design Review
### Overall Impression
[2-3 sentences]
### Visual Hierarchy: [Score/5]
### Typography: [Score/5]
### Colour: [Score/5]
### Layout & Spacing: [Score/5]
### Responsive Design: [Score/5]
### Brand Consistency: [Score/5]
### Priority Improvements
1. [Most impactful change]

得：察予具體視參反、優先修改。

敗：評分主觀→改用過/慮/敗制。

驗

忌

主觀無理：「不喜此色」非可行。釋因（對、牌、達）
忽達：視察必含 WCAG 對。美而排用者非佳設
僅察稿：測應變、懸停、過渡，非僅靜排
規方：述問題非斷方
忘境：銀行與遊戲設標異。按境察

參

review-ux-ui
setup-tailwind-typescript
scaffold-nextjs-app

GitHub リポジトリ

pjt222/agent-almanac

パス: i18n/wenyan-ultra/skills/review-web-design

agentsagentskillsai-assisted-developmentclaude-codeskillsteams