Viewfold

Inspiration

Building an app with an AI coding agent still leaves a surprisingly manual gap: visual feedback. I was repeatedly taking screenshots from Simulator, moving them between devices, describing which screen I meant, and correcting misunderstandings one prompt at a time. The agent could edit code, but it could not reliably see the product as a complete system.

Viewfold started from a simple idea: give developers and Codex a shared visual memory of the product.

What it does

Viewfold is a native macOS visual workspace for Codex. It keeps every project isolated, captures its screens and states, and organizes them into a navigable map of the product.

Developers can:

• Review multiple screens and nested states in one workspace
• Browse the product as a visual hierarchy instead of a folder of screenshots
• Draw directly on screenshots and attach precise callouts
• Group feedback into a single, structured handoff to Codex
• Build and run projects against available simulators or devices
• Compare requested and updated states before approving a change
• Keep a durable visual history across repeated agent sessions

The goal is to replace long, ambiguous UI prompts with compact visual context: point at the exact place, explain the intent once, and let Codex work from an organized product map.

How we built it

Viewfold combines a native macOS shell with a local project workspace and CLI. Each registered project receives its own isolated ledger containing screen metadata, navigation paths, revisions, annotations, general guidance, and agent-ready exports.

The app coordinates capture, review, build/run, and Codex handoff workflows. Its visual atlas models the product as:

App → section or process → nested state → screenshot

Selecting a node smoothly focuses that part of the product while preserving its surrounding context. Screenshot annotations and written instructions are converted into structured, scoped work for Codex rather than being flattened into one large prompt.

How we used Codex and GPT-5.6

Codex was the primary engineering collaborator throughout the project. We used it to inspect the evolving codebase, implement the native app and local CLI, diagnose simulator and permission failures, build the screenshot review workflow, add project isolation, and repeatedly test and refine the interface.

GPT-5.6 was especially valuable for product-level work: reasoning across long feedback histories, identifying recurring sources of ambiguity, turning those patterns into reusable workflows, and making coordinated changes across capture, review, navigation, and agent handoff behavior.

I made the key product and design decisions through hands-on review: what information should remain visible, how screenshots should be grouped, when comparisons should appear, how annotations should connect to instructions, and how the visual atlas should move and reveal detail. Codex accelerated implementation and verification while I continuously tested the real app and redirected the design.

Build Week work

An early screenshot-organizing prototype existed before OpenAI Build Week. During the submission period, it was meaningfully extended into Viewfold: a native multi-project developer tool with Codex handoff, build/run controls, structured pending-change and approval states, before/after review, precision annotations and callouts, theme-aware screenshot groups, a navigable visual app atlas, project isolation, and a substantially redesigned product experience.

The repository history and Codex session record distinguish this Build Week work from the earlier prototype.

Challenges

The hardest problem was not capturing screenshots. It was preserving intent across tools and time.

A note must remain attached to the correct screen and revision. A completed change must move from Pending changes to Ready for review without losing the original. Simulator capture must be reliable without interfering with physical devices. Codex handoff must be visible and trustworthy. The visual atlas also had to remain understandable as projects grew from a few screens to dozens of nested states.

Accomplishments

I am proud that Viewfold turns a scattered feedback process into one continuous loop:

See → annotate → send → build → compare → approve

It works across multiple isolated projects, preserves visual context, and gives both the developer and Codex a clearer shared understanding of the product.

What we learned

AI coding tools become much more useful when context is structured instead of repeatedly re-explained. Visual annotations can carry several precise corrections at once, while persistent screen identity and revision history reduce preventable rework. The most valuable interface is not another general chat window; it is a focused bridge between what the developer sees and what the coding agent needs to act.

What's next

Next steps include broader Android and web capture, additional coding-agent integrations, team collaboration, richer test evidence, and packaged distribution for developers who want a visual control layer for agent-driven product work.

Built With

• codex
• css
• gpt-5.6
• html
• ios-simulator
• javascript
• macos
• node.js
• xcode