team-shinchan:vision

Extract text and UI components from screenshots, mockups, diagrams, and PDFs.

8|2|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/seokan-jeong/team-shinchan --skill team-shinchan-vision
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: team-shinchan:vision
Source: https://github.com/seokan-jeong/team-shinchan/tree/main/skills/vision
Command: npx skills add https://github.com/seokan-jeong/team-shinchan --skill team-shinchan-vision

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides fast, structured analysis of images, screenshots, mockups, diagrams, and PDFs so teams can extract text, identify UI components, and derive actionable design and implementation insights without manual inspection.

Core Features & Use Cases

  • Visual element breakdown: Describes layout, components, and visual hierarchy in screenshots and mockups for design and engineering handoff.
  • Text extraction and OCR: Pulls textual content from images and PDFs for search, summarization, and documentation.
  • Design–code linking: Attempts to connect visual elements to related code files or components in the repository for faster implementation.
  • Use Case: Review a product mockup to generate component lists, extract labels, and surface possible matching files in the codebase.

Quick Start

Ask the vision skill to analyze the file screenshot.png and extract UI elements, text, a summary, and any related code references.

Frequently Asked Questions about team-shinchan:vision

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

FAQPage Schema
How do I extract UI components and text from a design mockup?

To extract UI components and text from a design mockup, you can use image analysis to parse the layout, identify visual elements, and apply optical character recognition to pull labels for design specification and engineering handoff.

Can I link extracted visual elements from a screenshot to my codebase?

Yes, you can link visual elements from a screenshot to your codebase by analyzing the mockup to identify components and connecting those parsed visual insights to related code files or project components via a subagent.

What is the best way to extract text from a PDF for documentation?

The best way to extract text from a PDF for documentation is using optical character recognition to pull textual content directly from the document, enabling fast search, content summarization, and structured layout parsing.

Does image analysis work for generating design specs from diagrams?

Yes, image analysis works for generating design specs from diagrams by describing the visual hierarchy, breaking down component layouts, and summarizing the content to provide actionable implementation insights.

How do I summarize layout and content from a product screenshot?

You can summarize layout and content from a product screenshot by applying visual element breakdown to describe the hierarchy and using OCR to extract text, yielding a structured summary for design reviews.