Skip to content

Knowledge base

Modernization and interface design

Agents read undocumented legacy code without tiring, which makes reverse engineering a strong use case, as long as deterministic parsers and tests bound what the model touches. Generated UI needs the same discipline: without explicit design direction, models converge on a generic look.

Written by

Updated:

Agentic Engineering 5

Our position. We hold that AI-driven modernization works, just not as a one-to-one code translation (opens in a new tab). We decide the architecture first, encode those decisions as context, and let the agent accelerate the repetitive parts.

What makes a system legacy?

Legacy is measured by the cost of change, not by age. A system is legacy to the degree its team can no longer change it quickly and safely (Modern Software Engineering - Why Good Codebases Go Bad (And How to Stop It) (opens in a new tab)). The video starts from the definition in Working Effectively with Legacy Code: code without tests. It adds a continuous-delivery practitioner’s version, a system with a high cost of business change. By that measure, untested code committed this morning is already legacy, protected only by its author’s memory until people change teams (Modern Software Engineering - Why Good Codebases Go Bad (And How to Stop It) (opens in a new tab)).

The video names three losses that push a system there. Losing feedback turns each change into a gamble, so teams add code beside the old instead of fixing it and copy instead of refactoring. Losing understanding leaves modules the team cannot explain. Losing the ecosystem means a compiler on one machine, a library from a vendor gone bust, or a pipeline that can no longer build the system. Age only gives these losses time to set in. An old system with fast tests, a reproducible build and a team that knows it is less legacy than an untested new service whose author left (Modern Software Engineering - Why Good Codebases Go Bad (And How to Stop It) (opens in a new tab)).

The understanding loss goes back to Peter Naur’s 1985 essay Programming as Theory Building (opens in a new tab). It argues that the program is the theory its builders hold, with code and documentation as secondary products. A program dies when the team holding that theory disbands, and the essay calls rebuilding the theory from documentation alone strictly impossible. The two sources then part ways. The essay prefers discarding the old program text and letting a new team solve the problem afresh. The video calls a big-bang rewrite almost never the right start (Modern Software Engineering - Why Good Codebases Go Bad (And How to Stop It) (opens in a new tab)). They also differ on whether the theory can be written down. The essay says it cannot be expressed. The video says acceptance tests in the problem domain’s language capture enough of it for a machine to check.

The video treats legacy as a direction every system drifts in unless someone works against it. The cause is reasonable local decisions, such as adding the test later or hardcoding for a demo. Its defence for the ecosystem is a deployment pipeline that rebuilds, tests and deploys from version control on every change. A dying dependency then fails today instead of surfacing years later, when the team no longer remembers how to build the system (Modern Software Engineering - Why Good Codebases Go Bad (And How to Stop It) (opens in a new tab)).

For an inherited system it adds a triage step. The dangerous systems combine a high cost of change with a high demand for change. An ugly system the business does not need to change can stay as it is. A rewrite should be a costed decision run as a new build, because the team does not know exactly what the old system does. Domain experts then work alongside developers over long periods to rediscover the theory. Otherwise the tactical path applies: characterization tests, small refactoring steps, an anti-corruption layer and gradual replacement where the value covers the cost (Modern Software Engineering - Why Good Codebases Go Bad (And How to Stop It) (opens in a new tab)).

How do agents help modernize legacy systems?

The Modernisierung mit AI talk names the scale where that pays off: a hundred thousand lines of undocumented code, which an agent reads without fatigue (Modernisierung mit AI (opens in a new tab)). Thoughtworks showed that a functional specification can be reconstructed from the outside alone, combining AI-driven browsing with data capture to rebuild a legacy system from a clean slate without source access; database change data capture, logging inserts and updates per click through triggers plus a custom MCP server, proved a low-effort way to deconstruct backend behavior (Thoughtworks - Blackbox reverse engineering with AI (opens in a new tab)). Running the discovery agent several times and using a separate step to converge the runs surfaces branches a single pass misses, and watching the model build a prototype from the spec exposes ambiguities invisible on the page, so prototyping doubles as a spec validator (Thoughtworks - Blackbox reverse engineering with AI (opens in a new tab)).

A caveat sits underneath all of this: foundation models are trained on idealized public code, tidy tutorials and presentable open-source projects, so real legacy systems sit outside their training distribution and the tooling has to compensate (INNOQ - Softwaremodernisierung mit GenAI (YouTube) (opens in a new tab)).

