# CompoLens

> CompoLens is a research-stage product concept for code-derived UI system intelligence. It aims to help developers, designers, reviewers, and AI coding agents understand and reuse the same frontend UI architecture.

## What CompoLens is

The proposed workflow reads an existing frontend codebase and produces a structured UI system model of components, semantic layouts, containers, design tokens, themes, screens, routes, and their relationships. A human-facing visual UI Book and an agent-facing interface (planned CLI/MCP/skills) would both query this same model.

## Core distinction

Code-derived semantic Layout Book: represent reusable layouts as named, addressable entities with defined slots, nesting and responsive behavior, rather than treating every CSS flex wrapper as a reusable layout. For example, `layout.settings.sidebar` may describe navigation/content slots, desktop sidebar and mobile drawer. Agent and human users would refer to the same canonical ID.

## Intended user outcomes

- Frontend developers: locate existing components and layouts; understand reuse and impact.
- Designers and reviewers: visually inspect UI consistency and responsive behavior.
- AI coding agents: query existing UI vocabulary before creating new screens; reuse documented constraints.
- Teams: review possible design-system drift such as inconsistent tokens, hard-coded values or contrast problems.

## What this product is not

It is not intended as a Storybook clone, a Figma-to-code service, a generic component documentation site, or a standalone token manager. Figma and cloud services are not required for the initial concept.

## Current status and accuracy

Product discovery and competitor benchmarking are in progress. The website's explorer is an interactive frontend prototype using fictional/sample data. There is currently no connected scanner, deployed UI compiler, real graph, working MCP integration, or generally available product. The proposed features are hypotheses to validate, not shipped capabilities.

## Pages

- [CompoLens landing page](./) — public explanation and interactive concept.
- [Detailed product overview](./product-overview.md) — structured description of scope, data model, and planned workflow.