dekit-cli 0.4.2 → 0.4.3
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/README.md +10 -26
- package/dist/editor/assets/{index-D16Bm-Rw.js → index-hySfUCIY.js} +10 -10
- package/dist/editor/index.html +1 -1
- package/docs/usage.md +196 -7
- package/editor/src/App.tsx +8 -0
- package/editor/src/types.ts +8 -0
- package/package.json +1 -1
- package/src/cli/init.test.ts +22 -0
- package/src/cli/init.ts +12 -1
- package/src/cli/screenshot.ts +21 -7
- package/src/editor-server.ts +8 -0
- package/src/parser.test.ts +164 -0
- package/src/parser.ts +74 -3
- package/src/types.ts +16 -0
- package/src/vite-plugin-dekit.test.ts +85 -1
- package/src/vite-plugin-dekit.ts +42 -2
- package/templates/projects/mobile/dekit.yaml +1 -0
package/README.md
CHANGED
|
@@ -4,28 +4,16 @@ A design canvas for AI code agents.
|
|
|
4
4
|
|
|
5
5
|
Agents write HTML/CSS designs, preview and screenshot them, iterate until satisfied — then humans review in the browser and give feedback.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
Agent creates design → dekit renders it → Agent screenshots to check → iterates → Human reviews
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
- Agent scaffolds a design project with built-in templates (landing page, dashboard, mobile app)
|
|
14
|
-
- Agent writes HTML/CSS, takes screenshots to see the result, and self-corrects
|
|
15
|
-
- Human opens the browser preview, inspects elements, and gives feedback using refs
|
|
16
|
-
- Agent resolves the feedback to exact source code locations and iterates
|
|
9
|
+
## How It Works
|
|
17
10
|
|
|
18
|
-
|
|
11
|
+
1. **Agent designs** — scaffolds a project, writes HTML/CSS, takes screenshots to self-check
|
|
12
|
+
2. **Human reviews** — opens the browser preview, inspects elements, right-clicks to **Copy Ref**
|
|
13
|
+
3. **Human gives feedback** — pastes the ref in terminal with instructions
|
|
14
|
+
4. **Agent iterates** — resolves the ref to source code, makes changes, screenshots to verify
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
your-project/
|
|
22
|
-
└── .dekit/
|
|
23
|
-
├── dekit.yaml ← config
|
|
24
|
-
├── global.css
|
|
25
|
-
├── pages/
|
|
26
|
-
├── components/
|
|
27
|
-
└── screenshots/
|
|
28
|
-
```
|
|
16
|
+
All design files live inside a `.dekit/` directory, keeping your project clean.
|
|
29
17
|
|
|
30
18
|
## Getting Started
|
|
31
19
|
|
|
@@ -48,15 +36,13 @@ Run `dekit usage` to get the full usage guide.
|
|
|
48
36
|
Follow the guide to complete your design task.
|
|
49
37
|
```
|
|
50
38
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
**Design a landing page:**
|
|
39
|
+
### 3. Try it
|
|
54
40
|
|
|
55
41
|
```
|
|
56
42
|
> Use dekit to design a landing page for a task management app
|
|
57
43
|
```
|
|
58
44
|
|
|
59
|
-
|
|
45
|
+
## Examples
|
|
60
46
|
|
|
61
47
|
**Design for mobile:**
|
|
62
48
|
|
|
@@ -70,11 +56,9 @@ The agent handles everything — project setup, writing HTML/CSS, taking screens
|
|
|
70
56
|
> Initialize a dekit design project using the dashboard template
|
|
71
57
|
```
|
|
72
58
|
|
|
73
|
-
The agent creates a `.dekit/` directory with all the scaffolding, without touching your existing code.
|
|
74
|
-
|
|
75
59
|
**Review and give feedback:**
|
|
76
60
|
|
|
77
|
-
|
|
61
|
+
Right-click any element in the preview and **Copy Ref**, then tell the agent:
|
|
78
62
|
|
|
79
63
|
```
|
|
80
64
|
> The hero section $${home@.hero} needs more padding, and make the CTA button blue
|