跪拜 Guibai
← All articles
Frontend · Programmer · Interview

AI Made Code Cheap. Certainty Is Now the Expensive Part.

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

The value migration is already underway: implementation is approaching zero cost, so differentiation shifts entirely to experience, correctness, and trust. Frontend engineers who only translate mockups into code are at risk; those who build verification infrastructure, make architectural decisions explicit, and design the human-in-the-loop interaction patterns that make AI output trustworthy are becoming more valuable, not less.

Summary

AI coding agents have compressed the 'write code' phase of development from 60% of the work to roughly 10%, but the thinking and verification phases remain — and verification pressure has actually increased because code is produced faster. The engineering center of gravity has shifted from production to constraint and validation. For frontend teams, the highest-leverage investment isn't writing AI skills; it's building context files like CLAUDE.md that constrain every future AI task, and constructing verification loops — strict TypeScript, component tests, visual regression — that let AI self-correct. Large-scale migrations like Vue2→3 succeed not by changing syntax faster, but by first deleting dead code, supplementing characterization tests, and slicing the work into hundreds of independently verifiable tasks with executable completion standards. Even open-source projects like three.js have slowed their release cadence because AI floods maintainers with plausible but context-blind PRs, making API stability more valuable and breaking changes more expensive. The npm data for 2026 confirms generational shifts: vite and pnpm have decisively won the build chain, vitest and Playwright have overtaken jest and Cypress, and the 'headless components + Tailwind' pattern has defeated full-suite component libraries for consumer-facing work. The frontend role isn't being eliminated — the middle layer of 'turn design mockups into code' is collapsing, while demand rises for engineers who handle complex client-state systems, performance engineering, and the new discipline of AI productization: packaging probabilistic model output into interfaces users can trust, verify, and correct.

Takeaways
AI compresses the 'write code' phase from 60% to 10% of feature cost, but verification pressure increases because code output is faster.
The highest-ROI frontend investment with AI tools is not writing skills, but building a CLAUDE.md context file that constrains every future AI task — this is multiplicative, not additive.
AI has no memory across sessions; the only way to prevent repeated architecture pollution is to write rules down in project documentation.
Frontend's biggest AI weakness is the broken verification loop — strict TypeScript, component tests, and visual regression screenshots let AI self-correct instead of requiring human validation.
Large-scale migrations must follow one iron rule: change only one variable at a time. Migration is not refactoring; duplicate code and existing bugs must be preserved exactly.
Characterization tests — asserting current behavior rather than correct behavior — are the foundation of safe migration, and AI excels at the tedious work of writing them for hundreds of legacy components.
Before any migration, delete dead code first. Analytics data typically reveals 20–40% of a frontend codebase is unused, and deleted code requires zero migration effort.
three.js release frequency halved during AI's rise because maintainer review bandwidth is the real bottleneck, and AI-generated PRs flood the queue with plausible but context-blind submissions.
API stability has become more valuable in the AI era because training data skews toward old syntax; breaking changes now carry the hidden cost of millions of AI-generated outdated code samples.
Frameworks remain essential not for writing less code, but for verified correctness across years of real-world use, unavoidable complexity that must live somewhere, and socialized maintenance costs that AI cannot replace.
npm data for 2026 shows vite (3x webpack), pnpm (16x yarn), vitest (2x jest), and Playwright (7x Cypress) have decisively won their respective categories.
zod has become infrastructure-level, with weekly downloads nearly matching TypeScript itself, serving as the bridge between runtime validation and the type system.
The 'headless components + Tailwind' pattern has defeated full-suite component libraries for consumer-facing work; admin panels remain antd/element-plus territory.
Redux is over; React Query plus zustand is the new standard combination for server-state and client-state respectively.
Frontend role contraction started in 2022, two years before AI coding tools went mainstream — the primary causes were over-hiring correction and demand-side project cancellation, not AI replacement.
What's being eliminated is the 'turn design mockups into code' middle layer; demand is rising for engineers who handle complex client-state systems, performance, cross-platform compatibility, and architecture.
AI may make frontend more valuable: when implementation cost approaches zero, all differentiation shifts to experience quality, which is frontend's core domain.
Letting backend developers casually write frontend pages creates a time-bomb of ownerless code with no architecture that becomes untouchable within two to three years.
AI productization means packaging probabilistic, error-prone model output into interfaces users can trust — and 90% of that engineering work (streaming, confidence display, preview-confirm-undo, correction) is frontend work.
Admin panels are the best AI productization starting point: bounded operations, tolerant internal users, and high-ROI targets like natural-language filtering, document-to-form auto-fill, and batch intent execution.
Never build a Copilot sidebar for admin panels; skilled users find typing slower than clicking. Embed AI into existing interface pain points where it measurably reduces clicks and wait time.
Conclusions

