跪拜 Guibai
← All articles
Frontend · Artificial Intelligence · Design

Four Vibe-Coded Projects in Six Months: From a 3,721-Line Monolith to an AI That Writes for Itself

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

The progression from single-file monoliths to automated verification scripts and reusable AI skill files maps a practical path for solo developers who ship with AI assistance. The 33-line brace-checking script and the skill-file approach are concrete, low-cost techniques that prevent the structural rot and context drift that plague vibe-coded projects.

Summary

Over six months, four projects emerged from a single developer's personal needs: a sprawling parenting app that ballooned into a game collection, a pixel-art diary explorer written in one commit, a mental-friction questionnaire mini-program, and an AI writing toolchain that publishes to WeChat and Xiaohongshu. The parenting app's Raiden game file grew to 3,721 lines before structural debt forced a painful two-night refactor into eight files. That experience led to a 33-line verification script that scans for mismatched braces and template strings during builds, shifting the work from manually checking AI output to writing tools that check it automatically. The final project introduced a skill system: 127 reusable agent files that encode writing methodology, style constraints, and iterative editing beats, so the AI produces structured prose without repeated prompting. The toolchain now handles the full pipeline from Markdown to published article, leaving only the topic decision to the human.

Takeaways
A single React component file grew to 3,721 lines, causing the AI to duplicate collision logic because it lost context on earlier implementations.
Splitting that file into eight modules took two nights; the same split at 800 lines would have taken minutes.
A 33-line verification script that counts braces, brackets, parentheses, and template strings during build catches syntax errors that manual review misses after 20 minutes of fatigue.
Placing a CLAUDE.md or AGENTS.md file in the project root with tech stack, directory structure, naming conventions, and known issues gives the AI persistent context across sessions.
Three reusable skill files—article-writing, writing-beats, and writing-shape—encode style constraints, iterative drafting rhythm, and paragraph-level polishing so the AI produces consistent prose without repeated instruction.
The wechat-ai-editor toolchain runs Markdown through marked for HTML conversion, juice for CSS inlining, then pushes drafts via the WeChat API or auto-fills Xiaohongshu's publish form through Playwright.
Across four projects totaling over 10,000 lines of code, only one test file exists; the rest relies on visual inspection.
Conclusions

Structural debt in AI-assisted coding doesn't accumulate gradually—it stays hidden until a file crosses a context-window threshold, then the AI begins duplicating logic it already wrote.

Writing a script to verify AI output inverts the debugging workflow: the human stops being a manual checker and becomes a tool author, which scales across projects.

Skill files that encode methodology rather than instructions let an AI produce stylistically consistent output across different platforms without per-session retraining.

The jump from 'it runs' to 'it looks good' required hand-written CSS and SVG paths with no UI framework, suggesting that vibe coding's ceiling on visual polish is still set by the developer's own design ability.

None of the four projects were built as products; each served a personal need, which removed the pressure to generalize but also left testing and architectural discipline as persistent gaps.

Concepts & terms
Vibe coding
An approach to software development where the developer describes desired behavior to an AI assistant in natural language and iterates on the generated code, often without formal specifications, PRDs, or design documents.
CLAUDE.md / AGENTS.md
A project-root configuration file that provides an AI coding assistant with persistent context: tech stack, directory structure, naming conventions, known issues, and project-specific rules. The AI reads it at the start of each session to maintain continuity.
Skill files (agent skills)
Reusable prompt templates or configuration files that encode a methodology—such as writing style, editing rhythm, or code patterns—so an AI can apply consistent behavior across different projects without repeated instruction.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