dekit-cli 0.2.2 → 0.2.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 +40 -70
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,101 +1,71 @@
|
|
|
1
1
|
# dekit
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
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
|
-
|
|
8
|
-
- **Device Simulation** — preview on iPhone, iPad, Android, desktop, or custom dimensions
|
|
9
|
-
- **Element Inspector** — click any element to see its computed styles, box model, and attributes
|
|
10
|
-
- **Layer Tree** — navigate your DOM structure with a visual layer panel
|
|
11
|
-
- **Web Components** — define reusable components with `<template>` + CSS
|
|
12
|
-
- **YAML Configuration** — simple `design.yaml` to define pages, components, and styles
|
|
7
|
+
## What It Does
|
|
13
8
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
Install globally:
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install -g dekit-cli
|
|
9
|
+
```
|
|
10
|
+
Agent creates design → dekit renders it → Agent screenshots to check → iterates → Human reviews
|
|
20
11
|
```
|
|
21
12
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
global-style: "global.css"
|
|
27
|
-
|
|
28
|
-
components:
|
|
29
|
-
my-button:
|
|
30
|
-
template: "components/my-button/button.html"
|
|
31
|
-
style: "components/my-button/button.css"
|
|
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
|
|
32
17
|
|
|
33
|
-
|
|
34
|
-
home:
|
|
35
|
-
template: "pages/home/home.html"
|
|
36
|
-
style: "pages/home/home.css"
|
|
37
|
-
```
|
|
18
|
+
## Getting Started
|
|
38
19
|
|
|
39
|
-
|
|
20
|
+
### 1. Install
|
|
40
21
|
|
|
41
22
|
```bash
|
|
42
|
-
dekit
|
|
23
|
+
npm install -g dekit-cli
|
|
43
24
|
```
|
|
44
25
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
## Configuration
|
|
26
|
+
### 2. Set up your agent
|
|
48
27
|
|
|
49
|
-
|
|
28
|
+
Create a skill file at `.claude/skills/dekit/SKILL.md`:
|
|
50
29
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
30
|
+
```markdown
|
|
31
|
+
---
|
|
32
|
+
name: dekit
|
|
33
|
+
description: Use dekit to create, preview, and iterate on HTML/CSS designs
|
|
34
|
+
---
|
|
35
|
+
Run `dekit usage` to get the full usage guide.
|
|
36
|
+
Follow the guide to complete your design task.
|
|
37
|
+
```
|
|
57
38
|
|
|
58
|
-
|
|
39
|
+
## Examples
|
|
59
40
|
|
|
60
|
-
|
|
41
|
+
**Let the agent design from scratch:**
|
|
61
42
|
|
|
62
43
|
```
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
Options:
|
|
66
|
-
-c, --config Path to design.yaml (default: ./design.yaml or ./design.yml)
|
|
67
|
-
-p, --port Editor server port (default: 3000)
|
|
68
|
-
--design-port Design server port (default: 3001)
|
|
69
|
-
-h, --help Show this help message
|
|
44
|
+
> Use dekit to design a landing page for a task management app
|
|
70
45
|
```
|
|
71
46
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
|
|
47
|
+
The agent handles everything — project setup, writing HTML/CSS, taking screenshots to verify, and iterating on the design.
|
|
75
48
|
|
|
76
|
-
|
|
49
|
+
**Review and give feedback:**
|
|
77
50
|
|
|
78
|
-
|
|
51
|
+
When the agent starts the preview server, open the browser to review. Right-click any element and **Copy Ref**, then tell the agent what to change:
|
|
79
52
|
|
|
80
|
-
|
|
53
|
+
```
|
|
54
|
+
> The hero section $${home@.hero} needs more padding, and make the CTA button blue
|
|
55
|
+
```
|
|
81
56
|
|
|
82
|
-
|
|
57
|
+
**Add a page to an existing design:**
|
|
83
58
|
|
|
84
|
-
```
|
|
85
|
-
|
|
59
|
+
```
|
|
60
|
+
> Add a pricing page to the dekit project with a 3-tier card layout
|
|
86
61
|
```
|
|
87
62
|
|
|
88
|
-
|
|
63
|
+
**Design for mobile:**
|
|
89
64
|
|
|
90
|
-
|
|
65
|
+
```
|
|
66
|
+
> Use dekit to design a mobile app for a fitness tracker, use the mobile template
|
|
67
|
+
```
|
|
91
68
|
|
|
92
|
-
|
|
69
|
+
## License
|
|
93
70
|
|
|
94
|
-
|
|
95
|
-
---
|
|
96
|
-
name: dekit
|
|
97
|
-
description: Use dekit to create, preview, and iterate on HTML/CSS designs
|
|
98
|
-
---
|
|
99
|
-
Run `dekit usage` to get the full usage guide.
|
|
100
|
-
Follow the guide to complete your design task.
|
|
101
|
-
```
|
|
71
|
+
[Apache 2.0](LICENSE)
|