跪拜 Guibai
← All articles
Frontend · AI Programming

CodeGraph, OpenSpec, Impeccable: A Vibe-Coding Stack That Covers Debugging, Intent, and UI

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

Vibe coding can turn into a messy pile of generated code with no record of why anything was built. CodeGraph cuts AI token spend, OpenSpec makes the purpose and implementation explicit before code changes, and Impeccable forces the visual layer to get attention. Combined, they turn ad-hoc AI sessions into a repeatable, auditable workflow.

Summary

CodeGraph turns a codebase into a queryable map that AI can navigate to trace how a feature works; token savings is the documented selling point. OpenSpec enforces a full feature workflow: explore requirements, write a proposal, review and update the plan, apply the task list, verify the result, then sync and archive the change. The catch is that the record only holds if the entire team adopts the tool, otherwise no one leaves a trail.

Impeccable takes over after a feature goes live, guiding decisions on typography, spacing, and visual hierarchy. The tool selection follows the task: CodeGraph for debugging, OpenSpec for feature planning, Impeccable for UI polish.

Takeaways
— CodeGraph works as a queryable map of the codebase, letting AI find relevant files and understand feature relationships.
— The author selected CodeGraph mainly because its documentation claims it reduces token usage.
— OpenSpec's default workflow runs `/opsx:explore` to discuss requirements, `/opsx:propose` to formalize a plan, `/opsx:update` to adjust, `/opsx:apply` to implement tasks, `/opsx:sync` to merge into official docs, and `/opsx:archive` to archive the change.
— OpenSpec only retains value when the whole team uses it; an individual using it alone leaves no documentation trail.
— Impeccable is used for UI refinement, focusing on content organization, visual hierarchy, spacing, and which elements deserve emphasis.
— Tool choice follows the task: CodeGraph for debugging, OpenSpec for feature planning, Impeccable for UI polish.
— OpenSpec's archived records carry long-term value because they preserve the context of past changes for future work.
Conclusions

OpenSpec's value is explicitly conditional on team participation, an honest admission that documentation workflows fail when only one person maintains them.

Token savings being the stated reason for CodeGraph shows that vibe coding's cost is a real bottleneck for many developers, not just an engineering nicety.

The separation of debugging, feature planning, and UI polish mirrors the chronological stages of software work, suggesting these tools are less about replacing developers and more about giving each phase a dedicated AI assistant.

Concepts & terms
Vibe coding
A style of AI-assisted development where the developer works conversationally with an AI model, iterating on generated code with minimal explicit specification, often relying on feel and quick feedback rather than formal design.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