VS Code Quickstart

Build your first brand-perfect slide using Pitch Smith's visual workflow -- Catalog, Slide Viewer, and Brand Assets panels -- all inside VS Code.

Estimated time: 10--15 minutes.

Prerequisites

You need both the Pitch Smith CLI plugin and the VS Code extension installed before starting. If you have not installed them yet, follow the CLI + VS Code Extension install guide first, then come back here.

Step 1: Open the Pitch Smith Sidebar

After this step, you'll have the Pitch Smith Activity Bar open with the Catalog, Viewer, and Brand Assets panels visible.

Create a new empty folder for your presentation and open it in VS Code:

1. Open VS Code.
2. Go to File > Open Folder (Cmd+O on macOS, Ctrl+K Ctrl+O on Windows/Linux).
3. Create a new folder (e.g., "my-presentation"), select it, and click Open.

Now open the Pitch Smith sidebar by clicking the Pitch Smith icon in the Activity Bar (the icon strip on the far left of VS Code). The sidebar opens with three panel tabs:

• Decks -- Browse and manage your presentation decks
• Templates -- Discover available slide and deck templates
• Brand Assets -- Manage logos, icons, and images

Right now, you will see a Welcome to PitchSmith screen with a Get Started button -- this is the guided first-run experience.

Verify: Sidebar is visible

• The Pitch Smith icon appears in the Activity Bar (left edge of VS Code).
• Clicking it opens the sidebar showing the welcome screen.

If you do not see the Pitch Smith icon, confirm the extension is installed: open the Command Palette (Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux) and type "Pitch Smith". You should see available commands. If not, follow the install guide.

What just happened?

The Pitch Smith extension activates when VS Code opens. The sidebar is your central hub for all visual operations -- browsing decks, managing templates, uploading brand assets, and launching the Slide Viewer.

Step 2: Scaffold a Project

After this step, you'll have a Pitch Smith workspace with the Catalog panel populated with starter templates.

Click the Get Started button in the Pitch Smith sidebar to begin setup. This opens Claude Code with the /pitchsmith command, which guides you through initial workspace creation.

