跪拜 Guibai
← All articles
JavaScript

SDD Stops AI Coding from Eating Itself: A Chrome Extension Walkthrough

By mONESY ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

AI code generation is cheap, but clear, executable intent is scarce. SDD gives teams a repeatable way to produce that intent before the AI touches code, cutting the rework cycle that makes vibe coding economically irrational for anything beyond toys.

Summary

Vibe coding — telling an AI to build something and iterating in chat — skips the mental blueprint and jumps straight to code, which collapses into rework and hallucination by week two. SDD restores that first creation with three structured documents: a proposal that defines what to build and what not to build, a design that locks in architecture and tech choices, and a task list that breaks work into single, verifiable units. The approach was applied to a real Chrome extension that extracts English articles via Mozilla Readability, translates them through an OpenAI-compatible API (model-swappable between DeepSeek and Qwen), and renders the result as WeChat-optimized Markdown with typewriter streaming. Every AI session runs one task only, starts with a clean context, and every change is immediately version-controlled so hallucinations can be rolled back. When a new requirement arrived — switching from a popup to a full-height side panel — the docs were updated first, then the code followed, keeping spec and implementation in lockstep under git.

Takeaways
Vibe coding skips the mental blueprint and jumps straight to code, causing context loss, hallucination, and rework within weeks.
SDD mandates three documents before any code: proposal (what and what not to build), design (architecture and tech choices), and tasks (ordered, single-scope units with acceptance criteria).
The Chrome extension uses Mozilla Readability for content extraction and Turndown for Markdown conversion, sidestepping the hardest part of arbitrary web page parsing.
Translation is wired through the OpenAI SDK with swappable base_url/api_key/model, avoiding vendor lock-in to any single LLM provider.
Markdown rendering uses md-wx, a React component tuned for WeChat Official Accounts formatting.
AI sessions follow a single-task rule: one numbered task per fresh session, no auto-expansion, and a self-check against acceptance criteria before handoff.
Every AI-generated change is immediately git-controlled; three rollback paths cover unstaged, staged-but-uncommitted, and committed states.
New requirements are applied by researching and updating the docs first, then driving code changes from the updated spec, keeping documentation and implementation consistent under git.
Conclusions

The core economic argument is inverted from what most developers assume: as code generation gets cheaper, the bottleneck shifts upstream to specification quality, not downstream to coding speed.

SDD treats documentation not as a side artifact but as the primary engineering artifact — 'documentation is code' — which changes where senior effort should be spent in an AI-assisted workflow.

The single-task-per-session rule is a practical countermeasure to the context-window decay that silently degrades AI output quality across long conversations.

Immediate git versioning of AI output turns hallucinations from catastrophic surprises into cheap, reversible mistakes, which changes the risk calculus of letting an agent generate large diffs.

The side-panel iteration demonstrates that SDD's real payoff is not the first build but the Nth change: when docs and code stay coupled, every future modification has a verified starting point.

Concepts & terms
Vibe Coding
An AI-assisted development style where a developer describes a feature in a chat window and iterates on the generated code through conversation, skipping upfront specification and architecture.
SDD (Spec-Driven Development)
A workflow that requires completing structured specification documents (proposal, design, tasks) before any code is written, then using those documents to drive AI code generation in discrete, verifiable steps.
Mozilla Readability
An open-source library that extracts the main content from a web page by stripping navigation, ads, and sidebars; it powers Firefox Reader Mode and is used here to isolate article text for translation.
Turndown
A JavaScript library that converts HTML to Markdown, used in the extension pipeline to turn extracted web content into a format suitable for AI translation and WeChat rendering.
Chrome Side Panel API
A Manifest V3 Chrome extension API that allows an extension to open a persistent panel on the side of the browser window, as an alternative to the transient popup dialog.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