Graphic Design

The primary skill for generating stunning visual graphics. Supports two output modes:

1. AI Image Generation (default) — Uses Gemini 3.1 Flash Image Preview to generate pixel-perfect graphics from prompts and reference images
2. Code Generation — Produces production-ready HTML/CSS/SVG for web-native graphics

Choose AI generation for social posts, posters, ads, and rich visuals. Choose code for interactive web graphics, animated elements, or when the output must be editable HTML.

Step 1: Load Design Context

Before any design work:

1. Read .agents/design-context.md for brand colors, fonts, style archetype
2. If no context exists, ask the user to run the design-context skill or proceed with defaults
3. Extract: primary color, secondary color, accent, heading font, body font, design style