Architecture and Design
Architecture matters more when agents write most of the code. The engineer's contribution moves to structure and judgment, and the artifacts that steer agents, such as specifications, tests, documentation and design systems, become parts of the architecture.
Written by
-
Benedikt Stemmildt Founder & Co-CEO
Updated:
Agentic Engineering 5
Our position. We hold that AI can generate code but cannot keep a growing system architecturally coherent (opens in a new tab), so someone has to own the system design before code is written. The codebase is the contract the agent works inside (opens in a new tab): tests, imitable naming and loud boundaries decide who gets value from AI, more than the model or the token spend.
The pages below carry that ownership into systems built from agents, the build-or-buy decision, the specifications agents read, legacy modernization, generated interfaces and video.
Start here
- Architecture work in the agentic era — How architecture moves up the stack when implementation becomes cheaper.
- Architecting agentic systems — How to design and operate systems in which agents are active runtime components.
- Build versus buy — How abundant generation changes, but does not remove, the build-versus-buy decision.
- Specifications, tests, and context — How executable intent and maintained documentation become the source of truth for agents.
- Modernization and interface design — How agents support legacy reverse engineering while still requiring deliberate UI direction.
- Agent-authored video — How coding agents produce video as code: HTML compositions, deterministic rendering, and iteration against the render.
Related
- Architecture Principles: the eleven principles that still decide a design review when agents write the code.
- Federated Context Platform for Enterprise AI Agents: the architecture of context itself at enterprise scale.
- Quality and Verification: how the tests and gates that carry the design get built.
- Methodologies and Frameworks: how the work around the architecture is organized.
- Software Factories: the production line that encodes architecture decisions as skills.
Resources
System Architecture
- Agentic Design Patterns (opens in a new tab) - Hands-on book on durable design patterns for building intelligent AI agents.
- C4 model documentation (opens in a new tab) - Notation for visualizing software architecture across four levels: Context, Containers, Components, and Code.
- Data Contract CLI (opens in a new tab) - Command-line tool that lints, tests, and enforces data contracts written against the Open Data Contract Standard.
- Data Contracts (opens in a new tab) - Standard, tooling, and guidance for defining the structure and semantics of data exchanged between systems, including the Open Data Contract Standard (ODCS), CLI, and Editor.
- Data Mesh Architecture (opens in a new tab) - Decentralized data architecture where domain teams own and serve their data products, allowing cross-domain analysis without a central data team.
- Laws of Software Engineering (opens in a new tab) - Reference by an architecture practitioner cataloguing 56 principles and patterns for architecture, team structure, and technical decision-making.
- Micro Frontends (opens in a new tab) - Reference site extending the microservices idea to the frontend, with patterns for multiple teams shipping web features independently.
- Monorepo Guide (Graphite) (opens in a new tab) - Graphite’s guide to monorepos covering unified versioning, atomic changes, tooling (Bazel, Buck, Pants), CI/CD integration, and case studies from Google and others.
- OpenAI Realtime Agents (opens in a new tab) - Reference implementation from OpenAI demonstrating multi-agent voice patterns on the Realtime API, including agent handoffs, tool calls, and guardrails.
- Radical Simplicity (opens in a new tab) - Startup development method for keeping product engineering small, fast, and fun while staying compatible with lean startup practices.
- Residuality Theory (opens in a new tab) - A book on designing architectures that survive unpredictable stress by analyzing residues left by hypothetical random failures.
- Self-Contained Systems (opens in a new tab) - Architectural approach that splits a larger system into many independent, collaborating systems, each owning data, logic, and UI for its domain.
- Tech Stack Canvas (opens in a new tab) - Visual canvas for documenting and communicating a product’s tech stack across teams.
- The Phoenix Architecture (opens in a new tab) - Essay series on regenerative software, defining architecture as what cannot be deleted and naming specs, evaluations, boundaries, and provenance as its primitives.
- Web Fragments (opens in a new tab) - Framework for embedding independently deployed micro-frontends as isolated fragments inside any web application, regardless of the host framework.
Documentation & Knowledge Management
- ADR-Tools (opens in a new tab) - Command-line tools for creating and managing Architecture Decision Records as plain markdown files in the repo.
- Agency Agents (opens in a new tab) - Open catalog of 144-plus Claude Code sub-agent definitions across twelve divisions, each a markdown file with personality, workflow, and deliverables, portable across eleven tools.
- Agents Reverse Engineer (opens in a new tab) - Generates AI-friendly codebase docs in version control via per-file
.sumsummaries and directory-levelAGENTS.mdoverviews, with git-aware incremental updates and multi-runtime support. - Code Wiki (opens in a new tab) - Google product that continuously generates structured documentation for code repositories, with Gemini-powered chat and auto-generated architecture, class, and sequence diagrams kept in sync.
- DevOps AI Workflow (opens in a new tab) - End-to-end AI-assisted development workflow from PRDs through coding, testing, and deployment with a single human operator.
- Diátaxis (opens in a new tab) - Framework organizing technical documentation into four distinct modes: tutorials, how-to guides, reference, and explanation.
- GitReverse (opens in a new tab) - (GitHub (opens in a new tab)) Tool that turns a GitHub repository into a single plain-language coding-agent prompt by analyzing repo structure.
- Intent Layer (opens in a new tab) - Crafter Station skill that builds a hierarchical AGENTS.md or CLAUDE.md documentation layer so agents navigate a codebase like senior engineers, based on the Diátaxis framework.
- MkDocs Material (opens in a new tab) - Material Design theme for MkDocs that turns markdown into a documentation site with search, navigation, and Material UI.
- Current Prompting Practices (opens in a new tab) - Blog post by Simpler Machines on prompts that shape Claude’s current behavior, including a story about getting it to write tests by threatening attack-by-bats.
- OpenWiki (opens in a new tab) - LangChain’s MIT-licensed TypeScript CLI that writes and maintains codebase documentation for agents, keeping docs current via daily GitHub Actions PRs and appending pointers to AGENTS.md/CLAUDE.md.
- Packmind (opens in a new tab) - (PackmindHub - GitHub (opens in a new tab)) Governance layer that turns team standards and rules into context, guardrails, and policies for AI coding agents (Cursor, Claude, Copilot, Kiro).
- Product context (opens in a new tab) - (archived) INNOQ companion to AIMER with prompts for product development work.
- System Prompts & AI Models (opens in a new tab) - Repository collecting leaked or open-sourced system prompts and internal tools for Cursor, Devin, Claude Code, Windsurf, v0, Replit, Lovable, and 25+ other AI coding tools.
- Technical context (AIMER) (opens in a new tab) - (archived) INNOQ experiment with prompts for architecture analysis and improvement.
- The Website Specification (opens in a new tab) - (GitHub (opens in a new tab)) Platform-agnostic reference for website best practices and modern web standards covering HTML, accessibility, security, and SEO, with every page citing authoritative sources; MIT code and CC BY 4.0 content.
UI Components & Design
- Excalidraw (opens in a new tab) - Web-based virtual whiteboard for sketching diagrams with a hand-drawn feel, with real-time collaboration, dark mode, and a public asset CDN.
- Magic UI (opens in a new tab) - React component library of animated, customizable UI primitives aimed at landing pages and marketing sites.
- Mobbin (opens in a new tab) - Searchable library of 1,150+ apps, 593,700 screens, and 315,100 user flows from real iOS and web products, with a Figma plugin.
- Motiff (opens in a new tab) - AI UI generator that turns text, images, or wireframes into production-ready designs in preset systems (Material Design, Ant Design, shadcn/ui) and exports React or HTML.
- Open CoDesign (opens in a new tab) - (opencoworkai.github.io/open-codesign (opens in a new tab)) MIT-licensed local-first Electron desktop app, an open alternative to Claude Design and v0, turning prompts into prototypes, slide decks, and PDFs with BYOK across models.
- Open Design (Nexu) (opens in a new tab) - Apache 2.0 local-first, Next.js-based open alternative to Claude Design with 19 skills and 71 brand-grade design systems for generating prototypes, slides, images, and videos.
- Penpot (opens in a new tab) - Open-source design tool for product teams with vector editing, prototyping, design-to-code workflows, and real-time collaboration across designers, developers, and AI.
- Preline (opens in a new tab) - Open-source Tailwind CSS component library with examples, blocks, templates, plugins, and a matching Figma design system.
- React Bits (opens in a new tab) - Open-source collection of animated, interactive, customizable React components for crafting visually striking interfaces.
- Shadcn/ui (opens in a new tab) - Open-source set of React components you copy into your project and customize, built on Radix UI and Tailwind CSS.
- Stitch (opens in a new tab) - Google Labs prototyping tool that generates mobile and web UIs from natural-language descriptions.
- TailwindUI Plus (opens in a new tab) - Paid component and template library from the Tailwind CSS team.
- Tauri v2 (opens in a new tab) - Rust framework for building cross-platform desktop and mobile apps with any web frontend, using native OS webviews instead of bundling Chromium for sub-10MB binaries.
- Tweak CN (opens in a new tab) - Interactive theme editor for shadcn/ui, supporting Tailwind v4 and live preview of color, radius, and typography tokens.
- Untitled UI (opens in a new tab) - Figma UI kit and React component library for kickstarting product design and frontend development.
In this section
- Agent-authored video
Agent-authored video treats a video as code: the agent writes a composition in HTML or React, headless Chrome renders it frame by frame, and FFmpeg encodes the result. The source diffs and reviews like code, but only watching the render tells you whether the video is good.
- Architecting agentic systems
An agentic system splits into agents and workflows instead of services, and connects them through MCP, agent-to-agent protocols and hand-offs that carry context. Production use needs durable execution, tracing, bounded loops, trajectory evaluation and a zero-trust posture toward every agent.
- Architecture work in the agentic era
When agents write most of the code, the engineer's job moves to architecture: placing boundaries, stating intent and constraints, and judging quality. Cheap implementation raises the value of design, because an agent without a sound design model only produces a mess faster.
- Build versus buy
Agents and English-language builders let anyone build software, but they do not make buying obsolete. Business software encodes rules most builders never see, so companies keep buying components, now designed to be driven by people and agents alike through protocols such as MCP.
- 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.
- Specifications, tests, and context
The specification is the source of truth and its tests check the code against it. When the two drift apart, the spec's owner decides which side changes. Documentation now has a second reader, the agent, which needs a small, ranked and maintained instruction layer instead of an exhaustive one.