Spec Kit and Claude Code: setup and prompt comparison

Learn Spec Kit setup and its seven-step workflow in VS Code, with a task-board comparison against a simple prompt and a look at token overhead.

Player not loading? Watch on YouTube

This tutorial compares two ways to build a browser task board with Claude Code: a short prompt and GitHub's Spec Kit workflow. Both versions support task priorities, three status columns, drag and drop, and browser storage. The speaker's main distinction is the written record of requirements and decisions, rather than a claim that one produces better code.

Setup uses VS Code, Git, uv, and Python 3.11 or later. The demonstration uses Windows PowerShell and initializes a project for Claude Code. Command names and invocation syntax can differ between coding tools, so the speaker recommends checking the available command menu.

The workflow starts with constitution rules, then uses specify to describe user behavior and clarify to resolve questions such as card ordering and recovery from corrupted storage. Plan chooses HTML, CSS, and JavaScript without a framework; tasks breaks the plan into work items; implement writes the code. The final converge step compares the implementation with the documents. In this example, it identifies six additional items, while Firefox checks remain unfinished.

The speaker warns that these steps add time and token consumption and can be excessive for small tasks. Existing projects need a separate approach, and unclear specifications still produce poor results. This is a coding assistant workflow tutorial; it does not demonstrate running a model on the user's own hardware.