Engineer's guide: AI-generated marketing designs at zero token cost

The engineer's workflow begins with ideation in ChatGPT Web, deliberately avoiding local models or agents that have access to the product codebase. A prompt like "I am building {product name}. The key features are {...}. Give me 10 ideas for screenshots to include in the MacOS App Store that will help me sell to my customers" generates marketing-appropriate screenshot concepts without technical jargon. From those ten ideas, the engineer asks ChatGPT to expand the most promising concept into a detailed image-generation prompt. This prompt is then fed into ChatGPT Images 2.0, ideally alongside an actual screenshot of the app to ground the AI-generated image in reality.

Once base PNG files exist for each desired screenshot, the engineer uploads them to Google Stitch (described as Google's Figma competitor) with a request to reproduce the design as an HTML page. Because Google Stitch has limited token availability, the output is rarely perfect—font colors may be wrong, and decorative elements may look poor. The engineer then opens the generated .zip file in a text editor and uses ChatGPT Web (which has unlimited tokens for paid accounts) to refine the HTML: updating copy, adjusting styles, and fixing layout issues. After polishing is complete, the engineer takes a browser screenshot of the HTML, crops and resizes it to match the target app store dimensions, and uploads the final image.

For elements that neither ChatGPT nor Google Stitch can render correctly—such as a specific icon the engineer liked in the original image—the workflow includes a manual sidequest: opening the ChatGPT-generated image in an SVG editor, manually tracing the icon with vector points, exporting as SVG, and replacing the generated version with the hand-crafted one.

The AvoVietnam case study illustrates the evolution. Pre-AI marketing materials were simple screenshots on gradient backgrounds, described as appearing lazy. When ChatGPT image generation did not yet exist, the engineer asked ChatGPT to generate an HTML template from a PNG mockup; the result, created before Google Stitch was available and processed with Codex 5.3, suffered from weird font sizes and blob positioning. The engineer notes this looked like work from "a high school design student or a software engineer with no design skills." By contrast, the current Google Stitch workflow produces visibly more polished and professional-looking assets. The engineer is candid: this approach is "infinitely better quality and lower time" than solo engineering effort pre-AI but does not match work a professional designer would deliver.

The workflow described addresses a common pain point for engineers: the inability to create compelling marketing visuals without either hiring expensive designers or investing significant time learning design tools. By leveraging ChatGPT Web for ideation and copy generation, ChatGPT Images 2.0 for initial visuals, and Google Stitch for conversion to structured HTML, the engineer has assembled a pipeline that outsources creative direction to AI while maintaining human oversight at critical junctures. The deliberate choice to use ChatGPT Web rather than local models reveals an important lesson: models with access to internal codebase context can contaminate marketing materials with domain-specific terminology, while web-based ChatGPT maintains appropriate distance from technical implementation. The case study of AvoVietnam demonstrates the material improvement over pre-AI and early-AI attempts—the pre-AI marketing materials were described as "lazy" (simple screenshots with gradient backgrounds), while the ChatGPT-to-HTML workflow of that era suffered from odd proportions and poor font rendering. The engineer acknowledges that this workflow still falls short of professional design work but represents a vast quality-and-speed improvement for solo engineers without design training.

No comments yet. Be the first to share your thoughts!