# CompoLens — Product Overview

**Product status:** research and validation; not a launched scanner or SaaS.

## Problem

A mature frontend repository contains components, layouts, tokens, screen composition and design rules, but these decisions are difficult for engineers, reviewers and AI coding agents to discover. Manual docs become stale, and agent-generated UI can introduce inconsistent layouts or duplicated components.

## Proposed solution

CompoLens explores a **code-derived living UI system**. A future scanner/UI topology compiler would examine an existing frontend repo (such as React/Next.js using TypeScript, JSX/TSX and CSS/Tailwind) and produce a shared UI model. The model would power both a visual UI Book for humans and a queryable interface for AI agents.

## Proposed entity model

- Components and primitives
- Semantic layouts, containers, patterns and overlays
- Design tokens, themes and responsive rules
- Routes and screens
- Relationships such as `renders`, `contains`, `uses-token`, `used-by`, and `uses-layout`

A key research hypothesis is that a system can distinguish arbitrary flex wrappers from meaningful, reusable semantic layouts. Inferred entities should not automatically count as reviewed/canonical layouts.

## Example workflow (not currently executable)

1. Read source from a frontend codebase.
2. Infer UI relationships and identify candidate reusable layouts.
3. Review/promote valid layouts into canonical entities such as `layout.settings.sidebar`.
4. Browse structure and responsive behavior in a proposed UI Book.
5. Let an AI agent query the same ID and constraints before composing a new screen.
6. Audit potential inconsistencies against the shared system.

## Target users

- **Frontend developers:** discover and reuse components/layouts rather than recreate them.
- **Designers and reviewers:** inspect UI structure and check consistency.
- **AI coding agents:** obtain concise shared UI context and reduce guesswork.

## Out of scope for the proposed first MVP

A mandatory Figma workflow, cloud service, Figma-to-code generation, and a full redesign tool are not initial requirements. Competitor benchmarking and user validation will determine whether to build, reuse, fork, or stop the product idea.

## Website disclaimer

The public landing page shows an interactive **concept demo** with illustrative component and layout data. It is not connected to a scanner or production backend.