ux-annotation-generator

Generate structured UI screenshot annotations with location markers and severity levels.

Updated Feb 6, 2026

Search Tags:#ui #usability #ux #screenshot #annotation #design feedback

Ready to run

npx skills add https://github.com/unthinkmedia/DesignExploration --skill ux-annotation-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-annotation-generator
Source: https://github.com/unthinkmedia/DesignExploration/tree/main/.claude/skills/ux-annotation-generator
Command: npx skills add https://github.com/unthinkmedia/DesignExploration --skill ux-annotation-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of providing detailed, actionable feedback on UI designs by allowing users to annotate screenshots with specific pain points, strengths, and suggestions, complete with precise location markers.

Core Features & Use Cases

Detailed Annotations: Generate annotations for issues, strengths, and suggestions with severity levels and categories.
Precise Location Referencing: Use grid-based, component-based, or coordinate hints to pinpoint elements.
Structured Output: Create single annotations or comprehensive annotation sets for screens or entire user flows.
Use Case: A UX designer can upload a mockup, use this Skill to mark up usability issues with clear descriptions and recommendations, and then share these annotated visuals with the development team for efficient implementation.

Quick Start

Use the ux-annotation-generator skill to create a critical issue annotation for the top-right corner of the screenshot, noting that the logout button is missing.

Frequently Asked Questions about ux-annotation-generator

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

FAQPage Schema

How do I annotate UI screenshots to provide usability feedback?▼

Annotate UI screenshots by generating detailed markers for pain points, strengths, and suggestions. The tool categorizes issues by severity and uses grid-based or component-based referencing to pinpoint exact locations on the mockup.

What types of design feedback can I generate for a mockup?▼

You can generate design feedback categories including critical issues, good patterns, quick fixes, and accessibility suggestions. Each annotation includes severity levels and structural recommendations for efficient team implementation.

How do I pinpoint specific elements on a screenshot for design feedback?▼

Pinpoint specific elements using grid-based, component-based, or coordinate-hinting location referencing. This ensures precise location markers are attached to every usability issue and strength identified on the screenshot.

Can I create annotation sets for multi-screen user flows?▼

Yes, you can create structured annotation sets for single screens or entire multi-screen user flows. This allows you to map out comprehensive usability issues and design feedback across a complete user journey.

Does this tool support accessibility suggestions for UI designs?▼

Yes, the tool supports accessibility suggestions as a specific annotation category. It generates actionable feedback alongside visual and structural recommendations to help improve overall UI usability.

What is the best way to mark up usability issues on a UI mockup?▼

The best way to mark up usability issues is by generating structured annotations with severity levels and precise location hints. This produces clear, actionable feedback for development teams to implement.