The reliable pattern is to bound the model with deterministic tooling rather than turn it loose on the whole codebase. TNG’s PL/I-to-Java migration rejected one-shot whole-module translation as impossible to verify and a risk to database integrity, and instead let a deterministic parser carry the structure while the LLM handled only small local translations, which keeps hallucinations detectable by side-by-side comparison against the original (TNG - AI-assisted PL/I to Java migration (opens in a new tab)). The INNOQ talk uses Tree-sitter to pinpoint exact code regions first and hand the model only tiny fragments, minimizing its room to go wrong (INNOQ - Softwaremodernisierung mit GenAI (YouTube) (opens in a new tab)). The same discipline explains a subtlety about refactoring: when asked to improve code, an agent generates a fresh design within your constraints rather than performing safe parse-tree transformations, so genuine refactoring still needs a deterministic refactoring tool (Modern Software Engineering - This Mental Model Changed How I Design Software FOREVER (opens in a new tab)).

TNG made a different trade from ours on structure. It stayed close to the source and resisted refactoring while translating, which kept correctness verifiable at the cost of boilerplate. Its report of 19 August 2025 estimated a 30 to 75% reduction in time to a first running version versus manual work (TNG - AI-assisted PL/I to Java migration (opens in a new tab)).

This spec-then-rebuild workflow is a modern, AI-accelerated instance of clean-room design, where one team studies a system and writes a specification without referencing the original code and a second, unconnected team implements from that specification alone, giving a copyright defense grounded in independent creation, though not a defense against patents (Clean-room design (Wikipedia) (opens in a new tab)). Two practical cautions recur. LLMs are weak at incremental build planning; their instinct is to build the entire complex feature at once rather than simplest-first, so the human owns sequencing (Thoughtworks - Blackbox reverse engineering with AI (opens in a new tab)). And different users want different amounts of autonomy, which argues for an autonomy dial (method-by-method for control-seekers, batch for delegators) rather than one fixed level (TNG - AI-assisted PL/I to Java migration (opens in a new tab)).

Parity tests written in natural language (“Click the + icon to create a new opportunity”) run against both the old system and a differently built replacement because they are not tied to a DOM structure (Thoughtworks - Blackbox reverse engineering with AI (opens in a new tab)), and for parallel modernization work, isolating each agent in its own git worktree and container (auto-merging on green, auto-deleting on failure) lets agents work without conflicts (Modernisierung mit AI (opens in a new tab)).

A bounded modernization sequence

Anthropic’s Code Modernization Playbook (opens in a new tab) adds a useful sequence for moving from investigation to repeatable migration.

  1. Assess readiness. Inventory the system’s business rules, dependencies, data boundaries, current tests, deployment path, and known risks. Pick a bounded component whose behavior can be observed and compared.
  2. Establish the baseline. Capture current behavior before generating replacement code. Build characterization tests, record representative inputs and outputs, and map the dependencies that constrain the first slice.
  3. Migrate one slice. Keep the first change small enough for side-by-side validation. Preserve behavior before redesigning structure, and run the old and new paths in parallel where the risk warrants it.
  4. Scale the repeatable parts. Carry forward the tests, conversion rules, dependency maps, and review criteria that survived the first slice. Expand only when the next migration can use the same evidence and gates.

This sequence keeps validation ahead of generation. Agents can extract rules, draft specifications, and translate local fragments. Deterministic parsers, tests, and production comparisons decide whether the result is equivalent enough to proceed.

How do you keep generated UI from looking generic?

Anthropic’s frontend design work names the core problem of generated UI: distributional convergence. Models predict tokens from statistical patterns in training data, safe design choices dominate that data, so undirected generation samples from the high-probability center and produces a generic aesthetic that undermines brand identity and is immediately recognizable as AI output (Claude - Improving frontend design through Skills (opens in a new tab)).

The counter is targeted steering at the right altitude: neither hardcoded hex values nor vague taste words, but direction on typography, themes, motion, and backgrounds that maps cleanly to implementable frontend code. Anthropic condensed this into a roughly 400-token frontend aesthetics skill that measurably improves output across those dimensions, loaded on demand so unrelated tasks carry no design context (Claude - Improving frontend design through Skills (opens in a new tab)). For teams, the practical consequence is that design guidance belongs in versioned, loadable artifacts (skills, design-system docs) rather than in ad-hoc prompts, and the component libraries and design tools listed on Architecture and design give that guidance concrete, inspectable targets.

Design guidance belongs in its own artifact. A dedicated design file kept separate from CLAUDE.md, which stays loaded every session and would otherwise distract the agent on non-design work, is the hand-off any agent can pick up to reconstruct the visual system (AI Labs - Three levels of AI UI design (YouTube) (opens in a new tab)). At the token level, specifying colors in OKLCH (lightness, chroma, hue) rather than hex or HSL produces more perceptually even results and smoother gradients (AI Labs - Three levels of AI UI design (YouTube) (opens in a new tab)). And design can be test-driven: with the design file as source of truth, every anti-pattern, color rule, spacing constraint, and typography choice becomes a programmatic check, combining static anti-pattern tests with Playwright visual-regression runs (AI Labs - Three levels of AI UI design (YouTube) (opens in a new tab)).

