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 first. Extract primary, secondary, and accent colors (hex), heading and body fonts, and style archetype
2. If the file doesn't exist, use the Default Fallbacks from design-context and tell the user the output uses defaults. Suggest running design-context for on-brand results