Design skills for Claude Code and AI agents — powered by Gemini 3.1 Flash Image Preview.
Skills that make AI agents produce professional-grade graphic design, UI design, and visual content. Give it a product image and a one-line prompt, and get an eye-catching graphic back. These skills encode expert design knowledge — composition, color theory, typography, prompt engineering — that results in 10x better visual output.
Two output modes:
- AI Image Generation — Uses Gemini 3.1 Flash Image Preview to generate pixel-perfect graphics from prompts and reference images
- Code Generation — Produces production-ready HTML/CSS/SVG for web-native, interactive graphics
| Skill | Description |
|---|---|
design-context |
Establish brand identity, style, and audience context for all other skills |
image-generation |
Gemini 3.1 Flash Image Preview pipeline — text-to-image, image editing, multi-turn refinement |
| Skill | Description |
|---|---|
graphic-design |
Core graphic design principles and generation framework |
social-media-graphic |
Platform-specific social media graphics (Instagram, Twitter, LinkedIn, etc.) |
poster-design |
Event posters, promotional flyers, announcements |
thumbnail-design |
YouTube thumbnails, video covers, article headers |
ad-creative-design |
Ad banners, display ads, retargeting creatives |
product-mockup |
Product shots, device mockups, packaging visualization |
infographic |
Data visualization, process diagrams, comparison graphics |
banner-design |
Website banners, email headers, event banners |
| Skill | Description |
|---|---|
ui-design |
Core UI design patterns and component design |
landing-page-design |
High-converting landing pages with strong visual hierarchy |
dashboard-design |
Data dashboards, admin panels, analytics views |
mobile-ui-design |
Mobile-first interface design for iOS and Android |
hero-section |
Above-the-fold hero sections that convert |
card-design |
Card-based layouts, product cards, feature cards |
dark-mode |
Dark theme design with proper contrast and color adaptation |
email-design |
HTML email templates that render across clients |
| Skill | Description |
|---|---|
color-palette |
Color theory, palette generation, accessibility-compliant colors |
typography |
Font pairing, type hierarchy, responsive type scales |
layout-composition |
Grid systems, visual hierarchy, whitespace management |
brand-identity |
Logo systems, brand guidelines, visual identity |
icon-design |
Icon sets, icon systems, consistent iconography |
design-system |
Component libraries, design tokens, systematic design |
| Skill | Description |
|---|---|
design-critique |
Evaluate and improve existing designs |
motion-design |
Animation principles, micro-interactions, transitions |
presentation-design |
Slide decks, pitch decks, keynote presentations |
image-treatment |
Photo effects, overlays, filters, image composition |
Same prompt, same brand context, same tools. The only difference is whether the skills are installed. Each side was generated by headless Claude Code via evals/showcase.py; checks are the automated ones in evals/tasks/ (brand colors, contrast, exact export size, and so on). One run per side, so treat these as examples, not benchmarks.
Welcome email (code): checks 6/8 without skills, 7/8 with skills
Homepage hero section (code): checks 2/5 without skills, 4/5 with skills
Generated 2026-09-28 with claude-sonnet-5. Raw outputs and per-check results: docs/showcase.
# AI image generation
pip install google-genai Pillow
export GEMINI_API_KEY="your-api-key"
# Rendering, screenshots, and design audits (HTML -> PNG, critique capture)
npm i -D playwright && npx playwright install chromium# Install all 28 skills
npx skills add ArnavPuri/designskills
# Install specific skills only
npx skills add ArnavPuri/designskills --skill graphic-design image-generation
# List available skills
npx skills add ArnavPuri/designskills --listgit clone https://github.com/ArnavPuri/designskills.git ~/.claude/skills/designskillsgit submodule add https://github.com/ArnavPuri/designskills.git .claude/skills/designskillsStart by establishing design context, then invoke a specific skill:
1. Use the design-context skill to define your brand, audience, and style guidelines.
2. Then use a specific skill like graphic-design or landing-page-design for the task at hand.
Example — product image to social graphic:
> /design-context Set up brand context for a fintech startup targeting millennials.
Uses navy/teal palette, modern sans-serif type, clean minimal aesthetic.
> /graphic-design Here's our product image [product.png]. Create an Instagram
post announcing the launch with headline "Now Available".
The agent will:
- Load brand context (colors, fonts, style)
- Craft an optimized Gemini prompt with your brand parameters
- Generate the graphic using Gemini 3.1 Flash Image Preview with your product image
- Deliver a polished, on-brand graphic
The design-context skill stores brand parameters that all other skills reference, ensuring consistency across every asset you generate.
Skills bundle the scripts they use in skills/<name>/scripts/, so they come along with npx skills add:
| Script | What it does |
|---|---|
image-generation/scripts/gemini-generate.py |
Gemini text-to-image and editing: reference images, aspect ratio, resolution, exact-pixel --resize, multi-turn --then |
image-generation/scripts/export-sizes.py |
One master image to every platform size (social, ads, video presets) with focal-point cropping |
graphic-design/scripts/render.mjs |
HTML to exact-size PNG/PDF; waits for fonts, warns on clipped content |
design-critique/scripts/audit.mjs |
Screenshots at 3 widths plus dark mode, and measurements: contrast, overflow, tap targets, alt text, headings, axe-core |
design-context/scripts/contrast.py |
WCAG contrast for any pair or a whole design context, with the nearest passing shade |
color-palette/scripts/palette.py |
11-step OKLCH scales from a hue or a brand hex, as a table, CSS variables, or JSON |
evals/ measures whether the skills work: static consistency checks, a skill-routing eval (does each request load the right skill?), and end-to-end task evals that run headless Claude Code and grade the output with rendered audits and an optional rubric judge. See evals/README.md.
Future releases will support Glittr for editable design output. This will allow you to take AI-generated designs and refine them in a visual editor, bridging the gap between AI generation and manual polish.
See CONTRIBUTING.md for guidelines on creating and submitting new skills.
This project is licensed under the MIT License. See LICENSE for details.