Architektur und Design

Unsere Position. Wir halten fest: KI kann Code erzeugen, aber ein wachsendes System nicht architektonisch kohärent halten (öffnet in einem neuen Tab). Deshalb muss jemand das System-Design verantworten, bevor Code entsteht. Die Codebasis ist der Vertrag, in dem der Agent arbeitet (öffnet in einem neuen Tab). Tests, Namen, die sich nachahmen lassen, und Grenzen, die bei Verletzung laut scheitern, entscheiden, wer Nutzen aus KI zieht, stärker als das Modell oder die Ausgaben für Tokens.

Die Seiten unten übertragen diese Verantwortung auf Systeme aus Agenten und auf die Entscheidung zwischen Bauen und Kaufen. Außerdem geht es um die Specs, die Agenten lesen, zur Modernisierung von Legacy-Systemen, zu generierten Oberflächen und zu Video.

Einstieg

• Architekturarbeit im agentischen Zeitalter - Wie Architektur im Stack nach oben wandert, wenn Implementierung billiger wird.
• Architektur agentischer Systeme - Wie ihr Systeme entwerft und betreibt, in denen Agenten aktive Komponenten zur Laufzeit sind.
• Build versus Buy - Wie reichlich generierter Code die Entscheidung zwischen Bauen und Kaufen verändert, aber nicht abschafft.
• Specs, Tests und Kontext - Wie ausführbare Absicht und gepflegte Dokumentation für Agenten zur Source of Truth werden.
• Modernisierung und UI-Design - Wie Agenten beim Reverse Engineering von Legacy-Systemen helfen, während die UI weiterhin bewusste Gestaltung braucht.
• Videos mit Coding-Agents erstellen - Wie Coding-Agents Video als Code produzieren: HTML-Kompositionen, deterministisches Rendering und Iteration am gerenderten Ergebnis.

Verwandte Seiten

• Architekturprinzipien: die elf Prinzipien, die ein Design-Review weiterhin entscheiden, wenn Agenten den Code schreiben.
• Federated Context Platform für KI-Agenten im Unternehmen: die Architektur des Kontexts selbst im Unternehmensmaßstab.
• Qualität und Verifikation: wie die Tests und Gates entstehen, die das Design tragen.
• Methoden und Frameworks: wie sich die Arbeit rund um die Architektur organisiert.
• Software Factories: die Fertigungslinie, die Architekturentscheidungen als Skills festschreibt.

Quellen

Systemarchitektur

• Agentic Design Patterns (öffnet in einem neuen Tab) - Praxisbuch über beständige Design Patterns für den Bau intelligenter KI-Agenten.
• C4 model documentation (öffnet in einem neuen Tab) - Notation, die Softwarearchitektur auf vier Ebenen darstellt: Context, Containers, Components und Code.
• Data Contract CLI (öffnet in einem neuen Tab) - Kommandozeilen-Tool, das Data Contracts nach dem Open Data Contract Standard lintet, testet und durchsetzt.
• Data Contracts (öffnet in einem neuen Tab) - Standard, Tooling und Anleitung, um Struktur und Semantik der Daten zu definieren, die Systeme austauschen. Dazu gehören der Open Data Contract Standard (ODCS), eine CLI und ein Editor.
• Data Mesh Architecture (öffnet in einem neuen Tab) - Dezentrale Datenarchitektur, in der Domänenteams ihre Datenprodukte besitzen und bereitstellen. So gelingt domänenübergreifende Analyse ohne zentrales Datenteam.
• Laws of Software Engineering (öffnet in einem neuen Tab) - Nachschlagewerk eines Architekturpraktikers mit 56 Prinzipien und Mustern für Architektur, Teamstruktur und technische Entscheidungen.
• Micro Frontends (öffnet in einem neuen Tab) - Referenzseite, die die Idee der Microservices auf das Frontend überträgt. Sie zeigt Muster, mit denen mehrere Teams Web-Features unabhängig ausliefern.
• Monorepo Guide (Graphite) (öffnet in einem neuen Tab) - Leitfaden von Graphite zu Monorepos: einheitliche Versionierung, atomare Änderungen, Tooling (Bazel, Buck, Pants), CI/CD-Integration und Fallstudien von Google und anderen.
• OpenAI Realtime Agents (öffnet in einem neuen Tab) - Referenzimplementierung von OpenAI für Multi-Agent-Muster mit Sprache auf der Realtime API, mit Übergaben zwischen Agenten, Tool Calls und Guardrails.
• Radical Simplicity (öffnet in einem neuen Tab) - Entwicklungsmethode für Startups, die Product Engineering klein, schnell und unterhaltsam hält und mit Lean-Startup-Praktiken vereinbar bleibt.
• Residuality Theory (öffnet in einem neuen Tab) - Buch über Architekturen, die unvorhersehbarem Stress standhalten. Es analysiert dafür die Residuen, die hypothetische zufällige Ausfälle hinterlassen.
• Self-Contained Systems (öffnet in einem neuen Tab) - Architekturansatz, der ein größeres System in viele unabhängige, zusammenarbeitende Systeme aufteilt. Jedes davon besitzt Daten, Logik und UI seiner Domäne.
• Tech Stack Canvas (öffnet in einem neuen Tab) - Visuelles Canvas, mit dem Teams den Tech Stack eines Produkts übergreifend dokumentieren und kommunizieren.
• The Phoenix Architecture (öffnet in einem neuen Tab) - Essay-Reihe über regenerative Software. Sie definiert Architektur als das, was sich nicht löschen lässt, und nennt Specs, Evaluationen, Grenzen und Provenienz als ihre Grundbausteine.
• Web Fragments (öffnet in einem neuen Tab) - Framework, das unabhängig deployte Micro-Frontends als isolierte Fragmente in beliebige Webanwendungen einbettet, egal mit welchem Framework der Host läuft.

