opensesh/canvas-to-code

README preview

# Canvas-to-Code

> Open Session's internal bridge from a design export to BOS-aligned production code. Eleven gates catch off-brand drift before it ships and turn every handoff into a tracked dashboard entry.

[![tests](https://github.com/opensesh/canvas-to-code/actions/workflows/test.yml/badge.svg)](https://github.com/opensesh/canvas-to-code/actions/workflows/test.yml)
[![version](https://img.shields.io/badge/version-0.5.0-blue.svg)](./CHANGELOG.md)
[![Claude Code plugin](https://img.shields.io/badge/Claude%20Code-plugin-orange.svg)](https://docs.claude.com/claude-code)

```
┌──────────────────────┐     ┌──────────────────────────────┐     ┌─────────────────────────┐
│   Design             │     │   Conversion                 │     │   Codebase              │
│   ─────────────      │     │   ───────────────            │     │   ─────────────         │
│   Paper (preferred)  │     │   0. Intake                  │     │   app/<route>/          │
│   Claude Design      │     │   1. Materials               │     │   ├─ DS-aligned JSX     │
│   Figma + UUI    ────┼────▶│   2. DS alignment            │────▶│   └─ token-mapped CSS   │
│   V0 / Lovable       │     │   3. Target audit            │     │                         │
│   Webflow            │     │   4. Scope                   │     │   components/           │
│   Screenshot-only    │     │ ◆ 5. Component mapping       │     │   ├─ base/  (UUI reuse) │
│                      │     │ ◇ 6. Data binding + schema   │     │   ├─ ds/    (wrappers)  │
│   review.html        │     │   7. Slice plan              │     │   └─ custom/ (new)      │

View full repository on GitHub →