01 / SYSTEM VISIBILITY↗
See the whole system.
Trace where components are used, how screens depend on them and which design tokens they reference — without piecing everything together by hand.
Research-stage product concept ↗
Your UI system,
decoded.
CompoLens explores how an existing frontend codebase can become a living, visual map of components, semantic layouts, design tokens and their relationships — shared by developers and AI coding agents.
Code-first by designNo Figma dependencyLocal-first direction
FROM THIS
</> Your frontend
scan · map · understand
TO THIS
◈ Your UI system
FOR EVERYONE
↗ Humans + agents
01 / WHAT IS COMPOLENS?
A living UI map,
A living UI map,
derived from code.
CompoLens is a code-first UI system intelligence concept. It aims to analyze an existing frontend repository and turn the UI architecture hidden in source files into a structured, understandable model.
Instead of rediscovering layouts or guessing which components to reuse, a developer could explore a visual UI Book. An AI coding agent could query the same components, layout rules and relationships using stable IDs.
Made forFrontend engineersUI designers & reviewersAI coding agents
✳ A SHARED MODEL, NOT SEPARATE DOCUMENTATION PROPOSED
</>
INPUTYour existing frontendComponents · JSX/TSX · CSS · routes
◇
ONE UI SYSTEM MODELLayouts + components + tokensStructure · usage · responsive rules
◫Visual UI BookExplore & review
⌘Agent interfaceQuery & reuse
Example model, not a scan of a connected repository.
02 / THE EXPERIENCE
Meet your codebase.
Meet your codebase.
Like never before.
A future UI Book could let you inspect reusable components, semantic layouts, tokens and how they connect. This interactive preview uses illustrative data to show the intended experience.
Button component.button
◉ Canonical example
BUTTON / PRIMARY
Default · Medium · Primary
✳ This is a design prototype showing an intended experience, not a connected scanner or working product.
03 / THE POSSIBILITIESMore context.
More context.
Less guesswork.
Give your UI architecture a shape everyone can explore, understand and reuse.
02 / LAYOUT INTELLIGENCE↗
Layouts that mean something.
Treat layouts as first-class entities with named slots and responsive behavior. For example, a settings sidebar can become a layout rule that both a person and an agent understand.
03 / SHARED CONTEXT↗
One language. Two worlds.
Reference the same canonical component and layout IDs across a visual UI Book and a planned CLI/MCP agent interface. Less repeated explanation, more consistent UI decisions.
04 / A PRACTICAL EXAMPLEAdding a settings page?
Adding a settings page?
Reuse what already works.
Today, teams often have to search through multiple files to identify the right sidebar, spacing rules and mobile behavior. CompoLens aims to make those decisions discoverable before writing a new screen.
PROPOSED AGENT QUERY
get_layout("layout.settings.sidebar")✓
Find the layoutNavigation and content are named slots.
✓
Understand mobile behaviorThe sidebar becomes a drawer at smaller widths.
✓
Reuse with confidenceSee its source, usage and relevant design tokens.
Illustrative future workflow — this query is not connected to a backend.
05 / THE DIRECTION
One source of UI truth.
A proposed code-native workflow designed to keep your system understandable as it evolves.
01</>
Read the code
Read the existing frontend source, including components, imports, styles, theme configuration and routes; no manual Storybook setup required by the proposed workflow.
02◇
Build the UI model
Model components, layouts, containers, tokens, screens and their relationships, while distinguishing inferred layouts from reviewed canonical ones.
03↗
Explore and reuse
Explore visual examples and responsive rules, review potential design drift, and let agents look up the same IDs before generating UI.
Research-led, not feature-led.
Explore concept ↗CompoLens is currently a product direction under validation. We are studying where semantic layout understanding can deliver value beyond existing tools.
06 / GOOD TO KNOWClear scope.
Clear scope.
No magic promises.
What CompoLens is aiming for — and what is still being validated.
Is this another Storybook?
No. The idea is to discover an existing project's UI structure from code, especially semantic layouts and relationships — not to replace manually authored component stories.
Do I need Figma or the cloud?
Neither is planned as a requirement for the initial concept. The starting point is a frontend repository, with a local-first direction and optional integrations later.
Can I scan my repository today?
Not yet. This site demonstrates a product direction under research. The explorer uses sample data; scanner accuracy and the MVP are still being validated against existing tools.
DESIGN SYSTEM INTELLIGENCEA clearer way to
build interfaces.
The goal: help developers understand existing UI decisions and help AI agents reuse them instead of guessing. CompoLens is being validated before a full product build.
Take another look