Product Mockup Design

Create professional product mockups and showcases using pure HTML/CSS. Device frames, 3D perspective transforms, feature callouts, and presentation layouts.

Step 1: Load Design Context

1. Read .agents/design-context.md for brand colors, fonts, style
2. If missing, ask user to run design-context skill or use defaults
3. Product mockups should match the brand's design style (minimal, bold, luxurious, etc.)

Gemini 3.1 Flash Image Preview

For AI image generation, see the image-generation skill for the full Gemini pipeline. Below are domain-specific prompt patterns for this skill.

Example Prompts