The article's central thesis — 'AI made code cheap, so certainty became expensive' — reframes the entire AI anxiety conversation from job loss to value migration, and it holds up across every example given.

The CLAUDE.md file as a multiplicative constraint mechanism is a genuinely underappreciated insight: most teams chase skill-writing when a single markdown file governing every future AI session yields far higher ROI.

The three.js release data is a powerful counter-narrative to the 'AI accelerates everything' assumption — it shows that when production speed outstrips review capacity, the system slows down, not speeds up.

Characterization tests — asserting current behavior rather than correct behavior — invert the traditional testing mindset and are perfectly suited to AI's strengths (patience with tedious repetition) rather than its weaknesses (judgment).

The observation that AI has no memory across sessions and must be treated as 'an intern that never learns' is a more useful mental model than anthropomorphizing AI as a junior developer.

The bidirectional nature of the full-stack shift is rarely discussed: frontend engineers expanding into backend (Node, BFF, data modeling) may have an easier path than backend engineers learning CSS layout and browser rendering quirks.

The 'printing press' analogy — tools destroy the floor of capability but raise the ceiling of reward — provides a historically grounded counter to doomsaying about frontend obsolescence.

The warning about backend-written frontend code becoming an ownerless, architecture-free time bomb within two to three years identifies a real organizational risk that short-term cost savings obscure.

The five AI productization problems (waiting, streaming, error handling, consequential operations, correction) are almost entirely frontend concerns, yet none involve calling a model API — this reframes AI engineering as an experience-design discipline.

The advice to never build a Copilot sidebar for admin panels because skilled users find typing slower than clicking is a specific, testable design heuristic that contradicts most enterprise AI product strategies.

Concepts & terms
Characterization Test
A test that captures and asserts the current behavior of code rather than the correct behavior. Used in migrations to create a safety net: if any behavior changes after migration, the test fails, regardless of whether the original behavior was a bug. Contrasts with traditional tests that assert expected correct behavior.
CLAUDE.md
A project-level markdown file that Claude Code reads at the start of every session. It acts as persistent memory for AI, containing tech stack choices, coding conventions, banned patterns, and verification commands. Its value is multiplicative — every constraint written applies to all future AI tasks.
Verification Loop
The ability for AI to self-verify its output and iterate toward correctness without human intervention. Requires strict typing, automated tests, and visual regression tooling. Without a closed loop, the human becomes a manual validator, negating AI's speed advantage.
Headless Components
UI component libraries that provide behavior (accessibility, keyboard navigation, focus management, state) without imposing any visual styling. Developers control appearance entirely. Examples include Radix UI and @tiptap/core. Contrasts with full-suite libraries like MUI that couple behavior and appearance.
AI Productization
The engineering discipline of packaging probabilistic, error-prone model output into interfaces users can trust. Involves streaming rendering, confidence indicators, preview-confirm-undo patterns, source attribution, and failure fallbacks. Distinct from simply calling a model API, which is roughly 10% of the work.
Canary Release / Grayscale Deployment
A deployment strategy where a new version is initially served to a small percentage of traffic (e.g., 1%), monitored for errors, then gradually scaled to 10%, 50%, and 100%. Combined with one-click rollback, it limits the blast radius of defects.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