Dokumentation und Wissensmanagement

• ADR-Tools (öffnet in einem neuen Tab) - Kommandozeilen-Tools, die Architecture Decision Records als einfache Markdown-Dateien im Repo anlegen und verwalten.
• Agency Agents (öffnet in einem neuen Tab) - Offener Katalog mit 144 und mehr Subagent-Definitionen für Claude Code in zwölf Bereichen. Jede ist eine Markdown-Datei mit Persönlichkeit, Workflow und Ergebnissen und lässt sich in elf Tools verwenden.
• Agents Reverse Engineer (öffnet in einem neuen Tab) - Erzeugt KI-freundliche Codebase-Dokumentation in der Versionsverwaltung, mit .sum-Zusammenfassungen pro Datei und AGENTS.md-Übersichten pro Verzeichnis. Updates laufen inkrementell und Git-bewusst, mehrere Runtimes werden unterstützt.
• Code Wiki (öffnet in einem neuen Tab) - Produkt von Google, das fortlaufend strukturierte Dokumentation für Code-Repositories erzeugt. Dazu gehören ein Chat auf Basis von Gemini und automatisch erzeugte Architektur-, Klassen- und Sequenzdiagramme, die synchron bleiben.
• DevOps AI Workflow (öffnet in einem neuen Tab) - Durchgängiger KI-gestützter Entwicklungs-Workflow von PRDs über Coding und Tests bis zum Deploy, den eine einzelne Person steuert.
• Diátaxis (öffnet in einem neuen Tab) - Framework, das technische Dokumentation in vier getrennte Formen gliedert: Tutorials, How-to-Anleitungen, Referenz und Erklärung.
• GitReverse (öffnet in einem neuen Tab) - (GitHub (öffnet in einem neuen Tab)) Tool, das die Struktur eines GitHub-Repositorys analysiert und daraus einen einzigen Prompt für einen Coding-Agent in einfacher Sprache macht.
• Intent Layer (öffnet in einem neuen Tab) - Skill von Crafter Station, der eine hierarchische Dokumentationsschicht aus AGENTS.md oder CLAUDE.md aufbaut. Damit navigieren Agenten eine Codebasis wie Senior Engineers. Grundlage ist das Diátaxis-Framework.
• MkDocs Material (öffnet in einem neuen Tab) - Material-Design-Theme für MkDocs, das aus Markdown eine Dokumentationsseite mit Suche, Navigation und Material UI macht.
• Current Prompting Practices (öffnet in einem neuen Tab) - Blogpost von Simpler Machines über Prompts, die Claudes aktuelles Verhalten prägen. Darin steht auch, wie Claude mit der Drohung eines Fledermausangriffs zum Schreiben von Tests kam.
• OpenWiki (öffnet in einem neuen Tab) - MIT-lizenzierte TypeScript-CLI von LangChain, die Codebase-Dokumentation für Agenten schreibt und pflegt. Tägliche Pull Requests über GitHub Actions halten die Docs aktuell, Verweise darauf hängt sie an AGENTS.md/CLAUDE.md an.
• Packmind (öffnet in einem neuen Tab) - (PackmindHub - GitHub (öffnet in einem neuen Tab)) Governance-Schicht, die Team-Standards und Regeln in Kontext, Guardrails und Policies für KI-Coding-Agents verwandelt (Cursor, Claude, Copilot, Kiro).
• Product context (öffnet in einem neuen Tab) - (archiviert) Begleitprojekt von INNOQ zu AIMER mit Prompts für die Produktentwicklung.
• System Prompts & AI Models (öffnet in einem neuen Tab) - Repository mit geleakten oder als Open Source veröffentlichten System-Prompts und internen Tools von Cursor, Devin, Claude Code, Windsurf, v0, Replit, Lovable und mindestens 25 weiteren KI-Coding-Tools.
• Technical context (AIMER) (öffnet in einem neuen Tab) - (archiviert) Experiment von INNOQ mit Prompts für die Analyse und Verbesserung von Architektur.
• The Website Specification (öffnet in einem neuen Tab) - (GitHub (öffnet in einem neuen Tab)) Plattformunabhängige Referenz für Best Practices und moderne Webstandards zu HTML, Barrierefreiheit, Sicherheit und SEO. Jede Seite zitiert maßgebliche Quellen, der Code steht unter MIT, die Inhalte unter CC BY 4.0.

