@zvada/cr8 0.0.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/marketplace.json +14 -0
- package/.claude-plugin/plugin.json +23 -0
- package/.codex-plugin/mcp.json +11 -0
- package/.codex-plugin/plugin.json +35 -0
- package/.mcp.json +13 -0
- package/LICENSE +28 -0
- package/README.md +174 -2
- package/dist/cr8.mjs +543 -0
- package/docs/user/app-store-screenshots.md +16 -0
- package/docs/user/cli.md +259 -0
- package/docs/user/desktop.md +43 -0
- package/docs/user/feedback.md +99 -0
- package/docs/user/install.md +160 -0
- package/docs/user/mcp.md +104 -0
- package/docs/user/projects.md +45 -0
- package/package.json +83 -7
- package/skills/cr8-design/SKILL.md +54 -0
- package/skills/cr8-design/agents/openai.yaml +4 -0
- package/skills/cr8-design/references/build.md +85 -0
- package/skills/cr8-design/references/cli.md +28 -0
- package/skills/cr8-design/references/start.md +34 -0
- package/skills/cr8-design/references/troubleshooting.md +16 -0
- package/skills/cr8-design/references/verify.md +41 -0
- package/skills/cr8-feedback/SKILL.md +44 -0
- package/skills/cr8-feedback/agents/openai.yaml +6 -0
- package/skills/cr8-flows/SKILL.md +40 -0
- package/skills/cr8-flows/agents/openai.yaml +4 -0
- package/skills/cr8-flows/references/build.md +30 -0
- package/skills/cr8-flows/references/cli.md +7 -0
- package/skills/cr8-flows/references/models.md +70 -0
- package/skills/cr8-flows/references/results.md +24 -0
- package/skills/cr8-flows/references/run.md +21 -0
- package/skills/cr8-flows/references/troubleshooting.md +17 -0
- package/bin/cr8.mjs +0 -2
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cr8",
|
|
3
|
+
"owner": {
|
|
4
|
+
"name": "Adam Zvada",
|
|
5
|
+
"url": "https://github.com/zvadaadam"
|
|
6
|
+
},
|
|
7
|
+
"plugins": [
|
|
8
|
+
{
|
|
9
|
+
"name": "cr8",
|
|
10
|
+
"source": "./",
|
|
11
|
+
"description": "A local-first design canvas shared by people and AI agents: typed MCP tools, a CLI, and a loopback browser workspace."
|
|
12
|
+
}
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cr8",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "A local-first design canvas shared by people and AI agents.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Adam Zvada",
|
|
7
|
+
"url": "https://github.com/zvadaadam"
|
|
8
|
+
},
|
|
9
|
+
"repository": "https://github.com/zvadaadam/baby-canva",
|
|
10
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
11
|
+
"mcpServers": {
|
|
12
|
+
"cr8": {
|
|
13
|
+
"command": "npx",
|
|
14
|
+
"args": [
|
|
15
|
+
"-y",
|
|
16
|
+
"@zvada/cr8@0.2.0",
|
|
17
|
+
"mcp",
|
|
18
|
+
"--workspace",
|
|
19
|
+
"${CLAUDE_PROJECT_DIR}"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cr8",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "A local-first design canvas shared by people and AI agents.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Adam Zvada",
|
|
7
|
+
"url": "https://github.com/zvadaadam"
|
|
8
|
+
},
|
|
9
|
+
"repository": "https://github.com/zvadaadam/baby-canva",
|
|
10
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
11
|
+
"keywords": [
|
|
12
|
+
"design",
|
|
13
|
+
"canvas",
|
|
14
|
+
"mcp",
|
|
15
|
+
"agents"
|
|
16
|
+
],
|
|
17
|
+
"mcpServers": "./.codex-plugin/mcp.json",
|
|
18
|
+
"interface": {
|
|
19
|
+
"displayName": "CR8",
|
|
20
|
+
"shortDescription": "Design with agents on a local canvas",
|
|
21
|
+
"longDescription": "Create and edit Git-friendly visual projects through typed agent tools while a person watches or collaborates in the same local canvas.",
|
|
22
|
+
"developerName": "Adam Zvada",
|
|
23
|
+
"category": "Productivity",
|
|
24
|
+
"capabilities": [
|
|
25
|
+
"Interactive",
|
|
26
|
+
"Write"
|
|
27
|
+
],
|
|
28
|
+
"defaultPrompt": [
|
|
29
|
+
"Create a YouTube thumbnail in designs/thumbnail",
|
|
30
|
+
"Open my CR8 design and improve its layout",
|
|
31
|
+
"Build an editable mobile app concept"
|
|
32
|
+
],
|
|
33
|
+
"brandColor": "#654CFF"
|
|
34
|
+
}
|
|
35
|
+
}
|
package/.mcp.json
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
CR8 License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Adam Zvada. All rights reserved.
|
|
4
|
+
|
|
5
|
+
CR8 (the "Software") is proprietary software of Adam Zvada (the "Author"). By installing or using the Software you accept this license.
|
|
6
|
+
|
|
7
|
+
1. What you may do. The Author grants you a personal, non-exclusive, non-transferable, revocable license to install and run the Software, as the Author distributes it, to create and edit designs, including in your own commercial work.
|
|
8
|
+
|
|
9
|
+
2. What you may not do, unless the Author permits it in writing:
|
|
10
|
+
a. copy, redistribute, publish, sell, sublicense, rent or lease the Software or any part of it;
|
|
11
|
+
b. modify, translate, adapt or create derivative works of the Software;
|
|
12
|
+
c. reverse engineer, decompile or disassemble the Software, except where the law grants you that right regardless of this license;
|
|
13
|
+
d. remove or alter any copyright, license or attribution notice;
|
|
14
|
+
e. use the Software's source, internals or design knowledge to build a competing product.
|
|
15
|
+
|
|
16
|
+
3. Your work is yours. Everything you make with the Software, including designs, flows, assets and exports, belongs to you. The Author claims no rights in it.
|
|
17
|
+
|
|
18
|
+
4. Third-party components. The Software includes open-source components, each under its own license. Those licenses govern those components and this license does not restrict them.
|
|
19
|
+
|
|
20
|
+
5. Services. The Software connects to hosted services of the Author for account sign-in and AI media generation. Those services are provided under their own terms and may change or end.
|
|
21
|
+
|
|
22
|
+
6. Names and marks. This license grants no right to use the name CR8 or any mark of the Author, except to describe the Software truthfully.
|
|
23
|
+
|
|
24
|
+
7. No warranty. The Software is provided "as is", without warranty of any kind, express or implied, including warranties of merchantability, fitness for a particular purpose and non-infringement.
|
|
25
|
+
|
|
26
|
+
8. Limitation of liability. To the extent the law allows, the Author is not liable for any loss or damage arising from the use of, or the inability to use, the Software.
|
|
27
|
+
|
|
28
|
+
9. Termination. This license ends automatically if you break it. When it ends, stop using the Software and delete your copies.
|
package/README.md
CHANGED
|
@@ -1,5 +1,177 @@
|
|
|
1
1
|
# CR8
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
CR8 is a design canvas that you and your AI agents work on together, on your own computer. You open a design in your browser and draw, type, place images and generate them; an agent works on the same design at the same time through its own tools. The design is a folder of files in your repository, so it travels with your code and its history lives in Git.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Two workspaces share one project:
|
|
6
|
+
|
|
7
|
+
- **Design** is the canvas: artboards, layers, text, images and vectors, with generation built in.
|
|
8
|
+
- **Flows** is where repeatable AI-media recipes live: a graph of steps over image, vector and video models that a person can rerun and edit, and an agent can build and run.
|
|
9
|
+
|
|
10
|
+
One local process serves both to the browser, speaks MCP to an agent, and answers a JSON command line. Nothing runs in the cloud except the AI media itself: generation runs on hosted models with your CR8 account, and every result is copied into the project. Your designs never leave your computer.
|
|
11
|
+
|
|
12
|
+
> [!NOTE]
|
|
13
|
+
> CR8 is an invited preview, and it is proprietary software: install it and use it, including for your own commercial work, but do not copy, modify or redistribute it. What you make with it is yours. The terms are in [LICENSE](LICENSE).
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
|
|
17
|
+
You need Node.js 20.19 or newer for the npm and source installs. The binaries and the desktop app need nothing.
|
|
18
|
+
|
|
19
|
+
**From npm** (after the first release). One command creates a project, serves it and opens your browser:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npx @zvada/cr8 start designs/first
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Install it once to have `cr8` on your path:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install -g @zvada/cr8
|
|
29
|
+
cr8 start designs/first
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**A release binary** (after the first release). Each GitHub release carries one executable per platform (`cr8-darwin-arm64.zip`, `cr8-darwin-x64.zip`, `cr8-linux-x64.tar.gz`, `cr8-linux-arm64.tar.gz`, `cr8-windows-x64.zip`), a `SHA256SUMS.txt`, and a build attestation. Check the sum, unpack, run:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
shasum -a 256 -c SHA256SUMS.txt --ignore-missing
|
|
36
|
+
unzip cr8-darwin-arm64.zip && ./cr8-darwin-arm64 start designs/first
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
**The desktop app** (after the first release). The same release carries a macOS app (dmg and zip), a Windows installer and a Linux AppImage. It is a window around the same local process: open a project folder and the canvas appears, no browser tab needed.
|
|
40
|
+
|
|
41
|
+
**From source** (today). With Git and Node.js:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
git clone https://github.com/zvadaadam/baby-canva.git "$HOME/.cr8"
|
|
45
|
+
cd "$HOME/.cr8" && npm ci && npm run build:package
|
|
46
|
+
ln -s "$HOME/.cr8/dist/cr8.mjs" /usr/local/bin/cr8 # or: alias cr8='node "$HOME/.cr8/dist/cr8.mjs"'
|
|
47
|
+
cr8 start designs/first
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The build makes one file, `dist/cr8.mjs`: the CLI, the MCP server, the browser workspace and the MCP App together.
|
|
51
|
+
|
|
52
|
+
The full page, with the agent-host details, is [docs/user/install.md](docs/user/install.md).
|
|
53
|
+
|
|
54
|
+
## Update
|
|
55
|
+
|
|
56
|
+
Your designs live in their own repositories, so an update never touches them. Restart your agent host afterwards, since it keeps the server running.
|
|
57
|
+
|
|
58
|
+
| Installed from | Update with |
|
|
59
|
+
| --- | --- |
|
|
60
|
+
| npm | `npm install -g @zvada/cr8@latest` (or keep using `npx @zvada/cr8@latest`) |
|
|
61
|
+
| A binary | Download the new archive from the release and check its sum |
|
|
62
|
+
| The desktop app | Download the new build; the app does not update itself |
|
|
63
|
+
| Source | `cd "$HOME/.cr8" && git pull --ff-only && npm ci && npm run build:package` |
|
|
64
|
+
|
|
65
|
+
## Use it
|
|
66
|
+
|
|
67
|
+
There are four ways in, and they all work on the same running process and the same project, at the same time. Pick the one that fits the moment.
|
|
68
|
+
|
|
69
|
+
### In the browser, as a person
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
cr8 start designs/first
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
The browser opens on the canvas. Draw frames, add text and rectangles, drop in images, move and resize with the mouse, nudge with the arrow keys, undo and redo. Artboards are your alternatives: duplicate one to try another direction, and keep the directions side by side. Switch to **Flows** at the top to build a recipe, run it, and add what it made to the design. **Export** writes an artboard as a PNG.
|
|
76
|
+
|
|
77
|
+
The first time you generate an image, CR8 asks you to connect your account: **Connect AI media** opens a sign-in page in your browser, once per device. Everything else needs no account.
|
|
78
|
+
|
|
79
|
+
### With an agent
|
|
80
|
+
|
|
81
|
+
Claude Code, Codex and any MCP host can drive CR8. The host starts the server when a tool is called and stops it when the session ends, so do not run `cr8 start` for the agent.
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
claude mcp add --transport stdio --scope user cr8 -- cr8 mcp # Claude Code
|
|
85
|
+
codex mcp add cr8 -- cr8 mcp # Codex
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Then ask for a deliverable, not a tool:
|
|
89
|
+
|
|
90
|
+
> Initialize CR8 at `designs/thumbnail` and make a 1280 × 720 YouTube thumbnail for an AI mobile-app builder. Keep every layer editable and show me the canvas.
|
|
91
|
+
|
|
92
|
+
The agent creates the project, starts the canvas and hands you its URL. You watch and edit in the browser while it works; a host that renders MCP Apps shows the same canvas inline. Three skills ship with CR8 and teach the agent how to work well: `cr8-design` for the canvas, `cr8-flows` for recipes, `cr8-feedback` for reporting. Put them where the hosts look with `cr8 skills install`. Once the package is public, `/plugin marketplace add zvadaadam/baby-canva` installs the server and the skills into Claude Code in one step.
|
|
93
|
+
|
|
94
|
+
The tools and what the agent sees are described in [docs/user/mcp.md](docs/user/mcp.md).
|
|
95
|
+
|
|
96
|
+
### From a terminal or a script
|
|
97
|
+
|
|
98
|
+
Every command answers one JSON line, so CR8 fits shell scripts and agents without MCP alike. Start a server without a browser, then talk to it:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
cr8 start designs/first --no-open # prints the URL, keeps serving
|
|
102
|
+
cr8 status --pretty # what the project holds
|
|
103
|
+
cr8 compose --json '[{"key":"hero","type":"frame","name":"Hero","x":0,"y":0,"width":1280,"height":720,"fill":"#111111"}]'
|
|
104
|
+
cr8 doctor # layout, overlap, legibility, clutter
|
|
105
|
+
cr8 generate --prompt "A coral disc on cream" --model fast --ratio 16:9 --count 1
|
|
106
|
+
cr8 export --root FRAME_ID --out hero.png
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Bring references in and check the result against them: `cr8 import picture.png --as-frame`, `cr8 capture https://example.com`, `cr8 verify --reference picture.png --root FRAME_ID`. Build and run a recipe: `cr8 workflow-templates`, `cr8 workflow-create --file flow.json`, `cr8 workflow-run FLOW_ID`, `cr8 workflow-place FLOW_ID`. `cr8 schema` prints the whole command contract. The complete guide is [docs/user/cli.md](docs/user/cli.md).
|
|
110
|
+
|
|
111
|
+
### In the desktop app
|
|
112
|
+
|
|
113
|
+
Open the app on a project folder, or launch it with `--workspace DIR --project designs/first`. It spawns the same local process, or joins one that already holds the project, and shows the canvas in its own window. See [docs/user/desktop.md](docs/user/desktop.md).
|
|
114
|
+
|
|
115
|
+
## Your files
|
|
116
|
+
|
|
117
|
+
A design is an ordinary folder. Commit it like code.
|
|
118
|
+
|
|
119
|
+
```text
|
|
120
|
+
designs/first/
|
|
121
|
+
├── cr8.json # the design itself, readable and versioned
|
|
122
|
+
├── flows.json # the project's recipes, created with the first saved flow
|
|
123
|
+
├── flow-runs.json # what each flow last made, created with the first run
|
|
124
|
+
├── assets/ # images and SVGs, imported or generated, named by their content
|
|
125
|
+
├── .gitignore # ignores .cr8/
|
|
126
|
+
└── .cr8/ # disposable: the session, the selection, the lock
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Commit `cr8.json`, `flows.json`, `flow-runs.json`, `assets/` and `.gitignore`; a clone opens with every design, every flow and what each flow last made. Never commit `.cr8/`. Keep alternatives as artboards in one project rather than as `v2` folders; the rules of thumb are in [docs/user/projects.md](docs/user/projects.md).
|
|
130
|
+
|
|
131
|
+
## Your account and AI media
|
|
132
|
+
|
|
133
|
+
Drawing, editing, importing, exporting, the CLI and the agent tools all work without an account. Generating images, vectors, video and image-to-layers runs on hosted models and needs your CR8 account, connected once per device: the sign-in page hands this computer a grant that renews itself and lives in CR8's home folder, readable by you alone. `cr8 connect --open` does the same from a terminal, `cr8 status` shows the connection, `cr8 disconnect` forgets it. An agent never sees your credentials; when a generation needs the account, it hands you the sign-in URL.
|
|
134
|
+
|
|
135
|
+
Every generation is recorded in the cloud with its model, prompt and parameters, and the result is copied into the project's `assets/` before the design may use it. Only video clips stay in the cloud; `cr8 media-download` writes one to a file.
|
|
136
|
+
|
|
137
|
+
## Feedback
|
|
138
|
+
|
|
139
|
+
When something is broken, confusing or notably good, tell the team. From a terminal:
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
cr8 feedback --category cli --subject "cr8 export" "export writes a black PNG when the artboard is rotated."
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Agents have the same path through the `cr8-feedback` skill and the `canvas_feedback` tool, and without the CLI they can report to Hivenet directly with `npx --yes hivenet@0.4.2 --to babycanva --category <category> --subject "<exact item>" "<feedback>"`. Nothing is ever sent automatically, and a report carries no canvas content or ambient context; `--dry-run` shows the exact event first. A task that failed after real effort goes with `--task`, `--expected` and `--actual`, and becomes a test case for the team. See [docs/user/feedback.md](docs/user/feedback.md).
|
|
146
|
+
|
|
147
|
+
## Documentation
|
|
148
|
+
|
|
149
|
+
- [Install](docs/user/install.md), [CLI](docs/user/cli.md), [MCP and the MCP App](docs/user/mcp.md), [desktop app](docs/user/desktop.md), [projects](docs/user/projects.md), [feedback](docs/user/feedback.md), [App Store screenshots](docs/user/app-store-screenshots.md).
|
|
150
|
+
- [Architecture](docs/internals/architecture.md), [workflows](docs/internals/workflows.md), [media API](docs/internals/media-api.md), [authentication](docs/operations/auth.md), [releases](docs/operations/release.md), and the [decisions](docs/decisions/) behind them. The index is [docs/README.md](docs/README.md).
|
|
151
|
+
|
|
152
|
+
## For developers
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npm run dev # the runtime behind Vite with hot reload
|
|
156
|
+
npm run cli -- status --pretty # the development CLI entry
|
|
157
|
+
npm run typecheck && npm run lint && npm test
|
|
158
|
+
npm run build # the package, the account hub and the desktop main process
|
|
159
|
+
npm run test:install # pack the npm artifact and install it the way a user would
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
The product lives in eight private npm workspaces. Each owns its dependencies, configuration and focused tests:
|
|
163
|
+
|
|
164
|
+
| Package | Owns |
|
|
165
|
+
| --- | --- |
|
|
166
|
+
| [core](packages/core/) | Canonical scene, commands, layout and local protocol |
|
|
167
|
+
| [runtime](packages/runtime/) | Local process, project files, CLI, MCP and media clients |
|
|
168
|
+
| [editor](packages/editor/) | Browser editor, Flows and embedded MCP App |
|
|
169
|
+
| [desktop](packages/desktop/) | Electron launcher over the local runtime |
|
|
170
|
+
| [account-hub](packages/account-hub/) | Cloud account UI, WorkOS and installation grants |
|
|
171
|
+
| [media-api](packages/media-api/) | Cloud generation Worker, providers and output catalog |
|
|
172
|
+
| [contracts](packages/contracts/) | Contracts shared with the Workers |
|
|
173
|
+
| [media-safety](packages/media-safety/) | Image and SVG byte validation |
|
|
174
|
+
|
|
175
|
+
Run a focused command from the root with `npm run test --workspace @cr8/editor`, or from inside that package with `npm test`. Root `tests/` holds cross-package integration and installation checks. Root scripts assemble and verify the whole product.
|
|
176
|
+
|
|
177
|
+
The root remains the published `@zvada/cr8` package and plugin: `npm run build:package` bundles the private workspace source into one `dist/cr8.mjs`, with no installed runtime dependencies. The account hub has its own build into `dist/account`; the local editor is loopback-only. See [architecture](docs/internals/architecture.md), the [package decision](docs/decisions/2026-09-10-package-ownership.md), and the [release runbook](docs/operations/release.md).
|