skills.rest
ckorhonen
ckorhonenCOMMUNITY
Explore all skills by this author →
Website𝕏@ckorhonenGitHub

gemini-visual

Analyze UI screenshots and design briefs to generate frontend code and assets.

12|Updated Dec 13, 2025
Search Tags:#accessibility#frontend#color-palette#asset-generation#ui-analysis#gemini-visual#screenshot-to-code
One-click install
npx skills add https://github.com/ckorhonen/claude-skills --skill gemini-visual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gemini-visual
Source: https://github.com/ckorhonen/claude-skills/tree/main/skills/gemini-visual
Command: npx skills add https://github.com/ckorhonen/claude-skills --skill gemini-visual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, and includes scripts (resource) components.

What problem does it solve?

Visual and front-end development tasks are accelerated by leveraging Google Gemini 3 for visual analysis, design critique, and automated code and asset generation from UI content.

Core Features & Use Cases

  • UI analysis, accessibility audits, and design critique based on screenshots or briefs.
  • Color palette extraction, design-to-code conversion, and asset generation for frontend projects.
  • Interactive design sessions and briefs-to-iterations to accelerate UI workflows.

Quick Start

Supply a UI screenshot or a design brief to immediately generate analysis, code, and UI assets.

Frequently Asked Questions about gemini-visual

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

FAQPage Schema
How do I convert a UI screenshot to frontend code?▼

Screenshot-to-code conversion works by analyzing UI screenshots using Google Gemini 3 prompts to generate frontend code. You supply a UI screenshot, and the tool returns corresponding frontend code in text, markdown, or JSON formats.

Can I run an accessibility audit from a design screenshot?▼

Yes, accessibility audits can be run from design screenshots. The tool analyzes UI screenshots to evaluate design accessibility, providing comprehensive critique and audit results directly from the visual input.

How do I extract a color palette from an existing UI design?▼

Color palette extraction works by analyzing UI screenshots to identify and generate color schemes. You provide a screenshot of the existing UI, and the tool returns the extracted color palette for your frontend project.

Does screenshot-to-code conversion work with design briefs as well?▼

Yes, the tool accepts both UI screenshots and design briefs as input. It processes design briefs to generate UI analysis, frontend code, and UI assets, supporting interactive design sessions and briefs-to-iterations.

Do I need google-genai to generate UI assets from screenshots?▼

Yes, google-genai is required as a dependency. The tool uses Google Gemini 3 prompts to power visual analysis, asset generation, and design-to-code conversion for frontend projects.

What formats are supported for UI analysis and code generation results?▼

UI analysis and code generation results can be returned in text, markdown, or JSON formats. The tool accepts multiple models and formats, allowing you to request the specific output format needed for your workflow.

Related Skills

Explore More Design & Creative Skills→
lamtuanvulamtuanvu

gemini-image-gen

Generate SVG and PNG visual assets using the Gemini API.

Community
Advanced
suhwansuhwan

anti-sameness

Detect clichéd UI patterns in design assets and generate a markdown report.

Community
Intermediate
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
ckrono-progckrono-prog

recreate-screenshot

Generate pixel-perfect UIs from screenshots or images via visual analysis.

Community
Advanced