The problem: UI knowledge is buried in code
In an established React or Next.js application, the visual design system isn't always in a separate library. Reusable components live across features, layout rules are implicit in JSX and CSS, and teams may not know which existing pattern is the canonical one. Documentation can drift. An AI coding agent may recreate a pattern that already exists.
The aim is not more documentation for its own sake. The research question is whether accurate, code-derived UI knowledge makes human reviews and agent-generated interfaces more consistent.
Proposed input, model and outputs
Input: an existing frontend codebase
The proposed compiler would inspect components, imports, CSS/Tailwind styles, design tokens and routes. Initial research focuses on React, Next.js and TypeScript projects rather than a mandatory Figma migration.
One shared UI model
It would describe components, layouts, containers, patterns, tokens, themes, routes and screens, together with relationships such as renders, uses-token, used-by and uses-layout.
Two interfaces for the same facts
- Visual UI Book: a browsable view of a project's reusable UI vocabulary, structure and responsive behavior.
- Agent interface: a proposed CLI or MCP interface where coding agents query the same stable entity IDs before changing UI.
These are product hypotheses, not features available for installation today.
Why semantic layouts matter
A dependency graph tells you which files import other files. It doesn't necessarily explain that a settings page has two named slots, navigation and content, or that navigation moves into a drawer on mobile.
The central research hypothesis is to recognize meaningful, reusable layout structure instead of labeling every flexbox wrapper a layout. For example, a validated entity named layout.settings.sidebar could describe its slots, responsive rules, source files and known usages. Both people and agents would refer to that same identity.
Accuracy is critical: inferred candidates should be reviewed before being promoted to canonical layout definitions.
Who would use it?
- Frontend engineers: discover established layouts/components before recreating them.
- UI designers and reviewers: understand how patterns and responsive behavior are actually implemented.
- AI coding agents: query concise project-specific UI constraints instead of relying on long, ambiguous visual prompts.
Current status and validation
CompoLens is currently validating the problem and testing overlap with existing code-first design-system tools. Its planned scanner accuracy, layout inference and agent benefits have not yet been proven. The landing page's interactive UI Explorer demonstrates intended interactions with sample data, not scans of a real project.
The next product decision may be to build, fork, integrate with an existing project or stop, depending on comparable hands-on benchmarks. Figma and cloud services are not required in the proposed initial scope.