domains / design / design-critique / design-critique
The two skills address the same domain but perform fundamentally different tasks. The first (Owl-Listener) is a facilitation guide for human-led team meetings, focusing on social dynamics, meeting structure (timeboxes), and communication protocols. The second (LeoYeAI) is an automated analysis tool for AI agents to critique visual assets using specific design theories (Gestalt, Itten, Nielsen) and output a structured, severity-ranked list of fixes. They do not reproduce each other; one is a process for people, the other is a heuristic engine for software. Combining them allows an agent to handle both the 'human-in-the-loop' facilitation and the 'automated visual audit' aspects of design critique.
| Repository | Path |
|---|---|
| Owl-Listener/designer-skills | design-ops/skills/design-critique/SKILL.md |
| LeoYeAI/openclaw-master-skills | skills/design-critique/SKILL.md |
| Role | Repository | Path |
|---|---|---|
| peer | Owl-Listener/designer-skills | design-ops/skills/design-critique/SKILL.md |
| peer | LeoYeAI/openclaw-master-skills | skills/design-critique/SKILL.md |
--- name: design-critique description: Facilitate structured team critiques or perform automated visual design audits. Use for live sessions or file-based analysis. --- # Design Critique You can perform two types of design critique: **Facilitated Team Critique** (for live human sessions) and **Automated Visual Audit** (for analyzing design files). ## 1. Facilitated Team Critique Use this when running a session with people in the room. ### Before the Critique - Designer shares context: goals, constraints, target audience, stage of work. - Define what feedback is needed (layout? flow? copy? everything?). - Set the rules: constructive, specific, actionable. ### During the Critique 1. **Present** (5 min) — Designer walks through the work and goals. 2. **Clarify** (5 min) — Questions to understand, not judge. 3. **Feedback rounds** — Structured by category or priority. 4. **Discuss** — Open conversation on key tensions. 5. **Capture** — Document decisions and action items. ### Feedback Format (Verbal) - 'I notice...' (observation, not judgment) - 'I wonder...' (question or exploration) - 'What if...' (suggestion or alternative) - 'I think... because...' (opinion with rationale) ### After the Critique - Designer summarizes takeaways. - Action items with owners and deadlines. ### Best Practices - Separate exploration critiques from refinement critiques. - Critique the work, not the person. - Always tie feedback to goals and user needs. ## 2. Automated Visual Audit Use this when provided with a visual file (UI, logo, photo, PDF) to analyze. ### Analysis Framework Examine the visual through these 11 dimensions: 1. **Gestalt Principles** (proximity, similarity, continuity, etc.) 2. **Visual Hierarchy** (focal point, reading paths, size/weight/whitespace) 3. **Colour Science** (contrast, harmony, WCAG compliance, accessibility) 4. **Typography** (scale, pairing, readability, line length/height) 5. **Grid Structure** (alignment, modulation, spacing rhythm) 6. **Composition** (viewpoint, framing, depth, focus) 7. **Information Design** (data-ink ratio, density, cognitive load) 8. **Reduction & Honesty** (minimalism, form follows function) 9. **Visual Balance** (symmetry/asymmetry, visual weight) 10. **Usability Heuristics** (Nielsen's 10: visibility, match, control, consistency, error prevention, recognition, flexibility, aesthetics, error messages, help) 11. **Platform Conventions** (web/mobile norms, safe zones, thumb-friendliness) ### Output Format Provide a priority-ordered action list. **Hard rule:** Every finding must include a `Fix:` line. #### 🔴 Critical Issues that break usability, accessibility, or core functionality. *Example:* `🔴 Critical — Text contrast fails WCAG AA. Fix: Darken background to #0052CC.` #### 🟡 Important Issues that hurt the experience or violate design principles. *Example:* `🟡 Important — Hierarchy collapse. Fix: Increase H1 to 35px.` #### 🟢 Polish Issues that elevate the design. *Example:* `🟢 Polish — Spacing rhythm inconsistent. Fix: Align padding to 8px grid.`