Design & Media Agent Skills for Claude Code

Runs the diffui MCP workflow before any HTML/CSS/JS is written: create_project, generate_options (4 variants), generate_page…

Plan customer discovery interviews with the right goal, segment, constraints, and method.

draw.io diagram creation, editing, and review.

Creates Excalidraw diagrams through guided or autonomous workflows.

Use when working with *.excalidraw or *.excalidraw.json files, user mentions diagrams/flowcharts, or requests architecture visualization…

Generate or edit images using OpenAI GPT Image API (gpt-image-2, gpt-image-1, etc).

Write a structured design brief for a Figma design task from a product requirement or feature request.

Runs a pre-handoff QA checklist on a Figma design before it goes to engineering.

Design a spacing and layout token system for a Figma design system.

Apply Fitts's Law — target acquisition time depends on size and distance.

Turn travel photos with recognizable architecture or human-made landmarks into 3:4 folk ink-and-color posters, with either a photo…

Create polished, intentional frontend interfaces.

Frontend development cycle orchestrator with 9 gates.

Generate premium horizontal website design-reference images for landing pages, marketing sites, and product pages.

Create distinctive, production-grade frontend interfaces with high design quality.

Generate and edit images using Google's Gemini image generation models (Nano Banana family).

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Build a Go net/http web UI using gomponents + htmx + Tailwind(daisyUI), with embedded assets and unit/integration/e2e tests (Playwright).

AI image generation with OpenAI GPT Image 2, Azure OpenAI, Google, OpenRouter, DashScope, Z.AI GLM-Image, MiniMax, Jimeng, Seedream…

Generate professional infographics with 21 layout types and 22 visual styles.

Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter.