OpenSpec tutorial: plan changes with Claude Code
Learn OpenSpec's planning and implementation workflow through a design migration, including Markdown specs, browser checks, and archive and sync commands.
Player not loading? Watch on YouTube
Sean walks through OpenSpec with Claude Code to redesign an existing recipe app using references from Claude Design. He compares its approach with GitHub Spec Kit and prefers OpenSpec's optional exploration phase for resolving questions before committing to a plan. This is a workflow tutorial for a coding assistant; it does not establish local model support or offline operation.
The walkthrough starts with package installation and project initialization, then covers an onboarding command for a first feature. Sean uses explore manually to discuss changes to the design system and repository structure. The proposal step produces Markdown files for the proposed change, technical design and tasks, plus feature specs with requirements and scenarios.
Before running apply, he adds visual verification through Chrome browser tooling and starts Claude Code with the Chrome flag. That check is an added requirement in this example, rather than a built-in part of the process. Sean reports 2 hours and 8 minutes of processing, with pauses extending elapsed time. His review still finds sidebar spacing, button alignment and accent-color issues.
Archive reconciles change specs with the project's main specifications and preserves the planning artifacts. The later example uses new and continue to plan backend work in smaller changes. Fast forward advances the remaining planning stages, while sync updates existing feature documentation with the latest work.