Alternatively, open the integrated terminal in VS Code (Ctrl+`), start a Claude Code session with claude, and run:

/pitchsmith

On first run, Pitch Smith creates the .slide-builder/ directory with a default theme, starter templates, and a sample welcome deck. Once setup completes, the welcome screen automatically dismisses and the Catalog populates -- the Templates panel shows starter templates, and the Decks panel shows the sample welcome deck.

Verify: Catalog populated

• The welcome screen has been replaced by the full Catalog view.
• The Templates panel shows slide template cards (title slide, content slide, etc.).
• The Decks panel shows the "Welcome to Pitch Smith" sample deck.
• The .slide-builder/ directory appears in the VS Code Explorer sidebar.

If the panels do not update, click the refresh icon in the panel header.

What just happened?

The /pitchsmith command scaffolded the .slide-builder/ directory. The VS Code extension detects this directory via file watching and immediately populates the sidebar panels with your workspace content. This is the bridge between CLI commands and the visual UI -- commands produce files, and the extension reflects them instantly.

Step 3: Set Up Your Brand

After this step, you'll have a custom brand theme with your company's colors and fonts.

In your Claude Code terminal session, run:

/pitchsmith:setup

Pitch Smith asks you for brand source material. You can provide any combination of:

• A company website URL
• A brand guidelines PDF
• Logo files or screenshots

For this quickstart, providing just your website URL is enough. Pitch Smith analyzes the source material and generates a theme with your brand's color palette, typography, and visual personality.

If you do not have brand assets ready, skip this step. The default theme works well for getting started.

Verify: Brand theme created

Check that the theme file was updated:

ls .slide-builder/config/theme.json

Expected: The file exists with your custom colors and fonts (or the default theme if you skipped brand setup).

What just happened?

A theme is a JSON file that defines your visual identity: primary and accent colors, heading and body fonts, border radius, shadows, and more. Every slide Pitch Smith builds reads from this theme, so your entire deck stays visually consistent without manual styling.

Step 4: Plan a Deck

After this step, you'll have a planned deck visible in the Catalog panel with slide entries ready to build.

In your Claude Code terminal session, run:

/pitchsmith:plan-deck

Describe the presentation you want to create. For example:

"A 3-slide intro deck for my team about our Q2 goals"

Pitch Smith asks follow-up questions to understand your content, audience, and goals, then generates a plan -- a YAML file that describes each slide's title, template, and key points.

After planning completes, switch to the Pitch Smith sidebar. The new deck appears in the Decks panel as a card showing the deck name and slide count. Click the deck card to see each planned slide listed with its title and template.

Verify: Deck appears in Catalog

• The Decks panel shows your new deck card (e.g., "Q2 Goals").
• Clicking the card shows the individual slide entries.
• The output/q2-goals/plan.yaml file exists in your project.

If the deck does not appear, click the refresh icon in the panel header.

What just happened?

A plan is Pitch Smith's blueprint for your presentation. The plan captures the narrative flow -- what each slide says, what layout it uses, and how slides connect. The Catalog panel automatically detects the new plan.yaml via file watching and displays your deck as a visual card, so you can see the planned slides at a glance without reading YAML.

Step 5: Build a Slide and Watch It Appear

After this step, you'll have a built slide rendered live in the Slide Viewer with thumbnail navigation.

In your Claude Code terminal session, run:

/pitchsmith:build-one

Pitch Smith reads the first unbuilt slide from your plan, selects the matching template, applies your brand theme, and generates a fully styled HTML slide. After the build completes, the Slide Viewer panel opens automatically, showing your slide at full size with a thumbnail sidebar on the left and a toolbar at the top.

Verify: Slide appears in Viewer

• The Slide Viewer panel opens with your built slide displayed.
• A thumbnail preview appears in the left sidebar.
• The slide uses your brand colors and fonts.
• The output/q2-goals/slides/slide-1.html file exists.

If the Viewer does not open automatically, open the Command Palette (Cmd+Shift+P) and run Pitch Smith: Open Slide Viewer, then select your deck.

What just happened?

The build workflow generated an HTML slide file in output/. The VS Code extension's file watcher detected the new file, updated the manifest, and opened the Slide Viewer automatically. The Viewer renders the standalone HTML inside a webview panel -- no browser needed.

Step 6: Explore the Viewer

After this step, you'll know how to use fullscreen mode, presentation mode, and keyboard navigation.

With the Slide Viewer open, try these controls:

Navigate between slides using keyboard shortcuts:

Action	Shortcut
Next slide	Right Arrow or Page Down
Previous slide	Left Arrow or Page Up

Fullscreen view: Click the maximize button in the Viewer toolbar to expand the slide to the full editor area. Press Escape to exit fullscreen.

Presentation mode: Click the Present button in the toolbar. A browser window opens with your slides in fullscreen presenter mode. Use arrow keys or spacebar to navigate.

Toggle sidebar: Click the sidebar toggle in the toolbar to show or hide the thumbnail strip for more slide display space.

Build the rest of the deck to see all thumbnails populate:

/pitchsmith:build-all

Watch the Viewer's thumbnail sidebar update in real time as each slide builds.

Verify: Viewer controls work

• Fullscreen toggle expands and collapses the slide view.
• Presentation mode opens a browser window with slides.
• Arrow keys navigate between slides (after building multiple slides).
• The thumbnail sidebar shows all built slides.

Auto-refresh

The Slide Viewer auto-refreshes when files change. Run /pitchsmith:edit in the terminal to tweak a slide's layout, and watch it update live in the Viewer without any manual reload.

Congratulations!

You just went from an empty directory to a branded, professional slide using Pitch Smith's visual workflow. Here is what you accomplished:

1. Opened the Pitch Smith sidebar to see the visual hub for your workspace.
2. Scaffolded a project and watched the Catalog populate automatically.
3. Set up your brand so every slide matches your visual identity.
4. Planned a deck that appeared as a visual card in the Catalog.
5. Built a slide and viewed it live in the Slide Viewer.
6. Explored viewer controls including fullscreen and presentation mode.

Build the entire deck

/pitchsmith:build-all

This builds every unbuilt slide. Watch the Viewer's thumbnail sidebar populate in real time as each slide completes.

Next Steps

Now that you have built your first slide, explore these guides to go deeper:

• CLI Quickstart -- See the terminal-first workflow if you want the pure CLI approach.
• Use the Slide Viewer -- Full Viewer guide with all controls, keyboard shortcuts, and presentation features.
• Brand Setup -- Learn how to refine your theme, provide feedback on extracted colors, and use the visual Theme Editor.
• Core Concepts -- Understand how themes, templates, plans, and the build pipeline work together.