Building visual tools to improve vibe coding

The painful gap between seeing a problem and describing it

AI-powered design tools are changing how teams build interfaces, but they share a fundamental limitation: they rely on written instructions. When a designer spots an alignment issue, a contrast problem, or a hierarchy that's off — they have to translate what they see into words. That translation is slow, imprecise, and loses critical context about exactly where and what needs to change.

I wanted to build a tool for my design community at Amazon that closes this gap — something that lets designers point directly at the problem and communicate it visually, with the precision that a marked-up screenshot provides over a paragraph of text.

Building the Visual Playground

The tool lives behind a green pyramid FAB at the bottom-left of the screen — always available, never in the way. One click opens the Visual Playground: a dedicated canvas where the current screen is captured and centered, ready for markup.

Annotation tools built for design feedback

The bottom toolbar offers drawing, annotation, and highlighting tools. But the real accelerator is the sticker panel: pre-built tags for common design issues that designers can drag directly onto elements. The stickers do double duty — they speed up feedback, and they act as a checklist that helps designers remember the full vocabulary of design principles while reviewing their work.

One click from feedback to action

The final step is "Export to Kiro." One click generates a structured markdown file paired with the annotated visual and drops both directly into Kiro — Amazon's AI-powered design tool. No copy-pasting, no reformatting, no switching contexts. The designer's visual feedback arrives exactly as they created it, ready to be acted on without additional work.

The tool was built for Amazon's design community but designed to be used by anyone — designers, PMs, engineers — anyone who needs to give precise visual feedback to an AI tool.