@xenonbyte/da-vinci-workflow 0.1.2
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 +306 -0
- package/SKILL.md +377 -0
- package/agents/openai.yaml +7 -0
- package/bin/da-vinci.js +8 -0
- package/commands/claude/da-vinci.md +23 -0
- package/commands/claude/dv/breakdown.md +21 -0
- package/commands/claude/dv/build.md +17 -0
- package/commands/claude/dv/design.md +20 -0
- package/commands/claude/dv/tasks.md +19 -0
- package/commands/claude/dv/verify.md +16 -0
- package/commands/codex/prompts/da-vinci.md +24 -0
- package/commands/codex/prompts/dv-breakdown.md +19 -0
- package/commands/codex/prompts/dv-build.md +13 -0
- package/commands/codex/prompts/dv-design.md +14 -0
- package/commands/codex/prompts/dv-tasks.md +16 -0
- package/commands/codex/prompts/dv-verify.md +15 -0
- package/commands/gemini/da-vinci.toml +26 -0
- package/commands/gemini/dv/breakdown.toml +19 -0
- package/commands/gemini/dv/build.toml +13 -0
- package/commands/gemini/dv/design.toml +14 -0
- package/commands/gemini/dv/tasks.toml +13 -0
- package/commands/gemini/dv/verify.toml +15 -0
- package/docs/workflow-examples.md +104 -0
- package/examples/greenfield-spec-markupflow/README.md +40 -0
- package/examples/greenfield-spec-markupflow/design-brief.md +24 -0
- package/examples/greenfield-spec-markupflow/design-registry.md +15 -0
- package/examples/greenfield-spec-markupflow/design.md +32 -0
- package/examples/greenfield-spec-markupflow/page-map.md +19 -0
- package/examples/greenfield-spec-markupflow/pencil-bindings.md +13 -0
- package/examples/greenfield-spec-markupflow/pencil-design.md +29 -0
- package/examples/greenfield-spec-markupflow/proposal.md +33 -0
- package/examples/greenfield-spec-markupflow/site/index.html +192 -0
- package/examples/greenfield-spec-markupflow/site/product-detail.html +165 -0
- package/examples/greenfield-spec-markupflow/specs/marketing-site/spec.md +37 -0
- package/examples/greenfield-spec-markupflow/tasks.md +28 -0
- package/examples/greenfield-spec-markupflow/verification.md +37 -0
- package/lib/cli.js +100 -0
- package/lib/install.js +286 -0
- package/package.json +31 -0
- package/references/artifact-templates.md +364 -0
- package/references/checkpoints.md +141 -0
- package/references/design-inputs.md +55 -0
- package/references/modes.md +84 -0
- package/references/page-mapping.md +47 -0
- package/references/pencil-design-to-code.md +64 -0
- package/references/platform-adapters.md +66 -0
- package/scripts/postinstall.js +9 -0
- package/scripts/validate-assets.js +9 -0
package/README.md
ADDED
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
# Da Vinci
|
|
2
|
+
|
|
3
|
+
Da Vinci is a software delivery workflow that turns product requirements into structured specs, Pencil designs, page-to-design bindings, implementation tasks, and final code.
|
|
4
|
+
|
|
5
|
+
The workflow is built around one fixed contract:
|
|
6
|
+
|
|
7
|
+
- requirements decide behavior
|
|
8
|
+
- Pencil decides presentation
|
|
9
|
+
- code follows both
|
|
10
|
+
|
|
11
|
+
## What Da Vinci is for
|
|
12
|
+
|
|
13
|
+
Use Da Vinci when software delivery needs all three layers to stay aligned:
|
|
14
|
+
|
|
15
|
+
1. requirement breakdown
|
|
16
|
+
2. Pencil-backed UI design
|
|
17
|
+
3. implementation from requirements plus design data
|
|
18
|
+
|
|
19
|
+
This workflow is intended for:
|
|
20
|
+
|
|
21
|
+
- 0-to-1 product delivery
|
|
22
|
+
- brainstorm-to-product delivery
|
|
23
|
+
- redesign from existing code
|
|
24
|
+
- scoped feature delivery on an existing product
|
|
25
|
+
|
|
26
|
+
## Supported workflow modes
|
|
27
|
+
|
|
28
|
+
Da Vinci V2 supports four modes.
|
|
29
|
+
|
|
30
|
+
### `greenfield-spec`
|
|
31
|
+
|
|
32
|
+
Use when the project is new and the requirements are already clear enough to write specs.
|
|
33
|
+
|
|
34
|
+
### `greenfield-brainstorm`
|
|
35
|
+
|
|
36
|
+
Use when the project is new but the inputs come from multiple rounds of rough product ideation and need synthesis first.
|
|
37
|
+
|
|
38
|
+
### `redesign-from-code`
|
|
39
|
+
|
|
40
|
+
Use when an existing project already has routes, pages, and UI, and the goal is a broad redesign or UI replacement.
|
|
41
|
+
|
|
42
|
+
### `feature-change`
|
|
43
|
+
|
|
44
|
+
Use when an existing product needs a scoped requirement change, page addition, or page update.
|
|
45
|
+
|
|
46
|
+
## Core workflow
|
|
47
|
+
|
|
48
|
+
Da Vinci runs in this order:
|
|
49
|
+
|
|
50
|
+
1. select the active mode
|
|
51
|
+
2. build the correct source artifacts
|
|
52
|
+
3. collect design inputs and register design sources
|
|
53
|
+
4. define or discover the project page map
|
|
54
|
+
5. create or update Pencil designs
|
|
55
|
+
6. bind implementation pages to Pencil pages
|
|
56
|
+
7. read Pencil design data through MCP
|
|
57
|
+
8. generate implementation tasks
|
|
58
|
+
9. implement code from requirements plus Pencil data
|
|
59
|
+
10. verify requirement drift and design drift
|
|
60
|
+
|
|
61
|
+
## Default artifacts
|
|
62
|
+
|
|
63
|
+
Depending on the mode, the workflow may use these artifacts:
|
|
64
|
+
|
|
65
|
+
- `brainstorm.md`
|
|
66
|
+
- `project-inventory.md`
|
|
67
|
+
- `design-brief.md`
|
|
68
|
+
- `design-registry.md`
|
|
69
|
+
- `page-map.md`
|
|
70
|
+
- `proposal.md`
|
|
71
|
+
- `specs/<capability>/spec.md`
|
|
72
|
+
- `design.md`
|
|
73
|
+
- `pencil-design.md`
|
|
74
|
+
- `pencil-bindings.md`
|
|
75
|
+
- `tasks.md`
|
|
76
|
+
- `verification.md`
|
|
77
|
+
|
|
78
|
+
### Artifact intent
|
|
79
|
+
|
|
80
|
+
- `brainstorm.md`: raw ideas before specs are stable
|
|
81
|
+
- `project-inventory.md`: current routes, pages, and UI patterns from an existing codebase
|
|
82
|
+
- `design-brief.md`: form factor, style, density, brand constraints, and layout preferences
|
|
83
|
+
- `design-registry.md`: project-level `.pen` source inventory
|
|
84
|
+
- `page-map.md`: canonical page list and page responsibilities
|
|
85
|
+
- `proposal.md`: change scope and outcomes
|
|
86
|
+
- `spec.md`: behavior, states, edge cases, and acceptance rules
|
|
87
|
+
- `design.md`: page structure, interactions, and component strategy
|
|
88
|
+
- `pencil-design.md`: `.pen` file path, screens, screenshots, and implementation notes
|
|
89
|
+
- `pencil-bindings.md`: implementation page -> Pencil page bindings
|
|
90
|
+
- `tasks.md`: implementation order and task groups
|
|
91
|
+
- `verification.md`: requirement coverage, design coverage, and drift findings
|
|
92
|
+
|
|
93
|
+
## Checkpoints
|
|
94
|
+
|
|
95
|
+
Da Vinci uses these checkpoints:
|
|
96
|
+
|
|
97
|
+
1. `discovery checkpoint`
|
|
98
|
+
2. `spec checkpoint`
|
|
99
|
+
3. `design checkpoint`
|
|
100
|
+
4. `mapping checkpoint`
|
|
101
|
+
5. `task checkpoint`
|
|
102
|
+
6. `execution checkpoint`
|
|
103
|
+
|
|
104
|
+
Checkpoint outcomes:
|
|
105
|
+
|
|
106
|
+
- `PASS`
|
|
107
|
+
- `WARN`
|
|
108
|
+
- `BLOCK`
|
|
109
|
+
|
|
110
|
+
## Execution Policy
|
|
111
|
+
|
|
112
|
+
Da Vinci is `autonomous-by-default`.
|
|
113
|
+
|
|
114
|
+
That means:
|
|
115
|
+
|
|
116
|
+
- it should continue the workflow without pausing for user confirmation at each stage
|
|
117
|
+
- checkpoints are internal quality gates, not approval gates
|
|
118
|
+
- it should only stop when a real blocker exists
|
|
119
|
+
|
|
120
|
+
Default behavior:
|
|
121
|
+
|
|
122
|
+
- `PASS` -> continue
|
|
123
|
+
- `WARN` -> record and continue
|
|
124
|
+
- `BLOCK` -> stop only when the blocker cannot be resolved from existing artifacts or local context
|
|
125
|
+
|
|
126
|
+
Typical stop conditions:
|
|
127
|
+
|
|
128
|
+
- the user explicitly interrupts
|
|
129
|
+
- a missing input would materially change the design or implementation result
|
|
130
|
+
- an external permission or authentication step is required
|
|
131
|
+
- source artifacts conflict badly enough that continuing would guess the truth
|
|
132
|
+
- a destructive baseline-changing action is about to happen
|
|
133
|
+
|
|
134
|
+
## Design source policy
|
|
135
|
+
|
|
136
|
+
Da Vinci treats Pencil as a structured design source, not as a screenshot source.
|
|
137
|
+
|
|
138
|
+
Rules:
|
|
139
|
+
|
|
140
|
+
- `design-registry.md` is the project-level inventory of `.pen` sources
|
|
141
|
+
- `page-map.md` is the source of truth for implementation pages
|
|
142
|
+
- `pencil-bindings.md` is the source of truth for implementation page -> Pencil page mapping
|
|
143
|
+
|
|
144
|
+
When a relevant mapping already exists:
|
|
145
|
+
|
|
146
|
+
- iterate on the mapped Pencil source
|
|
147
|
+
|
|
148
|
+
When mappings do not exist but local code exists:
|
|
149
|
+
|
|
150
|
+
- reconstruct the baseline from the local project
|
|
151
|
+
- rebuild inventory, page map, and design registry
|
|
152
|
+
|
|
153
|
+
When neither mappings nor usable design sources exist:
|
|
154
|
+
|
|
155
|
+
- create a new Pencil baseline from the current local source of truth
|
|
156
|
+
|
|
157
|
+
## Design input collection
|
|
158
|
+
|
|
159
|
+
Before generating Pencil designs for a greenfield project, Da Vinci should collect or infer:
|
|
160
|
+
|
|
161
|
+
- product form factor
|
|
162
|
+
- visual tone
|
|
163
|
+
- density
|
|
164
|
+
- brand direction
|
|
165
|
+
- responsive priority
|
|
166
|
+
|
|
167
|
+
Preferred inference order:
|
|
168
|
+
|
|
169
|
+
1. existing artifacts
|
|
170
|
+
2. project-local signals
|
|
171
|
+
3. explicit user answers
|
|
172
|
+
4. short clarification questions
|
|
173
|
+
|
|
174
|
+
## Installation
|
|
175
|
+
|
|
176
|
+
Install the package:
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
npm install -g @xenonbyte/da-vinci-workflow
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Install platform assets:
|
|
183
|
+
|
|
184
|
+
```bash
|
|
185
|
+
da-vinci install --platform codex,claude,gemini
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Useful commands:
|
|
189
|
+
|
|
190
|
+
```bash
|
|
191
|
+
da-vinci status
|
|
192
|
+
da-vinci validate-assets
|
|
193
|
+
da-vinci uninstall --platform codex,claude,gemini
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Installation targets:
|
|
197
|
+
|
|
198
|
+
- Codex prompts: `~/.codex/prompts/`
|
|
199
|
+
- Codex skill: `~/.codex/skills/da-vinci/`
|
|
200
|
+
- Claude commands: `~/.claude/commands/`
|
|
201
|
+
- Gemini commands: `~/.gemini/commands/`
|
|
202
|
+
|
|
203
|
+
## Platform usage
|
|
204
|
+
|
|
205
|
+
### Codex
|
|
206
|
+
|
|
207
|
+
Preferred:
|
|
208
|
+
|
|
209
|
+
```text
|
|
210
|
+
$da-vinci <request>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### Claude
|
|
214
|
+
|
|
215
|
+
Preferred:
|
|
216
|
+
|
|
217
|
+
```text
|
|
218
|
+
/da-vinci <request>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Gemini
|
|
222
|
+
|
|
223
|
+
Preferred:
|
|
224
|
+
|
|
225
|
+
```text
|
|
226
|
+
/da-vinci <request>
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
## Repo-local forward test
|
|
230
|
+
|
|
231
|
+
A complete repo-local forward test is available at:
|
|
232
|
+
|
|
233
|
+
- `examples/greenfield-spec-markupflow/`
|
|
234
|
+
|
|
235
|
+
That example runs a `greenfield-spec` scenario from:
|
|
236
|
+
|
|
237
|
+
1. design brief
|
|
238
|
+
2. proposal and spec
|
|
239
|
+
3. page map
|
|
240
|
+
4. Pencil source registration
|
|
241
|
+
5. Pencil page bindings
|
|
242
|
+
6. implementation tasks
|
|
243
|
+
7. static HTML delivery
|
|
244
|
+
8. verification
|
|
245
|
+
|
|
246
|
+
## Example requests
|
|
247
|
+
|
|
248
|
+
### Greenfield spec
|
|
249
|
+
|
|
250
|
+
```text
|
|
251
|
+
$da-vinci use greenfield-spec to break down a new desktop software project for annotated design delivery
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
### Brainstorm synthesis
|
|
255
|
+
|
|
256
|
+
```text
|
|
257
|
+
$da-vinci use greenfield-brainstorm to turn several product ideas into a page map, Pencil design plan, and implementation tasks
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
### Redesign from code
|
|
261
|
+
|
|
262
|
+
```text
|
|
263
|
+
$da-vinci use redesign-from-code to inventory the existing app, identify current pages, and generate a new Pencil-backed UI plan
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
### Feature change
|
|
267
|
+
|
|
268
|
+
```text
|
|
269
|
+
$da-vinci use feature-change to add a billing page, generate the relevant Pencil design delta, and create implementation tasks
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
## Workflow examples
|
|
273
|
+
|
|
274
|
+
See:
|
|
275
|
+
|
|
276
|
+
- `docs/workflow-examples.md`
|
|
277
|
+
|
|
278
|
+
## Repository layout
|
|
279
|
+
|
|
280
|
+
```text
|
|
281
|
+
da-vinci/
|
|
282
|
+
├── SKILL.md
|
|
283
|
+
├── agents/
|
|
284
|
+
│ └── openai.yaml
|
|
285
|
+
├── commands/
|
|
286
|
+
│ ├── claude/
|
|
287
|
+
│ ├── codex/
|
|
288
|
+
│ └── gemini/
|
|
289
|
+
├── references/
|
|
290
|
+
└── openspec/
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
## Current status
|
|
294
|
+
|
|
295
|
+
The repository currently contains:
|
|
296
|
+
|
|
297
|
+
- the Da Vinci skill
|
|
298
|
+
- three-platform command adapters
|
|
299
|
+
- workflow references
|
|
300
|
+
- OpenSpec planning artifacts for the skill itself
|
|
301
|
+
- workflow examples
|
|
302
|
+
|
|
303
|
+
Next natural work for the repository:
|
|
304
|
+
|
|
305
|
+
1. add install/distribution helpers
|
|
306
|
+
2. forward-test the workflow on a real project
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,377 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: da-vinci
|
|
3
|
+
description: Drive a software delivery workflow from requirement breakdown to Pencil design generation and finally code implementation. Use when turning product or page requirements into structured specs, page maps, Pencil `.pen` designs, design-backed implementation tasks, and frontend code that must follow both the requirements and the Pencil design data.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Da Vinci Workflow
|
|
7
|
+
|
|
8
|
+
Use Da Vinci as a requirement-to-design-to-code workflow for software delivery.
|
|
9
|
+
|
|
10
|
+
## Core Contract
|
|
11
|
+
|
|
12
|
+
Keep these rules fixed:
|
|
13
|
+
|
|
14
|
+
- Requirements decide behavior.
|
|
15
|
+
- Pencil decides presentation.
|
|
16
|
+
- Tasks decide implementation order.
|
|
17
|
+
- Code must follow both requirements and Pencil data.
|
|
18
|
+
- When requirements and Pencil drift apart, stop and update the source artifacts before continuing implementation.
|
|
19
|
+
|
|
20
|
+
## Execution Policy
|
|
21
|
+
|
|
22
|
+
Treat Da Vinci as `autonomous-by-default`.
|
|
23
|
+
|
|
24
|
+
That means:
|
|
25
|
+
|
|
26
|
+
- continue the workflow without pausing for approval at every stage
|
|
27
|
+
- treat checkpoints as internal execution guards, not approval steps
|
|
28
|
+
- stop only when a true blocking condition exists
|
|
29
|
+
|
|
30
|
+
Continue automatically through:
|
|
31
|
+
|
|
32
|
+
- mode selection
|
|
33
|
+
- requirement breakdown
|
|
34
|
+
- page mapping
|
|
35
|
+
- design input collection
|
|
36
|
+
- design source registration
|
|
37
|
+
- Pencil design work
|
|
38
|
+
- page-to-Pencil binding
|
|
39
|
+
- task generation
|
|
40
|
+
- implementation
|
|
41
|
+
- verification
|
|
42
|
+
|
|
43
|
+
Stop and ask only when:
|
|
44
|
+
|
|
45
|
+
- the user explicitly interrupts
|
|
46
|
+
- a missing input would materially change the result
|
|
47
|
+
- an external permission, authentication step, or protected environment is required
|
|
48
|
+
- source artifacts conflict badly enough that continuing would guess the truth
|
|
49
|
+
- a destructive action would change the project baseline significantly
|
|
50
|
+
|
|
51
|
+
## Invocation Model
|
|
52
|
+
|
|
53
|
+
Canonical workflow name is `da-vinci`.
|
|
54
|
+
|
|
55
|
+
- Codex preferred: `$da-vinci <request>`
|
|
56
|
+
- Claude and Gemini preferred: `/da-vinci <request>` when platform adapters exist
|
|
57
|
+
- Explicit action routes may exist later, but natural-language invocation is the default path
|
|
58
|
+
|
|
59
|
+
## V2 Mode Selection
|
|
60
|
+
|
|
61
|
+
Select one workflow mode before producing artifacts.
|
|
62
|
+
|
|
63
|
+
Supported modes:
|
|
64
|
+
|
|
65
|
+
1. `greenfield-spec`
|
|
66
|
+
- use when the project starts from a clear product or page requirement
|
|
67
|
+
|
|
68
|
+
2. `greenfield-brainstorm`
|
|
69
|
+
- use when the project starts from multiple rounds of raw ideas and needs synthesis first
|
|
70
|
+
|
|
71
|
+
3. `redesign-from-code`
|
|
72
|
+
- use when an existing product already has code and the UI must be redesigned globally or broadly
|
|
73
|
+
|
|
74
|
+
4. `feature-change`
|
|
75
|
+
- use when an existing product needs a scoped requirement change, page addition, or page update
|
|
76
|
+
|
|
77
|
+
If the user does not specify a mode:
|
|
78
|
+
|
|
79
|
+
- choose `greenfield-spec` for new projects with clear requirements
|
|
80
|
+
- choose `greenfield-brainstorm` for exploratory new product ideation
|
|
81
|
+
- choose `redesign-from-code` for broad UI replacement on existing code
|
|
82
|
+
- choose `feature-change` for incremental product work
|
|
83
|
+
|
|
84
|
+
## Design Input Collection
|
|
85
|
+
|
|
86
|
+
Before generating new Pencil designs for a greenfield project, collect or infer:
|
|
87
|
+
|
|
88
|
+
1. product form factor
|
|
89
|
+
- desktop software
|
|
90
|
+
- web app
|
|
91
|
+
- tablet
|
|
92
|
+
- mobile app
|
|
93
|
+
|
|
94
|
+
2. design preference
|
|
95
|
+
- visual tone
|
|
96
|
+
- density
|
|
97
|
+
- brand direction
|
|
98
|
+
- light or dark preference
|
|
99
|
+
|
|
100
|
+
3. design constraints
|
|
101
|
+
- existing brand rules
|
|
102
|
+
- existing design system
|
|
103
|
+
- responsive priority
|
|
104
|
+
- delivery constraints
|
|
105
|
+
|
|
106
|
+
Use this priority order:
|
|
107
|
+
|
|
108
|
+
1. existing workflow artifacts
|
|
109
|
+
2. project-local config or project codebase signals
|
|
110
|
+
3. explicit user answers
|
|
111
|
+
4. short clarification questions
|
|
112
|
+
|
|
113
|
+
Do not repeatedly ask for inputs that are already stable in the artifacts.
|
|
114
|
+
|
|
115
|
+
## Default Workflow
|
|
116
|
+
|
|
117
|
+
Run the workflow in this order:
|
|
118
|
+
|
|
119
|
+
1. Select the active mode
|
|
120
|
+
2. Build the correct source artifacts for that mode
|
|
121
|
+
3. Collect design inputs and register available design sources
|
|
122
|
+
4. Define or discover the project page map
|
|
123
|
+
5. Create or update Pencil designs for the required pages
|
|
124
|
+
6. Bind implementation pages to Pencil pages
|
|
125
|
+
7. Read Pencil design data through MCP
|
|
126
|
+
8. Generate implementation tasks
|
|
127
|
+
9. Implement code from requirements plus Pencil data
|
|
128
|
+
10. Verify behavior drift and design drift before closing the change
|
|
129
|
+
|
|
130
|
+
## Load References On Demand
|
|
131
|
+
|
|
132
|
+
Load only the reference that matches the current step:
|
|
133
|
+
|
|
134
|
+
- Read `references/modes.md` when selecting or explaining a workflow mode
|
|
135
|
+
- Read `references/artifact-templates.md` when creating or updating workflow artifacts
|
|
136
|
+
- Read `references/checkpoints.md` when running or reporting checkpoints
|
|
137
|
+
- Read `references/design-inputs.md` when collecting product form factor, style, and constraints
|
|
138
|
+
- Read `references/page-mapping.md` when defining project pages, Pencil pages, and route-to-screen bindings
|
|
139
|
+
- Read `references/pencil-design-to-code.md` when turning Pencil data into implementation
|
|
140
|
+
- Read `references/platform-adapters.md` when guiding users on Codex, Claude, or Gemini invocation patterns
|
|
141
|
+
|
|
142
|
+
## Default Artifacts
|
|
143
|
+
|
|
144
|
+
Use these artifacts unless the project defines a different schema:
|
|
145
|
+
|
|
146
|
+
1. `brainstorm.md`
|
|
147
|
+
2. `project-inventory.md`
|
|
148
|
+
3. `design-brief.md`
|
|
149
|
+
4. `design-registry.md`
|
|
150
|
+
5. `page-map.md`
|
|
151
|
+
6. `proposal.md`
|
|
152
|
+
7. `specs/<capability>/spec.md`
|
|
153
|
+
8. `design.md`
|
|
154
|
+
9. `pencil-design.md`
|
|
155
|
+
10. `pencil-bindings.md`
|
|
156
|
+
11. `tasks.md`
|
|
157
|
+
12. `verification.md`
|
|
158
|
+
|
|
159
|
+
Not every mode requires every artifact.
|
|
160
|
+
|
|
161
|
+
Mode expectations:
|
|
162
|
+
|
|
163
|
+
1. `proposal.md`
|
|
164
|
+
2. `specs/<capability>/spec.md`
|
|
165
|
+
3. `design.md`
|
|
166
|
+
4. `pencil-design.md`
|
|
167
|
+
5. `tasks.md`
|
|
168
|
+
6. `verification.md`
|
|
169
|
+
|
|
170
|
+
Optional artifacts:
|
|
171
|
+
|
|
172
|
+
- `security-review.md`
|
|
173
|
+
- `migration-plan.md`
|
|
174
|
+
- `rollout-checklist.md`
|
|
175
|
+
|
|
176
|
+
## What Each Artifact Means
|
|
177
|
+
|
|
178
|
+
- `brainstorm.md`: raw ideas, tensions, themes, and synthesis notes before specs are stable
|
|
179
|
+
- `project-inventory.md`: discovered routes, pages, modules, and current UI patterns from an existing codebase
|
|
180
|
+
- `design-brief.md`: form factor, visual direction, density, brand constraints, and UI preferences
|
|
181
|
+
- `design-registry.md`: project-level `.pen` file inventory and active design sources
|
|
182
|
+
- `page-map.md`: canonical page list, page responsibilities, route mapping, and page states
|
|
183
|
+
- `proposal.md`: scope, goal, non-goals, and success criteria
|
|
184
|
+
- `spec.md`: behavior, states, inputs, outputs, edge cases, and acceptance rules
|
|
185
|
+
- `design.md`: information architecture, page structure, interaction model, and component strategy
|
|
186
|
+
- `pencil-design.md`: `.pen` file path, page mapping, selected screens, screenshots, and design notes
|
|
187
|
+
- `pencil-bindings.md`: implementation route or component -> Pencil page or screen binding
|
|
188
|
+
- `tasks.md`: implementation order and deliverable task groups
|
|
189
|
+
- `verification.md`: requirement coverage, Pencil coverage, and drift findings
|
|
190
|
+
|
|
191
|
+
## Mode-Specific Artifact Flow
|
|
192
|
+
|
|
193
|
+
Use these minimum flows:
|
|
194
|
+
|
|
195
|
+
### `greenfield-spec`
|
|
196
|
+
|
|
197
|
+
`design-brief` -> `proposal` -> `specs` -> `page-map` -> `design-registry` -> `design` -> `pencil-design` -> `pencil-bindings` -> `tasks` -> `verification`
|
|
198
|
+
|
|
199
|
+
### `greenfield-brainstorm`
|
|
200
|
+
|
|
201
|
+
`brainstorm` -> `design-brief` -> `proposal` -> `specs` -> `page-map` -> `design-registry` -> `design` -> `pencil-design` -> `pencil-bindings` -> `tasks` -> `verification`
|
|
202
|
+
|
|
203
|
+
### `redesign-from-code`
|
|
204
|
+
|
|
205
|
+
`project-inventory` -> `design-registry` -> `proposal` -> `specs` -> `page-map` -> `design` -> `pencil-design` -> `pencil-bindings` -> `tasks` -> `verification`
|
|
206
|
+
|
|
207
|
+
### `feature-change`
|
|
208
|
+
|
|
209
|
+
`proposal` -> `specs` -> `page-map` for affected pages -> `design-registry` -> `design` -> `pencil-design` delta -> `pencil-bindings` delta -> `tasks` -> `verification`
|
|
210
|
+
|
|
211
|
+
## Requirement Breakdown Rules
|
|
212
|
+
|
|
213
|
+
Before designing or coding:
|
|
214
|
+
|
|
215
|
+
- Split the request into pages, flows, states, and data dependencies
|
|
216
|
+
- Identify which parts are visual, behavioral, and integration-related
|
|
217
|
+
- Separate must-have scope from later improvements
|
|
218
|
+
- Call out risky areas early: auth, permissions, uploads, payments, admin flows, secrets, migrations
|
|
219
|
+
|
|
220
|
+
If the active mode is `greenfield-brainstorm`:
|
|
221
|
+
|
|
222
|
+
- synthesize repeated ideas into stable product direction first
|
|
223
|
+
- identify contradictions before writing specs
|
|
224
|
+
- move unresolved ideas into open questions instead of treating them as requirements
|
|
225
|
+
|
|
226
|
+
If the active mode is `redesign-from-code`:
|
|
227
|
+
|
|
228
|
+
- inventory current routes, pages, and modules before redefining page structure
|
|
229
|
+
- distinguish preserved behavior from replaced presentation
|
|
230
|
+
|
|
231
|
+
## Design Source Rules
|
|
232
|
+
|
|
233
|
+
Use `design-registry.md` as the project-level inventory of `.pen` sources.
|
|
234
|
+
|
|
235
|
+
When a relevant mapping already exists:
|
|
236
|
+
|
|
237
|
+
- iterate on the mapped Pencil source
|
|
238
|
+
- do not create a new design baseline unless there is a reason
|
|
239
|
+
|
|
240
|
+
When page-to-Pencil bindings already exist:
|
|
241
|
+
|
|
242
|
+
- update the mapped Pencil page for the affected implementation page
|
|
243
|
+
|
|
244
|
+
When project mappings do not exist but existing code exists:
|
|
245
|
+
|
|
246
|
+
- treat the current project as the baseline source
|
|
247
|
+
- reconstruct `project-inventory.md`
|
|
248
|
+
- reconstruct `page-map.md`
|
|
249
|
+
- create or rebuild `design-registry.md`
|
|
250
|
+
- generate a new Pencil baseline only after the inventory is stable
|
|
251
|
+
|
|
252
|
+
When neither mappings nor usable design sources exist:
|
|
253
|
+
|
|
254
|
+
- state that the project is entering baseline reconstruction
|
|
255
|
+
- create a new Pencil baseline from the current local source of truth
|
|
256
|
+
|
|
257
|
+
If the request is too vague to design or implement safely, ask a short clarification question before generating artifacts.
|
|
258
|
+
|
|
259
|
+
## Pencil Design Rules
|
|
260
|
+
|
|
261
|
+
Use Pencil as a structured UI source, not as a static image source.
|
|
262
|
+
|
|
263
|
+
When creating or editing Pencil designs:
|
|
264
|
+
|
|
265
|
+
- Build the pages required by the current scope, not an abstract moodboard
|
|
266
|
+
- follow `page-map.md` as the canonical page list
|
|
267
|
+
- follow `design-brief.md` for form factor and visual direction when it exists
|
|
268
|
+
- Keep page names, section names, and labels aligned with the specs
|
|
269
|
+
- Make important states explicit when they change implementation: empty, loading, success, error, restricted, unavailable
|
|
270
|
+
- Prefer layout clarity and information hierarchy over decorative complexity
|
|
271
|
+
- After changes, inspect the result visually before treating it as implementation-ready
|
|
272
|
+
|
|
273
|
+
When multiple pages exist:
|
|
274
|
+
|
|
275
|
+
- keep one canonical Pencil page or screen per implementation page
|
|
276
|
+
- record the `.pen` file in `design-registry.md`
|
|
277
|
+
- record the mapping in `pencil-bindings.md`
|
|
278
|
+
|
|
279
|
+
## Pencil MCP Rules
|
|
280
|
+
|
|
281
|
+
When Pencil is available through MCP:
|
|
282
|
+
|
|
283
|
+
- Read the active `.pen` file and page structure before coding
|
|
284
|
+
- read the bound Pencil page for the current implementation page
|
|
285
|
+
- Use Pencil data to extract layout, text, hierarchy, panels, buttons, and content regions
|
|
286
|
+
- Use screenshots only as a secondary visual check
|
|
287
|
+
- Treat Pencil as the design data source for presentation, spacing, and layout grouping
|
|
288
|
+
|
|
289
|
+
When Pencil is not available:
|
|
290
|
+
|
|
291
|
+
- State that the design-backed path is unavailable
|
|
292
|
+
- Fall back to requirements-first implementation and note the missing design constraint
|
|
293
|
+
|
|
294
|
+
## Implementation Rules
|
|
295
|
+
|
|
296
|
+
When generating code:
|
|
297
|
+
|
|
298
|
+
- Use requirements to determine behavior, states, conditions, and semantics
|
|
299
|
+
- Use Pencil to determine layout, section ordering, visual grouping, copy placement, and styling intent
|
|
300
|
+
- use `pencil-bindings.md` to decide which Pencil page or screen maps to the page being implemented
|
|
301
|
+
- Do not invent interaction behavior from design alone
|
|
302
|
+
- Do not ignore Pencil structure when writing markup
|
|
303
|
+
- Keep code organized by page sections and reusable UI blocks when that mapping is clear
|
|
304
|
+
|
|
305
|
+
For frontend work:
|
|
306
|
+
|
|
307
|
+
- Prefer `HTML + Tailwind`, `React + Tailwind`, or the project's existing frontend stack
|
|
308
|
+
- Preserve the dominant page structure from Pencil
|
|
309
|
+
- Match spacing and hierarchy before polishing effects
|
|
310
|
+
|
|
311
|
+
## Checkpoints
|
|
312
|
+
|
|
313
|
+
Run these checkpoints:
|
|
314
|
+
|
|
315
|
+
1. `discovery checkpoint`
|
|
316
|
+
- after `brainstorm.md`, `project-inventory.md`, or `design-brief.md`
|
|
317
|
+
- verify the mode-specific starting material is stable enough to move into specs and design work
|
|
318
|
+
|
|
319
|
+
2. `spec checkpoint`
|
|
320
|
+
- after requirements and page scope are defined
|
|
321
|
+
- verify page scope, states, and behavior coverage
|
|
322
|
+
|
|
323
|
+
3. `design checkpoint`
|
|
324
|
+
- after Pencil design exists, before implementation tasks are locked
|
|
325
|
+
- verify the design covers the required pages, states, and key interactions
|
|
326
|
+
|
|
327
|
+
4. `mapping checkpoint`
|
|
328
|
+
- after `design-registry.md` and `pencil-bindings.md`
|
|
329
|
+
- verify implementation pages and Pencil pages are bound correctly
|
|
330
|
+
|
|
331
|
+
5. `task checkpoint`
|
|
332
|
+
- before implementation starts
|
|
333
|
+
- verify tasks cover both requirements and Pencil-backed UI work
|
|
334
|
+
|
|
335
|
+
6. `execution checkpoint`
|
|
336
|
+
- after each top-level task group during implementation
|
|
337
|
+
- verify code still matches requirements and Pencil structure
|
|
338
|
+
|
|
339
|
+
Checkpoint states:
|
|
340
|
+
|
|
341
|
+
- `PASS`
|
|
342
|
+
- `WARN`
|
|
343
|
+
- `BLOCK`
|
|
344
|
+
|
|
345
|
+
Checkpoint handling:
|
|
346
|
+
|
|
347
|
+
- `PASS`: continue automatically
|
|
348
|
+
- `WARN`: record the issue and continue automatically
|
|
349
|
+
- `BLOCK`: stop, report the blocker, and ask only if the blocker cannot be resolved from existing artifacts
|
|
350
|
+
|
|
351
|
+
## Drift Policy
|
|
352
|
+
|
|
353
|
+
Treat these as drift:
|
|
354
|
+
|
|
355
|
+
- Requirement changed but Pencil was not updated
|
|
356
|
+
- Page map changed but Pencil bindings were not updated
|
|
357
|
+
- Design registry changed but downstream bindings were not updated
|
|
358
|
+
- Pencil changed but implementation tasks were not updated
|
|
359
|
+
- Code behavior exceeds the approved scope
|
|
360
|
+
- Code layout or content structure diverges materially from Pencil without a recorded reason
|
|
361
|
+
|
|
362
|
+
When drift is found:
|
|
363
|
+
|
|
364
|
+
- Update the source artifact first
|
|
365
|
+
- Then continue implementation
|
|
366
|
+
|
|
367
|
+
## Output Format
|
|
368
|
+
|
|
369
|
+
After meaningful work, report:
|
|
370
|
+
|
|
371
|
+
1. changed files
|
|
372
|
+
2. active mode
|
|
373
|
+
3. current workflow state
|
|
374
|
+
4. next recommended step
|
|
375
|
+
5. blockers or drift
|
|
376
|
+
|
|
377
|
+
Keep updates concise and operational.
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Da Vinci"
|
|
3
|
+
short_description: "Requirement-to-design-to-code software workflow"
|
|
4
|
+
default_prompt: "Use $da-vinci to choose the right delivery mode and turn a software requirement into Pencil designs and implementation tasks."
|
|
5
|
+
|
|
6
|
+
policy:
|
|
7
|
+
allow_implicit_invocation: false
|