A widely adopted open-source skill family makes the same steering adjustable rather than fixed. Its default skill opens with three numeric dials, layout variance, motion intensity, and visual density, each on a one-to-ten scale, so how far to push is set as parameters a team can tune per project instead of argued in prose, and one skill then serves both a spacious marketing page and a dense dashboard. Commitment to a particular visual language is handled by which skill is loaded rather than by longer instructions, with separate variants for editorial minimalism, brutalism, and soft high-end polish, plus a stricter variant tuned to a different model family. Two workflow separations there are worth copying independently of the aesthetics. An image-first pipeline generates reference comps, analyses them, and only then implements the frontend to match, which makes art direction a reviewable artifact before any code exists. And an audit-first protocol for existing interfaces inspects the current UI before changing anything, the same establish-the-baseline discipline the modernization sequence above applies to legacy code. Because the rules target design intent rather than a framework API, they carry across React, Vue, and Svelte (Taste Skill (opens in a new tab)).

A design canvas can also sit inside the agent loop instead of before it. pen.dev, formerly pencil.dev, describes itself as an agentic canvas: agents design on the canvas itself, and Claude Code, Codex, Cursor and other agents reach it through MCP, WebMCP or a headless CLI. It imports Figma files and live web pages as editable layers, and exports any frame as HTML with CSS or Tailwind, so the design and the code start from one artifact (pen.dev (opens in a new tab), as of September 2026).

Impeccable, an Apache 2.0 skill for coding agents, turns the test-driven idea into tooling and adds two context files. PRODUCT.md holds who the users are, what the product is for and its principles, and the design commands read it before they act; DESIGN.md records the visual system, and its document command writes that record from what already ships instead of asking a team to author it. Its detector checks source files or a rendered URL for low contrast, overflowing text, common AI design patterns and drift from the fonts, colors, corner radii and type sizes DESIGN.md documents, and it runs in code without a model or API key. Wired as an agent hook it checks each UI edit and hands the findings back to the agent; run in CI it exits 0 when clean, 2 on findings and 1 when a target could not be scanned (Impeccable (opens in a new tab); Run a detector scan (opens in a new tab), as of October 2026). Its anti-pattern catalog treats AI tells as a moving target that shifts with the era and the model, from purple gradients and glass panels through beige editorial layouts to a neobrutalist look one model family favours, so a list of banned patterns needs maintenance rather than a one-off write. As of October 2026 the catalog page lists 68 rules while the homepage advertises 62 checks (Slop (opens in a new tab)).

The same project published a campaign report on getting variety out of a design model, run on its own skill in July 2026, roughly 200 sampled concepts and about $2,600 in evaluations (The Model Can’t Roll Its Own Dice (opens in a new tab)). Prompting for creativity did not widen the range: across sixteen creative framings, 30 of 35 responses proposed the same concept, telling the model to discard its first ideas landed reliably on its second default, and a model choosing from its own varied shortlist picked option one in 27 of 30 cases. What worked was splitting the jobs: the model proposes directions grounded in the audience, a script randomly assigns which one to build and keeps a key that reproduces the draw. Two further findings carry beyond design. Cautionary instructions made the output timid, and reordering the prompt to commit to the concept first and refine clarity afterwards gave the campaign’s largest quality gain. And a builder grading its own structure mid-build added work and lowered quality, while a separate reviewer agent comparing the rendered page against a written direction contract caught the gaps. The headline result is a vendor self-claim with a stated scope: the final workflow won every decisive screenshot pair against the strongest comparison skill on the tasks examined in depth, judged by a model in both presentation orders, and the report says it is not a win rate across all tasks or models (The Model Can’t Roll Its Own Dice (opens in a new tab)).

Resources

Legacy systems

UI design guidance

  • Impeccable (opens in a new tab) - Apache 2.0 design skill for coding agents with two dozen commands, PRODUCT.md and DESIGN.md context files, and a model-free anti-pattern detector for hooks and CI.
  • Taste Skill (opens in a new tab) - MIT skill family for AI-generated frontends, with numeric variance, motion, and density dials, per-aesthetic variants, and an image-first reference-then-code pipeline.
  • pen.dev (opens in a new tab) - Agentic design canvas that coding agents drive over MCP or a CLI, with Figma import and HTML and Tailwind export.