Lens

Lens is the design-system gallery for the cel-* Lit element family used across the dashboard, marketing site, and admin surfaces. It runs packages/design-gallery (Vite + Lit) and exposes:

• A live preview of every component variant + state
• Per-story isolation for visual diffing
• A small CLI (lens) + MCP server (lens-mcp) for agent-driven rendering (“render the cel-pipeline-card with variant=running”)
• A workspaces system (*.lens.yaml) where each consumer can pin its own active gallery + theme

Production deploy: https://lens.celestialintelligence.co/ (Cloudflare Pages).

Workflow

The lens-first mantra lives in the repo’s CLAUDE.md: build every new UI component as a Lit element in packages/components/src/cel-*.ts with a story file in packages/design-gallery/stories/, verify it in Lens preview, THEN mount it in the dashboard or marketing site.

This session shipped 9 new components following that pattern: cel-doc-card, cel-doc-library, cel-issue-card, cel-issue-kanban, cel-issue-deps, cel-pipeline-card, cel-pipeline-library, cel-pipeline-detail.

In this section

• Deploy — runbook for pushing a fresh gallery build to Cloudflare Pages.

Related

• ADR-044 — Lens components workflow
• The lens Claude Code skill (in .claude/skills/lens/) — agent workflow for “build a component, render its story, snapshot, commit”.