dreative 0.5.1 → 0.5.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 +49 -27
- package/dist/cli/audit.js +206 -0
- package/dist/cli/audit.test.js +79 -0
- package/dist/cli/docsCheck.js +163 -0
- package/dist/cli/docsCheck.test.js +8 -0
- package/dist/cli/index.js +45 -9
- package/dist/server/preview.js +73 -73
- package/dist/server/store.js +11 -0
- package/dist/shared/artifacts.js +220 -0
- package/dist/shared/design.js +45 -24
- package/dist/shared/ruleSystem.js +220 -0
- package/dist/shared/ruleSystem.test.js +262 -0
- package/dist/shared/skillSystem.js +173 -0
- package/dist/shared/skillSystem.test.js +110 -0
- package/dist/ui/assets/{index--vztc_MR.js → index-CKwmbx2j.js} +13 -13
- package/dist/ui/index.html +12 -12
- package/package.json +5 -3
- package/skill/dreative/DESIGN.md +144 -108
- package/skill/dreative/PLAN.md +285 -116
- package/skill/dreative/SKILL.md +237 -144
- package/skill/dreative/frameworks/nextjs.md +13 -0
- package/skill/dreative/frameworks/react-vite.md +12 -0
- package/skill/dreative/frameworks/styling.md +14 -0
- package/skill/dreative/frameworks/sveltekit.md +10 -0
- package/skill/dreative/frameworks/vue-nuxt.md +12 -0
- package/skill/dreative/recipes/3d-recipes.md +44 -0
- package/skill/dreative/recipes/cinematic-recipes.md +19 -0
- package/skill/dreative/recipes/immersive-recipes.md +18 -0
- package/skill/dreative/recipes/media-recipes.md +60 -0
- package/skill/dreative/recipes/motion-recipes.md +68 -0
- package/skill/dreative/references/ARTIFACTS.md +196 -0
- package/skill/dreative/references/REFLEX_FONTS.json +44 -0
- package/skill/dreative/references/RULES.json +186 -0
- package/skill/dreative/references/SKILL_CONTRACT.md +30 -0
- package/skill/dreative/references/TIERS.md +44 -0
- package/skill/dreative/schemas/plan.schema.json +309 -0
- package/skill/dreative/schemas/verify.schema.json +75 -0
- package/skill/dreative/skills/3d.md +94 -267
- package/skill/dreative/skills/cinematic.md +56 -232
- package/skill/dreative/skills/experimental.md +108 -95
- package/skill/dreative/skills/immersive.md +61 -223
- package/skill/dreative/skills/interaction.md +9 -1
- package/skill/dreative/skills/media.md +149 -564
- package/skill/dreative/skills/mobile.md +129 -117
- package/skill/dreative/skills/motion.md +126 -256
- package/skill/dreative/skills/refined.md +116 -102
- package/skill/dreative/skills/ux.md +155 -144
- package/dist/server/ai.js +0 -177
package/skill/dreative/PLAN.md
CHANGED
|
@@ -34,32 +34,31 @@ Enumerate what your environment can actually produce, and write the result down
|
|
|
34
34
|
Rules:
|
|
35
35
|
- Probe by LOOKING (list your tools, `which ffmpeg`, check MCP config), never by
|
|
36
36
|
assuming. A capability you didn't verify doesn't exist.
|
|
37
|
-
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
generated stills + ken-burns or a shader surface; **no image-gen → media
|
|
37
|
+
- Missing video, 3D, or separated source layers is not automatically a blocker.
|
|
38
|
+
First plan the strongest honest treatment available from generated/sourced
|
|
39
|
+
stills, local image processing, transparent cutouts, SVG, CSS, Canvas,
|
|
40
|
+
generated keyframes, or existing project assets. Ask for a tool or source
|
|
41
|
+
asset only when the requested result cannot be approximated convincingly;
|
|
42
|
+
present the concrete best-effort fallback in that question. Never install a
|
|
43
|
+
tool silently and never leave an "advanced animation later" placeholder.
|
|
44
|
+
- The probe result changes the blueprint: no video-gen → stills become layered
|
|
45
|
+
scenes, masks, related keyframes, frame sequences, tiles/fragments, Canvas
|
|
46
|
+
samples, or shader textures as the concept warrants; **no image-gen → media
|
|
48
47
|
cells become `source-image` (DESIGN.md §7's priority: verified stock/CDN
|
|
49
48
|
photography), every planned cutout prop becomes a sourced-and-matted photo
|
|
50
49
|
or is cut, and any 3D of an organic real-world subject is re-planned as a
|
|
51
|
-
photo billboard,
|
|
50
|
+
photo billboard, a brand-native abstract instrument, or cut (3d.md §1–2 — coded
|
|
52
51
|
organic geometry never becomes the fallback)**; no browser tools → the
|
|
53
52
|
verification protocol's manual fallback (SKILL.md) must be declared up front.
|
|
54
53
|
Missing tools change WHERE assets come from, never whether media/3D rules
|
|
55
|
-
apply — sourced media carries the same treatment obligations (media.md §
|
|
54
|
+
apply — sourced media carries the same treatment obligations (media.md §1–3).
|
|
56
55
|
|
|
57
56
|
## 2. The blueprint (section-by-section, media-first)
|
|
58
57
|
|
|
59
|
-
Draft the page as a compact table BEFORE asking anything — the
|
|
58
|
+
Draft the page as a compact table BEFORE asking anything — the decision phase
|
|
60
59
|
presents choices about a concrete plan, not abstractions. Per section:
|
|
61
60
|
|
|
62
|
-
| section | layout family | media
|
|
61
|
+
| section | layout family | media + preparation | motion class/treatment | interaction | intensity | fallback |
|
|
63
62
|
|
|
64
63
|
- **media plan** — one of: `generate-image` (subject + exact aspect + palette/
|
|
65
64
|
light-temperature prompt notes), `generate-video` (loop subject, 5-10s,
|
|
@@ -67,39 +66,52 @@ presents choices about a concrete plan, not abstractions. Per section:
|
|
|
67
66
|
(exists in repo / user must supply — name it), `none`. Media enters through
|
|
68
67
|
the motion system per `skills/media.md` — name the treatment (curtain reveal,
|
|
69
68
|
mask-shaped, hover-woken, media-plane distortion…), never "add an image".
|
|
70
|
-
At dial ≥ 7 the
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
At dial ≥ 7 the proven default is one meaningful media set-piece and the
|
|
70
|
+
blueprint names which section carries it. The outcome is a memorable moment
|
|
71
|
+
where media itself becomes the visitor-controlled spectacle, not a specific
|
|
72
|
+
catalog effect. A different solution uses a registered planning-time
|
|
73
|
+
substitution with observable success criteria and evidence IDs.
|
|
74
|
+
When a concept-led set-piece uses a depth dive, its
|
|
75
75
|
`generate-image` cell must plan a DEPTH-CAPABLE composition (a corridor,
|
|
76
76
|
room, landscape, machinery receding — something a camera can enter) and
|
|
77
77
|
the companion assets in the same cell: the depth map and/or the separated
|
|
78
78
|
foreground/background plates, generated in the same prompt world.
|
|
79
|
-
The set-piece is chosen via
|
|
80
|
-
media.md's exploration protocol: invent three brand-native candidates not
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
79
|
+
The set-piece is chosen via
|
|
80
|
+
media.md's exploration protocol: invent three brand-native candidates not
|
|
81
|
+
sourced from recipes, record them + the pick in `conceptExploration`, then
|
|
82
|
+
load recipe references only for feasibility/implementation/fallback and log
|
|
83
|
+
them in `recipeAccess`. A media plan assembled from listed effects before
|
|
84
|
+
original exploration is invalid. **Every media-plane / pixel-class cell
|
|
85
|
+
names WHICH image asset the effect consumes as its texture/source** — a
|
|
86
|
+
"shader plane" cell with no named image, or a plane carrying its own
|
|
87
|
+
separate texture (steel/noise/gradient) layered over the section's
|
|
88
|
+
photography, is an invalid cell (media.md §2's treatment-identity rule: the
|
|
89
|
+
treatment must transform the image's own pixels, aligned to its rect —
|
|
90
|
+
never a decorated rectangle floating over a static `<img>`).
|
|
91
|
+
**Custom 3D in a media cell must name
|
|
84
92
|
its asset source in the blueprint** — a GLB path, a generated/sourced
|
|
85
93
|
texture (the actual prompt or file), or the billboard cutout it will ride
|
|
86
94
|
on. "Custom 3D bean/bottle/plant geometry" with no named source is an
|
|
87
|
-
invalid cell: primitives can't produce an organic subject (3d.md §
|
|
95
|
+
invalid cell: primitives can't produce an organic subject (3d.md §1), so
|
|
88
96
|
re-plan it as rung 2 (photo billboard) or an abstract SUPPORTING form
|
|
89
|
-
(3d.md §
|
|
97
|
+
(3d.md §2 — never a generic promoted signature object) at plan time —
|
|
90
98
|
don't let the build stage discover this. The user picking "custom 3D" in
|
|
91
99
|
the media question grants the *medium*, not an exemption from the ladder.
|
|
92
|
-
Every 3D prop cell also names its BERTH (3d.md §
|
|
100
|
+
Every 3D prop cell also names its BERTH (3d.md §3): which lane/stage of
|
|
93
101
|
the section it occupies and what the layout does to make room — a prop
|
|
94
102
|
planned "over the hero image" or with no berth is an invalid cell.
|
|
95
|
-
At award
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
+
At the `award` tier the outcome gate is one unmistakable spatial, media,
|
|
104
|
+
typographic, or material signature that shapes the journey. If the concept
|
|
105
|
+
calls for a recognizable physical subject, use a real GLB or photoreal cutout
|
|
106
|
+
with a berth and source. Typography, layered photography, data, SVG/Canvas,
|
|
107
|
+
or a scene instrument may be the stronger direct choice; no substitution is
|
|
108
|
+
needed merely because 3D is absent. Generic orbs/blobs/toruses remain invalid.
|
|
109
|
+
At expressive/award, the media column records whether each hero/key image
|
|
110
|
+
stays flat or becomes motion-ready through cutouts, depth layers, masks,
|
|
111
|
+
fragments, maps, alternate states, a frame sequence, or a Canvas/WebGL
|
|
112
|
+
texture. Transform only where it strengthens the concept; a still may remain
|
|
113
|
+
flat as an intentional rest. The default in `media.keyAssetTreatment` is a
|
|
114
|
+
coherent asset-preparation decision, not a pixel-effect quota.
|
|
103
115
|
- **Travel map (mandatory when any element persists across sections).** If
|
|
104
116
|
the blueprint contains a fixed canvas object, a recurring signature, or any
|
|
105
117
|
scroll-morphing prop that lives through more than one section, add a travel
|
|
@@ -108,50 +120,107 @@ presents choices about a concrete plan, not abstractions. Per section:
|
|
|
108
120
|
it never sits over text or controls (DESIGN.md §15). No berth fits ⇒ the
|
|
109
121
|
object is scripted HIDDEN for that section. A persistent object without a
|
|
110
122
|
travel map is an unplanned collision that verify will find later — plan it
|
|
111
|
-
now.
|
|
112
|
-
|
|
113
|
-
- **
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
are re-counted at verify.
|
|
124
|
-
- **motion treatment** — from motion.md/immersive.md/cinematic.md vocabulary,
|
|
125
|
-
with the dial-appropriate ambition. **motion.md §9's inventory is a hard
|
|
126
|
-
plan gate, not a target:** at expressive/award-site ambition the blueprint
|
|
127
|
-
must enumerate every §9 item for its dial — which element carries it, what
|
|
128
|
-
triggers it — or explicitly name the item as cut with a reason. A plan that
|
|
129
|
-
neither covers nor justifies a §9 item is incomplete; rework it before
|
|
130
|
-
presenting, don't ship the gap to the build.
|
|
123
|
+
now. When the set-piece claims transformation, its pixels, layers, form, or
|
|
124
|
+
role must visibly change; placement choreography alone does not qualify.
|
|
125
|
+
- **Diversity or development (dial ≥ 7 / expressive+).** Choose and record one
|
|
126
|
+
path in `creativeStrategy`. Diversity uses only the mechanisms and drivers the
|
|
127
|
+
concept needs, tied together by a shared language. Development evolves one
|
|
128
|
+
coherent signature through materially different roles with quieter support.
|
|
129
|
+
The same reveal repeated with different values is neither path. Do not add
|
|
130
|
+
unrelated mechanisms to satisfy a count.
|
|
131
|
+
- **motion treatment** — from motion.md/immersive.md/cinematic.md vocabulary,
|
|
132
|
+
with dial-appropriate ambition. At `expressive`/`award`, complete every
|
|
133
|
+
`motionTreatment` field below and name the element/driver for each planned
|
|
134
|
+
moment. A generic or incomplete treatment is reworked before presentation.
|
|
131
135
|
- **intensity (the pacing map)** — 1–10 per section: how loud this section is
|
|
132
136
|
(motion + media + visual weight combined). The page must read as a CURVE, not
|
|
133
137
|
a flat line: uniform intensity fails in both directions (all loud = exhausting,
|
|
134
|
-
all quiet = the set-piece feels bolted on). Place deliberate rests
|
|
135
|
-
|
|
136
|
-
|
|
138
|
+
all quiet = the set-piece feels bolted on). Place deliberate rests around
|
|
139
|
+
hero moments where the content permits so they land; supporting sections
|
|
140
|
+
should not compete with them. A blueprint whose
|
|
137
141
|
intensity column is all the same number is incomplete — rework the pacing
|
|
138
142
|
before presenting.
|
|
139
|
-
- **fallback** — for every ambitious cell (WebGL, sim, scrubbed sequence,
|
|
140
|
-
generated video), the concrete boring version that ships if the fancy one
|
|
141
|
-
fails runtime verification. A plan cell without a fallback is not ambitious,
|
|
142
|
-
it's fragile.
|
|
143
|
+
- **fallback** — for every ambitious cell (WebGL, sim, scrubbed sequence,
|
|
144
|
+
generated video), the concrete boring version that ships if the fancy one
|
|
145
|
+
fails runtime verification. A plan cell without a fallback is not ambitious,
|
|
146
|
+
it's fragile.
|
|
147
|
+
|
|
148
|
+
### Motion treatment and complexity budget
|
|
149
|
+
|
|
150
|
+
At expressive/award, write a coherent scene sequence before implementation. For
|
|
151
|
+
every major section record in `motionTreatment`:
|
|
152
|
+
|
|
153
|
+
- static composition and motion class (`none`, `decorative`, `structural`, or
|
|
154
|
+
`transformational`);
|
|
155
|
+
- starting and ending visual states;
|
|
156
|
+
- what changes, persists, pins, enters, transforms, combines, fragments, or exits;
|
|
157
|
+
- the handoff into the next composition;
|
|
158
|
+
- narrative/emotional purpose;
|
|
159
|
+
- rendering mechanism;
|
|
160
|
+
- mobile translation and reduced-motion state.
|
|
161
|
+
|
|
162
|
+
Decorative motion introduces or responds. Structural motion controls hierarchy,
|
|
163
|
+
pacing, pinning, and composition. Transformational motion changes form or turns
|
|
164
|
+
one composition into the next. Opacity, translate, scale, and light parallax are
|
|
165
|
+
not sufficient evidence of structural or transformational motion.
|
|
166
|
+
|
|
167
|
+
Record `motionComplexityBudget`: normally two or three hero moments (one is valid
|
|
168
|
+
for a short page), calm sections around them, shared motion language, target-
|
|
169
|
+
device limits, and progressive enhancement. Spend complexity where the story
|
|
170
|
+
changes state; do not distribute medium-complexity effects evenly.
|
|
171
|
+
|
|
172
|
+
Choose the simplest mechanism capable of producing the intended transformation
|
|
173
|
+
convincingly. Simplicity means implementation suitability, not visual blandness.
|
|
174
|
+
Choose deliberately among CSS, Motion, GSAP/ScrollTrigger, SVG masks/filters,
|
|
175
|
+
`clip-path`, DOM fragments, Canvas 2D, WebGL/shaders, image sequences, video,
|
|
176
|
+
Lottie/vector animation, and 3D. Neither basic transforms nor WebGL/3D/pixels are
|
|
177
|
+
an unexamined default.
|
|
178
|
+
|
|
179
|
+
Before approving the plan, record `antiDefaultReview` answers: are images mostly
|
|
180
|
+
fading/scaling/sliding; are sections independent reveals; where is the major
|
|
181
|
+
composition handoff; how does motion change visual state; could this system fit
|
|
182
|
+
an unrelated site; what is memorable; and how does movement express the concept?
|
|
183
|
+
If the result is generic at expressive/award, revise the scene plan now.
|
|
143
184
|
|
|
144
185
|
Plus four page-level lines: register + design read (DESIGN.md §2), signature
|
|
145
|
-
element, animation stack (ONE system: GSAP+Lenis or motion/react — motion.md §
|
|
186
|
+
element, animation stack (ONE system: GSAP+Lenis or motion/react — motion.md §2),
|
|
146
187
|
and the mobile strategy per ambitious effect (DESIGN.md §13).
|
|
147
188
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
189
|
+
**Signature-element plan gate.** The signature line is checked HERE, not
|
|
190
|
+
discovered at build time: if the signature is a visual OBJECT, it must be a
|
|
191
|
+
subject a stranger names correctly (3d.md §1–2's subject test). An abstract
|
|
192
|
+
crude coded organic form is a hard-gate failure. Generic spheres/orbs/rings/
|
|
193
|
+
blobs/toruses with no brand-native function remain invalid signatures. The
|
|
194
|
+
award work chooses the medium that makes the signature most legible and
|
|
195
|
+
concept-specific. A real GLB or rung-2 transparent photoreal cutout is preferred
|
|
196
|
+
when the signature is a recognizable physical subject; spatial typography,
|
|
197
|
+
layered photography, data structure, or an interactive instrument can be the
|
|
198
|
+
direct plan when the concept supports it. **Coded custom 3D is
|
|
199
|
+
capability-gated at the probe (§1):** offer/plan it only when the probe
|
|
200
|
+
verified an actual quality path — a real GLB in reach, image-gen for
|
|
201
|
+
albedo/label textures, an HDRI/environment source. No verified texture path
|
|
202
|
+
⇒ the `custom 3D` option is presented as "3D-look props (photoreal cutouts
|
|
203
|
+
sold with depth)" and every 3D cell is planned as a rung-2 billboard; coded
|
|
204
|
+
geometry without a texture path is never planned "to be figured out at
|
|
205
|
+
build".
|
|
206
|
+
|
|
207
|
+
**Previous-run divergence (reruns over the same project).** If
|
|
208
|
+
`.dreative/plan.md` (or verify.md) from an earlier run already exists in this
|
|
209
|
+
project and the user asked for a NEW take (rather than iterating the shipped
|
|
210
|
+
one), read the old plan first and diverge on at least: signature family,
|
|
211
|
+
set-piece family, hero layout family, and palette strategy. Reusing the old
|
|
212
|
+
run's choices because they're in context is the same reflex the entropy draw
|
|
213
|
+
exists to break — a rerun that a user would describe as "the same site again"
|
|
214
|
+
is a failed rerun. Record in the new plan file which axes diverged from the
|
|
215
|
+
previous run.
|
|
216
|
+
|
|
217
|
+
## 3. The decision phase
|
|
218
|
+
|
|
219
|
+
Run one short decision phase containing several sequential single-question
|
|
220
|
+
calls. Use the environment's structured question tool when available; otherwise
|
|
221
|
+
ask in chat. Never dump the whole pool in one message: each answer can change
|
|
222
|
+
what comes next (for example, a cinematic treatment makes the media question
|
|
223
|
+
matter more, while restyle depth can remove the mockup question).
|
|
155
224
|
|
|
156
225
|
**Skip what the prompt already answers.** Before asking anything, walk the pool
|
|
157
226
|
below against the user's prompt + attachments: a question whose answer is
|
|
@@ -162,6 +231,33 @@ the ambiguity ("you said animated — full scroll choreography, or calm
|
|
|
162
231
|
micro-interactions?"). Restate what you inferred from the prompt in the plan
|
|
163
232
|
file so silently-skipped questions are still auditable.
|
|
164
233
|
|
|
234
|
+
**Answers come only from the user, through the tool.** Never infer, assume,
|
|
235
|
+
or self-supply an answer to a question you posed — an unanswered question
|
|
236
|
+
blocks; a fabricated answer is a corrupted plan. If the user's reply to ANY
|
|
237
|
+
question is itself a question, a request to re-see options, or free text that
|
|
238
|
+
doesn't answer what was asked ("wait, what were the vibe options?"), that
|
|
239
|
+
question is NOT answered: respond to what they asked first (re-present the
|
|
240
|
+
options, clarify), then re-ask the original question as its own call. A
|
|
241
|
+
question consumed by a side-exchange and never re-asked is a lost decision —
|
|
242
|
+
track which pool items actually have answers, not which were merely posed.
|
|
243
|
+
Free text volunteered mid-round (a new feature, a constraint) is captured in
|
|
244
|
+
the plan file AND acknowledged in the next message, but doesn't substitute
|
|
245
|
+
for pending questions.
|
|
246
|
+
|
|
247
|
+
**Skip-honesty (the under-asking bug).** "Skip what the prompt already
|
|
248
|
+
answers" has a strict test: a question may be skipped ONLY when the prompt
|
|
249
|
+
LITERALLY contains its answer — and the plan file must QUOTE the prompt words
|
|
250
|
+
that answer it next to the skip. "I can infer a reasonable choice" is not a
|
|
251
|
+
skip license; silence in the prompt means ASK. In particular, **treatments
|
|
252
|
+
(item 2), media/asset types (item 3), and references (item 5) are never
|
|
253
|
+
skipped on inference at expressive/award ambition** — these are the three
|
|
254
|
+
questions that most change the build, and a round that jumps from vibe →
|
|
255
|
+
ambition → mockups → remarks without them delivered a design the user never
|
|
256
|
+
chose. Questions that are genuinely N/A (depth on a from-scratch build, scope
|
|
257
|
+
on a single page) are the only inference-skips allowed. If the asked count
|
|
258
|
+
lands under 4 on a non-trivial build, re-check the pool — you almost
|
|
259
|
+
certainly over-skipped.
|
|
260
|
+
|
|
165
261
|
Order most-decision-changing first, keep the total short (typically 3–5 asked,
|
|
166
262
|
hard cap 7). Structured tools always offer an "Other" free-text option, so
|
|
167
263
|
every question doubles as a remarks channel — and the last question asked
|
|
@@ -169,7 +265,7 @@ should explicitly invite extra direction.
|
|
|
169
265
|
|
|
170
266
|
1. **Depth** (redesigns of existing code only) — the §11 transformation-depth
|
|
171
267
|
ladder: restyle / re-layout / restructure / reimagine.
|
|
172
|
-
2. **Treatments** (multi-select — THE canonical skill-picker list). List every
|
|
268
|
+
2. **Treatments** (multi-select — THE canonical skill-picker list). List every
|
|
173
269
|
option **individually**, never pre-bundled into a combo choice (a
|
|
174
270
|
"refined+motion+interaction+ux+mobile" single option is a bug — the user
|
|
175
271
|
can't select a subset of a bundle). Mark the ones the request obviously
|
|
@@ -190,16 +286,11 @@ should explicitly invite extra direction.
|
|
|
190
286
|
- **cinematic** — "dark, moody, movie-like atmosphere: glow, particles, fluid surfaces (think film title sequence)"
|
|
191
287
|
- **refined** — "quiet luxury: lots of space, beautiful photography, very little movement — Apple/fashion-brand calm"
|
|
192
288
|
- **media** — "AI-generated images/video made for this page and woven into the motion (hero film loop, images that come alive)"
|
|
193
|
-
- **ux** — "everything actually works: menus, forms, cart, keyboard — pretty AND functional"
|
|
194
|
-
- **mobile** — first-class phone experience:
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
for every build via `ux` + DESIGN.md §13's required mobile strategy line,
|
|
199
|
-
so don't mark this "(Recommended)" just because a build is ambitious.
|
|
200
|
-
Recommend it only when the user asks for it, or the brief signals mobile
|
|
201
|
-
is a primary surface (e.g. explicitly mobile-first, or a mobile-heavy
|
|
202
|
-
audience/product).
|
|
289
|
+
- **ux** — "everything actually works: menus, forms, cart, keyboard — pretty AND functional". This is always included; show it as locked/included rather than optional.
|
|
290
|
+
- **mobile** — first-class phone experience: thumb-ergonomic layout and
|
|
291
|
+
effects re-authored for touch, not merely scaled down. This is always
|
|
292
|
+
included at baseline; mark it as an emphasized treatment only when mobile
|
|
293
|
+
is the primary surface or the user explicitly asks for a mobile-first take.
|
|
203
294
|
- **experimental** — user-facing phrasing: "go weird: images that tear/
|
|
204
295
|
dissolve/reassemble as you scroll, the camera diving into scenes, one
|
|
205
296
|
never-seen-before idea per section". Internally this is the
|
|
@@ -214,9 +305,18 @@ should explicitly invite extra direction.
|
|
|
214
305
|
"never seen before", or award-tier + immersive/cinematic/3d stacked
|
|
215
306
|
together — it's the difference between effects *placed on* the page and
|
|
216
307
|
the page *behaving* like the reference sites when you interact with it.
|
|
217
|
-
Plus "none —
|
|
308
|
+
Plus "none — no optional treatments" (`ux` and `mobile` still apply). Skip only when the user already
|
|
218
309
|
named the treatments or the request is trivially a restyle; read each
|
|
219
|
-
chosen `skills/<name>.md` before designing.
|
|
310
|
+
chosen `skills/<name>.md` before designing.
|
|
311
|
+
|
|
312
|
+
**For multi-page work, follow selection with one page-assignment matrix.**
|
|
313
|
+
Rows are pages and columns are the user-selected optional treatments. Let the
|
|
314
|
+
user pin any treatment to specific pages. For unpinned selections, propose a
|
|
315
|
+
distribution based on page purpose and intensity, then ask for one approval
|
|
316
|
+
of the complete matrix. User pins are authoritative; routing cannot move
|
|
317
|
+
them or activate unselected optional skills. `ux` and baseline `mobile` apply
|
|
318
|
+
to every page. Selecting all means every skill is used somewhere in the
|
|
319
|
+
overall plan—not that every page receives every effect.
|
|
220
320
|
|
|
221
321
|
**Propose extra, request-specific skills beyond this fixed list** when the
|
|
222
322
|
brief hints at something the 10 named treatments don't cover well (sound
|
|
@@ -241,18 +341,33 @@ should explicitly invite extra direction.
|
|
|
241
341
|
tokens/time, so "images only" or "placeholders" is a legitimate budget
|
|
242
342
|
choice, not a downgrade. If a needed tool is missing, this is where the
|
|
243
343
|
install offer goes ("I can add <X> MCP for video generation — ok?").
|
|
344
|
+
**Set the iteration expectation honestly:** when the user picks `custom
|
|
345
|
+
3D`, `custom props`, or (later) the `award` tier, say plainly — in the
|
|
346
|
+
question's description or the plan recap — that complex 3D motion and prop
|
|
347
|
+
choreography rarely land perfectly in one pass: the first build ships a
|
|
348
|
+
working version (planned fallbacks where an effect fails verification),
|
|
349
|
+
and 1–2 follow-up prompts to tune specific moments are normal and
|
|
350
|
+
expected. This is a disclosure, not a discouragement; it prevents
|
|
351
|
+
"the plan promised more than the page shows" disappointment, and it never
|
|
352
|
+
licenses shipping less than the plan — the verify gates still apply in
|
|
353
|
+
full on pass one.
|
|
244
354
|
4. **Ambition tier** — present each tier with a plain description, a
|
|
245
355
|
best-fit use case, AND its honest tradeoff (a user choosing blind between
|
|
246
356
|
"cool-sounding" labels is the failure this wording prevents):
|
|
247
|
-
- **
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
357
|
+
- **Solid (`solid`)** — polished, complete, responsive, and light on custom
|
|
358
|
+
effects. *Best for:* dashboards, apps,
|
|
359
|
+
content-heavy sites, corporate audiences, tight deadlines. *Tradeoff:*
|
|
360
|
+
looks professional, won't turn heads.
|
|
361
|
+
- **Premium (`premium`)** — a strong design read, deliberate media, and one
|
|
362
|
+
signature detail with restrained motion. *Best for:* business, commerce,
|
|
363
|
+
and marketing work that should feel distinctive without becoming an
|
|
364
|
+
experience site. *Tradeoff:* more craft and media work than solid.
|
|
365
|
+
- **Expressive (`expressive`)** — rich scroll motion, 3D accents, everything still
|
|
366
|
+
instantly usable. *Best for:* most product, e-commerce, and marketing
|
|
367
|
+
sites — the show/usability sweet spot and the default recommendation.
|
|
368
|
+
*Tradeoff:* heavier than premium, but visitors never fight the page.
|
|
369
|
+
- **Award (`award`)** — the page becomes an experience: immersive 3D, cinematic
|
|
370
|
+
pacing, experimental transitions (dial 9-10). *Best for:* portfolios,
|
|
256
371
|
launches, brand showcases, agency work — anywhere wow IS the goal.
|
|
257
372
|
*Tradeoff:* heaviest build, longest load, and deliberately unconventional —
|
|
258
373
|
visitors explore rather than skim, so it can frustrate someone who just
|
|
@@ -261,11 +376,11 @@ should explicitly invite extra direction.
|
|
|
261
376
|
pass — state that cost too.
|
|
262
377
|
**Which option gets "(Recommended)" is computed, and the default bias is
|
|
263
378
|
UP:** when the brief carries no strong signal either way, recommend
|
|
264
|
-
**expressive** — unnamed ambition becomes beige (DESIGN.md §2), and this
|
|
265
|
-
skill exists for drastic change. Recommend **
|
|
379
|
+
**expressive** — unnamed ambition becomes beige (DESIGN.md §2), and this
|
|
380
|
+
skill exists for drastic change. Recommend **solid** only on concrete
|
|
266
381
|
counter-signals: explicit "minimal / corporate / clean / subtle" language,
|
|
267
382
|
a product/app/dashboard surface rather than a marketing page, or a hard
|
|
268
|
-
deadline constraint (item 7). Recommending
|
|
383
|
+
deadline constraint (item 7). Recommending solid to a signal-free brief is
|
|
269
384
|
a bug, same class as the item-8 mockup inversion.
|
|
270
385
|
5. **References (ask unless the prompt already supplied them)** — "Do you have
|
|
271
386
|
any reference — an image/screenshot, a website you love, or a video of a
|
|
@@ -300,17 +415,17 @@ should explicitly invite extra direction.
|
|
|
300
415
|
assume "all" just because the brief said "redesign the site" — confirm it.
|
|
301
416
|
Also capture what's in this pass vs later, and any hard constraints
|
|
302
417
|
(existing brand tokens to keep, CMS/content that must survive, deadline
|
|
303
|
-
implying the
|
|
418
|
+
implying the solid tier).
|
|
304
419
|
8. **Mockups first?** — offer to build 1:1 mockups BEFORE the full build:
|
|
305
420
|
"Mockup the key pages first" / "Straight to build". **Which one is marked
|
|
306
421
|
"(Recommended)" is NOT static — compute it from the depth + ambition
|
|
307
|
-
answers already given:** reimagine or restructure depth, OR award
|
|
422
|
+
answers already given:** reimagine or restructure depth, OR `award`
|
|
308
423
|
ambition, mean this is among the biggest changes the tool can make, so
|
|
309
424
|
**"Mockup first" is the recommended option.** Recommend "Straight to
|
|
310
|
-
build" only when depth is restyle/re-layout AND ambition is
|
|
311
|
-
expressive. Getting this backwards (recommending straight-to-build on a
|
|
312
|
-
reimagine + award
|
|
313
|
-
is restructure/reimagine OR ambition is award
|
|
425
|
+
build" only when depth is restyle/re-layout AND ambition is solid/premium/
|
|
426
|
+
expressive. Getting this backwards (recommending straight-to-build on a
|
|
427
|
+
reimagine + award combo) is a bug, not a stylistic choice. When depth
|
|
428
|
+
is restructure/reimagine OR ambition is `award`, also offer a third
|
|
314
429
|
option: **"two divergent mockups"** — the two strongest concepts from the
|
|
315
430
|
explore pass (DESIGN.md §2) each built as a mockup, user picks. State the
|
|
316
431
|
honest cost (a second mockup is real tokens/time); it's an offer, never
|
|
@@ -337,7 +452,7 @@ defaults.
|
|
|
337
452
|
|
|
338
453
|
### Calibration references (what the top tiers actually look like)
|
|
339
454
|
|
|
340
|
-
When the user picks award
|
|
455
|
+
When the user picks the `award` tier or 3d/immersive/cinematic treatments,
|
|
341
456
|
these are the bar (fetch and study whichever is closest before designing):
|
|
342
457
|
|
|
343
458
|
- https://www.experiencethebestyou.com/en-GB/ — coordinated scroll choreography
|
|
@@ -353,7 +468,7 @@ these are the bar (fetch and study whichever is closest before designing):
|
|
|
353
468
|
`TextureLoader` — one model, N palettes. Scroll drives it with plain
|
|
354
469
|
`ScrollTrigger.create`; backgrounds are pre-rendered per-flavor video
|
|
355
470
|
loops, not live sims. Lesson: photoreal product 3D = real GLB + real label
|
|
356
|
-
texture + HDRI environment — never coded geometry (3d.md §
|
|
471
|
+
texture + HDRI environment — never crude organic coded geometry (3d.md §1) — and the
|
|
357
472
|
cheap parts (backgrounds) are pre-rendered video.
|
|
358
473
|
- https://www.cinetica.studio/ — the "composed chaos" register (stack
|
|
359
474
|
verified): Webflow + the FULL GSAP plugin suite (ScrollTrigger, SplitText,
|
|
@@ -370,7 +485,7 @@ these are the bar (fetch and study whichever is closest before designing):
|
|
|
370
485
|
darkness.
|
|
371
486
|
|
|
372
487
|
These teardowns were verified July 2026 and will age — sites redesign and
|
|
373
|
-
registers move on. At award
|
|
488
|
+
registers move on. At the `award` tier, when browser tools exist, spend ONE
|
|
374
489
|
fetch on a current source (Awwwards SOTD or godly.website) to confirm the
|
|
375
490
|
register you're chasing is still the frontier, and note in plan.md what you
|
|
376
491
|
saw. The stack LESSONS above outlive the sites themselves; the aesthetics
|
|
@@ -381,12 +496,34 @@ generated wallpapers behind text. If the environment has 3D-capable tooling and
|
|
|
381
496
|
the user opted in, build real 3D material (geometry, materials, lighting,
|
|
382
497
|
shader surfaces per `skills/3d.md`); reserve generated images/video for what
|
|
383
498
|
3D can't do. This tier only happens when the user explicitly chose it in the
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
## 4. Write the plan, then execute it
|
|
387
|
-
|
|
388
|
-
Persist the approved plan to `.dreative/plan.
|
|
389
|
-
|
|
499
|
+
decision phase — never impose it.
|
|
500
|
+
|
|
501
|
+
## 4. Write the plan, then execute it
|
|
502
|
+
|
|
503
|
+
Persist the approved plan first to `.dreative/plan.json` using
|
|
504
|
+
`references/ARTIFACTS.md` and `schemas/plan.schema.json`; this is the delivery
|
|
505
|
+
contract consumed by `dreative audit`. Render the same decisions as a readable
|
|
506
|
+
`.dreative/plan.md` for the user and session re-entry. Keep section and asset
|
|
507
|
+
statuses synchronized in JSON as the build progresses. Set `doctrineVersion: 2`,
|
|
508
|
+
record `implementationStartedAt` immediately before code changes, and ensure all
|
|
509
|
+
rule exceptions predate it. **The first time this run writes into
|
|
510
|
+
`.dreative/`, also write `.dreative/README.md`** with exactly this content
|
|
511
|
+
(it stops other agents/CLIs from mistaking run artifacts for the skill —
|
|
512
|
+
observed failure: an agent found `.dreative/`, said "not a proper SKILL.md",
|
|
513
|
+
then used these outputs as its instructions):
|
|
514
|
+
|
|
515
|
+
```markdown
|
|
516
|
+
# Dreative run artifacts — NOT the skill
|
|
517
|
+
|
|
518
|
+
Everything in this folder (plan.md, system.md, verify.md, assets.json,
|
|
519
|
+
mockups/, screenshots/) is OUTPUT of a Dreative design run, not
|
|
520
|
+
instructions. The actual skill lives at `<agent-dir>/skills/dreative/SKILL.md`
|
|
521
|
+
(look in `.claude/`, `.codex/`, or `.agents/`). For any new design request:
|
|
522
|
+
read that SKILL.md and run its protocol from the start — these artifacts are
|
|
523
|
+
the previous run's history, never proof the new request is already done.
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
Persist to the plan file: capability manifest, the **full Q&A transcript**
|
|
390
527
|
(each question asked + the answer, verbatim, including free-text remarks),
|
|
391
528
|
each SKIPPED question with the inference drawn from the prompt, references
|
|
392
529
|
studied with the distilled borrow-list, the concept exploration (DESIGN.md §2:
|
|
@@ -395,6 +532,20 @@ same duty as media.md's set-piece exploration), blueprint table, stack, mobile
|
|
|
395
532
|
strategy, fallbacks. Long sessions lose context; the plan file is the re-entry
|
|
396
533
|
point — a resumed session re-reads it instead of re-deciding or re-asking.
|
|
397
534
|
|
|
535
|
+
**Re-entry is for resuming, never for skipping (the stale-artifact trap).**
|
|
536
|
+
The re-entry rule applies ONLY when this session is continuing that same run
|
|
537
|
+
mid-flight (the plan approved, the build interrupted). A NEW user request —
|
|
538
|
+
"redesign this", "audit and redesign", any fresh design ask — over a project
|
|
539
|
+
that already contains `.dreative/plan.md` / `system.md` / `verify.md` runs
|
|
540
|
+
the FULL protocol: those files are the previous run's history and inputs to
|
|
541
|
+
the previous-run divergence rule (§2), never evidence that the new request
|
|
542
|
+
is satisfied. Reading the old artifacts, declaring "the redesign is already
|
|
543
|
+
implemented", validating the old build, and stopping is a FAILED invocation —
|
|
544
|
+
the user invoked the skill because they want work done NOW. If it is
|
|
545
|
+
genuinely ambiguous whether the user wants to resume the old run or start a
|
|
546
|
+
new take, ask one structured question when available (resume vs new take), not an
|
|
547
|
+
assumption.
|
|
548
|
+
|
|
398
549
|
**Then show the plan to the user in chat, before touching code.** Writing
|
|
399
550
|
`plan.md` is not the same as the user having seen it — after the last
|
|
400
551
|
question (§3.9) is answered, post a readable recap in the same conversation:
|
|
@@ -436,20 +587,38 @@ tweak feedback into the plan file before building.
|
|
|
436
587
|
**Execution order (always):**
|
|
437
588
|
|
|
438
589
|
1. **Assets first.** Generate every planned image/video/sequence NOW, at the
|
|
439
|
-
blueprint's aspect ratios, graded to the palette (media.md §
|
|
590
|
+
blueprint's aspect ratios, graded to the palette (media.md §4). Sections get
|
|
440
591
|
designed around real assets, not around placeholders that "will be swapped".
|
|
441
|
-
2. **Foundation.** Install and
|
|
592
|
+
2. **Foundation.** Install and wire the animation stack (motion.md §2 and the
|
|
593
|
+
motion recipe reference), fonts,
|
|
442
594
|
tokens, providers — before any section code.
|
|
443
595
|
3. **Sections** in blueprint order, each honoring its row (skills tagged per
|
|
444
596
|
section apply to that section).
|
|
445
597
|
4. **Effects + choreography** across sections (page-level timelines, transitions,
|
|
446
598
|
the signature element).
|
|
447
599
|
5. **Verification** — the full runtime protocol (SKILL.md §V: runtime gates +
|
|
448
|
-
self-critique, mobile first, evidence written to `.dreative/verify.
|
|
600
|
+
self-critique, mobile first, evidence written to `.dreative/verify.json` and
|
|
601
|
+
summarized in `.dreative/verify.md`).
|
|
449
602
|
Any effect that fails gets its planned fallback, and the final report says
|
|
450
603
|
so: "shipped the §2 fallback for X because Y".
|
|
451
604
|
|
|
605
|
+
**Execution is mandatory, not advisory.** Once the plan is approved, it MUST be
|
|
606
|
+
carried out in full:
|
|
607
|
+
|
|
608
|
+
- Work through blueprint rows top to bottom; a row is only closed when its code
|
|
609
|
+
is written AND its verification gate passes (or its named fallback shipped).
|
|
610
|
+
- Never end the session, summarize, or declare done while unshipped rows
|
|
611
|
+
remain. If interrupted or the context is compacted, re-read
|
|
612
|
+
`.dreative/plan.json` (using `plan.md` for narrative context) and resume from
|
|
613
|
+
the first unshipped row — do NOT
|
|
614
|
+
re-plan, re-ask, or restart.
|
|
615
|
+
- Cutting a row requires an explicit user decision or a hard technical blocker
|
|
616
|
+
named in the report; "ran long" is not a reason.
|
|
617
|
+
- Before the final report, walk `plan.json` row by row, mark each one, and run
|
|
618
|
+
`dreative audit`.
|
|
619
|
+
|
|
452
620
|
Report against the plan when done: each blueprint row → shipped / fallback /
|
|
453
|
-
cut (with reason), plus the motion inventory (motion.md §
|
|
621
|
+
cut (with reason), plus the motion inventory (motion.md §5) and the preservation
|
|
454
622
|
ledger when §11 applies. A build that silently diverges from its approved plan
|
|
455
|
-
is a bug even when it looks good
|
|
623
|
+
is a bug even when it looks good — and a plan left half-executed is a failed
|
|
624
|
+
task, not a partial success.
|