How do I preview the designs generated by Claude?

The skill automatically attempts to open the generated image using system commands like xdg-open or open immediately after generation is complete.

Can Sketch match my existing application's design style?

Yes, Sketch can scan your codebase for Tailwind configs, theme files, and CSS to identify brand colors and styles, incorporating them into the generation prompt.

Do I need an API key to use the Sketch skill?

Yes, you must have a GOOGLE_AI_API_KEY set in your environment variables for the skill to communicate with Gemini's generation services.

Where are the generated images saved?

Images are saved to a /sketches/ folder within your current project directory using absolute paths to ensure they are easily accessible.

What AI model does the Sketch skill use for image generation?

Sketch utilizes Google Gemini's image generation API to produce high-quality visual content based on expert-crafted prompts.

Sketch Visual Design

Name: Sketch Visual Design
Author: andrsnn

byandrsnn

0•

设计工具

Generates professional UI mockups, marketing assets, and social media visuals directly within Claude Code using Gemini AI.

Sketch is a comprehensive visual design skill for Claude Code that enables developers to generate high-quality images, UI mockups, and marketing collateral without leaving the terminal. By leveraging the Google Gemini API, it intelligently applies domain-specific best practices for various formats—ranging from App Store screenshots and pitch deck slides to email headers and brand assets. The skill can even analyze your local codebase to identify existing themes and color palettes, ensuring that any generated visual content remains consistent with your project's brand identity.

主要功能

010 GitHub stars

02Context-aware UI mockup generation based on local CSS and Tailwind configurations

03Automatic system-level image previewing and local file management in a dedicated sketches directory

04Automated aspect ratio optimization for social platforms like Instagram, LinkedIn, and TikTok

05Pre-configured expert prompts for diverse assets including ads, infographics, and product shots

06Support for iterative design through reference image inputs and prompt refinement

使用场景

01Rapidly prototyping mobile and web interfaces during the initial development phase

02Generating high-fidelity marketing assets and app store screenshots for product launches

03Creating brand-consistent placeholder graphics and mood boards for project documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add andrsnn/claude-sketch sketch

For use in Claude.ai and ChatGPT