How does the skill maintain brand consistency?

The skill reads a local .agents/design-context.md file to extract your specific brand colors, fonts, and style archetypes before starting any design work.

Can I use existing product images with this skill?

Yes, the skill can analyze provided images to identify dominant colors and composition, then integrate them into a new design that pops.

What design principles does the skill apply?

It implements professional standards including the Rule of Thirds, Golden Ratio, Z-Pattern layouts, and sophisticated color theory models like the 60-30-10 rule.

When should I choose AI generation over code generation?

Use AI generation for rich visuals like social posts and posters. Choose code generation for interactive, scalable, or editable web elements like UI components.

Is the CSS output production-ready?

Absolutely. It generates self-contained HTML files with embedded CSS, utilizing modern techniques like clamp() for fluid typography and hardware-accelerated animations.

Graphic Design

Name: Graphic Design
Author: ArnavPuri

byArnavPuri

•

Design Tools

Generates stunning visual assets and production-ready web graphics using Gemini-powered image generation or advanced HTML/CSS/SVG code.

The Graphic Design skill transforms Claude Code into a versatile design assistant capable of producing both high-fidelity pixel graphics and editable web-native elements. By leveraging Gemini 3.1 Flash Image Preview and deep CSS expertise, it applies professional composition principles like the Golden Ratio and Rule of Thirds to create everything from social media banners to interactive UI components. The skill is context-aware, automatically integrating your brand's specific colors, typography, and style archetypes to ensure every visual output is consistent with your existing design system.

Key Features

01Advanced CSS techniques: Implements glassmorphism, mesh gradients, SVG filters, and complex animations.

021 GitHub stars

03Intelligent brief analysis: Determines visual intent to optimize hierarchy for promotional, informational, or celebratory goals.

04Brand-aware design: Automatically extracts and applies styles from your local design-context metadata.

05Dual-mode generation: Choose between AI-powered image generation or production-ready code outputs.

06Prompt engineering: Structured narrative-based prompting for high-quality, professional-grade AI imagery.

Use Cases

01Creating editable, interactive web graphics and animated SVG elements for frontend development.

02Designing cohesive brand-consistent visuals by analyzing and complementing existing product photography.

03Generating high-conversion social media assets and promotional banners for digital marketing.

Key Features

01Advanced CSS techniques: Implements glassmorphism, mesh gradients, SVG filters, and complex animations.

021 GitHub stars

03Intelligent brief analysis: Determines visual intent to optimize hierarchy for promotional, informational, or celebratory goals.

04Brand-aware design: Automatically extracts and applies styles from your local design-context metadata.

05Dual-mode generation: Choose between AI-powered image generation or production-ready code outputs.

06Prompt engineering: Structured narrative-based prompting for high-quality, professional-grade AI imagery.

Use Cases

01Creating editable, interactive web graphics and animated SVG elements for frontend development.

02Designing cohesive brand-consistent visuals by analyzing and complementing existing product photography.

03Generating high-conversion social media assets and promotional banners for digital marketing.