skills.rest
Motium-AI
Motium-AIOFFICIAL
Explore all skills by this author →
GitHub

design-improver

Analyze UI screenshots and generate targeted design fixes across six dimensions.

Updated Aug 23, 2026
Search Tags:#accessibility#grading#design-improvement#automated-fixes#vision-based#screenshot-analysis#UI-audit
One-click install
npx skills add https://github.com/Motium-AI/claude-code-toolkit --skill design-improver
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-improver
Source: https://github.com/Motium-AI/claude-code-toolkit/tree/main/config/skills/design-improver
Command: npx skills add https://github.com/Motium-AI/claude-code-toolkit --skill design-improver

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the iterative enhancement of web UI designs by analyzing screenshots and proposing targeted fixes across typography, color, layout, motion, and accessibility to elevate visual quality and user experience.

Core Features & Use Cases

  • Automated grading: evaluates designs across six dimensions (Typography, Color & Contrast, Layout & Spacing, Motion & Interaction, Visual Polish, Accessibility) and produces actionable insights.
  • Targeted fixes: identifies top three issues and generates minimal, implementation-ready adjustments.
  • Design reviews & audits: ideal for design reviews, UI improvements, and design grading tasks on dashboards, product pages, and onboarding flows.

Quick Start

Ask to design-improve a specific UI (e.g., the dashboard). Claude will capture a screenshot of the target page, grade the design, propose fixes, apply changes via a lightweight workflow, and iterate until the score threshold is met.

Frequently Asked Questions about design-improver

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate UI design improvements from screenshots?▼

The screenshot analysis process evaluates web dashboards and app interfaces across six dimensions, ranks identified issues, and proposes minimal implementation changes compatible with existing codebases to iteratively enhance the design.

How does automated design grading work for web interfaces?▼

Screenshot-based UI audits evaluate interfaces across six dimensions to produce actionable insights, automatically ranking issues and applying lightweight workflow changes until a desired design score threshold is met.

Can I run a UI audit on an existing web dashboard without rebuilding the codebase?▼

Targeted UI fixes are generated as minimal, implementation-ready adjustments designed to integrate with existing codebases. The automated workflow captures a screenshot, grades the design, and iterates until the score threshold is met.

What's the best way to evaluate accessibility and visual polish during a design review?▼

A vision-based grading approach evaluates accessibility and visual polish alongside typography, color, layout, and motion. It automatically ranks issues and generates implementation-ready adjustments for design review tasks.

Does automated screenshot analysis work for marketing pages and app onboarding flows?▼

Yes, vision-based screenshot analysis is ideal for marketing pages, product pages, and onboarding flows. It evaluates the design, identifies the top three issues, and applies iterative fixes to elevate the user experience.

Related Skills

Explore More Design & Creative Skills→
Dev-Dennis-040Dev-Dennis-040
10

testing-evidence-collector

Capture and document screenshots to validate UI changes with visual evidence.

Community
Intermediate
DaviRain-SuDaviRain-Su

design-review

Detect and fix visual inconsistencies and performance issues in design projects.

Community
Advanced
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
mikeparcewskimikeparcewski
8

screenshot

Analyze UI screenshots for layout, color, typography, and design consistency.

Community
Intermediate