Descriptions:
Web Dev Cody walks through a Claude Code “skill” that automates contextual image generation for landing pages using OpenAI’s GPT Image 2 API. Instead of manually sourcing visuals, the skill reads the surrounding page content to determine what image is appropriate, then calls the OpenAI API to generate it — including vertical 9:16 banner images — directly within a Claude Code session.
The tutorial covers both the end result and the underlying mechanics. Each skill lives in the `.claude` folder as a markdown file with front matter describing its purpose, preconditions (a `.openai-key` file at the project root), and invocation examples. A companion shell script handles the actual API call and returns the generated image back to the model. Claude Code uses this metadata to invoke the skill automatically without exposing API credentials or implementation details to the model context itself.
Cody also demonstrates how to create new skills from scratch by prompting Claude Code with a plain-language description and pasting in relevant API documentation. A free “Essentials” skills pack — including the GPT Image 2 skill shown here — is available on GitHub via the Agentic System Labs repo, with a broader commercial skill library in development at agentsystem.dev. For developers building marketing pages or UI-heavy projects, the pattern offers a repeatable, low-friction path to production-quality contextual imagery without leaving the coding environment.
📺 Source: Web Dev Cody · Published May 01, 2026
🏷️ Format: Tutorial Demo