UI-Komponenten und Design

• Excalidraw (öffnet in einem neuen Tab) - Webbasiertes virtuelles Whiteboard für Diagramme im Handzeichnungs-Look, mit Zusammenarbeit in Echtzeit, Dark Mode und öffentlichem Asset-CDN.
• Magic UI (öffnet in einem neuen Tab) - React-Komponentenbibliothek mit animierten, anpassbaren UI-Bausteinen für Landingpages und Marketing-Websites.
• Mobbin (öffnet in einem neuen Tab) - Durchsuchbare Bibliothek mit mindestens 1.150 Apps, 593.700 Screens und 315.100 User Flows aus echten iOS- und Web-Produkten, dazu ein Figma-Plugin.
• Motiff (öffnet in einem neuen Tab) - KI-Generator für UIs, der aus Text, Bildern oder Wireframes produktionsreife Designs in vorgegebenen Systemen erzeugt (Material Design, Ant Design, shadcn/ui). Er exportiert React oder HTML.
• Open CoDesign (öffnet in einem neuen Tab) - (opencoworkai.github.io/open-codesign (öffnet in einem neuen Tab)) MIT-lizenzierte, local-first Desktop-App auf Electron, eine offene Alternative zu Claude Design und v0. Sie macht aus Prompts Prototypen, Foliensätze und PDFs, mit BYOK über verschiedene Modelle.
• Open Design (Nexu) (öffnet in einem neuen Tab) - Offene, local-first Alternative zu Claude Design unter Apache 2.0 auf Basis von Next.js. Sie bringt 19 Skills und 71 Design-Systeme in Markenqualität mit und erzeugt Prototypen, Folien, Bilder und Videos.
• Penpot (öffnet in einem neuen Tab) - Open-Source-Designtool für Produktteams mit Vektorbearbeitung, Prototyping, Design-to-Code-Workflows und Zusammenarbeit in Echtzeit zwischen Designer:innen, Entwickler:innen und KI.
• Preline (öffnet in einem neuen Tab) - Open-Source-Komponentenbibliothek für Tailwind CSS mit Beispielen, Blöcken, Templates, Plugins und einem passenden Figma-Design-System.
• React Bits (öffnet in einem neuen Tab) - Open-Source-Sammlung animierter, interaktiver und anpassbarer React-Komponenten für visuell auffällige Oberflächen.
• Shadcn/ui (öffnet in einem neuen Tab) - Open-Source-Set von React-Komponenten, die ihr in euer Projekt kopiert und anpasst, gebaut auf Radix UI und Tailwind CSS.
• Stitch (öffnet in einem neuen Tab) - Prototyping-Tool von Google Labs, das mobile und Web-UIs aus Beschreibungen in natürlicher Sprache erzeugt.
• TailwindUI Plus (öffnet in einem neuen Tab) - Kostenpflichtige Bibliothek mit Komponenten und Templates vom Team hinter Tailwind CSS.
• Tauri v2 (öffnet in einem neuen Tab) - Rust-Framework für plattformübergreifende Desktop- und Mobile-Apps mit beliebigem Web-Frontend. Es nutzt die nativen Webviews des Betriebssystems, statt Chromium mitzuliefern, und kommt so auf Binaries unter 10 MB.
• Tweak CN (öffnet in einem neuen Tab) - Interaktiver Theme-Editor für shadcn/ui mit Unterstützung für Tailwind v4 und Live-Vorschau der Tokens für Farbe, Radius und Typografie.
• Untitled UI (öffnet in einem neuen Tab) - Figma-UI-Kit und React-Komponentenbibliothek für den schnellen Einstieg in Produktdesign und Frontend-Entwicklung.