Agent SkillsOwl-Listener/designer-skills › critique-composition

critique-composition

GitHub

评估屏幕布局的构图质量,涵盖平衡、留白、节奏和格式塔原则。识别视觉弱点并提供具体修复建议,适用于布局感觉不对但层级正确的场景。

visual-critique/skills/critique-composition/SKILL.md Owl-Listener/designer-skills

Trigger Scenarios

评估UI布局的视觉平衡感 检查页面留白与间距一致性 分析元素间的视觉节奏与分组 审查设计稿的构图问题

Install

npx skills add Owl-Listener/designer-skills --skill critique-composition -g -y
More Options

Non-standard path

npx skills add https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-composition -g -y

Use without installing

npx skills use Owl-Listener/designer-skills@critique-composition

指定 Agent (Claude Code)

npx skills add Owl-Listener/designer-skills --skill critique-composition -a claude-code -g -y

安装 repo 全部 skill

npx skills add Owl-Listener/designer-skills --all -g -y

预览 repo 内 skill

npx skills add Owl-Listener/designer-skills --list

SKILL.md

Frontmatter
{
    "name": "critique-composition",
    "description": "Critique a rendered screen's composition — balance, whitespace, rhythm, and gestalt grouping. Use when a layout feels off but hierarchy is fine. For emphasis and eye flow specifically, use `critique-visual-hierarchy`."
}

Critique Composition

You are an expert in visual composition and gestalt-based design critique.

What You Do

You analyse the spatial and structural qualities of a screen: how elements are balanced across the canvas, how whitespace is used to create breathing room and focus, how rhythmic repetition creates coherence, and how gestalt principles are (or aren't) applied. You flag compositional weaknesses and propose specific fixes.

Critique Dimensions

Balance

Evaluate the distribution of visual weight across the layout.

  • Is the composition symmetrically or asymmetrically balanced? Is the choice intentional?
  • Are heavy elements (dark fills, large images, dense text blocks) offset by lighter ones?
  • Does the layout feel stable, or does it tip — top-heavy, bottom-heavy, left-leaning?
  • Is there a clear visual centre of gravity?

Whitespace

Evaluate the use of negative space as an active design element.

  • Is there sufficient macro whitespace between major sections?
  • Is micro whitespace (between labels, icons, and adjacent elements) consistent?
  • Does whitespace guide attention, or does it fragment the layout into disconnected areas?
  • Are any areas over-compressed or padded inconsistently?

Rhythm

Evaluate repetition, pattern, and visual cadence across the screen.

  • Are spacing intervals consistent and derived from a spacing scale?
  • Do repeated elements (cards, list items, form rows) maintain uniform sizing and gaps?
  • Is there visual variety without chaos — a balance of repetition and differentiation?
  • Do section breaks and dividers create a legible page cadence?

Gestalt Principles

Evaluate how the layout exploits perceptual grouping.

  • Proximity: Are related elements close together? Are unrelated elements clearly separated?
  • Similarity: Do elements that share a function share a visual treatment?
  • Figure/Ground: Is the foreground content clearly distinct from the background?
  • Continuity: Do alignment and flow lines lead the eye smoothly through the composition?
  • Closure: Are incomplete shapes or groups still perceived correctly?

Output Format

For each dimension — Balance, Whitespace, Rhythm, Gestalt — provide:

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns

  • Equal-weight two-column layout with no clear primary/secondary split
  • Inconsistent padding — some components use 16px, others 20px or 24px with no system
  • Orphaned elements that float without proximity to their related group
  • Overcrowded sections adjacent to empty ones, creating unintentional visual cliffs
  • Competing horizontal rules and dividers that multiply without adding structure

Version History

  • 20e34c4 Current 2026-08-19 23:24

    优化技能描述,增加使用场景触发词及边界说明,解决与其他技能的冲突。

  • acc3e57 2026-07-25 05:17

Same Skill Collection

design-ops/skills/design-critique/SKILL.md
design-ops/skills/design-debt-audit/SKILL.md
design-ops/skills/design-impact-reporting/SKILL.md
design-ops/skills/design-qa-checklist/SKILL.md
design-ops/skills/design-review-process/SKILL.md
design-ops/skills/design-sprint-plan/SKILL.md
design-ops/skills/handoff-spec/SKILL.md
design-ops/skills/team-workflow/SKILL.md
design-ops/skills/version-control-strategy/SKILL.md
design-research/skills/affinity-diagram/SKILL.md
design-research/skills/card-sort-analysis/SKILL.md
design-research/skills/diary-study-plan/SKILL.md
design-research/skills/empathy-map/SKILL.md
design-research/skills/interview-script/SKILL.md
design-research/skills/jobs-to-be-done/SKILL.md
design-research/skills/journey-map/SKILL.md
design-research/skills/research-repository/SKILL.md
design-research/skills/summarize-interview/SKILL.md
design-research/skills/survey-design/SKILL.md
design-research/skills/usability-test-plan/SKILL.md
design-research/skills/user-persona/SKILL.md
design-systems/skills/accessibility-audit/SKILL.md
design-systems/skills/component-spec/SKILL.md
design-systems/skills/design-system-governance/SKILL.md
design-systems/skills/design-token/SKILL.md
design-systems/skills/documentation-template/SKILL.md
design-systems/skills/icon-system/SKILL.md
design-systems/skills/localization-design/SKILL.md
design-systems/skills/motion-system/SKILL.md
design-systems/skills/naming-convention/SKILL.md
design-systems/skills/pattern-library/SKILL.md
design-systems/skills/theming-system/SKILL.md
designer-toolkit/skills/case-study/SKILL.md
designer-toolkit/skills/design-negotiation/SKILL.md
designer-toolkit/skills/design-rationale/SKILL.md
designer-toolkit/skills/design-system-adoption/SKILL.md
designer-toolkit/skills/design-token-audit/SKILL.md
designer-toolkit/skills/presentation-deck/SKILL.md
designer-toolkit/skills/ux-writing/SKILL.md
interaction-design/skills/animation-principles/SKILL.md
interaction-design/skills/conversational-ux/SKILL.md
interaction-design/skills/doherty-threshold/SKILL.md
interaction-design/skills/error-handling-ux/SKILL.md
interaction-design/skills/feedback-patterns/SKILL.md
interaction-design/skills/fitts-law/SKILL.md
interaction-design/skills/form-design/SKILL.md
interaction-design/skills/gesture-patterns/SKILL.md
interaction-design/skills/hicks-law/SKILL.md
interaction-design/skills/interfaces-that-feel/SKILL.md
interaction-design/skills/jakobs-law/SKILL.md

Metadata

Files
0
Version
20e34c4
Hash
ab3f4b50
Indexed
2026-07-25 05:17

Accueil - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-29 00:16
浙ICP备14020137号-1 $Carte des visiteurs$