skills.rest
Sailfishc
SailfishcCOMMUNITY
Explore all skills by this author →
Website𝕏@sailfishcc1GitHub

image-ui-ux-doc

Extract visible UI facts from images into structured UI/UX documents.

Updated Apr 25, 2026
Search Tags:#design#ui#documentation#images#ux#sketch
One-click install
npx skills add https://github.com/Sailfishc/guanfu --skill image-ui-ux-doc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-ui-ux-doc
Source: https://github.com/Sailfishc/guanfu/tree/main/skills/image-ui-ux-doc
Command: npx skills add https://github.com/Sailfishc/guanfu --skill image-ui-ux-doc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill helps translate visual UI references into clear, shareable UI/UX documents so teams have a concrete basis for design decisions.

Core Features & Use Cases

  • Extract visible facts from screenshots, wireframes, or design exports to populate structured docs.
  • Generate consistent sections covering context, layout, interactions, accessibility, and responsive notes.
  • Use for design handoffs, UX audits, design reviews, and rapid frontend sketch documentation.

Quick Start

Provide an image or URL and request a UI/UX document; the system will generate a draft with sections and guidance.

Frequently Asked Questions about image-ui-ux-doc

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

FAQPage Schema
How do I convert UI images into structured UX documentation?▼

You can create UX documentation from images by providing a screenshot or wireframe. The system extracts visible UI facts to draft a structured document covering layout, interactions, accessibility, and responsive notes for design handoffs.

What is the best way to document UI design handoffs from screenshots?▼

Documenting UI design handoffs from screenshots involves extracting visible design facts into structured docs. This generates consistent sections for context, layout, and interactions, providing a concrete basis for team design decisions.

Can I use screenshots for a UX audit and rapid frontend documentation?▼

Yes, you can use screenshots for a UX audit and rapid frontend documentation. The system processes visual UI references to populate structured sections, ensuring reproducible workflows for design reviews and rapid frontend sketch documentation.

Does UI image to documentation work for both mobile and desktop contexts?▼

UI image to documentation works for both mobile and desktop contexts. The extraction process applies to visual UI references across different platforms, generating responsive notes and structured sections for comprehensive UX coverage.

What sections are included when generating UX docs from wireframes?▼

When generating UX docs from wireframes, the sections included cover context, layout, interactions, accessibility, and responsive notes. This structured section set ensures frontmatter-driven discovery and a reproducible workflow for iteration.

Related Skills

Explore More Design & Creative Skills→
testdriveraitestdriverai
238

testdriver:screenshot

Capture screenshots during test execution and store them by test file.

Official
Basic
hgflimahgflima
1

impeccable

Analyze and refine frontend interfaces through UX reviews and visual adjustments.

Community
Advanced
openyakopenyak
704

design-handoff

Generate structured markdown developer handoff specs from Figma URLs or design descriptions.

Official
Advanced
david-nossebrodavid-nossebro

ui-and-ux-expert

Audit Next.js and React UI/UX against repository constraints and user-facing states.

Community
Advanced