Introducing /visual-plan - rich plans for Claude Code + Codex

Introduction to Visual Plan

Overview of the Problem

• The speaker discusses challenges with traditional markdown essays in terminals, leading to missed important details due to overwhelming information.

• Inspired by a post on HTML vs. markdown, the speaker created a new skill called "visual plan" for better visual representation.

Features of Visual Plan

• Visual plan generates MDX plans with interactive components like diagrams, API specs, schema designs, and annotated code.

• It allows users to view wireframes first, comment on them, and iterate visually before implementation.

Enhancing Trust in Agents

Importance of Clear Plans

• Emphasizes that clear and consumable plans increase trust in agents executing tasks reliably.

• Introduces "visual recap," which provides an overview of what the agent accomplished using similar visual tools.

Benefits of Visual Recaps

• Users can review work through interactive visuals rather than dense summaries or line-by-line code reviews.

• This approach helps catch discrepancies early between expectations and actual outcomes before production deployment.

Customization and Usability

Advantages Over Traditional Formats

• Highlights the tediousness of manual testing; visual snapshots allow for quick interactions and insights into projects.

• Transitioning from HTML to MDX offers more consistency and reusability compared to generating random HTML each time.

Open Source Contribution

• The speaker has open-sourced the skills and application for generating MDX plans that can be customized by others.

Future Collaboration Opportunities

New Reasoning Levels for Engineers

• Advocates for reasoning at the plan level as a new standard among engineers, enhancing collaboration across teams (e.g., product managers and designers).

Automation with GitHub Actions

• Introduces a GitHub action that automatically generates visual plans for pull requests, making reviews easier through interactive snapshots.