Datasets:
Translate all 40 tasks to English
Browse filesRequirements, checklist items, dimensions, operators, difficulty, domains and levers are now English. Structural ids, item indices, weights and reference-image paths are unchanged.
- README.md +8 -8
- tasks/c03/task.json +86 -86
- tasks/c07/task.json +69 -69
- tasks/c09/task.json +76 -76
- tasks/c10/task.json +63 -63
- tasks/c11/task.json +78 -78
- tasks/c12/task.json +81 -81
- tasks/c14/task.json +75 -75
- tasks/c15/task.json +61 -61
- tasks/c17/task.json +65 -65
- tasks/c20/task.json +74 -74
- tasks/c21/task.json +76 -76
- tasks/c22/task.json +76 -76
- tasks/c23/task.json +60 -60
- tasks/c24/task.json +66 -66
- tasks/c25/task.json +64 -64
- tasks/c26/task.json +78 -78
- tasks/c27/task.json +76 -76
- tasks/c28/task.json +64 -64
- tasks/c29/task.json +66 -66
- tasks/c30/task.json +68 -68
- tasks/c31/task.json +63 -63
- tasks/c34/task.json +79 -79
- tasks/c35/task.json +74 -74
- tasks/c36/task.json +76 -76
- tasks/c37/task.json +73 -73
- tasks/c38/task.json +61 -61
- tasks/c41/task.json +85 -85
- tasks/c42/task.json +86 -86
- tasks/c43/task.json +92 -92
- tasks/c44/task.json +92 -92
- tasks/c45/task.json +92 -92
- tasks/c46/task.json +92 -92
- tasks/c47/task.json +92 -92
- tasks/c48/task.json +92 -92
- tasks/c50/task.json +92 -92
- tasks/c51/task.json +92 -92
- tasks/c52/task.json +92 -92
- tasks/c53/task.json +92 -92
- tasks/c55/task.json +92 -92
- tasks/c56/task.json +92 -92
README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
| 1 |
---
|
| 2 |
license: mit
|
| 3 |
language:
|
| 4 |
-
-
|
| 5 |
pretty_name: Webdev-Bench
|
| 6 |
size_categories:
|
| 7 |
- n<1K
|
|
@@ -33,16 +33,16 @@ section, wire up data) over one evolving project. Each task is defined by `task.
|
|
| 33 |
"task_id": "c41",
|
| 34 |
"layer": "composite",
|
| 35 |
"seed_type": "prd", // prd | brownfield | replicate
|
| 36 |
-
"operators": ["
|
| 37 |
-
"difficulty": "
|
| 38 |
-
"domain": "
|
| 39 |
"milestones": [ // requirements injected in order, one per round
|
| 40 |
-
{"operator": "
|
| 41 |
],
|
| 42 |
"checklist": [ // hidden acceptance items, not shown to the model
|
| 43 |
{"id": "gen.channels.five",
|
| 44 |
"m": 1, // 1-based index into milestones
|
| 45 |
-
"dimension": "
|
| 46 |
"w": 1.5, // item weight
|
| 47 |
"description": "...what must be observably true..."}
|
| 48 |
],
|
|
@@ -51,8 +51,8 @@ section, wire up data) over one evolving project. Each task is defined by `task.
|
|
| 51 |
}
|
| 52 |
```
|
| 53 |
|
| 54 |
-
|
| 55 |
-
|
| 56 |
|
| 57 |
## Composition
|
| 58 |
|
|
|
|
| 1 |
---
|
| 2 |
license: mit
|
| 3 |
language:
|
| 4 |
+
- en
|
| 5 |
pretty_name: Webdev-Bench
|
| 6 |
size_categories:
|
| 7 |
- n<1K
|
|
|
|
| 33 |
"task_id": "c41",
|
| 34 |
"layer": "composite",
|
| 35 |
"seed_type": "prd", // prd | brownfield | replicate
|
| 36 |
+
"operators": ["generate", "restyle", "make interactive", "remove section", "wire up data"],
|
| 37 |
+
"difficulty": "challenging", // challenging | regular
|
| 38 |
+
"domain": "content & news",
|
| 39 |
"milestones": [ // requirements injected in order, one per round
|
| 40 |
+
{"operator": "generate", "request": "...natural-language request..."}
|
| 41 |
],
|
| 42 |
"checklist": [ // hidden acceptance items, not shown to the model
|
| 43 |
{"id": "gen.channels.five",
|
| 44 |
"m": 1, // 1-based index into milestones
|
| 45 |
+
"dimension": "visual", // functional | coverage | interaction | visual | data
|
| 46 |
"w": 1.5, // item weight
|
| 47 |
"description": "...what must be observably true..."}
|
| 48 |
],
|
|
|
|
| 51 |
}
|
| 52 |
```
|
| 53 |
|
| 54 |
+
All task text is in English. Requirements are written in a product manager's voice; each
|
| 55 |
+
`checklist` item states an observable property of the running application.
|
| 56 |
|
| 57 |
## Composition
|
| 58 |
|
tasks/c03/task.json
CHANGED
|
@@ -3,273 +3,273 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
],
|
| 17 |
-
"domain": "
|
| 18 |
"repair": true,
|
| 19 |
-
"inject_type": "
|
| 20 |
"seed_meta": {
|
| 21 |
"repo_src": null,
|
| 22 |
"exclude_slug": "react_zh_000485",
|
| 23 |
"repo_shot": true
|
| 24 |
},
|
| 25 |
-
"title": "Charlotte Prep
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "School News
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "del.block.gone",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "del.skyband.gone",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.0,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "del.neighbors.kept",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.0,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "del.nogap",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.0,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "del.others.alive",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "data.list.replaces.carousel",
|
| 86 |
"m": 2,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.5,
|
| 89 |
-
"description": "School News
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "data.count42",
|
| 93 |
"m": 2,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.5,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "data.first.item",
|
| 100 |
"m": 2,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.5,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "data.art.item",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.5,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "data.last.item",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "data.date.format",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.0,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "data.fields.visible",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.0,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "inter.page.size",
|
| 135 |
"m": 3,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "inter.page2.first",
|
| 142 |
"m": 3,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "inter.pager.controls",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "inter.filter.each",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "inter.filter.sports",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "inter.sort.oldest",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.0,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "inter.reset.page",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "inter.badge.decoupled",
|
| 184 |
"m": 3,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "inter.toggle.idempotent",
|
| 191 |
"m": 3,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.0,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "panel.exists",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "panel.sum.exact",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "panel.order.fields",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.5,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "panel.remove.sync",
|
| 219 |
"m": 4,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "panel.empty.state",
|
| 226 |
"m": 4,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.0,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "fix.triple.click",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.5,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "fix.double.click",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "fix.prev.direction",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.0,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "fix.same.slide",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.0,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "fix.no.regression",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.5,
|
| 264 |
-
"description": "
|
| 265 |
}
|
| 266 |
],
|
| 267 |
"inject": {
|
| 268 |
-
"type": "
|
| 269 |
-
"saboteur_prompt": "
|
| 270 |
},
|
| 271 |
"qc_static": [
|
| 272 |
"req3 has 9 items (want 3-8)"
|
| 273 |
],
|
| 274 |
"review_status": "qc_fail"
|
| 275 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"remove section",
|
| 7 |
+
"make interactive",
|
| 8 |
+
"add section",
|
| 9 |
+
"repair",
|
| 10 |
+
"wire up data"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"exact numeric assertions"
|
| 16 |
],
|
| 17 |
+
"domain": "content & news",
|
| 18 |
"repair": true,
|
| 19 |
+
"inject_type": "Async race condition",
|
| 20 |
"seed_meta": {
|
| 21 |
"repo_src": null,
|
| 22 |
"exclude_slug": "react_zh_000485",
|
| 23 |
"repo_shot": true
|
| 24 |
},
|
| 25 |
+
"title": "Charlotte Prep Website Rework: From \"One at a Time\" to a Filterable, Sortable Story List + Read Later",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "remove section",
|
| 29 |
+
"request": "The big card in the middle of the homepage — the light-blue band with the white card whose left side is a photo and right side is a paragraph with a blue link, plus those three little dots at the bottom right and the big arrows on either side (the \"flipbook\" block) — has been taken down. Remove the whole block, don't leave half of it behind. Two things to watch: first, the full-width light-blue background goes with it — that blue band should no longer be visible anywhere on the page; second, the intro paragraph above and the little open-book illustration must stay exactly as they are, and after the removal the Admissions Deadlines / Quick Facts block has to naturally move up and take its place — no big empty white gap in between. While you're at it, don't mess up the styling or behavior anywhere else — the hero image at the top and the three-photo banner at the bottom keep working exactly as they do now."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "wire up data",
|
| 33 |
+
"request": "School News currently shows only one story at a time, which is way too cramped. We want to turn it into a full list of stories you can scan at a glance. The backend stories are all sorted out: 42 in total. Numbers 1 through 42 are our publishing order — #1 is the newest, dated April 30, 2025, and each one after it is one day earlier, all the way down to #42. The sections rotate in this order: Campus News, Academics, Sports, Arts — #1 Campus News, #2 Academics, #3 Sports, #4 Arts, #5 back to Campus News, and so on; all four sections must appear. You can make the titles sound plausible for each section, but every title has to show its number (e.g. append #7), so we can check them off. Also, each story needs an estimated read time. The formula is dead simple: take the number, divide by 5, take the remainder, add 3, in minutes. Each card must show section, date, title and read time. Stop writing dates like Apr 30 — use the 2025-04-30 format throughout. There should be a stats line at the top of the section telling me how many stories are in the list right now. Use the existing photos for images, rotating through them — no new assets needed."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "make interactive",
|
| 37 |
+
"request": "The list is too long — it needs to be filterable. At the top, give us a row of section toggles: All, Campus News, Academics, Sports, Arts. Clicking one shows only that section's stories, no cross-contamination, and the stats line on top has to update to tell me how many are currently filtered. Also add a newest/oldest order toggle, newest first by default, switch to oldest first on toggle. Paginate the list, 9 per page. The footer needs working \"Previous\" and \"Next\" plus a row of page-number buttons; clicking a number goes straight to that page and that number must be visibly the current page. After changing section or order, go back to page 1 — don't get stuck on a page number that doesn't exist. Also, put a \"Read Later\" toggle in the top-right corner of each card; lit means saved, click again to unsave. Next to the section title, add a small counter telling me how many are saved in total. The counter only counts saves — filtering or paging must not affect it. When I filter to Sports, the ones I saved earlier under Academics still count, they're just not visible in the list; and of course stories that aren't visible shouldn't be clickable."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "add section",
|
| 41 |
+
"request": "Above the footer, add a \"My Read Later\" panel. List saved stories strictly in the order I saved them (first saved at the top, regardless of number), each showing section, title (with number), date and estimated read time, with a remove button after each. The panel header needs a summary line: how many are saved, and roughly how long they'll take to read in total (just add up the individual estimated times). When nothing is saved, don't leave an empty box — show this message, word for word: No saved stories yet — go pick a few above. Removing one from the panel must turn off the matching card's Read Later toggle in the list above and decrement the counter next to the title — the two always stay in sync; once everything is removed, go back to the empty-state message."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "repair",
|
| 45 |
+
"request": "One old bug to fix while you're at it: the left/right arrows in the dark blue band under the hero image. Clicking slowly is fine, but if you click two or three times quickly, the final slide the big headline and the handwritten tagline in the band end up on doesn't match how many times I clicked — sometimes it even looks like it went back a slide, and one more click barely brings it back. We only have 3 slides: 3 quick clicks should land exactly back on the starting slide, 2 quick clicks should go to slide 3, and the headline, the tagline below it and that small line of text must all belong to the same slide — they can't disagree. While fixing, don't touch the news list's filtering, sorting or saving — that was just tuned up."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "del.block.gone",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "coverage",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The white card block with \"photo on the left, text on the right + three small dots at the bottom right + large arrows on both sides\" no longer exists on the page; scrolling the entire page finds no residual content from that card (such as the title \"Honoring the story of childhood\")."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "del.skyband.gone",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "visual",
|
| 60 |
"w": 1.0,
|
| 61 |
+
"description": "The block's original full-width light-blue (a #b0dae8-like shade) background band no longer appears anywhere on the page; after the intro paragraph through to the admissions area, the background stays white."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "del.neighbors.kept",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "coverage",
|
| 67 |
"w": 1.0,
|
| 68 |
+
"description": "The intro paragraph (the text with the blue link, the one starting \"At Charlotte Prep…\") and the open-book illustration below it are still fully present, and are immediately followed by the Admissions Deadlines / Quick Facts area."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "del.nogap",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "visual",
|
| 74 |
"w": 1.0,
|
| 75 |
+
"description": "There is no leftover empty container or blank white block between the intro paragraph area and the Admissions Deadlines area: the pure blank vertical gap between the two areas is no more than 300px."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "del.others.alive",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "The left/right arrows in the dark blue band below the hero image and the left/right arrows in the bottom three-photo banner are still clickable and still switch content; their functionality has not been accidentally removed."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "data.list.replaces.carousel",
|
| 86 |
"m": 2,
|
| 87 |
+
"dimension": "coverage",
|
| 88 |
"w": 1.5,
|
| 89 |
+
"description": "The School News section is no longer a \"one story at a time + left/right arrows + a row of small dots\" carousel, but a list showing multiple story cards at once."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "data.count42",
|
| 93 |
"m": 2,
|
| 94 |
+
"dimension": "functional",
|
| 95 |
"w": 1.5,
|
| 96 |
+
"description": "In the default (unfiltered) state, the stats line at the top of the section shows a total of 42 stories."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "data.first.item",
|
| 100 |
"m": 2,
|
| 101 |
+
"dimension": "functional",
|
| 102 |
"w": 1.5,
|
| 103 |
+
"description": "In the default newest-first order, the first story shows: section \"Campus News\", date \"2025-04-30\", number 1 visible in the title (e.g. #1), estimated read time 4 minutes."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "data.art.item",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "functional",
|
| 109 |
"w": 1.5,
|
| 110 |
+
"description": "Story number 4 shows: section \"Arts\", date \"2025-04-27\", estimated read time 7 minutes; all four section names (Campus News, Academics, Sports, Arts) each appear at least once among the 9 cards on default page 1."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "data.last.item",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "functional",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Story number 42 shows: section \"Academics\", date \"2025-03-20\", estimated read time 5 minutes."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "data.date.format",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "visual",
|
| 123 |
"w": 1.0,
|
| 124 |
+
"description": "All story dates are in YYYY-MM-DD form such as 2025-04-21; the old formats such as \"Apr 30\" and \"Apr 22\" no longer appear on the page."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "data.fields.visible",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "coverage",
|
| 130 |
"w": 1.0,
|
| 131 |
+
"description": "Every story card simultaneously shows section name, date, title with number, and estimated read time (with the word \"minutes\"), and is accompanied by an image."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "inter.page.size",
|
| 135 |
"m": 3,
|
| 136 |
+
"dimension": "functional",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "In the default \"All + newest first\" state the list shows exactly 9 items per page, 5 pages in total, and page 5 has only 6 items."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "inter.page2.first",
|
| 142 |
"m": 3,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "In the default \"All + newest first\" state, after going to page 2 the first item on that page is story number 10: section \"Academics\", date \"2025-04-21\", estimated read time 3 minutes."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "inter.pager.controls",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "interaction",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "In the default state, clicking \"Next\" in the footer goes to page 2 and the first item is number 10; clicking \"Previous\" then returns to page 1 and the first item is number 1; then clicking the page-number button \"4\" directly jumps to page 4, whose first item is number 28 (section \"Arts\", date \"2025-04-03\", read time 6 minutes), and page number 4 is highlighted as the current page."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "inter.filter.each",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "functional",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "Clicking \"Campus News\" makes the stats line show 11 stories and the first item under the default sort is number 1; clicking \"Academics\" shows 11 and the first item is number 2; clicking \"Arts\" shows 10 and no \"Sports\" cards appear in the list."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "inter.filter.sports",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "functional",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After selecting \"Sports\", the stats line shows 10 stories over 2 pages, with only 1 item on page 2; no cards from any non-Sports section appear in the list."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "inter.sort.oldest",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.0,
|
| 173 |
+
"description": "Under the \"Sports\" filter, switching the order to oldest first makes the first item on page 1 story number 39, with the date showing \"2025-03-23\"."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "inter.reset.page",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "interaction",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "After first going to page 3, changing the section or the newest/oldest order immediately returns the list to page 1 (page number 1 highlighted, showing the first 9 items — or all — under that combination)."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "inter.badge.decoupled",
|
| 184 |
"m": 3,
|
| 185 |
+
"dimension": "interaction",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "After saving number 1 and number 5 under \"All\", the counter shows 2; switching to the \"Sports\" section (both are hidden), the counter still shows 2, and no clickable element for either story exists in the list; switching back to \"All\", both stories are still in the lit/saved state."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "inter.toggle.idempotent",
|
| 191 |
"m": 3,
|
| 192 |
+
"dimension": "interaction",
|
| 193 |
"w": 1.0,
|
| 194 |
+
"description": "Clicking the Read Later toggle of the same story twice in a row returns the counter to the value before the clicks (no duplicate counting or negative numbers); after repeated clicks the counter always equals the number of currently lit cards."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "panel.exists",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "coverage",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "A \"My Read Later\" panel exists above the footer, positioned after the news list and before the footer."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "panel.sum.exact",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "functional",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Without filtering, saving number 5 first and then number 1 makes the panel summary line show 2 stories, 7 minutes total; then saving number 3 changes it to 3 stories, 13 minutes total."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "panel.order.fields",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "functional",
|
| 214 |
"w": 1.5,
|
| 215 |
+
"description": "Continuing the save order from the previous step (#5, #1, #3), the panel entries read from top to bottom as number 5, number 1, number 3 (not ascending by number), and each shows section, title with number, date and that story's estimated read time."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "panel.remove.sync",
|
| 219 |
"m": 4,
|
| 220 |
+
"dimension": "interaction",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "After removing an entry in the panel: the entry disappears from the panel, the total story count and total minutes decrease in sync by its read time, and the corresponding card's Read Later toggle in the list above goes back to the unlit state with the counter next to the title decremented by 1."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "panel.empty.state",
|
| 226 |
"m": 4,
|
| 227 |
+
"dimension": "interaction",
|
| 228 |
"w": 1.0,
|
| 229 |
+
"description": "After removing all saved items, the panel shows the copy \"No saved stories yet — go pick a few above.\", with no empty entry boxes left behind; the counter next to the title is 0."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "fix.triple.click",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "functional",
|
| 235 |
"w": 1.5,
|
| 236 |
+
"description": "Clicking \"Next\" 3 times in a row on the top dark blue band at roughly 80ms intervals ends on the big headline \"Early chapters that shape a child’s whole life\" with the handwritten tagline \"writing our own story\"."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "fix.double.click",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "Quickly clicking \"Next\" 2 times from the initial slide finally shows slide 3: headline \"Leaders a little sooner, children a little longer\", handwritten tagline \"go anywhere from here\"."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "fix.prev.direction",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "interaction",
|
| 249 |
"w": 1.0,
|
| 250 |
+
"description": "Quickly clicking \"Previous\" once from the initial slide shows slide 3; clicking twice shows slide 2 (headline \"Curious minds and open hearts, truly known\"); the direction does not get confused or jump back."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "fix.same.slide",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "functional",
|
| 256 |
"w": 1.0,
|
| 257 |
+
"description": "After any sequence of rapid clicks, the big headline, the handwritten tagline and the small line of text on the right always belong to the same slide (e.g. when the tagline is \"adventures every day\" the small line must be \"Montessori Beginnings Through Confident Graduates\")."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "fix.no.regression",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "interaction",
|
| 263 |
"w": 1.5,
|
| 264 |
+
"description": "On the news list, first select a section, go to page 2 and save 2 stories, then rapidly click the top arrows several times: the list's selected section, page number, Read Later count (still 2) and the contents of the \"My Read Later\" panel all remain unchanged."
|
| 265 |
}
|
| 266 |
],
|
| 267 |
"inject": {
|
| 268 |
+
"type": "Async race condition",
|
| 269 |
+
"saboteur_prompt": "Plant a stale-closure async race in the carousel switching logic of src/components/Hero.jsx, making it look like a delay added for the slide transition: defer the state commit after the arrow click into a setTimeout (about 180ms), and compute the target slide at click time using the index variable from the current render closure (of the form const next = (index + dir + SLIDES.length) % SLIDES.length; setTimeout(() => setIndex(next), 180)). Do not use a functional update, and do not clear or cancel the previous timer. The effect must be: a single click behaves perfectly normally (just a slight sense of delay), while 2–3 rapid clicks within 180ms compute from the same stale index, ending up advancing/going back only one slide or with a seemingly scrambled direction. Hard requirements: no console errors or React warnings; do not modify any CSS, class names, DOM structure, copy, or SLIDES data; do not touch other components such as GalleryStrip, NewsCarousel, Header, Footer; leave no comments, TODOs or console output; keep naming and indentation style consistent with the existing code."
|
| 270 |
},
|
| 271 |
"qc_static": [
|
| 272 |
"req3 has 9 items (want 3-8)"
|
| 273 |
],
|
| 274 |
"review_status": "qc_fail"
|
| 275 |
+
}
|
tasks/c07/task.json
CHANGED
|
@@ -3,217 +3,217 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"repair": true,
|
| 18 |
-
"inject_type": "
|
| 19 |
"seed_meta": {
|
| 20 |
"repo_src": null,
|
| 21 |
"exclude_slug": "react_zh_001241",
|
| 22 |
"repo_shot": true
|
| 23 |
},
|
| 24 |
-
"title": "kolossal
|
| 25 |
"milestones": [
|
| 26 |
{
|
| 27 |
-
"operator": "
|
| 28 |
-
"request": "
|
| 29 |
},
|
| 30 |
{
|
| 31 |
-
"operator": "
|
| 32 |
-
"request": "
|
| 33 |
},
|
| 34 |
{
|
| 35 |
-
"operator": "
|
| 36 |
-
"request": "
|
| 37 |
},
|
| 38 |
{
|
| 39 |
-
"operator": "
|
| 40 |
-
"request": "
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "layout.grid.three",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "layout.gap.card",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.0,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "layout.toolbar.sticky",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.5,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "layout.content.kept",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.0,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "layout.responsive",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "fix.nav.active",
|
| 81 |
"m": 2,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.5,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "fix.nav.exclusive",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.0,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "fix.nav.hover",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.0,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "fix.noregression",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.0,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "data.pagination",
|
| 109 |
"m": 3,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.5,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "data.stats.default",
|
| 116 |
"m": 3,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.5,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "data.card.fields",
|
| 123 |
"m": 3,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.5,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "data.sort.desc",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.5,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "data.sort.asc.weeks",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.0,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "data.filter.stats",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.5,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "data.empty",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.5,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "data.coupling.grid",
|
| 158 |
"m": 3,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "skin.light.palette",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "skin.toggle.in.nav",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.0,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "skin.dark.restore",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.0,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "skin.branche.colors",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.5,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "skin.nav.active",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.5,
|
| 196 |
-
"description": "
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "skin.state.keep",
|
| 200 |
"m": 4,
|
| 201 |
-
"dimension": "
|
| 202 |
"w": 1.5,
|
| 203 |
-
"description": "
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "skin.persist",
|
| 207 |
"m": 4,
|
| 208 |
-
"dimension": "
|
| 209 |
"w": 1.0,
|
| 210 |
-
"description": "
|
| 211 |
}
|
| 212 |
],
|
| 213 |
"inject": {
|
| 214 |
-
"type": "
|
| 215 |
-
"saboteur_prompt": "
|
| 216 |
},
|
| 217 |
"qc_static": [],
|
| 218 |
"review_status": "needs_human"
|
| 219 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"restructure layout",
|
| 7 |
+
"repair",
|
| 8 |
+
"wire up data",
|
| 9 |
+
"restyle"
|
| 10 |
],
|
| 11 |
+
"difficulty": "challenging",
|
| 12 |
"levers": [
|
| 13 |
+
"exact numeric assertions",
|
| 14 |
+
"boundary and error paths"
|
| 15 |
],
|
| 16 |
+
"domain": "data display",
|
| 17 |
"repair": true,
|
| 18 |
+
"inject_type": "Style override",
|
| 19 |
"seed_meta": {
|
| 20 |
"repo_src": null,
|
| 21 |
"exclude_slug": "react_zh_001241",
|
| 22 |
"repo_shot": true
|
| 23 |
},
|
| 24 |
+
"title": "kolossal case-study site: case wall restructure, nav highlight fix, 40-project data wiring, and day/night dual-color skin",
|
| 25 |
"milestones": [
|
| 26 |
{
|
| 27 |
+
"operator": "restructure layout",
|
| 28 |
+
"request": "Work on the existing kolossal website repo. Start with the Referenzen (case studies) section. Right now it's a staggered two-column arrangement with the left column dropped down as a whole, and by the time you scroll halfway the right column bottoms out first — it looks unfinished, and clients have complained. Please turn it into a proper three-column grid: all cards top-aligned and the same height (use 480px), keep the current 30px gaps between columns and rows, and leave the card corner radius alone at the big 40px. None of the six cases' existing titles, German descriptions or \"Case ansehen / Website ansehen\" link copy may be lost. Also, we'll have more cases over time, so add a toolbar at the very top of this section; when scrolled past the case area it should stick to the top of the viewport instead of scrolling away, with a height of 64px. On the left, state clearly how many cases there are right now (currently 6 — the German \"6 Projekte\" is fine); leave the right side empty for now, since the next step is to put filters there. When the window narrows, don't let the cards get squashed: at around a thousand pixels it should automatically become two columns, at phone width one column, and no horizontal scrollbar at any point."
|
| 29 |
},
|
| 30 |
{
|
| 31 |
+
"operator": "repair",
|
| 32 |
+
"request": "There's another problem we have to fix at the same time: the floating capsule nav at the bottom of the page. It used to be that whichever item I clicked got a bright yellow pill background with dark text, but now all three words look identical and you can't tell which section you're in — a colleague thought the nav was broken. Please restore it to how it was — the current item is a yellow-background dark-text capsule, the other items stay light-colored text, and hovering turns them yellow. Don't accidentally mess up the case grid and sticky toolbar you just built."
|
| 33 |
},
|
| 34 |
{
|
| 35 |
+
"operator": "wire up data",
|
| 36 |
+
"request": "The case studies now need to go fully live. Ops sent over the list: forty projects in total, grouped by industry, with three numbers after each project — launch year, duration (weeks), budget (in k€): Kultur — Bautz Festival 2021/14/38, Stadttheater Hemer 2019/9/24, Sauerlandpark Sommer 2022/6/15, Klangraum Lüdenscheid 2023/12/32, Museum Nachtschicht 2018/8/21, Festivalfunk RMP 2024/10/27, Kulturbüro Schriever 2025/7/19; Gesundheit — ehex 2022/26/96, curenect 2023/18/64, Praxisportal Alberts 2020/11/29, Rezeptbrücke 2021/16/48, Klinikfinder NRW 2024/22/75, Pflegeatlas 2019/13/36; Energie — Mark-E Direkt 2021/20/60, Solarrechner KCX 2022/10/40, Windpark Cockpit 2024/24/80, Netzampel 2025/30/120, Ökostrom Wechsler 2019/15/50, Speicherplaner 2018/9/30; Handel — Stegermeister Shop 2020/17/55, WGB Werkzeug B2B 2021/21/70, Radolid Katalog 2022/12/34, Selbstauslöser Store 2023/8/22, Hotel Vierjahreszeiten Buchung 2019/14/41, IMS Ersatzteile 2024/19/58, Schmale & Raabe Shop 2025/11/31, Clee Concept Store 2022/6/18; Bildung — Zentrum für Klimaforschung Niedersachsen Wissensportal 2023/16/52, Campus Kompass 2018/10/26, Lernpfad Sauerland 2021/7/20, Schulportal Hemer 2020/13/37, Mensa Now 2024/5/12, Alumni Hub 2025/18/56; Industrie — David&Goliath 2019/12/33, Bautz Industrie Intranet 2022/23/78, Logowall Maschinenbau 2020/15/44, Sensorik Dashboard 2023/28/99, Werksführung VR 2024/9/25, Instandhaltung Mobil 2025/20/62, Zulieferportal RMP 2018/11/28. Skip images for now — make all forty into uniform info cards: project name, colored industry tag, year, duration and budget must all be visible on the card face; without images the cards get shorter, uniformly 260 tall, with the same column count and 30px gap. One special note: the original six cases (Bautz Festival, ehex, curenect, David&Goliath, Mark-E Direkt, Zentrum für Klimaforschung Niedersachsen Wissensportal) had German subtitles and \"Case ansehen / Website ansehen\" link copy that are signed-off public copy — after the redesign they must stay on their respective cards; the 34 new projects don't need either. Industry colors follow design: Kultur #EE8442, Gesundheit #2BBE7A, Energie #EE7A3B, Handel #54809B, Bildung #A9D2D4, Industrie #979797. Fill the empty right half of the toolbar from the previous step: an industry filter (with \"Alle\"), a year filter (with \"Alle\", years 2018 to 2025), and a sort (default is the order given in the list above, plus budget high-to-low, budget low-to-high, and duration shortest-to-longest). The stats line on the left half must update in real time with the filter: how many projects match, the total budget of those projects in k€, and the average duration in weeks (truncate any remainder). Show 9 cards per page, with previous/next and the current page number below; changing any filter goes back to page 1. If a combination yields no projects, don't give me a blank area — write a German message telling the user there are no results, and the stats line should honestly show 0, with the pager buttons not clickable in that case. One project name in the list is especially long — make sure it doesn't burst out of its card."
|
| 37 |
},
|
| 38 |
{
|
| 39 |
+
"operator": "restyle",
|
| 40 |
+
"request": "Last is the brand team's new \"day version\" palette: the site needs to switch between the night version and the day version, with the toggle in the bottom capsule nav (alongside the three nav words), still defaulting to the current night version. Day version: the page background becomes paper white #FDFBF4, headlines and body copy are all ink blue #14212C, and yellow #FFD401 is kept only for buttons and \"currently selected\" highlights. The night version must stay exactly as it is — still dark blue #192C3A with yellow text. The switch must apply site-wide, including case cards, the toolbar and the stats line. Two things to stress: the six industry colors are industry identity colors, unrelated to the skin — they must look identical in both modes; and don't mess up anything built earlier — it's just a skin change, so the current filter, sort, page number and those stats numbers must not change, and the nav must still show \"where I am\" at a glance. After refreshing, the user should still be on the skin they just chose."
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "layout.grid.three",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "visual",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "At a 1440px-wide viewport, all cards in the case section form an equal-width grid of 3 per row, and the six cards' top edges are on the same horizontal line (no more staggered effect with the left column dropped down)."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "layout.gap.card",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "visual",
|
| 55 |
"w": 1.0,
|
| 56 |
+
"description": "The horizontal and vertical gaps between adjacent cards are both 30px (±2px), card height is uniformly 480px (±4px), and the corner radius stays 40px."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "layout.toolbar.sticky",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "functional",
|
| 62 |
"w": 1.5,
|
| 63 |
+
"description": "A toolbar of height 64px (±4px) exists at the top of the case section; when the page scrolls down past the case section the toolbar sticks to the top of the viewport instead of scrolling away with the content, and its visible left-side copy contains \"6 Projekte\"."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "layout.content.kept",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "coverage",
|
| 69 |
"w": 1.0,
|
| 70 |
+
"description": "On the final delivered page, the six old cases' titles (Bautz Festival, ehex, curenect, David&Goliath, Mark-E Direkt, Zentrum für Klimaforschung Niedersachsen Wissensportal), their respective German subtitles and their \"Case ansehen\"/\"Website ansehen\" link copy are still visible on their corresponding cards (locate the card via filters if necessary)."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "layout.responsive",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "interaction",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "At a viewport width of 900px the case cards show 2 per row; at 375px, 1 per row; there is no horizontal scrollbar at either width."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "fix.nav.active",
|
| 81 |
"m": 2,
|
| 82 |
+
"dimension": "visual",
|
| 83 |
"w": 1.5,
|
| 84 |
+
"description": "In the bottom floating nav the \"current item\" has a yellow capsule background (computed background value rgb(255, 212, 1)) with dark text, clearly different from the other two items (transparent background, light text)."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "fix.nav.exclusive",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "interaction",
|
| 90 |
"w": 1.0,
|
| 91 |
+
"description": "Click through Home / Referenzen / Manifest in turn: at any moment exactly the clicked item has the yellow background and dark text, and the other two return to the no-background state."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "fix.nav.hover",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "interaction",
|
| 97 |
"w": 1.0,
|
| 98 |
+
"description": "When hovering over a non-current item its text turns yellow (rgb(255,212,1)) and it still has no solid capsule background; when hovering over the current item it keeps the yellow background and dark text, with no case of text and background being the same color and thus invisible."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "fix.noregression",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "functional",
|
| 104 |
"w": 1.0,
|
| 105 |
+
"description": "After the fix the case section is still an equal-height 3-per-row grid and the toolbar still sticks; the browser console has no errors."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "data.pagination",
|
| 109 |
"m": 3,
|
| 110 |
+
"dimension": "functional",
|
| 111 |
"w": 1.5,
|
| 112 |
+
"description": "In the default state (industry=Alle, year=Alle, default sort) there are 40 cases in total, 9 cards per page over 5 pages; page 5 shows only 4 cards, and \"Next\" can no longer advance."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "data.stats.default",
|
| 116 |
"m": 3,
|
| 117 |
+
"dimension": "functional",
|
| 118 |
"w": 1.5,
|
| 119 |
+
"description": "In the default state the stats line simultaneously shows 40 (project count), 1805 (total budget, k€) and 14 (average duration in weeks, 575÷40 truncated) — three numbers."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "data.card.fields",
|
| 123 |
"m": 3,
|
| 124 |
+
"dimension": "coverage",
|
| 125 |
"w": 1.5,
|
| 126 |
+
"description": "Spot-check the Netzampel card: the same card simultaneously shows the project name Netzampel, the Energie industry tag (tag color rgb(238, 122, 59)), year 2025, duration 30 (weeks), budget 120 (k€), with the four values matching the list; the other cards on the page likewise each show their own industry tag, year, duration and budget."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "data.sort.desc",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "functional",
|
| 132 |
"w": 1.5,
|
| 133 |
+
"description": "With industry=Alle, year=Alle, sort=budget high-to-low, the top ten in descending budget order are Netzampel 120, Sensorik Dashboard 99, ehex 96, Windpark Cockpit 80, Bautz Industrie Intranet 78, Klinikfinder NRW 75, WGB Werkzeug B2B 70, curenect 64, Instandhaltung Mobil 62, Mark-E Direkt 60; accordingly the 9 cards on page 1 in this order are the top nine (first Netzampel 120, ninth Instandhaltung Mobil 62), and the first card on page 2 is Mark-E Direkt (60); then switching industry to Handel automatically returns the list to page 1 with 8 entries in total."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "data.sort.asc.weeks",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.0,
|
| 140 |
+
"description": "Both \"budget low-to-high\" and \"duration shortest-to-longest\" in the sort dropdown are selectable: with industry=Bildung, sort=budget low-to-high, the first of the 6 cards is Mensa Now (12 k€) and the last is Alumni Hub (56 k€); with industry=Energie, sort=duration shortest-to-longest, the first of the 6 cards is Speicherplaner (9 weeks) and the last is Netzampel (30 weeks)."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "data.filter.stats",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "functional",
|
| 146 |
"w": 1.5,
|
| 147 |
+
"description": "With industry=Energie, year=Alle there are 6 entries, all on one page, and the stats line shows 6, 380, 18; with year=2024, industry=Alle there are 6 entries (Festivalfunk RMP, Klinikfinder NRW, Windpark Cockpit, IMS Ersatzteile, Mensa Now, Werksführung VR), and the stats line shows 6, 277, 14."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "data.empty",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "interaction",
|
| 153 |
"w": 1.5,
|
| 154 |
+
"description": "With industry=Handel, year=2024 only 1 entry remains (IMS Ersatzteile), and the stats line shows 1, 58, 19; changing the year to 2018 (industry still Handel) makes the card area show a German no-results message instead of a blank, with all three stats numbers showing 0, the page number showing 1, and previous/next both non-clickable; changing the year back to \"Alle\" brings the 8 Handel projects back and returns to page 1."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "data.coupling.grid",
|
| 158 |
"m": 3,
|
| 159 |
+
"dimension": "visual",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "After data wiring the cards are still 3 per row with 30px gaps, uniformly 260px tall (±4px), and the toolbar still sticks; the card for the longest name \"Zentrum für Klimaforschung Niedersachsen Wissensportal\" has text that does not overflow the card bounds or overlap adjacent cards, and cards in the same row remain equal height."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "skin.light.palette",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "visual",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "After switching to the day version the page background is rgb(253, 251, 244) and the main headline and body text are rgb(20, 33, 44); large areas of dark blue rgb(25, 44, 58) background no longer appear."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "skin.toggle.in.nav",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "interaction",
|
| 174 |
"w": 1.0,
|
| 175 |
+
"description": "The skin toggle control is inside the bottom floating capsule nav container (in the same capsule as Home/Referenzen/Manifest), and clicking it switches back and forth between the day and night versions; first load defaults to the night version, with page background rgb(25, 44, 58) and main headline text rgb(255, 212, 1)."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "skin.dark.restore",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "visual",
|
| 181 |
"w": 1.0,
|
| 182 |
+
"description": "After switching to the day version and then back to the night version, the page background returns to rgb(25, 44, 58) and the main headline text to rgb(255, 212, 1), and the case cards and toolbar look the same as before the switch."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "skin.branche.colors",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "functional",
|
| 188 |
"w": 1.5,
|
| 189 |
+
"description": "Industry identity colors are identical under both skins: the industry tag for Energie projects is rgb(238, 122, 59) and for Gesundheit rgb(43, 190, 122), with the same values before and after switching the skin."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "skin.nav.active",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "interaction",
|
| 195 |
"w": 1.5,
|
| 196 |
+
"description": "In the day version the current item in the bottom nav still has a yellow background rgb(255, 212, 1) with dark text, clearly distinguishable from the other two items (the fix from requirement 2 is not broken by the reskin)."
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "skin.state.keep",
|
| 200 |
"m": 4,
|
| 201 |
+
"dimension": "functional",
|
| 202 |
"w": 1.5,
|
| 203 |
+
"description": "Select industry Energie and sort budget high-to-low first, then switch the skin: the filter and sort selections stay unchanged, the first card is still Netzampel, and the stats line still shows 6, 380, 18; after switching the skin on page 3 of industry=Alle, the page stays on page 3 with unchanged card contents."
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "skin.persist",
|
| 207 |
"m": 4,
|
| 208 |
+
"dimension": "interaction",
|
| 209 |
"w": 1.0,
|
| 210 |
+
"description": "After switching to the day version and refreshing the page, the page still presents in the day version (background rgb(253,251,244)); switching back to the night version and refreshing keeps the night version."
|
| 211 |
}
|
| 212 |
],
|
| 213 |
"inject": {
|
| 214 |
+
"type": "Style override",
|
| 215 |
+
"saboteur_prompt": "Near the end of src/index.css (e.g. after the .cta-related rules), append a style rule with higher specificity than the existing .nav-item.is-active. Write the selector as .floating-nav .nav-item.is-active, setting background to transparent, text color to #eef2f4, and horizontal padding back to 12px, so that the \"current item\" in the bottom floating nav loses its yellow capsule highlight and looks identical to the other two items. Also append .floating-nav .nav-item.is-active:hover { background: transparent; color: #ffd401; } so hover behavior doesn't reveal the original highlight either. Do not modify the logic in App.jsx that adds the is-active class name (the class must still be correctly attached to the current item), do not change the styles, layout or behavior of any element outside the nav, leave no comments or TODO text, and produce no console errors or warnings at runtime."
|
| 216 |
},
|
| 217 |
"qc_static": [],
|
| 218 |
"review_status": "needs_human"
|
| 219 |
+
}
|
tasks/c09/task.json
CHANGED
|
@@ -3,242 +3,242 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"seed_meta": {
|
| 18 |
"ref_image_src": "prototypes/reference.jpg"
|
| 19 |
},
|
| 20 |
-
"title": "VIERI Fine Jewellery
|
| 21 |
"milestones": [
|
| 22 |
{
|
| 23 |
-
"operator": "
|
| 24 |
-
"request": "
|
| 25 |
},
|
| 26 |
{
|
| 27 |
-
"operator": "
|
| 28 |
-
"request": "
|
| 29 |
},
|
| 30 |
{
|
| 31 |
-
"operator": "
|
| 32 |
-
"request": "42
|
| 33 |
},
|
| 34 |
{
|
| 35 |
-
"operator": "
|
| 36 |
-
"request": "
|
| 37 |
},
|
| 38 |
{
|
| 39 |
-
"operator": "
|
| 40 |
-
"request": "
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "nav.structure",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "hero.tagline",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.5,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "cloud.middlecard",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.0,
|
| 63 |
-
"description": "ICONIC CLOUD COLLECTION
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "concept.quote",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.0,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "footer.fivecols",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "tone.light",
|
| 81 |
"m": 1,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.0,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "grid.count42",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "GOLDVAULT KOLLEKTION
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "grid.price",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.5,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "grid.attrs",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.0,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "grid.tone",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.0,
|
| 112 |
-
"description": "GOLDVAULT KOLLEKTION
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "grid.neu",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.0,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "grid.soldout",
|
| 123 |
"m": 2,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.0,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "filter.combo",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.5,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "filter.priceband",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.0,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "page.four",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.0,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "chain.multi",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.5,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "wish.idempotent",
|
| 158 |
"m": 3,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "filter.empty",
|
| 165 |
"m": 3,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.0,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "theme.persist",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.5,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "theme.dark",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.0,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "theme.badge",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.0,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "theme.accent",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.0,
|
| 196 |
-
"description": "
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "theme.toggle",
|
| 200 |
"m": 4,
|
| 201 |
-
"dimension": "
|
| 202 |
"w": 1.0,
|
| 203 |
-
"description": "
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "layout.twocol",
|
| 207 |
"m": 5,
|
| 208 |
-
"dimension": "
|
| 209 |
"w": 1.5,
|
| 210 |
-
"description": "
|
| 211 |
},
|
| 212 |
{
|
| 213 |
"id": "layout.regression",
|
| 214 |
"m": 5,
|
| 215 |
-
"dimension": "
|
| 216 |
"w": 1.5,
|
| 217 |
-
"description": "
|
| 218 |
},
|
| 219 |
{
|
| 220 |
"id": "layout.footer3",
|
| 221 |
"m": 5,
|
| 222 |
-
"dimension": "
|
| 223 |
"w": 1.0,
|
| 224 |
-
"description": "
|
| 225 |
},
|
| 226 |
{
|
| 227 |
"id": "layout.keeptop",
|
| 228 |
"m": 5,
|
| 229 |
-
"dimension": "
|
| 230 |
"w": 1.0,
|
| 231 |
-
"description": "
|
| 232 |
},
|
| 233 |
{
|
| 234 |
"id": "layout.darkpanel",
|
| 235 |
"m": 5,
|
| 236 |
-
"dimension": "
|
| 237 |
"w": 1.0,
|
| 238 |
-
"description": "
|
| 239 |
}
|
| 240 |
],
|
| 241 |
"inject": null,
|
| 242 |
"qc_static": [],
|
| 243 |
"review_status": "needs_human"
|
| 244 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"add section",
|
| 8 |
+
"restyle",
|
| 9 |
+
"restructure layout",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "regular",
|
| 13 |
"levers": [
|
| 14 |
+
"data scale × combined state"
|
| 15 |
],
|
| 16 |
+
"domain": "marketing landing page",
|
| 17 |
"seed_meta": {
|
| 18 |
"ref_image_src": "prototypes/reference.jpg"
|
| 19 |
},
|
| 20 |
+
"title": "VIERI Fine Jewellery Landing Page Replication and GOLDVAULT Catalog Rework",
|
| 21 |
"milestones": [
|
| 22 |
{
|
| 23 |
+
"operator": "replicate",
|
| 24 |
+
"request": "First, reproduce the brand's current homepage exactly as it is, based on the part visible in the reference image. You can use placeholder blocks for images for now, but the layout, copy and overall feel must match. Top to bottom: at the very top, a full-width thin nav bar — on the left, in order, BOUTIQUE, VERLOBUNG & EHE, GOLDVAULT 2.0; dead center, the uppercase brand name VIERI in wide letter-spacing (with a very small subtitle line beneath it); on the right, currency EUR €, language Deutsch, plus three small icons for search, account and shopping bag. Below that, a full-width hero image that fills almost the entire first screen, with the uppercase wide-tracked tagline NOT YOUR AVERAGE GOLD. overlaid at the bottom center in a very pale gray-blue — not pure black. Below that, at the top left, a small uppercase heading ICONIC CLOUD COLLECTION; beneath it, three images in a row, with the middle one taller than the two flanking ones and extending a little beyond them above and below, and a thin-outlined light-colored button overlaid on the middle image reading Cloud Collection. Next, a full-width collage image. Then a centered philosophy paragraph: heading DAS VIERI KONZEPT, below it a German quote in quotation marks, signed Guya Merkle, Gründerin VIERI, and below that an About us text link. Next is the founder screen, text on the left and portrait photo on the right; on the left, heading VERANTWORTUNG BEGINNT AM URSPRUNG, then two or three lines of explanatory text, then an underlined link MEHR ÜBER UNSEREN IMPACT ERFAHREN. Above the footer, another full-width collage image. The footer itself has five groups: leftmost, an uppercase mission statement plus three small social icons; then VIERI (About, Verantwortung, Earthbeat Foundation, Facts & Jewels, Blog), SERVICES (AGB, Datenschutz, Widerrufsrecht, Rücksendungen, Impressum), KONTAKT (FAQ, Kontakt & Presseanfragen, Zahlungsmethoden), SOCIALS (Instagram, Facebook, Pinterest); rightmost is the newsletter area with one invitation sentence plus an input field and a button reading BEITRETEN; at the very bottom, a line © VIERI Fine Jewellery. The overall background is off-white light gray, section headings are all thin uppercase small text — no heavy black heading blocks."
|
| 25 |
},
|
| 26 |
{
|
| 27 |
+
"operator": "add section",
|
| 28 |
+
"request": "Marketing sent over the GOLDVAULT collection list and wants us to insert a full product display block between the big collage image and the philosophy paragraph. The section heading is GOLDVAULT KOLLEKTION, and near the heading state clearly how many items there are in total. Here's the list: 42 items in total, numbered VG-001 through VG-042 with no gaps. They couldn't be bothered to price them individually, saying the rule is simple — base price €380, plus €35 for each successive number, so the first item is €415 and the last €1,850, all whole euros with no decimals, displayed with the € symbol. Category cycles by number: remainder 1 when divided by 4 is Ringe, remainder 2 is Ohrringe, remainder 3 is Ketten, divisible is Armbänder. Material follows another cycle: remainder 1 when divided by 3 is 18K Recyclinggold, remainder 2 is Fairmined Silber, divisible is Platin. Items from VG-036 onward (inclusive) are this season's new arrivals and get a small NEU tag on the card. The warehouse says the pieces whose numbers are divisible by 7 are sold out; mark those cards Ausverkauft — these items still show their regular prices but can't be favorited. Each card must show five things: number, name (just the number plus the German category word), category, material and price. Keep the tone of this block consistent with the screens above."
|
| 29 |
},
|
| 30 |
{
|
| 31 |
+
"operator": "make interactive",
|
| 32 |
+
"request": "Laying out all 42 items at once is too long — add selection to this block: category switch by Alle / Ringe / Ohrringe / Ketten / Armbänder; material switch by Alle / 18K Recyclinggold / Fairmined Silber / Platin; price with three bands plus unlimited — unter 500 €, 500–1000 € (inclusive at both ends), über 1000 €; and an 'in stock only' toggle — when on, sold-out items don't appear in the list. Sorting by price low-to-high, high-to-low, and the default number order. 12 items per page, with pager controls below; the page number must show which page you're on, and any filter or sort change must jump back to page 1, with the page count recalculated for the current results. Add a favorite heart to the top-right of each card; click once to add to the wishlist, click again to remove. The top nav shows the wishlist count next to the shopping bag icon; clicking the same item repeatedly must not keep inflating the number; clicking hearts on sold-out items should do nothing and must not change the number. If a filter yields nothing, don't leave a blank area — show a message such as 'Keine Treffer', and don't keep the pager in that case. Also, no matter how you filter, the item count next to the heading must match the current actual results."
|
| 33 |
},
|
| 34 |
{
|
| 35 |
+
"operator": "restyle",
|
| 36 |
+
"request": "The brand wants a night theme for the Christmas season: add a light/dark toggle on the right side of the top nav; when switched to night, the whole page becomes dark background with light text, and image areas keep displaying as before. There's a conflict you'll have to resolve yourself — marketing wants the promo markers (NEU, wishlist count) to stand out, while the brand director insists VIERI's minimal restraint must not be lost; so only one accent color is allowed, used at a fixed few places, consistently across both themes — don't use gold in one theme and three different colors in the other. Switching the theme is only a reskin: whatever the user has filtered to, how it's sorted, which page they're on and how many items they've favorited must not be cleared. Under the night theme the NEU and Ausverkauft markers must still be instantly visible, and sold-out cards must still not be clickable. Switching back and forth repeatedly must not cause problems, and switching back to light must look the same as at the start."
|
| 37 |
},
|
| 38 |
{
|
| 39 |
+
"operator": "restructure layout",
|
| 40 |
+
"request": "The product section is tiring to scroll through on wide screens — rearrange it: on wide screens (above 1024px) make GOLDVAULT KOLLEKTION two columns, with a filter panel on the left (category, material, price, in-stock only, sort all inside it) that stays visible as the page scrolls, and a three-column product grid on the right; on narrow screens (below 640px) collapse the left column into an expandable/collapsible filter button, with products in a single column. Also slim the footer down to three columns and move the newsletter block to the top of the footer, full-width; not a single link from the original five groups may be lost, and the BEITRETEN button and the copyright line at the bottom stay as before. Redesign aside, don't let the look of the screens above (top nav, hero and its tagline, the three-image area with the Cloud Collection button peeking out) drift, and the filter/sort/pagination/favorites rules must keep working correctly and unchanged; the night theme must also cover the left filter panel under the new layout — don't leave light-colored blocks behind."
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "nav.structure",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "visual",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "The top nav is a single row in three parts: on the left, the three links BOUTIQUE, VERLOBUNG & EHE, GOLDVAULT 2.0 in that order; in the center, the uppercase VIERI brand name, horizontally centered with clearly widened letter-spacing and a subtitle line in a markedly smaller font directly beneath it; on the right, both text items EUR € and Deutsch plus three small icons (search/account/shopping bag)."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "hero.tagline",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "visual",
|
| 55 |
"w": 1.5,
|
| 56 |
+
"description": "The first screen is a full-width hero, with the uppercase wide-tracked tagline \"NOT YOUR AVERAGE GOLD.\" (including the period) centered at its bottom, the text in low-contrast gray/gray-blue rather than pure black, and the tagline placed inside the hero area rather than starting a separate white block."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "cloud.middlecard",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "visual",
|
| 62 |
"w": 1.0,
|
| 63 |
+
"description": "The small uppercase heading ICONIC CLOUD COLLECTION is left-aligned to the top left of the section; below it, three images in a horizontal row, the middle one taller than the two flanking ones and extending beyond them above and below, and only the middle image has a thin-outlined light-colored button overlaid on it, with the copy \"Cloud Collection\"."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "concept.quote",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "coverage",
|
| 69 |
"w": 1.0,
|
| 70 |
+
"description": "The philosophy area shows, centered, the heading DAS VIERI KONZEPT, a quote wrapped in quotation marks, the signature \"Guya Merkle, Gründerin VIERI\" and an About us link beneath it; the screen below is a two-column left-text/right-image layout, with the left side showing, in order, the heading VERANTWORTUNG BEGINNT AM URSPRUNG, two to three lines of explanatory body text beneath it, and beneath that the underlined link MEHR ÜBER UNSEREN IMPACT ERFAHREN; directly above the footer there is another image band spanning the full page width (a placeholder is fine)."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "footer.fivecols",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "coverage",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "The footer contains five groups: leftmost, an uppercase mission statement plus three small social icons; the VIERI group includes Earthbeat Foundation and Facts & Jewels; the SERVICES group includes the five entries AGB, Datenschutz, Widerrufsrecht, Rücksendungen, Impressum; the KONTAKT group includes Zahlungsmethoden; the SOCIALS group includes Pinterest; the newsletter area simultaneously has an invitation sentence, an editable input field and a button with the copy BEITRETEN; the bottom line is © VIERI Fine Jewellery."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "tone.light",
|
| 81 |
"m": 1,
|
| 82 |
+
"dimension": "visual",
|
| 83 |
"w": 1.0,
|
| 84 |
+
"description": "In the initial (light) state the whole page background is off-white/light gray, and all section-level headings (meaning ICONIC CLOUD COLLECTION, DAS VIERI KONZEPT, VERANTWORTUNG BEGINNT AM URSPRUNG; excluding the hero tagline and the VIERI wordmark in the nav) are uppercase light-weight text without dark-filled heading bars; no black-background large heading blocks appear on the page."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "grid.count42",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "functional",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "The GOLDVAULT KOLLEKTION section sits between the full-width collage image and DAS VIERI KONZEPT, and with no filtering applied its item count reads 42, numbered continuously from VG-001 to VG-042 with no gaps or duplicates."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "grid.price",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "functional",
|
| 97 |
"w": 1.5,
|
| 98 |
+
"description": "Prices are strictly whole euros computed as 380+35×number: VG-001 shows 415 €, VG-017 shows 975 €, VG-042 shows 1850 €, and the price text has no decimal places."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "grid.attrs",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "functional",
|
| 104 |
"w": 1.0,
|
| 105 |
+
"description": "Cards are complete in all five fields with correct values: the VG-006 card simultaneously shows number VG-006, name (including the number and the German category word, e.g. \"VG-006 Ohrringe\"), category Ohrringe, material Platin, price 590 €; additionally VG-005 is Ringe/Fairmined Silber, VG-007 is Ketten, VG-008 is Armbänder, and VG-004 is 18K Recyclinggold."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "grid.tone",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "visual",
|
| 111 |
"w": 1.0,
|
| 112 |
+
"description": "The GOLDVAULT KOLLEKTION block matches the page's tone: the section heading is the same uppercase light-weight text as other sections, the section background remains in the off-white/light-gray family rather than a separate dark or highly saturated background, and card text has no heavy black heading blocks."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "grid.neu",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "functional",
|
| 118 |
"w": 1.0,
|
| 119 |
+
"description": "Exactly 7 items carry the NEU tag, precisely VG-036 through VG-042, and NEU does not appear on VG-035."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "grid.soldout",
|
| 123 |
"m": 2,
|
| 124 |
+
"dimension": "functional",
|
| 125 |
"w": 1.0,
|
| 126 |
+
"description": "Exactly 6 items are marked Ausverkauft, namely VG-007, VG-014, VG-021, VG-028, VG-035, VG-042; these cards still show their respective prices (e.g. VG-014 shows 870 €) but favoriting is unavailable."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "filter.combo",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "functional",
|
| 132 |
"w": 1.5,
|
| 133 |
+
"description": "With category Ringe and material Platin the result is exactly 3 items (VG-009, VG-021, VG-033, item count showing 3); turning on \"in stock only\" reduces it to 2 items (VG-009 695 €, VG-033 1535 €), and VG-021 disappears from the list."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "filter.priceband",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.0,
|
| 140 |
+
"description": "Price band boundaries are correct: unter 500 € yields exactly 3 items (VG-001/002/003); 500–1000 € yields exactly 14 items including VG-004 (520 €) and VG-017 (975 €) and excluding VG-018; über 1000 € yields exactly 25 items."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "page.four",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "interaction",
|
| 146 |
"w": 1.0,
|
| 147 |
+
"description": "With no filter there are 12 items per page, 4 pages in total, and page 4 has only 6 items (VG-037…VG-042); with no filter, switching the sort to price low-to-high makes the first item VG-001 (415 €); after going to page 3, changing any filter or sort automatically returns to page 1, and the total page count is recalculated for the new results."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "chain.multi",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "interaction",
|
| 153 |
"w": 1.5,
|
| 154 |
+
"description": "Complete the chain: select Ringe → add Platin → turn on in stock only → change sort to price high-to-low; the first item is now VG-033 (1535 €) with 2 items in total; clicking its heart shows a wishlist count of 1; then clearing all filters returns the list to 42 items on page 1 with the wishlist count still 1."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "wish.idempotent",
|
| 158 |
"m": 3,
|
| 159 |
+
"dimension": "interaction",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "Every product card has a favorite heart button in its top-right corner, and a wishlist count badge appears next to the shopping bag icon in the top nav; clicking the heart of the same item 3 times in a row leaves the badge value at +1 relative to the start (add→remove→add) rather than accumulating to 3; clicking the heart of a sold-out item (e.g. VG-028) leaves the badge value unchanged."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "filter.empty",
|
| 165 |
"m": 3,
|
| 166 |
+
"dimension": "interaction",
|
| 167 |
"w": 1.0,
|
| 168 |
+
"description": "With Armbänder + unter 500 € selected, the list area shows a no-results message (e.g. Keine Treffer), the item count reads 0, and the pager controls no longer appear on the page."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "theme.persist",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "interaction",
|
| 174 |
"w": 1.5,
|
| 175 |
+
"description": "With \"Ohrringe + über 1000 € + in stock only\" active (result exactly 6 items: VG-018/022/026/030/034/038) and 2 items already favorited, switch to the night theme: afterwards there are still the same 6 items on the same page, the wishlist count is still 2, and the selected states of the filter and sort controls are not reset."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "theme.dark",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "visual",
|
| 181 |
"w": 1.0,
|
| 182 |
+
"description": "Under the night theme the page's main background becomes dark and body text becomes light; the three links on the left of the nav keep their copy and order, VIERI stays horizontally centered, the hero tagline NOT YOUR AVERAGE GOLD. is still readable, and image areas such as the hero and the collage still display as before (they don't disappear or get darkened into gray blocks)."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "theme.badge",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "visual",
|
| 188 |
"w": 1.0,
|
| 189 |
+
"description": "Under the night theme the NEU and Ausverkauft markers still contrast clearly against the dark background and are easily legible, and favoriting on sold-out cards (e.g. VG-042) remains unavailable under the dark theme."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "theme.accent",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "visual",
|
| 195 |
"w": 1.0,
|
| 196 |
+
"description": "The accent color strategy is consistent: the site uses only one accent color, only at a fixed few places (things like the NEU marker and the wishlist count), at the same positions in both the light and night themes; no three or more unrelated highly saturated accent colors appear on the page."
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "theme.toggle",
|
| 200 |
"m": 4,
|
| 201 |
+
"dimension": "interaction",
|
| 202 |
"w": 1.0,
|
| 203 |
+
"description": "The light/dark toggle control is in the right-hand area of the top nav; after clicking it 6 times in a row the page returns to the light theme with background and text colors matching initial load, no dark blocks left behind, and the wishlist count and current filtered result count unchanged throughout."
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "layout.twocol",
|
| 207 |
"m": 5,
|
| 208 |
+
"dimension": "visual",
|
| 209 |
"w": 1.5,
|
| 210 |
+
"description": "At viewport width ≥1024px GOLDVAULT KOLLEKTION is two columns: on the left a filter panel that groups category/material/price/in-stock-only/sort and stays visible while scrolling down, on the right a product grid of 3 per row; at viewport width <640px the filters collapse into an expandable/collapsible button panel and products become single-column."
|
| 211 |
},
|
| 212 |
{
|
| 213 |
"id": "layout.regression",
|
| 214 |
"m": 5,
|
| 215 |
+
"dimension": "functional",
|
| 216 |
"w": 1.5,
|
| 217 |
+
"description": "The filtering logic is not broken by the restructure: in the new layout Ringe + Platin + in stock only still yields exactly 2 items (VG-009, VG-033), it is still 12 per page and still 4 pages with no filter, and the wishlist count still increments/decrements correctly with favoriting."
|
| 218 |
},
|
| 219 |
{
|
| 220 |
"id": "layout.footer3",
|
| 221 |
"m": 5,
|
| 222 |
+
"dimension": "coverage",
|
| 223 |
"w": 1.0,
|
| 224 |
+
"description": "The footer becomes a three-column layout with the newsletter area full-width at the top, yet not one link from the original five groups is lost (SERVICES still includes Impressum, KONTAKT still includes Zahlungsmethoden, VIERI still includes Earthbeat Foundation), and the BEITRETEN button and the © VIERI Fine Jewellery copyright line remain."
|
| 225 |
},
|
| 226 |
{
|
| 227 |
"id": "layout.keeptop",
|
| 228 |
"m": 5,
|
| 229 |
+
"dimension": "visual",
|
| 230 |
"w": 1.0,
|
| 231 |
+
"description": "After the restructure the first screen and the three-image area stay as they were: the top nav is still the three-part structure of left links (BOUTIQUE/VERLOBUNG & EHE/GOLDVAULT 2.0), centered VIERI, and EUR €/Deutsch plus three icons on the right; the tagline NOT YOUR AVERAGE GOLD. is still centered at the bottom of the hero; and in the three-image area the middle image is still taller than the flanking ones with the outlined Cloud Collection button overlaid."
|
| 232 |
},
|
| 233 |
{
|
| 234 |
"id": "layout.darkpanel",
|
| 235 |
"m": 5,
|
| 236 |
+
"dimension": "interaction",
|
| 237 |
"w": 1.0,
|
| 238 |
+
"description": "Switching to the night theme under the new two-column layout makes the left sticky filter panel background and text dark with light text too, with no un-reskinned light residual blocks during scrolling, and the current filtered result count and wishlist count remain unchanged after the switch."
|
| 239 |
}
|
| 240 |
],
|
| 241 |
"inject": null,
|
| 242 |
"qc_static": [],
|
| 243 |
"review_status": "needs_human"
|
| 244 |
+
}
|
tasks/c10/task.json
CHANGED
|
@@ -3,200 +3,200 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {},
|
| 17 |
-
"title": "
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
-
"operator": "
|
| 21 |
-
"request": "
|
| 22 |
},
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "list.count.paging",
|
| 39 |
"m": 1,
|
| 40 |
-
"dimension": "
|
| 41 |
"w": 1.5,
|
| 42 |
-
"description": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "sort.default.top3",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "sort.price.rating.tie",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.5,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "filter.combo.3",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.5,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "search.substring.empty",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.0,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "brand.card.fields",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "layout.sidebar.sticky",
|
| 81 |
"m": 2,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.5,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "chips.remove.keyword",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "chips.remove.filter",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.0,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "chips.clearall",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.5,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "page.reset",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.0,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "layout.regress",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.5,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "wizard.steps.bounds",
|
| 123 |
"m": 3,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.5,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "price.calc.257",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.5,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "price.calc.35",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.0,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "unavailable.block",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.5,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "booked.badge.persist",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.5,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "confirm.idempotent",
|
| 158 |
"m": 3,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "theme.toggle.global",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "accent.single.color",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.5,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "theme.keep.layout",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.5,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "theme.keep.state",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.5,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "theme.contrast",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.0,
|
| 196 |
-
"description": "
|
| 197 |
}
|
| 198 |
],
|
| 199 |
"inject": null,
|
| 200 |
"qc_static": [],
|
| 201 |
"review_status": "needs_human"
|
| 202 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"restructure layout",
|
| 8 |
+
"add section",
|
| 9 |
+
"restyle"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"non-local changes"
|
| 14 |
],
|
| 15 |
+
"domain": "local services",
|
| 16 |
"seed_meta": {},
|
| 17 |
+
"title": "Xiangkou Life · Community On-Demand Home Services Platform",
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
+
"operator": "generate",
|
| 21 |
+
"request": "We're launching a community local-services site, called 'Xiangkou Life'. Fix the city as 'Linjiang' for now and show it next to the brand name. The first screen is all about finding a provider: a brand bar with a search box on top (substring match on provider name is fine — partial input should find matches), below it category filters (All / Cleaning / Repair / Errands / Care), area filters (All / East Side / West Side / Old Town / Jiangbei), and a sort dropdown: the default 'Comprehensive' sorts by order count high to low; the other two are 'Price: low to high' and 'Rating: high to low'. For tied ratings, put the one with more orders first; for tied prices, put the higher rating first. Show 9 providers per page, with page numbers below that can be clicked to page through. Above the list there should be a result count written as 'X providers in total', updating after filtering. Each provider gets a card showing name, category, area, starting price (prefixed with ¥), rating and order count, and it must be obvious at a glance whether they can be booked today. If a filter leaves nothing, don't leave a blank — show 'No providers match — try different filters'.\n\nOps sent over a rather messy roster; let me copy it down, around forty providers, don't miss any:\nCleaning — Sister Li Home Services (East Side, 89, 4.8, 1203 orders, available today); Clean Home (West Side, 99, 4.6, 876, available); A-Zhen Hourly Cleaning (Old Town, 68, 4.9, 1544, not available today); Blue Sky Cleaning (Jiangbei, 119, 4.5, 402, available); Wan Jia Clean (East Side, 79, 4.7, 991, not available today); Xiao Lin Window Cleaning (West Side, 59, 4.4, 318, available); Qingchuan Home Services (Old Town, 129, 4.9, 1330, available); Neighborhood Help Cleaning (Jiangbei, 88, 4.3, 245, available); Fresh Everyday (East Side, 109, 4.6, 655, not available today); Auntie Wang Deep Clean (Old Town, 159, 4.8, 720, available); LOHAS Mite Removal (Jiangbei, 139, 4.2, 180, available).\nRepair — Old Zhang Appliance Repair (Old Town, 49, 4.7, 2100, available); A-Bin Air Conditioning (East Side, 129, 4.8, 1460, available); Plumbing & Electrical Rapid Repair (West Side, 79, 4.5, 980, available); Jiangbei Pipe Unclogging (Jiangbei, 69, 4.4, 610, not available today); Bright Locksmith (East Side, 99, 4.6, 530, available); Xiao Chen Phone Repair On-Site (West Side, 39, 4.3, 1720, available); Thermostat Water Heater (Old Town, 149, 4.9, 460, available); All-Round Home Repair (Jiangbei, 89, 4.5, 1180, available); Old Zhou Lighting Installation (East Side, 59, 4.2, 275, not available today); Washing Machine Doctor (West Side, 109, 4.7, 840, available); Door & Window Repair King (Old Town, 119, 4.1, 150, available).\nErrands — Flash Courier A-Jun (East Side, 15, 4.6, 3200, available); Old Town Express (Old Town, 18, 4.5, 2450, available); Jiangbei Errands (Jiangbei, 22, 4.3, 890, available); Westside Urgent Delivery (West Side, 25, 4.7, 1560, not available today); Queue Whiz (East Side, 35, 4.4, 470, available); Night Errand Team (Old Town, 45, 4.8, 320, available); Medicine Pickup (West Side, 28, 4.9, 1090, available); Document Courier (Jiangbei, 32, 4.2, 640, available); Fresh Grocery Pickup (East Side, 19, 4.5, 1875, not available today); Pet Transport Errands (Old Town, 55, 4.6, 260, available).\nCare — Warm Sun Companionship (West Side, 199, 4.9, 540, available); Nanny Zhang (East Side, 259, 4.8, 410, not available today); Senior Bath Assistance (Old Town, 169, 4.7, 230, available); Night Bedside Care (Jiangbei, 229, 4.6, 310, available); Rehab Massage Home Visit (West Side, 189, 4.5, 620, available); Postpartum Care (East Side, 299, 4.9, 175, available); Pet Feeding Home Visit (Old Town, 79, 4.4, 980, available); Dog Walking Butler (Jiangbei, 49, 4.3, 1420, available); Post-Surgery Care (West Side, 209, 4.2, 140, not available today); Medical Escort & Appointment Booking (East Side, 149, 4.8, 760, available).\nDon't build the ordering flow yet — this version just needs to make finding a provider smooth. Keep the overall style clean, with a light background, not too busy."
|
| 22 |
},
|
| 23 |
{
|
| 24 |
+
"operator": "restructure layout",
|
| 25 |
+
"request": "Users say the filter bar piled up at the top is too cramped — it's fine on mobile, but on desktop you can't see many providers on one screen. Change the layout: on wide screens, move all four control groups (search box, category, area, sort) into a fixed filter column on the left (move the search box over too — no search in the brand bar anymore), leaving the right side for the results list; make the brand bar sticky so it stays on top when scrolling, so people can always see the brand and the city. Also, users often can't remember what they've filtered, so above the results area list each currently active condition (the current search keyword counts as one too); each can be dismissed individually, and dismissing the keyword chip is equivalent to clearing the search while leaving the other conditions untouched; next to that add 'Clear all' — to be clear, 'Clear all' only clears the filter conditions and the search keyword, and keeps the user's current sort choice, don't reset that for them. Another old bug: after going to page 3 and then changing a filter, the page number stays on page 3 and looks like there are no results — after changing a filter, go back to page 1. This is a layout move, so don't mess up the numbers and rules from the previous version: the count, sorting rules, 9 per page, and paging must all stay exactly the same."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "add section",
|
| 29 |
+
"request": "Time to take bookings. Clicking 'Book' on a card opens a three-step booking flow: step 1, pick a visit time slot — morning, afternoon or evening; one must be selected to go on. Step 2, enter the service duration, which can only be between 1 and 4 hours — outside that range it can't be entered/selected — and decide whether to add 'Rush today'. Step 3 is the confirmation page, spelling out the provider name, the selected slot, how many hours, how the fee was calculated (starting price × hours, how much the rush added, how much was discounted) and the final amount to pay, with a 'Confirm booking' button at the bottom. The money math has been checked with finance: starting price × hours, plus 20 if rush, then if the result is 200 or more subtract 30; ignore the decimals — everything is in whole numbers. For providers who can't be booked today, the booking entry on the card must not be clickable, and naturally rush doesn't apply. After booking, the provider's card should keep a 'Booked' marker, and the top should show a 'My bookings' number, incremented by one per completed booking; 'Booked' is just a marker — the booking entry stays, and the same provider can be booked again, incrementing the number again. If the user changes filters or pages away and comes back, the marker and the number must still be there. Users misclick all the time, so clicking 'Confirm booking' several times on the confirmation page must count as only one booking. The booking button and the 'Booked' marker must stand out, so people can see at a glance whom they've booked."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "restyle",
|
| 33 |
+
"request": "The brand has settled on a new direction: turn the whole site into a night look — dark background, light text — and add a toggle in the brand bar to switch back and forth between the day and night skins. The style requirement is restrained and minimal, not garish; the site keeps a single accent color, used consistently from start to finish wherever something needs to catch the eye. Status indicators like bookable/not bookable may use a little color of their own, but only on the status indicator itself — don't let it spread elsewhere. When reskinning, be careful not to break what previous versions built: the left/right split, the sticky brand bar, condition chip dismissal and clearing, the count and pagination all stay as they are, and how many providers have been booked and how much was quoted must not change; under the night look you must still be able to tell at a glance who can be booked today and who can't, and text must not smear into the background."
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "list.count.paging",
|
| 39 |
"m": 1,
|
| 40 |
+
"dimension": "functional",
|
| 41 |
"w": 1.5,
|
| 42 |
+
"description": "With no filtering on the first screen, the result count shows '42 providers in total', the list shows exactly 9 cards per page over 5 pages, and page 5 has exactly 6 cards left."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "sort.default.top3",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "functional",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "Under the default 'Comprehensive' sort, the first three cards on page 1 are, in order, Flash Courier A-Jun (3200 orders), Old Town Express (2450 orders), Old Zhang Appliance Repair (2100 orders)."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "sort.price.rating.tie",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "functional",
|
| 55 |
"w": 1.5,
|
| 56 |
+
"description": "Switching to 'Price: low to high', the first three on page 1 are, in order, Flash Courier A-Jun ¥15, Old Town Express ¥18, Fresh Grocery Pickup ¥19; the first on page 2 is Night Errand Team ¥45; and among the ¥49 providers, Old Zhang Appliance Repair (4.7) comes before Dog Walking Butler (4.3); switching to 'Rating: high to low', the first is A-Zhen Hourly Cleaning (4.9, 1544 orders) rather than the other 4.9-rated providers."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "filter.combo.3",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "functional",
|
| 62 |
"w": 1.5,
|
| 63 |
+
"description": "With category 'Errands' and area 'East Side' both selected, only 3 cards remain in the list (Flash Courier A-Jun, Queue Whiz, Fresh Grocery Pickup), the count shows '3 providers in total', and only 1 page remains."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "search.substring.empty",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "functional",
|
| 69 |
"w": 1.0,
|
| 70 |
+
"description": "Typing 'Auntie' in the search box matches only the Auntie Wang Deep Clean card with the count showing '1 provider in total' (demonstrating substring containment matching rather than exact full-name matching); changing it to zzz leaves no cards, the count is 0, and the copy 'No providers match — try different filters' appears."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "brand.card.fields",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "visual",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "The brand bar simultaneously shows the site name 'Xiangkou Life' and the city 'Linjiang' right next to it; any provider card shows all six of name, category, area, ¥-prefixed starting price, rating and order count, and A-Zhen Hourly Cleaning and Sister Li Home Services show a clearly visible difference in today's bookability status."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "layout.sidebar.sticky",
|
| 81 |
"m": 2,
|
| 82 |
+
"dimension": "visual",
|
| 83 |
"w": 1.5,
|
| 84 |
+
"description": "On wide screens all four control groups — search box, category, area, sort — are in the left filter column, the search box no longer appears in the brand bar, and the results list is on the right; scrolling down through the results area keeps the brand bar fixed at the top of the viewport."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "chips.remove.keyword",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "interaction",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "First search 'Repair', then select category 'Repair' + area 'West Side'; above the results area 3 condition chips appear (one of them matching the keyword 'Repair'), and the list has 2 providers (Plumbing & Electrical Rapid Repair, Xiao Chen Phone Repair On-Site); dismissing only the keyword chip clears the search box, leaves 2 chips, and the list becomes 3 providers (Plumbing & Electrical Rapid Repair, Xiao Chen Phone Repair On-Site, Washing Machine Doctor)."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "chips.remove.filter",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "interaction",
|
| 97 |
"w": 1.0,
|
| 98 |
+
"description": "With only 'Repair' + 'West Side' selected (no keyword), dismissing the 'West Side' chip leaves 1 chip, and the list becomes all 11 Repair providers with the count showing '11 providers in total'."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "chips.clearall",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "functional",
|
| 104 |
"w": 1.5,
|
| 105 |
+
"description": "With filters selected and a keyword in the search box, clicking 'Clear all' removes all condition chips, clears the search box and returns the count to '42 providers in total', while the current sort is not reset (if price low-to-high was selected, the first is still Flash Courier A-Jun ¥15)."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "page.reset",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "interaction",
|
| 111 |
"w": 1.0,
|
| 112 |
+
"description": "After going to page 3, changing any filter condition immediately returns the list to page 1 with the page-number highlight on 1, and no blank results page appears."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "layout.regress",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "functional",
|
| 118 |
"w": 1.5,
|
| 119 |
+
"description": "After the redesign the 9-per-page rule and the counts still hold: selecting only category 'Cleaning' shows a count of '11 providers in total' over 2 pages, with exactly 2 cards on page 2."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "wizard.steps.bounds",
|
| 123 |
"m": 3,
|
| 124 |
+
"dimension": "interaction",
|
| 125 |
"w": 1.5,
|
| 126 |
+
"description": "Clicking 'Book' on a bookable provider shows the three-step flow with step 1 marked as current; step 1 shows the three slot options morning/afternoon/evening; without selecting a slot you cannot proceed to step 2 (next is disabled or clicking does nothing); on step 2 the duration can only be 1 to 4 hours and cannot be set to 0 or 5."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "price.calc.257",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "functional",
|
| 132 |
"w": 1.5,
|
| 133 |
+
"description": "For Sister Li Home Services (¥89), selecting 2 hours without rush shows an amount due of 178 on the confirmation page; changing to 3 hours and ticking 'Rush today' shows on the confirmation page the provider name 'Sister Li Home Services', the selected slot, 3 hours, and the fee breakdown (89×3=267, rush +20, 30 off for 200+), with the final amount due 257."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "price.calc.35",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.0,
|
| 140 |
+
"description": "For Flash Courier A-Jun (¥15), selecting 1 hour and ticking rush shows an amount due of 35 on the confirmation page, without triggering the 30-off-for-200 rule."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "unavailable.block",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "interaction",
|
| 146 |
"w": 1.5,
|
| 147 |
+
"description": "On cards of providers who can't be booked today (such as A-Zhen Hourly Cleaning, Fresh Grocery Pickup, Westside Urgent Delivery) the booking entry is disabled and clicking does not open the three-step flow, while clicking on bookable providers like Sister Li Home Services opens it normally."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "booked.badge.persist",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "functional",
|
| 153 |
"w": 1.5,
|
| 154 |
+
"description": "After completing one booking, that provider's card shows the 'Booked' marker and the top 'My bookings' shows 1; after booking another it becomes 2; switching category filters or paging away and back, both 'Booked' markers and the number 2 are still there; at this point clicking Book again on the already-marked Sister Li Home Services still opens the three-step flow normally and completes a booking, and the number becomes 3."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "confirm.idempotent",
|
| 158 |
"m": 3,
|
| 159 |
+
"dimension": "interaction",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "Clicking 'Confirm booking' 3 times in a row on the confirmation page increases 'My bookings' by only 1 (it doesn't become +3)."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "theme.toggle.global",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "visual",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "After clicking the skin toggle in the brand bar, the brand bar, left filter column, result cards and booking-flow modal all switch simultaneously to dark background with light text, with no large areas still on a light background left on the page; clicking again switches back to the day skin."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "accent.single.color",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "visual",
|
| 174 |
"w": 1.5,
|
| 175 |
+
"description": "Under both the day and night skins, the Book button, 'Booked' marker, current page-number highlight and selected condition chips use the same color (same hue); apart from this one accent color and the status colors used only on the bookable/not-bookable indicator itself, no other highly saturated decorative colors appear."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "theme.keep.layout",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "functional",
|
| 181 |
"w": 1.5,
|
| 182 |
+
"description": "After switching to the night skin the left/right split and sticky brand bar remain, and condition chips can still be dismissed individually and cleared; selecting 'Errands' + 'East Side' then still yields 3 cards with the count '3 providers in total'."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "theme.keep.state",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "functional",
|
| 188 |
"w": 1.5,
|
| 189 |
+
"description": "With 2 providers already booked before the reskin, after switching skins 'My bookings' is still 2 and the two cards' 'Booked' markers are not lost; going through 3 hours + rush for Sister Li Home Services at this point still shows an amount due of 257."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "theme.contrast",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "visual",
|
| 195 |
"w": 1.0,
|
| 196 |
+
"description": "Under the night skin the 'available today' and 'not available' states remain distinguishable at a glance, card body text (name, price, rating) is clearly separated from the background, and no near-same-color text on dark background appears."
|
| 197 |
}
|
| 198 |
],
|
| 199 |
"inject": null,
|
| 200 |
"qc_static": [],
|
| 201 |
"review_status": "needs_human"
|
| 202 |
+
}
|
tasks/c11/task.json
CHANGED
|
@@ -3,243 +3,243 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
],
|
| 17 |
-
"domain": "
|
| 18 |
"repair": true,
|
| 19 |
-
"inject_type": "
|
| 20 |
"seed_meta": {
|
| 21 |
"repo_src": null,
|
| 22 |
"exclude_slug": "react_zh_001500",
|
| 23 |
"repo_shot": true
|
| 24 |
},
|
| 25 |
-
"title": "Zeus Jones
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "panel.placement",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.0,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "panel.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "panel.sort.default",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "panel.fields",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.0,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "panel.skin.match",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "filter.industry",
|
| 86 |
"m": 2,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.5,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "filter.chain",
|
| 93 |
"m": 2,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.5,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "page.default",
|
| 100 |
"m": 2,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "sort.switch",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "search.resetpage",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "search.empty",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.0,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "reset.idem",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.0,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "fix.cycle",
|
| 135 |
"m": 3,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "fix.noskip",
|
| 142 |
"m": 3,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.0,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "fix.regress.fade",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.0,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "fix.regress.rapid",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.0,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "fix.isolation",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "rwd.noscroll",
|
| 170 |
"m": 4,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "375×812
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "rwd.panel",
|
| 177 |
"m": 4,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "375
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "rwd.hero",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.0,
|
| 187 |
-
"description": "375
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "rwd.state",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "rwd.desktop",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "1280
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "theme.toggle",
|
| 205 |
"m": 5,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "theme.preserve.dark",
|
| 212 |
"m": 5,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.5,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "theme.state.keep",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "theme.accent.single",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.0,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "theme.contrast",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
}
|
| 238 |
],
|
| 239 |
"inject": {
|
| 240 |
-
"type": "
|
| 241 |
-
"saboteur_prompt": "
|
| 242 |
},
|
| 243 |
"qc_static": [],
|
| 244 |
"review_status": "needs_human"
|
| 245 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"make responsive",
|
| 7 |
+
"repair",
|
| 8 |
+
"add section",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"restyle"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"data scale × combined state",
|
| 15 |
+
"state coupling"
|
| 16 |
],
|
| 17 |
+
"domain": "tool dashboard",
|
| 18 |
"repair": true,
|
| 19 |
+
"inject_type": "Conditional boundary error",
|
| 20 |
"seed_meta": {
|
| 21 |
"repo_src": null,
|
| 22 |
"exclude_slug": "react_zh_001500",
|
| 23 |
"repo_shot": true
|
| 24 |
},
|
| 25 |
+
"title": "Zeus Jones Website: Project Archive Tool Dashboard + Responsive and Dual-Theme Rework",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "add section",
|
| 29 |
+
"request": "Our site currently only has a single case-study carousel and three cards, and the sales team gets asked \"how much work have you actually done\" by clients every day. I want to insert a panel that can page through our project archive, between the \"A few of our friends\" client list and the final \"Should we work together?\" block. Each project entry should show: client name, the type of work, which year, how many weeks it took, the budget (in tens of thousands of dollars), and its current status. At the top of the panel give me a summary line stating how many projects are in the list right now and the total budget of those projects in tens of thousands of dollars — note this must be computed live from the current list, don't hardcode the numbers. Default order is by year, newest to oldest, and within the same year the larger budget first. Style-wise keep it consistent with the site's existing dark tones — don't start over with a big white block; but this is our most persuasive content, so it has to grab attention as soon as someone scrolls here.\n\nThe list I exported from Feishu is a bit messy; transcribe it as-is, don't drop anything or change any numbers:\nBrand strategy has twelve in total — 3M (2019, 12 weeks, 880k, delivered), Allina (2020, 8 weeks, 540k, delivered), Aveda (2021, 16 weeks, 1.2M, in progress), Chipotle (2018, 10 weeks, 660k, delivered), General Mills (2022, 14 weeks, 950k, in progress), Hilton (2019, 9 weeks, 470k, on hold), Kohler (2023, 18 weeks, 1.32M, in progress), Medtronic (2020, 11 weeks, 730k, delivered), Nike (2024, 20 weeks, 1.6M, in progress), Target (2018, 7 weeks, 390k, delivered), UnitedHealthcare (2022, 13 weeks, 860k, delivered), Nestlé (2021, 6 weeks, 310k, on hold).\nProduct design, ten: Plantable (2019, 15 weeks, 1.02M, delivered), Askov Finlayson (2021, 5 weeks, 280k, on hold), Code42 (2020, 12 weeks, 780k, delivered), Facebook (2018, 22 weeks, 1.75M, delivered), Fidelity (2023, 10 weeks, 640k, in progress), Marvin Windows (2022, 8 weeks, 450k, delivered), Minnesota Twins (2019, 9 weeks, 520k, delivered), Blaze Pizza (2024, 4 weeks, 220k, in progress), Athena Jones (2023, 17 weeks, 1.18M, in progress), Nostos (2020, 6 weeks, 330k, on hold).\nContent production, nine: Minnesota United FC (2018, 6 weeks, 300k, delivered), Sliver Studio (2021, 3 weeks, 150k, delivered), Aveda Retail (2022, 7 weeks, 410k, delivered), Target Circle (2019, 5 weeks, 260k, delivered), Hilton Grand (2023, 11 weeks, 700k, in progress), 3M Futures (2024, 9 weeks, 580k, in progress), Chipotle Real (2020, 4 weeks, 210k, on hold), Kohler Bold (2018, 8 weeks, 440k, delivered), Nike Grind (2022, 12 weeks, 810k, delivered).\nUser research, seven: Allina Health Lab (2021, 6 weeks, 340k, delivered), Medtronic Care (2023, 10 weeks, 620k, in progress), Fidelity Wealth (2019, 5 weeks, 250k, delivered), General Mills Kitchen (2020, 7 weeks, 380k, delivered), Facebook Inclusive (2022, 9 weeks, 550k, on hold), Marvin Light (2024, 3 weeks, 180k, in progress), Plantable Clinic (2018, 4 weeks, 200k, delivered).\nCampaigns, also seven: Askov North (2022, 5 weeks, 290k, delivered), Nestlé Bloom (2019, 6 weeks, 360k, delivered), Minnesota Twins Opening (2023, 4 weeks, 240k, in progress), Code42 Secure (2021, 8 weeks, 490k, delivered), Blaze Fire (2018, 3 weeks, 170k, on hold), UnitedHealthcare Move (2024, 7 weeks, 430k, in progress), Athena Rise (2020, 10 weeks, 680k, delivered)."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "wire up data",
|
| 33 |
+
"request": "Laying out forty-odd entries in the archive panel at once is too long, and clients can't find the ones they care about. Add genuinely usable filtering: switch by type with one click (there should be an \"All\"), switch by status too (delivered / in progress / on hold, also with \"All\"), plus a client-name search box — don't be picky about case. Provide at least three sorts: default year newest-to-oldest, budget high-to-low, duration shortest-to-longest. Don't let the list run on endlessly — 8 per page, with pager controls below the list. A few details don't forget: as soon as you change a filter, change the search box, or change the sort, the page number must go back to page 1, otherwise clients page deep and then search and see a blank page; the summary line at the top must follow the currently filtered results, recomputing both the count and the total budget; when nothing matches there must be a clear empty-state message, not just a stretch of black; also give a one-click reset that restores filters, search and sort to exactly as they were on first entering the page."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "repair",
|
| 37 |
+
"request": "Another old bug to fix while you're at it: in the \"What we're working on\" carousel above, I keep clicking Next on the right, but the sixth piece of copy (the one about new rituals for sport) never shows up — after the fifth it jumps back to the first, and the counter in the top right has never shown 6. It's embarrassing when clients spot-check content and it never surfaces. While fixing it, don't lose the current fade-out/fade-in switching feel, and don't touch the white capsule button next to it."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "make responsive",
|
| 41 |
+
"request": "The boss opened our site on his phone and the page has to be dragged sideways to see it all — the header nav runs right off the screen, and the new archive panel is crammed into a mess on small screens. Clean the whole site up at phone width (assume 375 wide): no horizontal scrollbar, the header logo and nav laid out within one screen, the first-screen headline scaled down so it can be read in full, the archive panel's projects in a single column one per row, and the filter and sort controls either wrapping or horizontally scrollable — but each one must be reachable and its text must not be cut off. On desktop (above 1280) the original layout must not change at all — the two-end layout with logo left and nav right, the first-screen headline size, and the horizontal card row must all stay as they are (the theme toggle that the next requirement adds to the header is the exception — it's allowed to appear in the header)."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "restyle",
|
| 45 |
+
"request": "Watching this dark site on a big screen in the showroom during the day is dreary, and the media team wants a light version too. Add a theme toggle in the header with two positions: the current dark theme is the default, the other is light — light background, dark text, with the archive panel's cards switching to a light background with faint separators, comfortable to read. Keep the overall style restrained, not garish; but the filter selected state and current page number need some accent color anyway — pick one yourself, but the site may have only this one accent color, don't use green here and orange there. When switching back to dark, the original look of the hero gradient, the grain texture, the footer and the white-background black-text capsule button must stay exactly as they were. One more important thing: switching the theme is only a reskin — what I've filtered in the archive panel, which page I'm on, and which slide the carousel is on must all be preserved after the switch, don't reset them for me."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "panel.placement",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "coverage",
|
| 53 |
"w": 1.0,
|
| 54 |
+
"description": "The new project archive panel sits after the \"A few of our friends\" client list section and before the \"Should we work together?\" CTA; with no filtering applied the list has 6 pages in total, with exactly 8 project entries rendered on page 1."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "panel.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "With no filtering, the panel's top summary line shows a project count of 45 and a total budget of 2612 (in tens of thousands of dollars), both numbers exactly matching."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "panel.sort.default",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "Under the default order (year newest to oldest, larger budget first within the same year) the first three are, in order, Nike (2024, 1.6M), 3M Futures (2024, 580k), UnitedHealthcare Move (2024, 430k)."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "panel.fields",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "visual",
|
| 74 |
"w": 1.0,
|
| 75 |
+
"description": "Take the Kohler entry at random: the client name, type \"Brand strategy\", year 2023, duration 18 weeks, budget 1.32M and status \"In progress\" — all six fields are visible within the same entry with values matching the list."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "panel.skin.match",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "visual",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "The panel follows the site's dark tones (background in the same family as #1a1a1a, body text white or light gray), with no large white blocks; the existing colors and copy of the adjacent friends section and CTA section are unchanged."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "filter.industry",
|
| 86 |
"m": 2,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.5,
|
| 89 |
+
"description": "After clicking type \"Product design\", the summary shows 10 projects, 7.17M total, and the list spans 2 pages with exactly 2 entries on page 2."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "filter.chain",
|
| 93 |
"m": 2,
|
| 94 |
+
"dimension": "interaction",
|
| 95 |
"w": 1.5,
|
| 96 |
+
"description": "Full chain: select \"Product design\", go to page 2, then select status \"In progress\"; the page number automatically returns to page 1, the result is exactly 3 entries in the order Blaze Pizza, Athena Jones, Fidelity, the summary shows 3 projects, 2.04M total, and no page 2 exists."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "page.default",
|
| 100 |
"m": 2,
|
| 101 |
+
"dimension": "functional",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "With no filtering there are 8 per page, 6 pages in total, 5 on page 6; the last entry on page 1 (the 8th) is Hilton Grand (2023, 700k); the pager controls are below the list (not above it or to the side)."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "sort.switch",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "functional",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "With no filter, switching to \"Budget high-to-low\" makes the first entry Facebook (1.75M); switching to \"Duration shortest-to-longest\" makes the first three on page 1 all 3 weeks; each sort switch returns the page to page 1."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "search.resetpage",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "With no filter, first go to page 2, then type lowercase min in the search box: the page number automatically returns to 1, the list is exactly 3 entries all with client names containing Minnesota, and the summary shows 3 projects."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "search.empty",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.0,
|
| 124 |
+
"description": "After changing the search term to zzz, a clear empty-state message appears, the summary becomes 0 projects and 0 total, and no clickable page numbers remain."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "reset.idem",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.0,
|
| 131 |
+
"description": "Clicking the one-click reset in the empty state clears the search box, returns type and status to \"All\" and the sort to default, and restores the list to 6 pages with the first entry on page 1 being Nike; clicking reset twice more in a row leaves the result completely unchanged."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "fix.cycle",
|
| 135 |
"m": 3,
|
| 136 |
+
"dimension": "functional",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "Clicking Next repeatedly (waiting each time for the transition to finish) brings up the counter \"6 of 6\" and shows the sixth copy Creating new rituals for how the next generation experiences sport.; one more click returns to \"1 of 6\"."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "fix.noskip",
|
| 142 |
"m": 3,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.0,
|
| 145 |
+
"description": "Starting from \"1 of 6\", clicking Next 5 times in a row gives counters strictly 2, 3, 4, 5, 6 of 6 — the fifth is followed by the sixth rather than jumping back to the first — and each of the 6 pieces of copy appears exactly once with no repeats."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "fix.regress.fade",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.0,
|
| 152 |
+
"description": "Regression: after clicking Next the copy still fades out and then in (about a 0.3s transition) rather than switching instantly, and the white-background black-text \"How'd you do that?\" capsule button keeps the same position and style as before the fix."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "fix.regress.rapid",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "interaction",
|
| 158 |
"w": 1.0,
|
| 159 |
+
"description": "Regression: rapidly clicking Next three times while the transition hasn't finished advances the counter by only one (e.g. 3 of 6 becomes 4 of 6), with no double jumps, no \"7 of 6\" and no blank copy."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "fix.isolation",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "functional",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "Cross-section: first filter the archive panel to \"In progress\" and go to page 2 (5 entries on that page, summary 13 projects 9.86M), then click the carousel's Next a few times: the panel is still on page 2 with the entry count and summary numbers completely unchanged."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "rwd.noscroll",
|
| 170 |
"m": 4,
|
| 171 |
+
"dimension": "visual",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "At a 375×812 viewport the page has no horizontal scroll (scrollable width does not exceed the viewport width), and the header logo and all three nav items are visible within the screen without overlapping each other."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "rwd.panel",
|
| 177 |
"m": 4,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "At 375 wide the archive panel entries are arranged in a single column (no two projects in the same row), all filter and sort controls are clickable/reachable (wrapping or horizontal scrolling both fine), and field text is not clipped or overlapping."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "rwd.hero",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.0,
|
| 187 |
+
"description": "At 375 wide the whole first-screen headline is fully readable without exceeding the right edge of the viewport, and its font size is clearly smaller than the desktop 78px."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "rwd.state",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "Cross-requirement: at 375 wide, performing \"type Content production + status delivered\" gives 6 entries and a summary of 6 projects, 2.37M — exactly the same entry count and totals as the same operation at 1280 wide."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "rwd.desktop",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "visual",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "At 1280 wide and above the first-screen headline is still at the 78px-class large size, the header keeps the two-end layout with logo left and nav right, and the card row is still horizontal — all as before the rework (the header is allowed one extra theme toggle from requirement 5; otherwise nothing may deform due to mobile adaptation or reskinning)."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "theme.toggle",
|
| 205 |
"m": 5,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "A theme toggle exists in the header and the initial load is dark; clicking it switches the whole page to light background with dark text (page background clearly lighter, body text darker) with the archive panel cards on a light background with faint separators; clicking again fully returns to dark."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "theme.preserve.dark",
|
| 212 |
"m": 5,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.5,
|
| 215 |
+
"description": "After switching to light and back to dark, the hero's colored gradient and grain texture, the footer colors, and the white-background black-text capsule button match the initial state, with no residual light background or text color shift."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "theme.state.keep",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "functional",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "Cross-requirement: first filter type \"Brand strategy\" + sort \"Budget high-to-low\" and go to page 2 (4 entries on that page), and set the carousel to \"5 of 6\", then switch the theme; after switching the panel is still on page 2, the filter and sort are unchanged, the first entry on that page is still Allina (540k), and the carousel still shows \"5 of 6\"."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "theme.accent.single",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "visual",
|
| 228 |
"w": 1.0,
|
| 229 |
+
"description": "The whole site uses only one accent color: the highlight color for the filter selected state and the current page number is the same value, and it keeps the same hue under both the dark and light themes, with no second colored accent introduced elsewhere on the page."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "theme.contrast",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "visual",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Under the light theme the archive panel body text, filter control text and empty-state message are all dark text and clearly readable, with no case of light text on a light background being unreadable."
|
| 237 |
}
|
| 238 |
],
|
| 239 |
"inject": {
|
| 240 |
+
"type": "Conditional boundary error",
|
| 241 |
+
"saboteur_prompt": "In the next function of src/components/WorkCarousel.jsx, plant an off-by-one conditional boundary defect: change the index advancing logic so it wraps once it reaches the second-to-last item, e.g. changing setIndex((i) => (i + 1) % SLIDES.length) to setIndex((i) => (i + 1 >= SLIDES.length - 1 ? 0 : i + 1)), so that the 6th item (index 5) can never be shown and the counter tops out at 5 of 6. Requirements: do not change the SLIDES array contents or count, do not change FADE_MS or the fade transition logic, do not change the leaving rapid-click guard, do not change the button or any CSS, produce no console errors or warnings, leave no comments or suspicious variable names — the change should look like a normal boundary check."
|
| 242 |
},
|
| 243 |
"qc_static": [],
|
| 244 |
"review_status": "needs_human"
|
| 245 |
+
}
|
tasks/c12/task.json
CHANGED
|
@@ -3,252 +3,252 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
],
|
| 17 |
-
"domain": "
|
| 18 |
"repair": true,
|
| 19 |
-
"inject_type": "
|
| 20 |
"seed_meta": {
|
| 21 |
"repo_src": null,
|
| 22 |
"exclude_slug": "react_zh_000043",
|
| 23 |
"repo_shot": true
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "fix.highlight.sync",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "fix.cols.match",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.0,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "fix.idempotent",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.0,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "fix.section.isolated",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.0,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "fix.responsive.regression",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "fix.stagger.regression",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "data.count.42",
|
| 93 |
"m": 2,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.5,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "data.price.exact",
|
| 100 |
"m": 2,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.5,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "data.occupied.set",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "data.slot.fields",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.0,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "data.placement",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.0,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "flow.combo.diagonal",
|
| 128 |
"m": 3,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "flow.sort.asc",
|
| 135 |
"m": 3,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.0,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "flow.filter.studio",
|
| 142 |
"m": 3,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.0,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "cart.total.exact",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "cart.add.rules",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.0,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "cart.clear.all",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.0,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "chain.submit.updates",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "layout.two.col",
|
| 177 |
"m": 4,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.5,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "layout.narrow.bar",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.0,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "layout.state.preserved",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "layout.legacy.intact",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.5,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "layout.nocollide",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.0,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "skin.toggle.global",
|
| 212 |
"m": 5,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.5,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "skin.hatch.dark",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.0,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "skin.accent.single",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "skin.state.persist",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.5,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "skin.contrast",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.0,
|
| 243 |
-
"description": "
|
| 244 |
}
|
| 245 |
],
|
| 246 |
"inject": {
|
| 247 |
-
"type": "
|
| 248 |
-
"saboteur_prompt": "
|
| 249 |
},
|
| 250 |
"qc_static": [
|
| 251 |
-
"bad dimensions {'
|
| 252 |
],
|
| 253 |
"review_status": "qc_fail"
|
| 254 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"repair",
|
| 7 |
+
"make interactive",
|
| 8 |
+
"restyle",
|
| 9 |
+
"restructure layout",
|
| 10 |
+
"wire up data"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"boundary and error paths",
|
| 15 |
+
"exact numeric assertions"
|
| 16 |
],
|
| 17 |
+
"domain": "booking service",
|
| 18 |
"repair": true,
|
| 19 |
+
"inject_type": "Missed state update",
|
| 20 |
"seed_meta": {
|
| 21 |
"repo_src": null,
|
| 22 |
"exclude_slug": "react_zh_000043",
|
| 23 |
"repo_shot": true
|
| 24 |
},
|
| 25 |
+
"title": "Photo Studio Booking Calendar: From Bug Fix to Two-Column Booking Desk and Day/Night Dual Skin",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "repair",
|
| 29 |
+
"request": "First deal with an old bug. Ops reports: the three layout-density icons on the right of each project's title row in the portfolio — clicking one does immediately change the image layout below, but the highlighted icon stays on the previously selected position, and only when you click another icon does the highlight lag over, so it looks like two things are selected. On first page load it's correct, but the moment you click it goes out of sync. Please fix it so the one you click is the one that lights up, with the highlight and the actual column count pointing to the same value at all times. While you're at it, confirm you haven't broken anything around it: clicking the same icon repeatedly must not jump around, changing one project's density must not affect other projects, on narrow screens (browser window dragged narrower than 1100px) the icon row still doesn't appear and the grid is still two columns, and on desktop the original staggered arrangement and the hatched placeholder blocks must stay as they are."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "wire up data",
|
| 33 |
+
"request": "We want to push this personal site one step toward \"taking on work\": below the opening self-introduction, before the portfolio projects begin, add a whole \"Calendar & Booking\" block. The content is the rental availability of three studios over the next two weeks — the black studio Studio N, the white studio Studio W, and the outdoor deck Deck. Dates run from March 4, 2026 (Wednesday) through March 17 (Tuesday), one full-day slot per studio per day, so that's the total number of entries — the number shown on the page must match. On prices: black studio 1800 a day on weekdays, white studio 1500, deck 1200; Saturdays and Sundays are weekdays price plus twenty percent. The sold portion I've recorded like this: black studio March 5, 6 and 12 are taken by the Bentley shoot; white studio the 7th is booked by a client, and the 13th and 14th shouldn't be released either; the deck has the 4th and 15th booked; also the whole venue is closed for maintenance on the 9th, so none of the three studios can be booked. Each entry must show the studio name, the date (with day of week) and that day's price, and the occupied ones must be clearly marked as unbookable. At the top of this block give me a summary line: how many entries are released in total, how many are still bookable, and how many are occupied — the three numbers must line up exactly with what's actually in the list below. Leave the existing top nav and the footer's \"Lets work together\" plus four links alone."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "make interactive",
|
| 37 |
+
"request": "The calendar list needs to be filterable, selectable and orderable. The filtering part: a studio filter (All / Studio N / Studio W / Deck), an \"available only\" toggle, and a sort (default by date order, plus price low-to-high and high-to-low — all three sort options must work); there are many entries so show at most 12 per page, with Previous and Next both clickable and correct in both directions, and returning to page 1 whenever a filter or sort changes. The selecting and ordering part: bookable entries can be added to the booking list on the right, occupied ones can't; clicking the same entry repeatedly must not double-count; entries in the booking list can be removed individually, and there must be a \"Clear\" entry to clear them all at once, with an empty-state message when cleared down to nothing. The money works like this: add up the prices of the selected slots, and an order with 3 or more days (inclusive) gets 12% off the whole thing, truncated to remove any decimals; the amount saved must be visible too; the discount applies only to the slot fee, and each order has a fixed 200 setup service fee added after the discount; when the booking list is empty, don't show that 200 either and the total is 0. Placing an order goes in three steps: first select slots, then fill in the contact (name + phone — missing either one blocks proceeding with a clear message), and finally confirm and submit; after submitting, show a booking success and an order number, clear the booking list, and immediately mark the just-booked slots in the list as occupied, with the summary line numbers updating too. The main booking button must stand out, don't make people look for it."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Right now the booking block is stacked top to bottom and too long — rearrange it: at window width 1100px and above, make it two columns, with filtering, sorting and the slot list on the left and a booking summary on the right — selected count, slot fee, discount, service fee, amount due — with a \"Go to checkout\" entry beneath that starts the contact form when clicked; as you scroll down the list the summary block on the right must stay visible, not scroll off with it. Between 760 and 1100 pixels is up to you, two columns or a transitional form; at 760px and below it must return to a single column, collapsing the summary into a persistent bar at the bottom showing at least the selected count and the amount due, and the numbers must be identical to the desktop column. During the rearrangement nothing existing may be affected: the filter, sort, current page number and the contents of the booking list must not be reset when the window is resized wider or narrower; the portfolio project area below still runs section by section after the calendar area, with the three density icons still lighting up on the one you click and syncing the column count; and the footer must not be covered by the summary."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "restyle",
|
| 45 |
+
"request": "Finally add a day/night toggle to the site, with the control at the top. Night is dark background with light text, and the whole site changes together — top, calendar area, portfolio area and footer must all follow, no big glaring white block left; the hatched placeholder blocks in the portfolio grid must darken along with it at night, not become a bright white blotch, and switching back to day must restore the original light-gray hatching. Style-wise keep this site's original restrained black-and-white minimalist feel, not garish — the site keeps only one accent color, shared by the main booking button and the \"selected / added\" states, and this holds under both skins. Switching the skin is only a change of appearance: the booking list's entry count and amount due, the filter and sort, the current page number, and each project's grid density highlight must all stay as they were before the switch. At night the summary line numbers, prices, page numbers and the \"occupied\" markers must also be readable."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "fix.highlight.sync",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "functional",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "After clicking the \"2 columns\" icon on any project's density switcher, only that icon is immediately in the highlighted/selected state while the other two are not; then clicking \"3 columns\" and then \"4 columns\" highlights exactly the one just clicked each time, with no one-step lag."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "fix.cols.match",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.0,
|
| 61 |
+
"description": "After clicking \"2 columns\" that project's grid actually renders 2 columns, \"3 columns\" renders 3, \"4 columns\" renders 4; at any moment the column count represented by the highlighted icon matches the actual column count."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "fix.idempotent",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "interaction",
|
| 67 |
"w": 1.0,
|
| 68 |
+
"description": "Clicking the same density icon 5 times in a row leaves the column count and highlight state unchanged, with no flicker or jumping to another column count."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "fix.section.isolated",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.0,
|
| 75 |
+
"description": "After switching the first project to 2 columns, the remaining project sections each keep their own column count and highlight (default 4 columns), unaffected."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "fix.responsive.regression",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "visual",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "Regression: at viewport width ≤1100px the density switcher is not visible, the project grid is fixed at 2 columns, and the cells no longer carry staggered top offsets."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "fix.stagger.regression",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "visual",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "Regression: at desktop width the original staggered arrangement (some cells offset downward), the hatched placeholder blocks and the image crop ratios present the same as before the fix."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "data.count.42",
|
| 93 |
"m": 2,
|
| 94 |
+
"dimension": "data",
|
| 95 |
"w": 1.5,
|
| 96 |
+
"description": "The calendar area has 42 slots in total (3 studios × 14 days from 3/4–3/17), and the top summary line shows a total of 42, bookable 31, occupied 11, with all three numbers fully matching the actual entry states in the list."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "data.price.exact",
|
| 100 |
"m": 2,
|
| 101 |
+
"dimension": "functional",
|
| 102 |
"w": 1.5,
|
| 103 |
+
"description": "Prices exact: weekdays Studio N 1800, Studio W 1500, Deck 1200; weekends (3/7, 3/8, 3/14, 3/15) are twenty percent higher, i.e. Studio N 2160, Studio W 1800, Deck 1440 — these specific dates' prices can be verified entry by entry on the page."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "data.occupied.set",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "functional",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "The occupied set is exact: all three studios are occupied on 3/9; Studio N on 3/5, 3/6, 3/12, Studio W on 3/7, 3/13, 3/14, and the Deck on 3/4, 3/15 are also occupied, while the remaining 31 entries all show as bookable."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "data.slot.fields",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "coverage",
|
| 116 |
"w": 1.0,
|
| 117 |
+
"description": "Each slot simultaneously shows the studio name, the date (with day of week) and that day's price; occupied entries carry a clear unbookable marker and bookable entries do not."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "data.placement",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "visual",
|
| 123 |
"w": 1.0,
|
| 124 |
+
"description": "The calendar area sits below the self-introduction paragraph and above the first portfolio project (polestar); the top nav is still the five links on the right, the footer is still \"Lets work together\" plus four social links, with copy unchanged."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "flow.combo.diagonal",
|
| 128 |
"m": 3,
|
| 129 |
+
"dimension": "functional",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Combination spot-check with two-way paging: with \"available only\" on and sorted by price high-to-low there are 3 pages, page 3 has exactly 7 entries and every one is a 1200-yuan weekday Deck slot; clicking \"Previous\" on page 3 returns to page 2, which restores to 12 entries with the page indicator showing 2, and clicking \"Next\" again returns to exactly the same page 3 with 7 entries; turning the filter off and using the default date sort gives 4 pages, with 6 entries on the last page."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "flow.sort.asc",
|
| 135 |
"m": 3,
|
| 136 |
+
"dimension": "functional",
|
| 137 |
"w": 1.0,
|
| 138 |
+
"description": "Sorted by price low-to-high (with no filter), the first entry on page 1 is a 1200-yuan weekday Deck slot and prices on that page are non-decreasing from top to bottom; switching to the last page, the final entry is a 2160-yuan weekend Studio N slot."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "flow.filter.studio",
|
| 142 |
"m": 3,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.0,
|
| 145 |
+
"description": "With the studio filter set to \"Studio W\" the list has 14 entries in total (4 of them occupied); adding \"available only\" on top leaves 10 entries shown within a single page and the page number automatically returns to page 1."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "cart.total.exact",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "functional",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "Amounts and discount exact: after adding Studio N 3/4 (1800) and Studio W 3/5 (1500) the summary shows 2 entries, slot fee 3300, discount 0 (or the discount row hidden), service fee 200, amount due 3500; after also adding Deck 3/7 (1440) the 3-entry threshold triggers the 12% discount, and the summary simultaneously shows discount information (569 saved or a \"12% off\" marker), discounted slot fee 4171, service fee 200, amount due 4371."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "cart.add.rules",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "interaction",
|
| 158 |
"w": 1.0,
|
| 159 |
+
"description": "Clicking the same bookable slot repeatedly to add does not double-count (its entry becomes added/removable); occupied slots have no usable add entry or it is disabled, and repeatedly clicking leaves the booking-list entry count and amount due unchanged; removing entries one by one down to 0 shows the empty-state message, with slot fee and amount due at 0 and no 200 service fee."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "cart.clear.all",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.0,
|
| 166 |
+
"description": "With 3 entries in the booking list, clicking the \"Clear\" entry immediately makes the summary 0 entries and shows the empty-state message, with slot fee, discount and amount due all 0 and no 200 service fee shown; at the same time those 3 slots return to an addable state in the list, with the summary line's bookable count unchanged."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "chain.submit.updates",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Three-step chain: select 2 bookable slots → fill in the contact → submit. When the name or phone is empty the submission is blocked with a clear message; once both are filled, submitting shows a success message and order number, the booking list returns to empty, those 2 slots become occupied in the list, and the summary line updates to total 42, bookable 29, occupied 13."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "layout.two.col",
|
| 177 |
"m": 4,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.5,
|
| 180 |
+
"description": "At viewport width ≥1100px the calendar area is two columns — list on the left, summary on the right — with the right column containing a clickable \"Go to checkout\" button that enters the contact-filling step; scrolling the list down keeps the summary block visible within the viewport (sticky), not scrolling off screen with the list."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "layout.narrow.bar",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.0,
|
| 187 |
+
"description": "At viewport ≤760px the calendar area becomes a single column, with the summary presented as a persistent bottom bar whose selected count and amount due exactly match the desktop right column (e.g. 2 entries / 3500)."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "layout.state.preserved",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "In the state \"available only + price high-to-low + page 3 + 2 entries in the booking list\", resizing the window from 1280px down to 700px and back up leaves the filter, sort, page number and booking-list contents all unchanged, not reset to the first page or cleared."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "layout.legacy.intact",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.5,
|
| 201 |
+
"description": "After the rearrangement the portfolio project area still runs in order below the calendar area, and in the new layout the density switcher still lights up the one you click and syncs the column count (the fix from requirement 1 is not broken)."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "layout.nocollide",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "visual",
|
| 207 |
"w": 1.0,
|
| 208 |
+
"description": "The summary column (including the narrow-screen bottom bar) does not cover the calendar list entries or the footer: the footer heading and four social links are fully visible and clickable."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "skin.toggle.global",
|
| 212 |
"m": 5,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.5,
|
| 215 |
+
"description": "A day/night toggle exists at the top; switching to night turns the page background dark and the body text light, and it takes effect on the top, the calendar area, the portfolio area and the footer simultaneously, with no residual large white blocks anywhere as you scroll the page."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "skin.hatch.dark",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "visual",
|
| 221 |
"w": 1.0,
|
| 222 |
+
"description": "In night mode the hatched placeholder blocks in the portfolio grid darken with the theme (no longer near-white bright blocks), contrasting gently with the dark background; switching back to day restores the original light-gray hatching."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "skin.accent.single",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "visual",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Trade-off consistency: apart from black/white/gray, the entire site shows only one accent color, shared by the main booking button and the \"selected/added\" states; this holds under both day and night (shades may vary but the hue stays the same), with no second color appearing."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "skin.state.persist",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "functional",
|
| 235 |
"w": 1.5,
|
| 236 |
+
"description": "Switching the skin resets no state: the booking list's entry count and amount due, the studio filter and sort, the current page number, and each project grid's density highlight are all exactly as before the switch."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "skin.contrast",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "visual",
|
| 242 |
"w": 1.0,
|
| 243 |
+
"description": "In night mode the three summary-line numbers, the slot prices, the page numbers and the \"occupied\" markers are all clearly readable, with no hard-to-read dark-on-dark or light-on-light cases."
|
| 244 |
}
|
| 245 |
],
|
| 246 |
"inject": {
|
| 247 |
+
"type": "Missed state update",
|
| 248 |
+
"saboteur_prompt": "Only modify src/components/ProjectSection.jsx to create a \"highlight state lags one step behind\" missed-state-update defect, without producing any console errors or warnings. Specifically: inside the component, besides the existing cols state, introduce a state dedicated to driving the button's selected state (e.g. const [pressedCols, setPressedCols] = useState(4)), and change the view-btn active class name and aria-pressed to be based on this new state (className={`view-btn${pressedCols === view.cols ? ' active' : ''}`}, aria-pressed={pressedCols === view.cols}), while the grid column count is still driven by cols; in the click handler first setCols(view.cols), then update the selected state to the old value from before the click (setPressedCols(cols)), so the highlight always lags by one step. On initial render both are 4, so it looks normal. Do not add any comments, do not change CSS, data, other components, responsive behavior, stagger offsets or image rendering, and do not change the DOM structure or the aria-label copy."
|
| 249 |
},
|
| 250 |
"qc_static": [
|
| 251 |
+
"bad dimensions {'functional', 'data', 'coverage', 'visual', 'interaction'}"
|
| 252 |
],
|
| 253 |
"review_status": "qc_fail"
|
| 254 |
+
}
|
tasks/c14/task.json
CHANGED
|
@@ -3,238 +3,238 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
],
|
| 17 |
-
"domain": "
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_zh_001310",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
-
"title": "Le Studio —
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
},
|
| 37 |
{
|
| 38 |
-
"operator": "
|
| 39 |
-
"request": "
|
| 40 |
},
|
| 41 |
{
|
| 42 |
-
"operator": "
|
| 43 |
-
"request": "
|
| 44 |
}
|
| 45 |
],
|
| 46 |
"checklist": [
|
| 47 |
{
|
| 48 |
"id": "panel.total.count",
|
| 49 |
"m": 1,
|
| 50 |
-
"dimension": "
|
| 51 |
"w": 1.5,
|
| 52 |
-
"description": "
|
| 53 |
},
|
| 54 |
{
|
| 55 |
"id": "panel.default.order",
|
| 56 |
"m": 1,
|
| 57 |
-
"dimension": "
|
| 58 |
"w": 1.0,
|
| 59 |
-
"description": "
|
| 60 |
},
|
| 61 |
{
|
| 62 |
"id": "panel.occupied.set",
|
| 63 |
"m": 1,
|
| 64 |
-
"dimension": "
|
| 65 |
"w": 1.5,
|
| 66 |
-
"description": "GH-R03
|
| 67 |
},
|
| 68 |
{
|
| 69 |
"id": "panel.price.and.desc",
|
| 70 |
"m": 1,
|
| 71 |
-
"dimension": "
|
| 72 |
"w": 1.5,
|
| 73 |
-
"description": "
|
| 74 |
},
|
| 75 |
{
|
| 76 |
"id": "panel.type.filter",
|
| 77 |
"m": 1,
|
| 78 |
-
"dimension": "
|
| 79 |
"w": 1.5,
|
| 80 |
-
"description": "
|
| 81 |
},
|
| 82 |
{
|
| 83 |
"id": "panel.combo.diagonal",
|
| 84 |
"m": 1,
|
| 85 |
-
"dimension": "
|
| 86 |
"w": 1.5,
|
| 87 |
-
"description": "
|
| 88 |
},
|
| 89 |
{
|
| 90 |
"id": "panel.empty.state",
|
| 91 |
"m": 1,
|
| 92 |
-
"dimension": "
|
| 93 |
"w": 1.0,
|
| 94 |
-
"description": "
|
| 95 |
},
|
| 96 |
{
|
| 97 |
"id": "sel.badge.increment",
|
| 98 |
"m": 2,
|
| 99 |
-
"dimension": "
|
| 100 |
"w": 1.0,
|
| 101 |
-
"description": "
|
| 102 |
},
|
| 103 |
{
|
| 104 |
"id": "sel.hidden.persist",
|
| 105 |
"m": 2,
|
| 106 |
-
"dimension": "
|
| 107 |
"w": 1.5,
|
| 108 |
-
"description": "
|
| 109 |
},
|
| 110 |
{
|
| 111 |
"id": "sel.occupied.blocked",
|
| 112 |
"m": 2,
|
| 113 |
-
"dimension": "
|
| 114 |
"w": 1.5,
|
| 115 |
-
"description": "
|
| 116 |
},
|
| 117 |
{
|
| 118 |
"id": "sel.limit.six",
|
| 119 |
"m": 2,
|
| 120 |
-
"dimension": "
|
| 121 |
"w": 1.0,
|
| 122 |
-
"description": "
|
| 123 |
},
|
| 124 |
{
|
| 125 |
"id": "sel.clear.isolated",
|
| 126 |
"m": 2,
|
| 127 |
-
"dimension": "
|
| 128 |
"w": 1.5,
|
| 129 |
-
"description": "
|
| 130 |
},
|
| 131 |
{
|
| 132 |
"id": "wiz.gate.empty",
|
| 133 |
"m": 3,
|
| 134 |
-
"dimension": "
|
| 135 |
"w": 1.0,
|
| 136 |
-
"description": "
|
| 137 |
},
|
| 138 |
{
|
| 139 |
"id": "wiz.chain.total",
|
| 140 |
"m": 3,
|
| 141 |
-
"dimension": "
|
| 142 |
"w": 1.5,
|
| 143 |
-
"description": "
|
| 144 |
},
|
| 145 |
{
|
| 146 |
"id": "wiz.discount.floor",
|
| 147 |
"m": 3,
|
| 148 |
-
"dimension": "
|
| 149 |
"w": 1.5,
|
| 150 |
-
"description": "
|
| 151 |
},
|
| 152 |
{
|
| 153 |
"id": "wiz.step2.fields",
|
| 154 |
"m": 3,
|
| 155 |
-
"dimension": "
|
| 156 |
"w": 1.0,
|
| 157 |
-
"description": "
|
| 158 |
},
|
| 159 |
{
|
| 160 |
"id": "wiz.email.prefill",
|
| 161 |
"m": 3,
|
| 162 |
-
"dimension": "
|
| 163 |
"w": 1.5,
|
| 164 |
-
"description": "
|
| 165 |
},
|
| 166 |
{
|
| 167 |
"id": "wiz.confirm.reset",
|
| 168 |
"m": 3,
|
| 169 |
-
"dimension": "
|
| 170 |
"w": 1.0,
|
| 171 |
-
"description": "
|
| 172 |
},
|
| 173 |
{
|
| 174 |
"id": "footer.insta.removed",
|
| 175 |
"m": 4,
|
| 176 |
-
"dimension": "
|
| 177 |
"w": 1.5,
|
| 178 |
-
"description": "
|
| 179 |
},
|
| 180 |
{
|
| 181 |
"id": "footer.link.filter",
|
| 182 |
"m": 4,
|
| 183 |
-
"dimension": "
|
| 184 |
"w": 1.5,
|
| 185 |
-
"description": "
|
| 186 |
},
|
| 187 |
{
|
| 188 |
"id": "footer.link.keepsel",
|
| 189 |
"m": 4,
|
| 190 |
-
"dimension": "
|
| 191 |
"w": 1.5,
|
| 192 |
-
"description": "
|
| 193 |
},
|
| 194 |
{
|
| 195 |
"id": "footer.rest.intact",
|
| 196 |
"m": 4,
|
| 197 |
-
"dimension": "
|
| 198 |
"w": 1.0,
|
| 199 |
-
"description": "
|
| 200 |
},
|
| 201 |
{
|
| 202 |
"id": "skin.no.orange",
|
| 203 |
"m": 5,
|
| 204 |
-
"dimension": "
|
| 205 |
"w": 1.5,
|
| 206 |
-
"description": "header
|
| 207 |
},
|
| 208 |
{
|
| 209 |
"id": "skin.badge.tint",
|
| 210 |
"m": 5,
|
| 211 |
-
"dimension": "
|
| 212 |
"w": 1.0,
|
| 213 |
-
"description": "Gros Horloge
|
| 214 |
},
|
| 215 |
{
|
| 216 |
"id": "skin.accent.consistent",
|
| 217 |
"m": 5,
|
| 218 |
-
"dimension": "
|
| 219 |
"w": 1.5,
|
| 220 |
-
"description": "header
|
| 221 |
},
|
| 222 |
{
|
| 223 |
"id": "skin.dark.intact",
|
| 224 |
"m": 5,
|
| 225 |
-
"dimension": "
|
| 226 |
"w": 1.5,
|
| 227 |
-
"description": "
|
| 228 |
},
|
| 229 |
{
|
| 230 |
"id": "skin.regression",
|
| 231 |
"m": 5,
|
| 232 |
-
"dimension": "
|
| 233 |
"w": 1.5,
|
| 234 |
-
"description": "
|
| 235 |
}
|
| 236 |
],
|
| 237 |
"inject": null,
|
| 238 |
"qc_static": [],
|
| 239 |
"review_status": "needs_human"
|
| 240 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"restyle",
|
| 7 |
+
"add state",
|
| 8 |
+
"remove section",
|
| 9 |
+
"make interactive",
|
| 10 |
+
"wire up data"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"non-local changes"
|
| 16 |
],
|
| 17 |
+
"domain": "tool dashboard",
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_zh_001310",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
+
"title": "Le Studio — Workspace Resources Panel Rework (data/state/wizard/footer cleanup/sitewide reskin)",
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
+
"operator": "wire up data",
|
| 27 |
+
"request": "Ops has always managed desks in spreadsheets — too clunky. Please insert a \"Workspace resources\" panel on the homepage between the two storefront images (Nos lieux) and the black Studio intro, with the desks from both of our locations.\n\nLet me dictate the list; transcribe it as-is: at Gros Horloge, the ground floor (RDC) is open desks, numbered GH-R01 through GH-R08; the second floor (1er) is fixed desks, GH-A01 through GH-A07; the third floor (2e) is private offices, GH-B01 through GH-B05. Vieux Marché is bigger: open desks VM-R01 through VM-R09, fixed desks VM-A01 through VM-A08, private offices VM-B01 through VM-B07. On pricing, Gros Horloge is 18 € a day for open desks, 26 € for fixed, 45 € for private offices; because Vieux Marché was recently renovated, every type is 4 € more than Gros Horloge. Also, any desk whose number is divisible by 3 (03, 06, 09 and so on) is currently taken by a long-term tenant and must be marked \"Occupied\"; the rest are \"Free\".\n\nThe panel must filter by location (All / Gros Horloge / Vieux Marché) and by type (All / Open desk / Fixed desk / Private office), plus a \"Free only\" toggle and a search box by number. Provide three sorts: price low-to-high, price high-to-low, and number A→Z; default to number A→Z, with no filters, on page 1. Show 8 per page, with paging below. The panel header must show in real time how many desks match the current filters. Whenever the user changes a filter, the search or the sort, the page number must jump back to 1 — don't leave it stranded halfway. If the filters leave nothing, don't give me a blank area — write a human-readable message telling the user to broaden the criteria. Keep the overall palette consistent with the site's current tone; don't invent a new style."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "add state",
|
| 31 |
+
"request": "Looking isn't enough — clients need to be able to \"pick\". Add a pick action to each desk card, and a picked desk must have an obvious selected look. I want to see how many have been picked right at the top header of the page — put a \"My picks\" count next to the \"Essai gratuit!\" button, visible wherever you scroll (just follow the header with it), and make it catch the eye.\n\nA few rules: occupied desks can't be picked — however the user clicks there should be no reaction and the count must not move; at most 6 can be picked at a time, and once full, the pick control on other unpicked desks must grey out and stop responding, with a \"Max 6\" message; picked desks still count even if filtering or paging hides them, and the count must not drop; also add a \"Clear picks\", but it must not be usable when nothing is picked, and alongside it the panel should show an empty hint like \"No desks picked yet\". Clearing only clears picks — the user's current filters, sort and page must not be reset with it."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "make interactive",
|
| 35 |
+
"request": "Next, turn the picks into an actual booking. Clicking the top \"My picks\" count, or clicking \"Book now\" in the panel, should open the same three-step booking flow:\n\nStep 1, choose days and people — days default to 1, can only be between 1 and 30, can be increased or decreased, and at the limit the plus and minus stop responding; step 2, enter the contact email and company name — the company name is optional, but without an email you can't continue; step 3, show a breakdown: first add up the daily prices of the picked desks, which is the \"Daily total\", then multiply by the number of days for the total; also, our usual rule is 15% off the whole order for 5 days or more (inclusive), but this promotion doesn't use 15% — switch it to 10% off (i.e. 90% of the total), truncate any decimals and show whole euros only, and state clearly in the breakdown that the discount has been applied. After confirming, give the user an order number and a success message; at the same time clear all picks, reset the top count to zero, return the flow to step 1 and reset days to the default. When no desk is picked, the flow must not be enterable from either entry point — just show a message.\n\nOne more thoughtful touch: in the \"Prenez place !\" email signup area further down the page, if the user has already entered an email there, prefill the email in step 2 for them so they don't have to type it twice."
|
| 36 |
},
|
| 37 |
{
|
| 38 |
+
"operator": "remove section",
|
| 39 |
+
"request": "We don't want the Instagram thumbnail strip in the footer anymore — the account has stopped posting, so remove the whole strip: the four images and the \"voir\" link next to them. The footer should have three columns left; don't leave an awkward empty slot. Not a single word of the other columns' headings, link text, phone number or copyright line may change.\n\nWhile you're at it, put the two store names under \"Nos lieux\" in the footer to work: clicking \"Gros Horloge\" takes the user straight to the workspace panel above and sets the location filter to Gros Horloge with the page back at 1; the count must match (Gros Horloge 20, Vieux Marché 24). When switching, be careful not to lose the picks the user has already made."
|
| 40 |
},
|
| 41 |
{
|
| 42 |
+
"operator": "restyle",
|
| 43 |
+
"request": "One last thing: a brand upgrade. The primary color changes from the current orange to a deep teal, using #0f7a72 for the primary and a darker #0a5c56 for hover. Replace it everywhere the site was orange — the header trial button, the Mission \"En savoir plus\", the bottom form submit button, plus the pick buttons in the panel you're building, the wizard buttons, and the picks count at the top; don't miss a single one. The pale-orange \"Nouveau\" badge should also switch to a light tint from the same family, background #e2f1ef and text #0f7a72.\n\nLeave the black Studio intro section and the testimonials exactly as they are — font sizes, spacing and layout structure must not change at all. Keep the overall tone restrained: one accent color for the whole site, and don't let a second bright color steal the show. Everything must keep working normally after the change."
|
| 44 |
}
|
| 45 |
],
|
| 46 |
"checklist": [
|
| 47 |
{
|
| 48 |
"id": "panel.total.count",
|
| 49 |
"m": 1,
|
| 50 |
+
"dimension": "functional",
|
| 51 |
"w": 1.5,
|
| 52 |
+
"description": "On first load the workspace panel is after the two store cards and before the black Studio section, and with no filters the count shows 44 desks over 6 pages, with only 4 desk cards on page 6."
|
| 53 |
},
|
| 54 |
{
|
| 55 |
"id": "panel.default.order",
|
| 56 |
"m": 1,
|
| 57 |
+
"dimension": "functional",
|
| 58 |
"w": 1.0,
|
| 59 |
+
"description": "The default sort is number A→Z on page 1: the 8 desks on page 1 are, in order, GH-A01, GH-A02, GH-A03, GH-A04, GH-A05, GH-A06, GH-A07, GH-B01."
|
| 60 |
},
|
| 61 |
{
|
| 62 |
"id": "panel.occupied.set",
|
| 63 |
"m": 1,
|
| 64 |
+
"dimension": "coverage",
|
| 65 |
"w": 1.5,
|
| 66 |
+
"description": "GH-R03, GH-R06, GH-A03, GH-A06, GH-B03, VM-R03, VM-R06, VM-R09, VM-A03, VM-A06, VM-B03, VM-B06 — 12 in total — are marked occupied while the rest are free; turning on \"Free only\" changes the count to 32."
|
| 67 |
},
|
| 68 |
{
|
| 69 |
"id": "panel.price.and.desc",
|
| 70 |
"m": 1,
|
| 71 |
+
"dimension": "functional",
|
| 72 |
"w": 1.5,
|
| 73 |
+
"description": "Cards show the daily price: GH-R01=18, GH-A01=26, GH-B01=45, VM-R01=22, VM-A01=30, VM-B01=49 €/day; with no filters first go to page 3, then switch the sort to \"price high-to-low\"; the view immediately returns to page 1, where 7 of the 8 cards have a daily price of 49 € and the 8th is 45 €."
|
| 74 |
},
|
| 75 |
{
|
| 76 |
"id": "panel.type.filter",
|
| 77 |
"m": 1,
|
| 78 |
+
"dimension": "functional",
|
| 79 |
"w": 1.5,
|
| 80 |
+
"description": "With location=All, type=private office the count shows 12 over 2 pages, and under the default number A→Z sort the first card on page 1 is GH-B01; switching the location to Gros Horloge then changes the count to 5, leaving 1 page with 5 cards."
|
| 81 |
},
|
| 82 |
{
|
| 83 |
"id": "panel.combo.diagonal",
|
| 84 |
"m": 1,
|
| 85 |
+
"dimension": "functional",
|
| 86 |
"w": 1.5,
|
| 87 |
+
"description": "First go to page 4 in the default state, then select location=Gros Horloge, turn on \"Free only\" and sort=price low-to-high: the view returns to page 1, the count is 15 over 2 pages, the first desk on page 1 has a daily price of 18 €, and page 2 has exactly 7 desks."
|
| 88 |
},
|
| 89 |
{
|
| 90 |
"id": "panel.empty.state",
|
| 91 |
"m": 1,
|
| 92 |
+
"dimension": "interaction",
|
| 93 |
"w": 1.0,
|
| 94 |
+
"description": "First go to page 2, then type a nonexistent number (e.g. ZZZ) in the search box: the count shows 0, no desk cards appear, and an empty-state message about broadening the criteria appears; clearing the search restores the count to 44 and returns to page 1 (not back to page 2)."
|
| 95 |
},
|
| 96 |
{
|
| 97 |
"id": "sel.badge.increment",
|
| 98 |
"m": 2,
|
| 99 |
+
"dimension": "functional",
|
| 100 |
"w": 1.0,
|
| 101 |
+
"description": "The \"My picks\" count next to the \"Essai gratuit!\" button in the header starts at 0; after picking GH-A01 and GH-B02 the count becomes 2 and both cards show a selected style distinguishable from unpicked cards; scrolling to the footer position keeps the count visible with the top header and still showing 2."
|
| 102 |
},
|
| 103 |
{
|
| 104 |
"id": "sel.hidden.persist",
|
| 105 |
"m": 2,
|
| 106 |
+
"dimension": "functional",
|
| 107 |
"w": 1.5,
|
| 108 |
+
"description": "With GH-A01 and GH-B02 already picked, switching the location filter to Vieux Marché (hiding both) leaves the count at 2; switching back to Gros Horloge, both cards are still in the selected state."
|
| 109 |
},
|
| 110 |
{
|
| 111 |
"id": "sel.occupied.blocked",
|
| 112 |
"m": 2,
|
| 113 |
+
"dimension": "interaction",
|
| 114 |
"w": 1.5,
|
| 115 |
+
"description": "The pick control on occupied desks (e.g. GH-A03) is disabled; clicking it 5 times in a row leaves the count unchanged (still 0 from 0) and produces no selected style."
|
| 116 |
},
|
| 117 |
{
|
| 118 |
"id": "sel.limit.six",
|
| 119 |
"m": 2,
|
| 120 |
+
"dimension": "interaction",
|
| 121 |
"w": 1.0,
|
| 122 |
+
"description": "After picking 6 free desks the count stops at 6, a limit message like \"Max 6\" appears on the page, the pick controls on the remaining unpicked desks are greyed out and clicking has no effect, and the count does not become 7."
|
| 123 |
},
|
| 124 |
{
|
| 125 |
"id": "sel.clear.isolated",
|
| 126 |
"m": 2,
|
| 127 |
+
"dimension": "functional",
|
| 128 |
"w": 1.5,
|
| 129 |
+
"description": "First set location=Vieux Marché, sort=price high-to-low and go to page 2 (the first card on page 2 is 30 €, proving descending order works), pick 2 free desks there, then click \"Clear picks\": the count returns to 0 with an unpicked empty hint, while the location filter, the price-descending sort and the page 2 number all stay the same; when 0 are picked the clear action is unavailable."
|
| 130 |
},
|
| 131 |
{
|
| 132 |
"id": "wiz.gate.empty",
|
| 133 |
"m": 3,
|
| 134 |
+
"dimension": "interaction",
|
| 135 |
"w": 1.0,
|
| 136 |
+
"description": "When no desk is picked, clicking the panel's \"Book now\" and clicking the header's \"My picks\" count both fail to enter the step-1 form and instead each show a message that desks must be picked first."
|
| 137 |
},
|
| 138 |
{
|
| 139 |
"id": "wiz.chain.total",
|
| 140 |
"m": 3,
|
| 141 |
+
"dimension": "functional",
|
| 142 |
"w": 1.5,
|
| 143 |
+
"description": "After picking GH-R01, GH-A01 and VM-B01, both the header count and the panel's \"Book now\" open the same flow: step 1 defaults to 1 day, repeatedly increasing reaches 30 and clicking plus again still shows 30, decreasing back to 2 and then 1 cannot go below to 0; setting days to 4 and entering an email on step 2 makes step 3 show a daily total of 93 € and a total price of 372 €."
|
| 144 |
},
|
| 145 |
{
|
| 146 |
"id": "wiz.discount.floor",
|
| 147 |
"m": 3,
|
| 148 |
+
"dimension": "functional",
|
| 149 |
"w": 1.5,
|
| 150 |
+
"description": "With the same three desks and days changed to 5, step 3 shows a total price of 418 € (465×0.9=418.5, decimals truncated) and clearly indicates the discount has been applied; with days at 4 the total is 372 € and no discount indicator appears."
|
| 151 |
},
|
| 152 |
{
|
| 153 |
"id": "wiz.step2.fields",
|
| 154 |
"m": 3,
|
| 155 |
+
"dimension": "interaction",
|
| 156 |
"w": 1.0,
|
| 157 |
+
"description": "Step 2 shows both the email and company-name inputs: with the email empty you cannot proceed to step 3 (the continue action is disabled or blocked with a message); leaving the company name blank doesn't affect proceeding, and entering \"Studio SARL\" also allows moving to step 3 with the price breakdown values unaffected."
|
| 158 |
},
|
| 159 |
{
|
| 160 |
"id": "wiz.email.prefill",
|
| 161 |
"m": 3,
|
| 162 |
+
"dimension": "functional",
|
| 163 |
"w": 1.5,
|
| 164 |
+
"description": "First enter marie@studio.fr in the email input of the \"Prenez place !\" area at the bottom of the page, then open the booking wizard and reach step 2: the email field is already prefilled with marie@studio.fr."
|
| 165 |
},
|
| 166 |
{
|
| 167 |
"id": "wiz.confirm.reset",
|
| 168 |
"m": 3,
|
| 169 |
+
"dimension": "interaction",
|
| 170 |
"w": 1.0,
|
| 171 |
+
"description": "After confirming on step 3, a success message with an order number appears; at the same time the header picks count returns to 0 and all cards return to the unpicked state; picking again and opening the wizard lands on step 1 with days back at the default 1."
|
| 172 |
},
|
| 173 |
{
|
| 174 |
"id": "footer.insta.removed",
|
| 175 |
"m": 4,
|
| 176 |
+
"dimension": "visual",
|
| 177 |
"w": 1.5,
|
| 178 |
+
"description": "The footer no longer shows the Instagram heading, the four thumbnails and the \"voir\" link, no insta-series images appear anywhere on the page, and the footer is three columns side by side (Découvrir / Nos lieux / Contact) with no empty fourth-column placeholder left behind."
|
| 179 |
},
|
| 180 |
{
|
| 181 |
"id": "footer.link.filter",
|
| 182 |
"m": 4,
|
| 183 |
+
"dimension": "functional",
|
| 184 |
"w": 1.5,
|
| 185 |
+
"description": "Clicking Vieux Marché under \"Nos lieux\" in the footer positions the page at the workspace panel and changes the location filter to Vieux Marché, with the count showing 24 and the page number at 1."
|
| 186 |
},
|
| 187 |
{
|
| 188 |
"id": "footer.link.keepsel",
|
| 189 |
"m": 4,
|
| 190 |
+
"dimension": "functional",
|
| 191 |
"w": 1.5,
|
| 192 |
+
"description": "First go to page 3 of the panel and pick 2 desks, then click Gros Horloge in the footer: the count shows 20 and it returns to page 1, while the header picks count is still 2 (picks were not cleared)."
|
| 193 |
},
|
| 194 |
{
|
| 195 |
"id": "footer.rest.intact",
|
| 196 |
"m": 4,
|
| 197 |
+
"dimension": "coverage",
|
| 198 |
"w": 1.0,
|
| 199 |
+
"description": "The copy of the three remaining columns is word-for-word unchanged: under Découvrir, Accueil and Notre Mission; under Nos lieux, still Gros Horloge and Vieux Marché; under Contact, still 06 22 25 78 97 and Nous contacter; the bottom line is still \"Le Studio Entreprise\" and \"© copyright 2020\"."
|
| 200 |
},
|
| 201 |
{
|
| 202 |
"id": "skin.no.orange",
|
| 203 |
"m": 5,
|
| 204 |
+
"dimension": "visual",
|
| 205 |
"w": 1.5,
|
| 206 |
+
"description": "The header's \"Essai gratuit!\" button, Mission's \"En savoir plus\" and the bottom form's submit button all have a background of #0f7a72, changing to #0a5c56 on hover; the original orange #ed743d / #d95f28 no longer appears on the page."
|
| 207 |
},
|
| 208 |
{
|
| 209 |
"id": "skin.badge.tint",
|
| 210 |
"m": 5,
|
| 211 |
+
"dimension": "visual",
|
| 212 |
"w": 1.0,
|
| 213 |
+
"description": "The \"Nouveau\" badge on the Gros Horloge card has background #e2f1ef and text #0f7a72, with the same position and size as before the redesign."
|
| 214 |
},
|
| 215 |
{
|
| 216 |
"id": "skin.accent.consistent",
|
| 217 |
"m": 5,
|
| 218 |
+
"dimension": "visual",
|
| 219 |
"w": 1.5,
|
| 220 |
+
"description": "The header picks count, the selected state of cards in the panel and the primary buttons in the wizard all use the same #0f7a72 accent family (shades may differ), and no second bright accent such as red/orange/yellow appears on the site; the count still has discernible contrast against surrounding elements rather than blending into the background."
|
| 221 |
},
|
| 222 |
{
|
| 223 |
"id": "skin.dark.intact",
|
| 224 |
"m": 5,
|
| 225 |
+
"dimension": "visual",
|
| 226 |
"w": 1.5,
|
| 227 |
+
"description": "The black Studio section background is still #10151b, the three service cards are still in one horizontal row with serif headings, and the two testimonials still have an image on the left and right respectively (the second reversed left-to-right), with layout and spacing unchanged."
|
| 228 |
},
|
| 229 |
{
|
| 230 |
"id": "skin.regression",
|
| 231 |
"m": 5,
|
| 232 |
+
"dimension": "functional",
|
| 233 |
"w": 1.5,
|
| 234 |
+
"description": "No functional regression after the reskin: with location=Gros Horloge and \"Free only\" the count is still 15, picking two free desks still moves the count from 0 to 2, and clicking footer Vieux Marché still switches the count to 24."
|
| 235 |
}
|
| 236 |
],
|
| 237 |
"inject": null,
|
| 238 |
"qc_static": [],
|
| 239 |
"review_status": "needs_human"
|
| 240 |
+
}
|
tasks/c15/task.json
CHANGED
|
@@ -3,195 +3,195 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
-
"title": "Simply Noted
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
-
"operator": "
|
| 23 |
-
"request": "
|
| 24 |
},
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
}
|
| 37 |
],
|
| 38 |
"checklist": [
|
| 39 |
{
|
| 40 |
"id": "shell.chrome",
|
| 41 |
"m": 1,
|
| 42 |
-
"dimension": "
|
| 43 |
"w": 1.0,
|
| 44 |
-
"description": "
|
| 45 |
},
|
| 46 |
{
|
| 47 |
"id": "hero.left",
|
| 48 |
"m": 1,
|
| 49 |
-
"dimension": "
|
| 50 |
"w": 1.5,
|
| 51 |
-
"description": "
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "hero.stats5",
|
| 55 |
"m": 1,
|
| 56 |
-
"dimension": "
|
| 57 |
"w": 1.0,
|
| 58 |
-
"description": "
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "product.section",
|
| 62 |
"m": 1,
|
| 63 |
-
"dimension": "
|
| 64 |
"w": 1.5,
|
| 65 |
-
"description": "
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "features.six",
|
| 69 |
"m": 1,
|
| 70 |
-
"dimension": "
|
| 71 |
"w": 1.5,
|
| 72 |
-
"description": "
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "video.campaign42",
|
| 76 |
"m": 1,
|
| 77 |
-
"dimension": "
|
| 78 |
"w": 1.5,
|
| 79 |
-
"description": "
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "layout.twocol",
|
| 83 |
"m": 2,
|
| 84 |
-
"dimension": "
|
| 85 |
"w": 1.5,
|
| 86 |
-
"description": "
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "layout.counts",
|
| 90 |
"m": 2,
|
| 91 |
-
"dimension": "
|
| 92 |
"w": 1.5,
|
| 93 |
-
"description": "
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "layout.features",
|
| 97 |
"m": 2,
|
| 98 |
-
"dimension": "
|
| 99 |
"w": 1.0,
|
| 100 |
-
"description": "
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "layout.anchor",
|
| 104 |
"m": 2,
|
| 105 |
-
"dimension": "
|
| 106 |
"w": 1.0,
|
| 107 |
-
"description": "
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "layout.regression",
|
| 111 |
"m": 2,
|
| 112 |
-
"dimension": "
|
| 113 |
"w": 1.0,
|
| 114 |
-
"description": "
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "del.video",
|
| 118 |
"m": 3,
|
| 119 |
-
"dimension": "
|
| 120 |
"w": 1.0,
|
| 121 |
-
"description": "
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "del.stats4",
|
| 125 |
"m": 3,
|
| 126 |
-
"dimension": "
|
| 127 |
"w": 1.5,
|
| 128 |
-
"description": "
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "del.rating",
|
| 132 |
"m": 3,
|
| 133 |
-
"dimension": "
|
| 134 |
"w": 1.0,
|
| 135 |
-
"description": "
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "del.nolink",
|
| 139 |
"m": 3,
|
| 140 |
-
"dimension": "
|
| 141 |
"w": 1.0,
|
| 142 |
-
"description": "
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "del.gridintact",
|
| 146 |
"m": 3,
|
| 147 |
-
"dimension": "
|
| 148 |
"w": 1.0,
|
| 149 |
-
"description": "
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "act.filterpage",
|
| 153 |
"m": 4,
|
| 154 |
-
"dimension": "
|
| 155 |
"w": 1.5,
|
| 156 |
-
"description": "
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "act.search",
|
| 160 |
"m": 4,
|
| 161 |
-
"dimension": "
|
| 162 |
"w": 1.5,
|
| 163 |
-
"description": "
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "act.reset",
|
| 167 |
"m": 4,
|
| 168 |
-
"dimension": "
|
| 169 |
"w": 1.0,
|
| 170 |
-
"description": "
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "act.badge",
|
| 174 |
"m": 4,
|
| 175 |
-
"dimension": "
|
| 176 |
"w": 1.5,
|
| 177 |
-
"description": "
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "act.crossstate",
|
| 181 |
"m": 4,
|
| 182 |
-
"dimension": "
|
| 183 |
"w": 1.5,
|
| 184 |
-
"description": "
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "act.quote",
|
| 188 |
"m": 4,
|
| 189 |
-
"dimension": "
|
| 190 |
"w": 1.5,
|
| 191 |
-
"description": "
|
| 192 |
}
|
| 193 |
],
|
| 194 |
"inject": null,
|
| 195 |
"qc_static": [],
|
| 196 |
"review_status": "needs_human"
|
| 197 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"restructure layout",
|
| 8 |
+
"remove section",
|
| 9 |
+
"make interactive"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"state coupling"
|
| 14 |
],
|
| 15 |
+
"domain": "e-commerce",
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
+
"title": "Simply Noted Handwritten Mail Marketing Site: Replication, Layout Restructure, Section Cleanup, and Template Selection Interaction",
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
+
"operator": "replicate",
|
| 23 |
+
"request": "We want to build the homepage of Simply Noted, a handwritten-mail marketing platform, following the reference image (image assets aren't ready yet — use gray placeholder blocks for image slots, with proportions matching the reference). Top to bottom:\n\nThe top bar is white; on the left is the handwritten Simplynoted logo; in the middle are four menus, Business, Integrations, Pricing, About; on the far right, first a plain Login text link, then immediately a prominent solid red REQUEST A SAMPLE button.\n\nThe first screen has a very pale pink-white gradient background. The left half, top to bottom: a small rounded badge reading The #1 Smart Handwritten Mail Platform; below it a three-line headline \"Real Handwritten Notes, Cards & Letters at Scale\", with the final word Scale set in red to set it apart from the preceding text; then a bold subheading \"Real pens. Real stamps. Triggered from your stack.\"; then a body paragraph: \"Simply Noted is the #1 smartest handwritten mail platform that sends real, pen-written notes, cards, and letters for businesses at scale. Our 220+ handwriting robots write every note, card, and letter with a real ballpoint pen, then stamp and mail it for you — triggered from your CRM, API, or a CSV. Unlimited for just $0.89 per handwritten note.\"; then two side-by-side buttons, solid red MAIL ME A FREE SAMPLE and white outlined BOOK A DEMO; below the buttons a row of three small gray words, Free sample mailed, No credit card, 100% guarantee; then a row of two ratings, one 4.7 with 57 Google reviews, and one 4.5 with 90 G2 reviews; finally a light-colored process line: You Trigger / Upload → We Write → We Stamp → We Mail → Track / Automate Follow Up. The right half is a wide image placeholder.\n\nBeneath the first screen sits a deep navy stats bar with five numbers separated by thin vertical lines, laid out horizontally: 99% (Open rate), 300% (Higher response vs. print), 10,000+ (Businesses served), 8 (yrs In business), 220+ (Handwriting robots).\n\nBelow is the product section, centered badge Two Products. One Platform., headline \"Two Types of Automated Handwritten Cards\" with Cards in red; beneath the headline a description: \"Both are written with real ballpoint pens by 220+ handwriting robots and trigger from your CRM, API, or Zapier workflows. No minimums, no contracts.\" Two white cards side by side: the left card has an image slot at the top, title Handwritten Postcards, a red $0.69 in the top right with a small line per card, description \"A full-color branded front with a real ballpoint handwritten message on the back. High-impact, low cost, impossible to ignore.\", four check bullets: Full-color front — your artwork or ours / Real ballpoint handwritten back / Postal delivery tracking included / Trackable QR code on every mailer, a row of small gray tags at the bottom E-COMMERCE · REAL ESTATE · RETAIL · LEAD GEN, and a red REQUEST FREE SAMPLES button. The right card has the same structure with an image slot on top: Handwritten Note Cards, red $0.89 per card, description \"Folded cards with a real pen-written message inside — indistinguishable from hand-written. The premium personal touch.\", four check bullets: Folded card format — premium feel / Handwritten envelope addressing / Real stamp, stuffed and mailed for you / Custom cover image or blank card, tag B2B SALES · INSURANCE · PROFESSIONAL SERVICES, and the same red button.\n\nNext are six feature blocks; in the reference image they alternate left and right. Each has a small badge, a headline whose final word is red, a description, three or four check bullets and an image slot; badges and headlines pair up one to one: Mail Tracking with badge Intelligent Mail® Barcode, Trackable QR Codes with Attribution on every card, Easy CSV Uploads with Built in minutes, Webhooks, API, Shopify & Zapier with Built for your stack, Anniversary & Birthday Automations with Always-on lifecycle mail, Build a Targeted Mailing List with No list? No problem. For the descriptions and check bullets, just write them professionally according to the headlines.\n\nBelow that is a video section: centered badge See It In Action, headline \"Watch Real Pens Write Your Mail\" (Mail in red), one description line, two dark gray video placeholder boxes side by side, and beneath them a small red See More on YouTube button.\n\nThe final large block is the campaign template section, headline \"Automate Campaigns Like These\" (These in red), followed by a card grid where each card is a template: card name, a Trigger line, a Message line (write a plausible piece of handwritten copy), a Goal line, and a \"Build this campaign →\" link at the bottom. Ops sent a rather messy list; I'll paste it as-is — 42 in total, all must be included:\nE-commerce has ten — Abandoned Cart Nudge (cart unchecked out for over 24 hours / recover abandoned orders), Post-Purchase Thank-You (order shipped / boost repeat purchases), First Order Welcome (first order completed / build goodwill), VIP Buyer Gift (annual spend over 10k / retain big customers), Subscription Renewal Nudge (14 days before subscription expiry / renewals), Review Request (7 days after delivery / get reviews), Win-Back Campaign (no purchase for 90 days / wake dormant customers), Holiday Gift Card Drop (bulk before holidays / drive holiday orders), Back-in-Stock Alert (out-of-stock item restocked / convert the waitlist), Loyalty Tier Upgrade (membership upgrade / strengthen loyalty).\nSales, nine — After-Demo Sales Follow-Up (demo ends / boost replies and close rate), Trade Show Follow-Up (badge scan at trade show / catch the leads), Webinar Attendee Follow-Up (finished watching live / turn into pipeline), Cold Prospect Opener (enters target list / break the ice), Closed-Won Thank-You (contract signed / start off on the right foot), Closed-Lost Re-Engage (60 days after a lost deal / second chance), Proposal Sent Nudge (5 days after proposal with no reply / push forward), Referral Request (satisfied customer after closing / get referrals), Enterprise Account Opener (big account added to ABM / reach decision-makers).\nCustomer Success, eight — New Customer Thank-You (first activation / improve retention), Onboarding Kickoff (kickoff meeting scheduled / smooth start), Quarterly Check-In (first day of each quarter / maintain the relationship), NPS Promoter Thank-You (scored 9-10 / turn into an advocate), NPS Detractor Save (scored 0-6 / save), Renewal Reminder (30 days before expiry / raise the renewal rate), Churn Save Offer (submits cancellation / keep the customer), Support Hero Apology (after a major outage / repair trust).\nReal Estate, seven — Real Estate Seller Outreach (new listing goes live / win the listing), Just Listed Neighborhood Drop (new nearby listing / expand in the community), Open House Thank-You (open-house sign-in / drive offers), Closing Day Congrats (closing complete / word of mouth), Home Anniversary (one year since purchase / long-term relationship), Expired Listing Outreach (listing expired/delisted / re-sign), Buyer Referral Thank-You (buyer referral / encourage more referrals).\nLifecycle, eight — Birthday & Anniversary (birthday or anniversary / loyalty), Work Anniversary (work anniversary / employee care), Donor Thank-You (donation received / raise repeat donations), New Baby Congrats (customer shares good news / emotional connection), Holiday Greeting (year-end holidays / annual touchpoint), Welcome to the Community (joins the community / activate), Milestone Reached (usage milestone / positive reinforcement), Re-Activation Anniversary (one year since returning / solidify).\n\nAt the very bottom of the page there must also be a deep navy bar always stuck to the bottom of the viewport: on the left, \"Real handwritten mail at scale — try it free.\", and on the right two buttons, outlined BOOK A DEMO and solid red MAIL ME A FREE SAMPLE; it stays there wherever you scroll."
|
| 24 |
},
|
| 25 |
{
|
| 26 |
+
"operator": "restructure layout",
|
| 27 |
+
"request": "Beta feedback is in: with all 42 template cards laid out one after another, users simply can't find the ones for their industry. Rearrange it: turn the template section into two columns, with a category column on the left — All at the top, then E-commerce, Sales, Customer Success, Real Estate, Lifecycle — and a card grid on the right showing three per row on wide screens. Each item in the category column must show the count for that category after its name, and All shows the total — these numbers are for sales, so they must match the actual cards; don't hardcode something to fake it. Don't build click behavior yet this step — just get the layout and numbers right, and not a single card's content or order may be dropped or scrambled.\n\nAlso, the six feature blocks alternating left and right get dizzying after a while — unify them into one arrangement (e.g. all images left, text right) with a consistent spacing rhythm; but the small badges and the red final word in the headlines from the previous version are our brand assets — don't remove them.\n\nAdd a Campaigns entry to the top menu; clicking it scrolls the page to the template section. Everything else (first screen, stats bar, two product cards, video section, bottom sticky bar) keeps the previous version's look, don't change it."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "remove section",
|
| 31 |
+
"request": "Legal and marketing each get a cut:\n\n1. Remove the entire \"Watch Real Pens Write Your Mail\" video section — the badge, headline, two video boxes and See More on YouTube button, none of it stays.\n\n2. Remove the \"8 / yrs In business\" group from the deep navy stats bar — the investors think writing the number of years makes us look too young. After removal the remaining four groups must fill the whole bar evenly, with no empty gap or everything squeezed to one side.\n\n3. In the first screen's ratings row keep only the Google group (4.7 / 57 Google reviews); G2's license has expired, so 4.5 and 90 G2 reviews must go. Don't touch anything else on the first screen.\n\nJust delete it cleanly — don't leave any entry or anchor pointing at the video section that no longer exists, and don't break the template section you just restructured or the bottom sticky bar."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "make interactive",
|
| 35 |
+
"request": "Last step, bring two places to life.\n\nTemplate section: clicking a category on the left shows only that category's cards, with All selected by default; add a search box above the category column, fuzzy-matching on template name, case-insensitive; change the card grid to pagination with at most 9 per page, with page numbers below; when paging, only the cards change — the page must not jump around and other sections must not shift. After switching category or changing the search term, always return to page 1 — don't leave the user on a blank page N. When nothing matches, show an empty-state message \"No matching templates\", and in that case hide the pager.\n\nAdd an \"Add to my plan\" button at the bottom of each card; clicking it switches to the added look, clicking again removes it; hang a \"My plan\" count on the right side of the top menu — however many are added, that's the number, and clicking the same card repeatedly must not double-count. If an added card is temporarily hidden by filtering, search or paging, its added state and the top-bar count must still be preserved; while hidden, of course, those cards don't appear on the page, so they can't be clicked again. The count must be instantly visible, but the top bar as a whole keeps the previous version's clean tone — don't introduce a whole new color just to make it stand out.\n\nThe two product cards: add a quantity input to each, default 100, with a live estimate for that order beside it. Unit prices stay $0.69 for postcards and $0.89 for folded cards; orders of 500+ get 15% off the whole order (pay 85%), with the result truncated to cents (drop the extra cents, don't round). Change the quantity and the price follows immediately — no confirm button needed."
|
| 36 |
}
|
| 37 |
],
|
| 38 |
"checklist": [
|
| 39 |
{
|
| 40 |
"id": "shell.chrome",
|
| 41 |
"m": 1,
|
| 42 |
+
"dimension": "visual",
|
| 43 |
"w": 1.0,
|
| 44 |
+
"description": "The top bar has a white background, the handwritten Simplynoted logo on the left, four menu items in the order Business, Integrations, Pricing, About in the middle, and on the far right a plain Login text link followed by a solid red REQUEST A SAMPLE button; also, scrolling the page to the middle and the bottom, the deep navy bar is always visible at the bottom of the viewport, with the copy Real handwritten mail at scale — try it free. on the left and two buttons on the right — outlined BOOK A DEMO and solid red MAIL ME A FREE SAMPLE."
|
| 45 |
},
|
| 46 |
{
|
| 47 |
"id": "hero.left",
|
| 48 |
"m": 1,
|
| 49 |
+
"dimension": "visual",
|
| 50 |
"w": 1.5,
|
| 51 |
+
"description": "The first screen's left column reads, top to bottom: the badge The #1 Smart Handwritten Mail Platform, the three-line headline Real Handwritten Notes, Cards & Letters at Scale (Scale red and clearly different from the preceding dark text), the bold subheading Real pens. Real stamps. Triggered from your stack., the body paragraph, the side-by-side solid red MAIL ME A FREE SAMPLE and white outlined BOOK A DEMO, a row of three small gray words Free sample mailed / No credit card / 100% guarantee, a ratings row with both 4.7 with 57 Google reviews and 4.5 with 90 G2 reviews, and the five-step process line You Trigger / Upload → We Write → We Stamp → We Mail → Track / Automate Follow Up; the right column is a wide image placeholder."
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "hero.stats5",
|
| 55 |
"m": 1,
|
| 56 |
+
"dimension": "visual",
|
| 57 |
"w": 1.0,
|
| 58 |
+
"description": "Below the first screen the deep navy stats bar shows exactly 5 groups in one horizontal row, with numbers 99%, 300%, 10,000+, 8, 220+ in that order, corresponding to Open rate, Higher response vs. print, Businesses served, yrs In business, Handwriting robots, with vertical separators between groups."
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "product.section",
|
| 62 |
"m": 1,
|
| 63 |
+
"dimension": "functional",
|
| 64 |
"w": 1.5,
|
| 65 |
+
"description": "At the top of the product section the centered badge is Two Products. One Platform., the section headline is Two Types of Automated Handwritten Cards with Cards in red, and below the headline there is a description containing \"220+ handwriting robots\" and \"No minimums, no contracts.\"; beneath it two white cards side by side, with titles and prices exactly Handwritten Postcards / $0.69 and Handwritten Note Cards / $0.89, prices in red with a small per card line, a gray image placeholder at the top of each card, and each card containing 4 check-bullet features, a row of small gray industry tags and a red REQUEST FREE SAMPLES button."
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "features.six",
|
| 69 |
"m": 1,
|
| 70 |
+
"dimension": "coverage",
|
| 71 |
"w": 1.5,
|
| 72 |
+
"description": "The feature section has exactly 6 blocks, with headlines paired one-to-one with badges: Mail Tracking–Intelligent Mail® Barcode, Trackable QR Codes–Attribution on every card, Easy CSV Uploads–Built in minutes, Webhooks, API, Shopify & Zapier–Built for your stack, Anniversary & Birthday Automations–Always-on lifecycle mail, Build a Targeted Mailing List–No list? No problem.; each block has description text, 3 or 4 check bullets and one image placeholder, and the final word of each headline is red."
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "video.campaign42",
|
| 76 |
"m": 1,
|
| 77 |
+
"dimension": "coverage",
|
| 78 |
"w": 1.5,
|
| 79 |
+
"description": "The end of the page first shows the video section: centered badge See It In Action, headline Watch Real Pens Write Your Mail (final word Mail red), two dark gray video placeholder boxes side by side, a small red See More on YouTube button; below it is the campaign template section, headline Automate Campaigns Like These (These in red), rendering exactly 42 template cards in total, each with Trigger, Message and Goal lines plus a Build this campaign link, and the cards Win-Back Campaign, After-Demo Sales Follow-Up and Home Anniversary are all findable."
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "layout.twocol",
|
| 83 |
"m": 2,
|
| 84 |
+
"dimension": "visual",
|
| 85 |
"w": 1.5,
|
| 86 |
+
"description": "The template section is two columns: the left column is a vertical category list reading, top to bottom, All, E-commerce, Sales, Customer Success, Real Estate, Lifecycle; the right column is a card grid showing 3 cards per row at browser widths ≥1200px."
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "layout.counts",
|
| 90 |
"m": 2,
|
| 91 |
+
"dimension": "functional",
|
| 92 |
"w": 1.5,
|
| 93 |
+
"description": "Each category name in the category column is followed by its count, exactly All 42, E-commerce 10, Sales 9, Customer Success 8, Real Estate 7, Lifecycle 8, and the sum of the five category numbers matches the actual card total of 42 in the right column."
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "layout.features",
|
| 97 |
"m": 2,
|
| 98 |
+
"dimension": "visual",
|
| 99 |
"w": 1.0,
|
| 100 |
+
"description": "The six feature blocks no longer alternate left and right — all use the same image-text orientation (all image-left text-right or all image-right text-left) with consistent spacing between blocks; all six blocks keep their badge copy and the red-final-word headline feature (all six badges Intelligent Mail® Barcode, Attribution on every card, Built in minutes, Built for your stack, Always-on lifecycle mail, No list? No problem. are still visible)."
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "layout.anchor",
|
| 104 |
"m": 2,
|
| 105 |
+
"dimension": "interaction",
|
| 106 |
"w": 1.0,
|
| 107 |
+
"description": "The top menu gains a Campaigns item; clicking it scrolls the page so the Automate Campaigns Like These headline enters the viewport, and after scrolling the top bar and bottom sticky bar still display normally."
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "layout.regression",
|
| 111 |
"m": 2,
|
| 112 |
+
"dimension": "functional",
|
| 113 |
"w": 1.0,
|
| 114 |
+
"description": "After the restructure the first screen's three-line headline and two CTAs, both ratings, the five deep navy stat groups (including 8 / yrs In business), the product-section badge and $0.69/$0.89 cards, the four video-section elements, and the bottom sticky bar's copy and buttons all match requirement 1, and the 42 template cards' copy and relative order are unchanged."
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "del.video",
|
| 118 |
"m": 3,
|
| 119 |
+
"dimension": "coverage",
|
| 120 |
"w": 1.0,
|
| 121 |
+
"description": "At any scroll position on the page you cannot find the See It In Action badge, the Watch Real Pens Write Your Mail headline, the two video placeholder boxes or the See More on YouTube button, and the old video section's position leaves no large blank gap — the adjacent sections above and below connect naturally."
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "del.stats4",
|
| 125 |
"m": 3,
|
| 126 |
+
"dimension": "visual",
|
| 127 |
"w": 1.5,
|
| 128 |
+
"description": "Exactly 4 groups remain in the deep navy stats bar, with numbers 99%, 300%, 10,000+, 220+ in that order; the 8 and yrs In business group no longer exists in the bar, and the text yrs In business no longer appears anywhere on the page; the 4 groups fill the original width at even spacing, with no gap on the right and the content not pushed to one side."
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "del.rating",
|
| 132 |
"m": 3,
|
| 133 |
+
"dimension": "functional",
|
| 134 |
"w": 1.0,
|
| 135 |
+
"description": "The first screen's ratings row has only one group left, 4.7 / 57 Google reviews; 4.5 and 90 G2 reviews are gone; meanwhile the first-screen badge, three-line headline (Scale still red), two CTA buttons, three small gray words and the five-step process line text are all preserved as before."
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "del.nolink",
|
| 139 |
"m": 3,
|
| 140 |
+
"dimension": "interaction",
|
| 141 |
"w": 1.0,
|
| 142 |
+
"description": "No entry, link or anchor on the page points to the deleted video section (none in the top menu, body or bottom bar); clicking Campaigns still scrolls to the template section, and clicking the other menu items produces no console errors and doesn't jump to a blank page."
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "del.gridintact",
|
| 146 |
"m": 3,
|
| 147 |
+
"dimension": "functional",
|
| 148 |
"w": 1.0,
|
| 149 |
+
"description": "After the deletions the template section is still two columns with 42 cards in total, the category counts are still All 42 and 10/9/8/7/8, and the bottom sticky bar is still fixed to the bottom of the viewport with unchanged button copy."
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "act.filterpage",
|
| 153 |
"m": 4,
|
| 154 |
+
"dimension": "functional",
|
| 155 |
"w": 1.5,
|
| 156 |
+
"description": "The search box sits above the category column; with All selected by default, page 1 shows 9 cards over 5 pages (6 on the last page); after clicking E-commerce, page 1 has 9 cards and page 2 has 1, over 2 pages; after clicking Customer Success, 8 cards are shown over just 1 page; clicking a page number to change pages leaves the page's scroll position unchanged, and sections outside the template area (top bar, first screen, product cards, bottom bar) do not shift."
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "act.search",
|
| 160 |
"m": 4,
|
| 161 |
+
"dimension": "functional",
|
| 162 |
"w": 1.5,
|
| 163 |
+
"description": "With All selected, typing thank in the search box (any case) yields exactly 7 cards over just 1 page; changing the search term to zzz shows the \"No matching templates\" empty state and the pager no longer displays; clearing the search box restores 42 cards and 5 pages."
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "act.reset",
|
| 167 |
"m": 4,
|
| 168 |
+
"dimension": "interaction",
|
| 169 |
"w": 1.0,
|
| 170 |
+
"description": "First select E-commerce and go to page 2, then click Sales: the list automatically returns to page 1 and shows 9 Sales cards (not staying on page 2, no blank page); then typing referral in the search box likewise automatically returns to page 1."
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "act.badge",
|
| 174 |
"m": 4,
|
| 175 |
+
"dimension": "interaction",
|
| 176 |
"w": 1.5,
|
| 177 |
+
"description": "Clicking \"Add to my plan\" on a card switches that button to the added style and changes the top bar's \"My plan\" count from 0 to 1; clicking the same card 3 or more times keeps the count at no more than 1; clicking the added button again removes it and the count returns to 0. The count follows the page's existing red/navy palette and introduces no third new accent color."
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "act.crossstate",
|
| 181 |
"m": 4,
|
| 182 |
+
"dimension": "functional",
|
| 183 |
"w": 1.5,
|
| 184 |
+
"description": "Under E-commerce, add 3 cards (count showing 3), then switch to Real Estate, search zzz to trigger the empty state, then clear the search and switch back to E-commerce: throughout, the top-bar count stays 3; while hidden, those 3 cards don't appear on the page and can't be clicked to add again; after switching back they still show the added state."
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "act.quote",
|
| 188 |
"m": 4,
|
| 189 |
+
"dimension": "functional",
|
| 190 |
"w": 1.5,
|
| 191 |
+
"description": "The product-card quantity boxes default to 100: the postcard shows $69.00; changing to 499 shows $344.31 (no discount); changing to 500 shows $293.25; changing to 505 shows $296.18 (cents truncated, not rounded); changing the folded card quantity to 800 shows $605.20. Values update immediately with input, with no confirm button to click."
|
| 192 |
}
|
| 193 |
],
|
| 194 |
"inject": null,
|
| 195 |
"qc_static": [],
|
| 196 |
"review_status": "needs_human"
|
| 197 |
+
}
|
tasks/c17/task.json
CHANGED
|
@@ -3,205 +3,205 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"seed_meta": {},
|
| 18 |
-
"title": "
|
| 19 |
"milestones": [
|
| 20 |
{
|
| 21 |
-
"operator": "
|
| 22 |
-
"request": "
|
| 23 |
},
|
| 24 |
{
|
| 25 |
-
"operator": "
|
| 26 |
-
"request": "
|
| 27 |
},
|
| 28 |
{
|
| 29 |
-
"operator": "
|
| 30 |
-
"request": "
|
| 31 |
},
|
| 32 |
{
|
| 33 |
-
"operator": "
|
| 34 |
-
"request": "
|
| 35 |
}
|
| 36 |
],
|
| 37 |
"checklist": [
|
| 38 |
{
|
| 39 |
"id": "gen.brand.header",
|
| 40 |
"m": 1,
|
| 41 |
-
"dimension": "
|
| 42 |
"w": 1.0,
|
| 43 |
-
"description": "
|
| 44 |
},
|
| 45 |
{
|
| 46 |
"id": "gen.area.counts",
|
| 47 |
"m": 1,
|
| 48 |
-
"dimension": "
|
| 49 |
"w": 1.5,
|
| 50 |
-
"description": "
|
| 51 |
},
|
| 52 |
{
|
| 53 |
"id": "gen.card.fields",
|
| 54 |
"m": 1,
|
| 55 |
-
"dimension": "
|
| 56 |
"w": 1.0,
|
| 57 |
-
"description": "
|
| 58 |
},
|
| 59 |
{
|
| 60 |
"id": "gen.rule.a32",
|
| 61 |
"m": 1,
|
| 62 |
-
"dimension": "
|
| 63 |
"w": 1.5,
|
| 64 |
-
"description": "
|
| 65 |
},
|
| 66 |
{
|
| 67 |
"id": "gen.rule.a13",
|
| 68 |
"m": 1,
|
| 69 |
-
"dimension": "
|
| 70 |
"w": 1.0,
|
| 71 |
-
"description": "
|
| 72 |
},
|
| 73 |
{
|
| 74 |
"id": "gen.grid.layout",
|
| 75 |
"m": 1,
|
| 76 |
-
"dimension": "
|
| 77 |
"w": 1.0,
|
| 78 |
-
"description": "
|
| 79 |
},
|
| 80 |
{
|
| 81 |
"id": "filter.default.paging",
|
| 82 |
"m": 2,
|
| 83 |
-
"dimension": "
|
| 84 |
"w": 1.5,
|
| 85 |
-
"description": "
|
| 86 |
},
|
| 87 |
{
|
| 88 |
"id": "filter.combo.hair.gaoxin",
|
| 89 |
"m": 2,
|
| 90 |
-
"dimension": "
|
| 91 |
"w": 1.5,
|
| 92 |
-
"description": "
|
| 93 |
},
|
| 94 |
{
|
| 95 |
"id": "filter.sort.price",
|
| 96 |
"m": 2,
|
| 97 |
-
"dimension": "
|
| 98 |
"w": 1.0,
|
| 99 |
-
"description": "
|
| 100 |
},
|
| 101 |
{
|
| 102 |
"id": "filter.sort.sales.discount",
|
| 103 |
"m": 2,
|
| 104 |
-
"dimension": "
|
| 105 |
"w": 1.0,
|
| 106 |
-
"description": "
|
| 107 |
},
|
| 108 |
{
|
| 109 |
"id": "filter.page.reset",
|
| 110 |
"m": 2,
|
| 111 |
-
"dimension": "
|
| 112 |
"w": 1.5,
|
| 113 |
-
"description": "
|
| 114 |
},
|
| 115 |
{
|
| 116 |
"id": "filter.rating.empty.reset",
|
| 117 |
"m": 2,
|
| 118 |
-
"dimension": "
|
| 119 |
"w": 1.0,
|
| 120 |
-
"description": "
|
| 121 |
},
|
| 122 |
{
|
| 123 |
"id": "cart.limit.badge",
|
| 124 |
"m": 3,
|
| 125 |
-
"dimension": "
|
| 126 |
"w": 1.5,
|
| 127 |
-
"description": "
|
| 128 |
},
|
| 129 |
{
|
| 130 |
"id": "cart.card.qty",
|
| 131 |
"m": 3,
|
| 132 |
-
"dimension": "
|
| 133 |
"w": 1.0,
|
| 134 |
-
"description": "
|
| 135 |
},
|
| 136 |
{
|
| 137 |
"id": "cart.amount.tiers",
|
| 138 |
"m": 3,
|
| 139 |
-
"dimension": "
|
| 140 |
"w": 1.5,
|
| 141 |
-
"description": "
|
| 142 |
},
|
| 143 |
{
|
| 144 |
"id": "cart.remove.row",
|
| 145 |
"m": 3,
|
| 146 |
-
"dimension": "
|
| 147 |
"w": 1.0,
|
| 148 |
-
"description": "
|
| 149 |
},
|
| 150 |
{
|
| 151 |
"id": "cart.checkout.chain",
|
| 152 |
"m": 3,
|
| 153 |
-
"dimension": "
|
| 154 |
"w": 1.5,
|
| 155 |
-
"description": "
|
| 156 |
},
|
| 157 |
{
|
| 158 |
"id": "cart.filter.isolation",
|
| 159 |
"m": 3,
|
| 160 |
-
"dimension": "
|
| 161 |
"w": 1.5,
|
| 162 |
-
"description": "
|
| 163 |
},
|
| 164 |
{
|
| 165 |
"id": "theme.global.dark",
|
| 166 |
"m": 4,
|
| 167 |
-
"dimension": "
|
| 168 |
"w": 1.5,
|
| 169 |
-
"description": "
|
| 170 |
},
|
| 171 |
{
|
| 172 |
"id": "theme.emphasis.consistent",
|
| 173 |
"m": 4,
|
| 174 |
-
"dimension": "
|
| 175 |
"w": 1.0,
|
| 176 |
-
"description": "
|
| 177 |
},
|
| 178 |
{
|
| 179 |
"id": "fav.count.isolation",
|
| 180 |
"m": 4,
|
| 181 |
-
"dimension": "
|
| 182 |
"w": 1.5,
|
| 183 |
-
"description": "
|
| 184 |
},
|
| 185 |
{
|
| 186 |
"id": "fav.filter.combo",
|
| 187 |
"m": 4,
|
| 188 |
-
"dimension": "
|
| 189 |
"w": 1.5,
|
| 190 |
-
"description": "
|
| 191 |
},
|
| 192 |
{
|
| 193 |
"id": "fav.empty.state",
|
| 194 |
"m": 4,
|
| 195 |
-
"dimension": "
|
| 196 |
"w": 1.0,
|
| 197 |
-
"description": "
|
| 198 |
},
|
| 199 |
{
|
| 200 |
"id": "theme.state.preserve",
|
| 201 |
"m": 4,
|
| 202 |
-
"dimension": "
|
| 203 |
"w": 1.0,
|
| 204 |
-
"description": "
|
| 205 |
}
|
| 206 |
],
|
| 207 |
"inject": null,
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"add state",
|
| 8 |
+
"add section",
|
| 9 |
+
"make interactive"
|
| 10 |
],
|
| 11 |
+
"difficulty": "challenging",
|
| 12 |
"levers": [
|
| 13 |
+
"non-local changes",
|
| 14 |
+
"state coupling"
|
| 15 |
],
|
| 16 |
+
"domain": "local services",
|
| 17 |
"seed_meta": {},
|
| 18 |
+
"title": "Alley Life · Community In-Store Group Buys",
|
| 19 |
"milestones": [
|
| 20 |
{
|
| 21 |
+
"operator": "generate",
|
| 22 |
+
"request": "We're launching a community in-store group-buying site called \"Alley Life\" — let's get the homepage out first.\n\nAt the top is a brand bar: on the left the brand name \"Alley Life\", next to it the tagline \"Good deals right downstairs\". Below the brand bar, a district overview listing the four districts we cover — South City, Lakeside, Old Street, High-Tech — one by one, with how many deals each district currently has (count them yourself from the list below, don't make the numbers up).\n\nThe main body is a wall of deal cards, one card per group-buy deal. Each card must show: deal name, store name, district, category tag, struck-through original price, prominent current price, a discount tag, units sold, and rating. The discount tag is computed the crude way: current price divided by original price, times ten, rounded to one decimal place — original 60 sold at 25 gives a 4.2-tenths ratio, shown as \"58% off\"; original 30 sold at 15 gives a 5.0-tenths ratio, shown as \"50% off\". The footer reads one line: \"Alley Life · Community In-Store Group Buys | Customer Service 400-800-1234\".\n\nBelow is the list our operations colleague threw over — build it as-is for now, and keep the cards in the wall in this order, don't reorder on your own:\nOld Street's Grandma's Handmade Flatbread Shop, Food, deal \"Two-Person Flatbread & Soy Milk Combo\", original price 28 sold at 19, 312 sold, rating 4.7; Old Street's Chen's Beef Offal Noodle House, Food, \"Signature Beef Offal Noodles (2 Bowls)\", original 46 sold at 29, 588 sold, 4.5; South City No. 7 Coffee, Food, \"Pour-Over Coffee + Croissant\", original 68 sold at 39, 176 sold, 4.8; South City Good Cut Express Haircut, Hair Salon, \"Wash, Cut & Blow-Dry Single Voucher\", original 60 sold at 25, 903 sold, 4.3; Lakeside Stylist Home Hair Salon, Hair Salon, \"Hair Coloring + Treatment\", original 880 sold at 499, 64 sold, 4.6; Lakeside Songtao Foot Spa, Massage, \"60-Minute Foot Massage\", original 158 sold at 88, 421 sold, 4.4; High-Tech Mushi SPA, Massage, \"90-Minute Full-Body Massage\", original 398 sold at 268, 87 sold, 4.9; High-Tech Little Dinosaur Family Park, Family, \"Kids' 2-Hour Unlimited Play\", original 120 sold at 59, 655 sold, 4.2; South City Children's Art Studio, Family, \"Kids' Painting Trial Class\", original 200 sold at 99, 130 sold, 4.6; Lakeside Iron Gym, Fitness, \"Monthly Pass Trial\", original 399 sold at 199, 241 sold, 4.1; High-Tech Ignition Personal Training, Fitness, \"3 Personal Training Sessions\", original 900 sold at 599, 38 sold, 4.8; Old Street Alley Corner Barbershop, Hair Salon, \"Master Barber Haircut Voucher\", original 30 sold at 15, 1024 sold, 4.9.\n\nBesides those twelve, there's a batch of standard combos — operations couldn't be bothered naming them, so they're just \"Neighborhood Select Combo A01\" through \"Neighborhood Select Combo A32\", all with the store name \"Neighborhood Select Direct Store\". Their info is derived from the number: districts cycle from A01 through South City, Lakeside, Old Street, High-Tech; categories cycle from A01 through Food, Hair Salon, Massage, Family, Fitness; the original price is the number times ten plus fifty; the current price is 70% of the original (they all come out as whole numbers, so no messy cents to worry about); units sold is the number times seven; the rating is based on the last digit of the number: whatever the last digit is, that's the decimal after 4., and a last digit of 0 means 4.0. This batch comes after the first twelve, A01 through A32 in numerical order."
|
| 23 |
},
|
| 24 |
{
|
| 25 |
+
"operator": "add state",
|
| 26 |
+
"request": "Just laying out a wall of cards means users can't find anything — they need to be able to pick.\n\nAbove the card wall, give a row of category buttons: All, Food, Hair Salon, Massage, Family, Fitness; then a row of district buttons: All, South City, Lakeside, Old Street, High-Tech; the two rows can be active at the same time. Next to them, a sort selector with options \"Recommended\" (the original list order; this is the default), \"Sales: high to low\", \"Current price: low to high\", and \"Best value first\" (the lower the current-to-original price ratio, the earlier it ranks). Also add a \"Show only 4.5 stars and above\" toggle.\n\nNext to the filter area there should be a count line that tells the user in real time \"N deals in total\" — the number must match the number of cards actually shown below.\n\nThe card wall holds only 12 per page; give pagination below showing the current page and total pages; when the results don't fill a page, page 2 shouldn't appear in the pager. One thing to watch: after the user changes any filter condition or sort order, they must start again from page 1 — don't leave them stranded on an empty page.\n\nIf a combination of conditions yields no deals, don't leave a blank area — show the plain-language message \"No deals under this combination for now — try different filters\", plus a \"Clear filters\" button. Clicking it resets all conditions, sort, and toggles to their initial state, and all the deals come back."
|
| 27 |
},
|
| 28 |
{
|
| 29 |
+
"operator": "add section",
|
| 30 |
+
"request": "Next we need to actually take orders.\n\nAdd a \"Buy Now\" button to every card; clicking it puts that deal in the cart. Put a cart entry at the right side of the top brand bar, with a badge showing the total number of items in the cart (the sum of quantities, not the number of distinct deals). Clicking the cart entry opens the cart panel.\n\nIn the cart panel each row shows the deal name, current price, and quantity; the quantity can go up and down. Two rules: no more than 3 of the same deal per order — once the limit is reached, neither the Buy Now button on the card nor the plus in the panel may increase it any further, and both must tell the user \"Limit 3 per deal per order\"; when a quantity drops to 0, that row is removed from the cart entirely. When the cart is empty, the panel reads \"Your cart is empty — go browse for something\".\n\nGet the money right: first a subtotal (each row's current price times quantity, summed); then the platform coupon — spend 200 save 30, spend 500 save 80, spend 1000 save 150, only the highest tier you qualify for applies; the amount payable is the subtotal minus the coupon; finally a line \"You've saved ¥X\", where X is the combined original price of these deals minus the amount payable.\n\nCheckout is three steps: click \"Checkout\" in the cart panel to get to confirmation; this step must let the user enter a phone number and choose a pickup time — both must be there; the phone number must be 11 digits, and until it's valid \"Place order\" must be unclickable; after a successful submit, show an order-success result with the order number and amount paid, and clear the cart and reset the badge to zero.\n\nAlso, the cart follows the person: however the user filters or pages above, that must not affect what's already in the cart. For deals already added, the card should show how many were selected."
|
| 31 |
},
|
| 32 |
{
|
| 33 |
+
"operator": "make interactive",
|
| 34 |
+
"request": "Two additions, both user requests.\n\nFirst, browsing at night is harsh on the eyes — add a night mode toggle to the brand bar. When it's on, the whole site must go dark — the filter area, card wall, pagination, cart panel, checkout confirmation, and order-success overlays — none can be missed; don't leave a white panel stuck in the dark. Close the browser and come back, and it must remember which mode the user last chose. Design has a note: at night don't make it gaudy, keep the overall treatment restrained; but product also has a note: the Buy Now button and the discount amounts must be visible at a glance. Strike a balance yourself, but the style under the two modes must be one system — it can't look like one thing by day and another by night.\n\nSecond, add favorites. Put a heart in the corner of every card; click to favorite, click again to unfavorite. The brand bar shows \"Favorites (n)\"; clicking it switches to \"Favorites only\", and at that point the category and district filters must still stack on top, with the count updating too; this toggle only governs favorites and won't clear the category and district conditions along the way. When there isn't a single favorite, under Favorites only write \"You haven't favorited any deals yet\". Favorites are favorites and the cart is the cart — don't let them leak into each other."
|
| 35 |
}
|
| 36 |
],
|
| 37 |
"checklist": [
|
| 38 |
{
|
| 39 |
"id": "gen.brand.header",
|
| 40 |
"m": 1,
|
| 41 |
+
"dimension": "visual",
|
| 42 |
"w": 1.0,
|
| 43 |
+
"description": "The brand bar at the top of the first screen shows both the brand name \"Alley Life\" and the tagline \"Good deals right downstairs\"; at the bottom of the page appears the entire line \"Alley Life · Community In-Store Group Buys | Customer Service 400-800-1234\"."
|
| 44 |
},
|
| 45 |
{
|
| 46 |
"id": "gen.area.counts",
|
| 47 |
"m": 1,
|
| 48 |
+
"dimension": "functional",
|
| 49 |
"w": 1.5,
|
| 50 |
+
"description": "The district overview strip lists the four districts South City, Lakeside, Old Street, and High-Tech, and the deal count shown after each district is 11 (44 in total across the four)."
|
| 51 |
},
|
| 52 |
{
|
| 53 |
"id": "gen.card.fields",
|
| 54 |
"m": 1,
|
| 55 |
+
"dimension": "visual",
|
| 56 |
"w": 1.0,
|
| 57 |
+
"description": "On the \"Master Barber Haircut Voucher\" card, all of the following are visible at once: the store name \"Alley Corner Barbershop\", the district \"Old Street\", the category \"Hair Salon\", the struck-through original price 30, the current price 15, the discount tag \"50% off\", 1024 sold, and the rating 4.9."
|
| 58 |
},
|
| 59 |
{
|
| 60 |
"id": "gen.rule.a32",
|
| 61 |
"m": 1,
|
| 62 |
+
"dimension": "functional",
|
| 63 |
"w": 1.5,
|
| 64 |
+
"description": "The \"Neighborhood Select Combo A32\" card shows the store name \"Neighborhood Select Direct Store\", district High-Tech, category Hair Salon, original price 370, current price 259, discount tag \"30% off\", 224 sold, and rating 4.2."
|
| 65 |
},
|
| 66 |
{
|
| 67 |
"id": "gen.rule.a13",
|
| 68 |
"m": 1,
|
| 69 |
+
"dimension": "functional",
|
| 70 |
"w": 1.0,
|
| 71 |
+
"description": "The \"Neighborhood Select Combo A13\" card shows the store name \"Neighborhood Select Direct Store\", district South City, category Massage, original price 180, current price 126, 91 sold, and rating 4.3."
|
| 72 |
},
|
| 73 |
{
|
| 74 |
"id": "gen.grid.layout",
|
| 75 |
"m": 1,
|
| 76 |
+
"dimension": "visual",
|
| 77 |
"w": 1.0,
|
| 78 |
+
"description": "At 1280px width the cards are arranged in a grid, at least 3 per row, with cards on the same row aligned in height; the original price is gray and struck through, the current price is in a clearly contrasting accent color, and the page has no horizontal scrollbar."
|
| 79 |
},
|
| 80 |
{
|
| 81 |
"id": "filter.default.paging",
|
| 82 |
"m": 2,
|
| 83 |
+
"dimension": "functional",
|
| 84 |
"w": 1.5,
|
| 85 |
+
"description": "On initial entry (category/district both All, sort Recommended) the count line shows \"44 deals in total\" and exactly 12 cards render on the current page: the 1st is \"Two-Person Flatbread & Soy Milk Combo\" and the 12th is \"Master Barber Haircut Voucher\"; going to page 2, the 1st is \"Neighborhood Select Combo A01\"; page 4 (the last page) renders exactly 8 cards."
|
| 86 |
},
|
| 87 |
{
|
| 88 |
"id": "filter.combo.hair.gaoxin",
|
| 89 |
"m": 2,
|
| 90 |
+
"dimension": "functional",
|
| 91 |
"w": 1.5,
|
| 92 |
+
"description": "After clicking the category \"Hair Salon\" the count becomes 10; after also clicking the district \"High-Tech\" the count becomes 2, and the two cards shown are exactly \"Neighborhood Select Combo A12\" and \"Neighborhood Select Combo A32\"."
|
| 93 |
},
|
| 94 |
{
|
| 95 |
"id": "filter.sort.price",
|
| 96 |
"m": 2,
|
| 97 |
+
"dimension": "functional",
|
| 98 |
"w": 1.0,
|
| 99 |
+
"description": "With category and district both \"All\", switching the sort to \"Current price: low to high\" makes the first three cards of page 1, in order: \"Master Barber Haircut Voucher\" (15), \"Two-Person Flatbread & Soy Milk Combo\" (19), \"Wash, Cut & Blow-Dry Single Voucher\" (25), and the count is still \"44 deals in total\"."
|
| 100 |
},
|
| 101 |
{
|
| 102 |
"id": "filter.sort.sales.discount",
|
| 103 |
"m": 2,
|
| 104 |
+
"dimension": "interaction",
|
| 105 |
"w": 1.0,
|
| 106 |
+
"description": "With category \"Hair Salon\" and sort \"Sales: high to low\", the first three cards are, in order, \"Master Barber Haircut Voucher\" (1024), \"Wash, Cut & Blow-Dry Single Voucher\" (903), \"Neighborhood Select Combo A32\" (224); keeping category \"Hair Salon\" and changing the sort to \"Best value first\", the first three become, in order, \"Wash, Cut & Blow-Dry Single Voucher\" (58% off), \"Master Barber Haircut Voucher\" (50% off), \"Hair Coloring + Treatment\" (43% off)."
|
| 107 |
},
|
| 108 |
{
|
| 109 |
"id": "filter.page.reset",
|
| 110 |
"m": 2,
|
| 111 |
+
"dimension": "interaction",
|
| 112 |
"w": 1.5,
|
| 113 |
+
"description": "Under default conditions, first go to page 3; clicking category \"Family\" immediately returns the list to page 1, the count is 8 and the pager has only 1 page (no page 2); then switch the category back to \"All\" and go to page 2, change only the sort to \"Current price: low to high\", and the list immediately returns to page 1 — neither operation leaves you on an out-of-range empty page."
|
| 114 |
},
|
| 115 |
{
|
| 116 |
"id": "filter.rating.empty.reset",
|
| 117 |
"m": 2,
|
| 118 |
+
"dimension": "functional",
|
| 119 |
"w": 1.0,
|
| 120 |
+
"description": "With category \"Food\" selected and \"Show only 4.5 stars and above\" turned on, the count is 6 and no 4.1-star deal appears in the list; keeping the toggle on, change to category \"Massage\" + district \"South City\", the count becomes 0 and \"No deals under this combination for now — try different filters\" appears; clicking \"Clear filters\" returns the count to 44, category and district both back to \"All\", the rating toggle off, and the sort back to \"Recommended\"."
|
| 121 |
},
|
| 122 |
{
|
| 123 |
"id": "cart.limit.badge",
|
| 124 |
"m": 3,
|
| 125 |
+
"dimension": "functional",
|
| 126 |
"w": 1.5,
|
| 127 |
+
"description": "Clicking Buy Now on the \"Master Barber Haircut Voucher\" card 4 times in a row leaves the cart badge at 3 (not 4); that row's quantity in the cart panel is 3, the plus inside the panel is disabled, and the message \"Limit 3 per deal per order\" appears on the page."
|
| 128 |
},
|
| 129 |
{
|
| 130 |
"id": "cart.card.qty",
|
| 131 |
"m": 3,
|
| 132 |
+
"dimension": "interaction",
|
| 133 |
"w": 1.0,
|
| 134 |
+
"description": "After adding 2 units of \"Master Barber Haircut Voucher\", its card shows a marker indicating 2 selected; after switching the category to \"Food\" and back, or going to page 2 and back to page 1, the marker is still on that card and the number is still 2."
|
| 135 |
},
|
| 136 |
{
|
| 137 |
"id": "cart.amount.tiers",
|
| 138 |
"m": 3,
|
| 139 |
+
"dimension": "functional",
|
| 140 |
"w": 1.5,
|
| 141 |
+
"description": "When the cart is \"Master Barber Haircut Voucher\" ×3 + \"60-Minute Foot Massage\" ×1, it shows a subtotal of 133, no coupon discount, an amount payable of 133, and you've saved 115; after also adding \"90-Minute Full-Body Massage\" ×1 it shows a subtotal of 401, discount 30, payable 371, saved 275, badge 5; after also adding \"Hair Coloring + Treatment\" ×1 it shows subtotal 900, discount 80 (not 30 and not 150), payable 820, saved 706, badge 6."
|
| 142 |
},
|
| 143 |
{
|
| 144 |
"id": "cart.remove.row",
|
| 145 |
"m": 3,
|
| 146 |
+
"dimension": "interaction",
|
| 147 |
"w": 1.0,
|
| 148 |
+
"description": "In the state of \"Master Barber Haircut Voucher\" ×3 + \"60-Minute Foot Massage\" ×1 + \"90-Minute Full-Body Massage\" ×1 (payable 371), reduce \"60-Minute Foot Massage\" from 1 to 0; the row disappears from the cart, the subtotal becomes 313, discount 30, payable 283, saved 205, and the badge becomes 4."
|
| 149 |
},
|
| 150 |
{
|
| 151 |
"id": "cart.checkout.chain",
|
| 152 |
"m": 3,
|
| 153 |
+
"dimension": "interaction",
|
| 154 |
"w": 1.5,
|
| 155 |
+
"description": "Standalone scenario: first build the cart as \"Master Barber Haircut Voucher\" ×3 + \"60-Minute Foot Massage\" ×1 + \"90-Minute Full-Body Massage\" ×1 (badge 5, payable 371); after clicking \"Checkout\", the confirmation step shows both the phone input and the pickup-time selector; when only 10 digits are entered for the phone, \"Place order\" is unclickable, and once it is filled to 11 digits it can be submitted; the result page shows an order number and the amount paid 371, after which the cart badge reads 0 and opening the cart again shows \"Your cart is empty — go browse for something\"."
|
| 156 |
},
|
| 157 |
{
|
| 158 |
"id": "cart.filter.isolation",
|
| 159 |
"m": 3,
|
| 160 |
+
"dimension": "functional",
|
| 161 |
"w": 1.5,
|
| 162 |
+
"description": "Standalone scenario: rebuild the cart as \"Master Barber Haircut Voucher\" ×3 + \"60-Minute Foot Massage\" ×1 + \"90-Minute Full-Body Massage\" ×1 (three rows, 5 items total, payable 371); switching the category to \"Family\" (count 8, only 1 page) so that all carted deals are filtered out leaves the badge at 5, the cart still these three rows, and the amount payable still 371; then switching the category back to \"All\" and going to page 2, the badge and cart contents remain unchanged."
|
| 163 |
},
|
| 164 |
{
|
| 165 |
"id": "theme.global.dark",
|
| 166 |
"m": 4,
|
| 167 |
+
"dimension": "visual",
|
| 168 |
"w": 1.5,
|
| 169 |
+
"description": "After turning on night mode, the page background, filter area, cards, pagination area, cart panel, checkout confirmation layer, and the order-success result layer after submitting the order are all dark, with no contiguous area still on a light white background; after refreshing the page it is still in night mode."
|
| 170 |
},
|
| 171 |
{
|
| 172 |
"id": "theme.emphasis.consistent",
|
| 173 |
"m": 4,
|
| 174 |
+
"dimension": "visual",
|
| 175 |
"w": 1.0,
|
| 176 |
+
"description": "In night mode the Buy Now button and the discount/amount-payable amounts use an accent from the same hue family as in day mode (if day mode is orange-red, night mode stays orange-red); the Buy Now button keeps a solid fill or clear outline treatment that clearly distinguishes it from ordinary body text; the current price remains the accent color, the original price remains struck through, and the discount tag text remains clearly legible; the page has no large areas of highly saturated gradients or neon decoration."
|
| 177 |
},
|
| 178 |
{
|
| 179 |
"id": "fav.count.isolation",
|
| 180 |
"m": 4,
|
| 181 |
+
"dimension": "functional",
|
| 182 |
"w": 1.5,
|
| 183 |
+
"description": "After favoriting 3 cards in sequence, the brand bar shows \"Favorites (3)\" while the cart badge number doesn't change; clicking the heart on one of them again shows \"Favorites (2)\", that card's heart returns to the unfavorited style, and the cart contents and badge remain unchanged."
|
| 184 |
},
|
| 185 |
{
|
| 186 |
"id": "fav.filter.combo",
|
| 187 |
"m": 4,
|
| 188 |
+
"dimension": "interaction",
|
| 189 |
"w": 1.5,
|
| 190 |
+
"description": "After favoriting \"Master Barber Haircut Voucher\", \"60-Minute Foot Massage\", and \"Neighborhood Select Combo A32\", turning on \"Favorites only\" shows a count of 3; clicking category \"Hair Salon\" then changes the count to 2, leaving only the haircut voucher and A32 cards."
|
| 191 |
},
|
| 192 |
{
|
| 193 |
"id": "fav.empty.state",
|
| 194 |
"m": 4,
|
| 195 |
+
"dimension": "functional",
|
| 196 |
"w": 1.0,
|
| 197 |
+
"description": "Standalone scenario: with category and district both \"All\", first favorite any 2 cards; turn on \"Favorites only\" and then unfavorite those 2 one by one; \"You haven't favorited any deals yet\" appears and the count is 0; after turning \"Favorites only\" off (category still \"All\"), the count returns to \"44 deals in total\"."
|
| 198 |
},
|
| 199 |
{
|
| 200 |
"id": "theme.state.preserve",
|
| 201 |
"m": 4,
|
| 202 |
+
"dimension": "functional",
|
| 203 |
"w": 1.0,
|
| 204 |
+
"description": "While the district filter \"Lakeside\" (count 11) is applied and the cart has 2 items, toggling night mode keeps the count at 11, the card set on the current page unchanged, and the cart badge at 2; after the toggle, the category buttons and pagination can still be clicked normally and take effect immediately."
|
| 205 |
}
|
| 206 |
],
|
| 207 |
"inject": null,
|
tasks/c20/task.json
CHANGED
|
@@ -3,234 +3,234 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"repair": true,
|
| 18 |
-
"inject_type": "
|
| 19 |
"seed_meta": {
|
| 20 |
"repo_src": null,
|
| 21 |
"exclude_slug": "react_zh_001194",
|
| 22 |
"repo_shot": true
|
| 23 |
},
|
| 24 |
-
"title": "Het Actiefonds →
|
| 25 |
"milestones": [
|
| 26 |
{
|
| 27 |
-
"operator": "
|
| 28 |
-
"request": "
|
| 29 |
},
|
| 30 |
{
|
| 31 |
-
"operator": "
|
| 32 |
-
"request": "
|
| 33 |
},
|
| 34 |
{
|
| 35 |
-
"operator": "
|
| 36 |
-
"request": "
|
| 37 |
},
|
| 38 |
{
|
| 39 |
-
"operator": "
|
| 40 |
-
"request": "
|
| 41 |
},
|
| 42 |
{
|
| 43 |
-
"operator": "
|
| 44 |
-
"request": "
|
| 45 |
}
|
| 46 |
],
|
| 47 |
"checklist": [
|
| 48 |
{
|
| 49 |
"id": "catalog.count.42",
|
| 50 |
"m": 1,
|
| 51 |
-
"dimension": "
|
| 52 |
"w": 1.5,
|
| 53 |
-
"description": "
|
| 54 |
},
|
| 55 |
{
|
| 56 |
"id": "catalog.stats.exact",
|
| 57 |
"m": 1,
|
| 58 |
-
"dimension": "
|
| 59 |
"w": 1.5,
|
| 60 |
-
"description": "
|
| 61 |
},
|
| 62 |
{
|
| 63 |
"id": "catalog.level.price.map",
|
| 64 |
"m": 1,
|
| 65 |
-
"dimension": "
|
| 66 |
"w": 1.0,
|
| 67 |
-
"description": "
|
| 68 |
},
|
| 69 |
{
|
| 70 |
"id": "catalog.full.six",
|
| 71 |
"m": 1,
|
| 72 |
-
"dimension": "
|
| 73 |
"w": 1.0,
|
| 74 |
-
"description": "
|
| 75 |
},
|
| 76 |
{
|
| 77 |
"id": "catalog.style.keep",
|
| 78 |
"m": 1,
|
| 79 |
-
"dimension": "
|
| 80 |
"w": 1.0,
|
| 81 |
-
"description": "
|
| 82 |
},
|
| 83 |
{
|
| 84 |
"id": "trim.three.blocks.gone",
|
| 85 |
"m": 2,
|
| 86 |
-
"dimension": "
|
| 87 |
"w": 1.5,
|
| 88 |
-
"description": "
|
| 89 |
},
|
| 90 |
{
|
| 91 |
"id": "trim.nav.rewire",
|
| 92 |
"m": 2,
|
| 93 |
-
"dimension": "
|
| 94 |
"w": 1.5,
|
| 95 |
-
"description": "
|
| 96 |
},
|
| 97 |
{
|
| 98 |
"id": "trim.no.gap",
|
| 99 |
"m": 2,
|
| 100 |
-
"dimension": "
|
| 101 |
"w": 1.0,
|
| 102 |
-
"description": "
|
| 103 |
},
|
| 104 |
{
|
| 105 |
"id": "trim.keep.stats",
|
| 106 |
"m": 2,
|
| 107 |
-
"dimension": "
|
| 108 |
"w": 1.0,
|
| 109 |
-
"description": "
|
| 110 |
},
|
| 111 |
{
|
| 112 |
"id": "state.paging.exact",
|
| 113 |
"m": 3,
|
| 114 |
-
"dimension": "
|
| 115 |
"w": 1.5,
|
| 116 |
-
"description": "
|
| 117 |
},
|
| 118 |
{
|
| 119 |
"id": "state.combo.diagonal",
|
| 120 |
"m": 3,
|
| 121 |
-
"dimension": "
|
| 122 |
"w": 1.5,
|
| 123 |
-
"description": "
|
| 124 |
},
|
| 125 |
{
|
| 126 |
"id": "state.sort.all.four",
|
| 127 |
"m": 3,
|
| 128 |
-
"dimension": "
|
| 129 |
"w": 1.0,
|
| 130 |
-
"description": "
|
| 131 |
},
|
| 132 |
{
|
| 133 |
"id": "state.filter.reset.page",
|
| 134 |
"m": 3,
|
| 135 |
-
"dimension": "
|
| 136 |
"w": 1.0,
|
| 137 |
-
"description": "
|
| 138 |
},
|
| 139 |
{
|
| 140 |
"id": "state.cart.exact.idempotent",
|
| 141 |
"m": 3,
|
| 142 |
-
"dimension": "
|
| 143 |
"w": 1.5,
|
| 144 |
-
"description": "
|
| 145 |
},
|
| 146 |
{
|
| 147 |
"id": "state.full.and.stats.coupling",
|
| 148 |
"m": 3,
|
| 149 |
-
"dimension": "
|
| 150 |
"w": 1.0,
|
| 151 |
-
"description": "6
|
| 152 |
},
|
| 153 |
{
|
| 154 |
"id": "fix.single.submit",
|
| 155 |
"m": 4,
|
| 156 |
-
"dimension": "
|
| 157 |
"w": 1.5,
|
| 158 |
-
"description": "
|
| 159 |
},
|
| 160 |
{
|
| 161 |
"id": "fix.race.latest.wins",
|
| 162 |
"m": 4,
|
| 163 |
-
"dimension": "
|
| 164 |
"w": 1.5,
|
| 165 |
-
"description": "
|
| 166 |
},
|
| 167 |
{
|
| 168 |
"id": "fix.no.stuck",
|
| 169 |
"m": 4,
|
| 170 |
-
"dimension": "
|
| 171 |
"w": 1.0,
|
| 172 |
-
"description": "
|
| 173 |
},
|
| 174 |
{
|
| 175 |
"id": "fix.two.forms.isolated",
|
| 176 |
"m": 4,
|
| 177 |
-
"dimension": "
|
| 178 |
"w": 1.0,
|
| 179 |
-
"description": "
|
| 180 |
},
|
| 181 |
{
|
| 182 |
"id": "fix.no.side.effect",
|
| 183 |
"m": 4,
|
| 184 |
-
"dimension": "
|
| 185 |
"w": 1.0,
|
| 186 |
-
"description": "
|
| 187 |
},
|
| 188 |
{
|
| 189 |
"id": "layout.twocol.grid3",
|
| 190 |
"m": 5,
|
| 191 |
-
"dimension": "
|
| 192 |
"w": 1.5,
|
| 193 |
-
"description": "1280px
|
| 194 |
},
|
| 195 |
{
|
| 196 |
"id": "layout.cart.chain",
|
| 197 |
"m": 5,
|
| 198 |
-
"dimension": "
|
| 199 |
"w": 1.5,
|
| 200 |
-
"description": "
|
| 201 |
},
|
| 202 |
{
|
| 203 |
"id": "layout.keep.state",
|
| 204 |
"m": 5,
|
| 205 |
-
"dimension": "
|
| 206 |
"w": 1.0,
|
| 207 |
-
"description": "
|
| 208 |
},
|
| 209 |
{
|
| 210 |
"id": "layout.keep.deleted.header",
|
| 211 |
"m": 5,
|
| 212 |
-
"dimension": "
|
| 213 |
"w": 1.0,
|
| 214 |
-
"description": "
|
| 215 |
},
|
| 216 |
{
|
| 217 |
"id": "layout.style.consistency",
|
| 218 |
"m": 5,
|
| 219 |
-
"dimension": "
|
| 220 |
"w": 1.0,
|
| 221 |
-
"description": "
|
| 222 |
},
|
| 223 |
{
|
| 224 |
"id": "layout.narrow.single",
|
| 225 |
"m": 5,
|
| 226 |
-
"dimension": "
|
| 227 |
"w": 1.0,
|
| 228 |
-
"description": "390px
|
| 229 |
}
|
| 230 |
],
|
| 231 |
"inject": {
|
| 232 |
-
"type": "
|
| 233 |
-
"saboteur_prompt": "
|
| 234 |
},
|
| 235 |
"qc_static": [],
|
| 236 |
"review_status": "needs_human"
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"wire up data",
|
| 7 |
+
"remove section",
|
| 8 |
+
"add state",
|
| 9 |
+
"repair",
|
| 10 |
+
"restructure layout"
|
| 11 |
],
|
| 12 |
+
"difficulty": "regular",
|
| 13 |
"levers": [
|
| 14 |
+
"exact numeric assertions"
|
| 15 |
],
|
| 16 |
+
"domain": "education courses",
|
| 17 |
"repair": true,
|
| 18 |
+
"inject_type": "async race condition",
|
| 19 |
"seed_meta": {
|
| 20 |
"repo_src": null,
|
| 21 |
"exclude_slug": "react_zh_001194",
|
| 22 |
"repo_shot": true
|
| 23 |
},
|
| 24 |
+
"title": "Het Actiefonds → Action Academy autumn course catalog: wire up catalog data, trim, enrollment state, and subscription-confirmation fix",
|
| 25 |
"milestones": [
|
| 26 |
{
|
| 27 |
+
"operator": "wire up data",
|
| 28 |
+
"request": "We're moving this version of the homepage toward \"Action Academy\": the red-background RECENTE ACTIES block in the middle of the homepage (four action cards) becomes the autumn course catalog as a whole; keep the rough red background and uppercase bold heading treatment. The data was tossed over by ops and is messy, so let me dictate it: 42 courses in total, numbered AF-01 through AF-42 with no gaps or skipped numbers. There are six directions, in this order: Activist Law, Nonviolent Communication, Documentary Film, Community Organizing, Climate Literacy, Digital Security, each occupying 7 consecutive courses (AF-01–AF-07 are Activist Law, and so on). Within each direction the 7 courses follow a fixed difficulty pattern: the first two Beginner, the middle three Intermediate, the last two Master. Prices are flat by level: Beginner €45, Intermediate €75, Master €120; hours are fixed too: Beginner 6 hours, Intermediate 12 hours, Master 20 hours. Enrollment must be spelled out on every card: in principle 12 places per course, and any course not yet full shows its remaining places like \"12 left\" on the card; but the last course in each direction (AF-07, AF-14, and so on) is already full, 0 left, and the card must plainly say \"Full\". Make up the course names per direction yourself as long as the session number is visible, e.g. \"Activist Law Workshop · Session 1\". Above the catalog add a small stats line stating how many courses in total, how many hours altogether, and how many are still open for enrollment; the numbers must match the cards below. Don't touch the rest of the homepage in this step."
|
| 29 |
},
|
| 30 |
{
|
| 31 |
+
"operator": "remove section",
|
| 32 |
+
"request": "The homepage is too long; cut three blocks: the world map together with the big heading \"ondersteunt acties over de hele wereld\" under it goes entirely; the twelve-tile theme image wall goes too — the catalog already has directions, so it's redundant; the red-and-black donation banner at the bottom of the page also comes out. Delete them cleanly ��� don't leave half-empty shells or those outlined ghost headlines. While you're at it, change the top-nav entry that used to point at the theme wall so it points at the course catalog; clicking it must scroll to the catalog, no dead links. Keep the other nav entries and the DONEER NU button at top right as they are. After the deletion the sections should flow into each other smoothly, don't leave a big unexplained gap."
|
| 33 |
},
|
| 34 |
{
|
| 35 |
+
"operator": "add state",
|
| 36 |
+
"request": "The catalog needs course picking. On the left give direction filters (the six directions plus an \"All\"), then a set of level filters (Beginner / Intermediate / Master / All), then a sort (by number by default, plus price low to high, price high to low, hours high to low). There are too many cards; put just 12 per page with paging for the rest; changing any filter or sort restarts from page 1, don't leave people on an empty page. Add \"Add to study list\" to every card: full courses can't be added, and clicking does nothing; clicking the same course repeatedly counts only once, don't let the number double. Above the catalog show a study-list status line: how many selected, and the total in euros. The overall stats strip at the top describes the whole catalog's holdings and must not change no matter how you filter or page."
|
| 37 |
},
|
| 38 |
{
|
| 39 |
+
"operator": "repair",
|
| 40 |
+
"request": "Support forwarded a complaint: in the email subscription box in the footer, someone entered an email, clicked subscribe, immediately realized it was wrong, changed to a new email and clicked again; after a while, the confirmation on screen still showed the first, wrong email (the new one seemed to flash briefly in between). Retrying produces the same result; it always ends up on the earliest address typed. This is embarrassing — please investigate and fix it. After the fix, make sure the normal case of clicking subscribe once isn't broken, and that the two forms — the one in the footer and the one under \"Blijf op de hoogte\" — don't interfere with each other."
|
| 41 |
},
|
| 42 |
{
|
| 43 |
+
"operator": "restructure layout",
|
| 44 |
+
"request": "On wide screens the catalog is too cramped; re-lay it out: move the filters and sort into a vertical filter column on the left of the catalog, with the course card grid on the right, three per row on wide screens; on phones (very narrow screens) fall back to one column, filters above the cards, cards stacked one per row, no horizontal scrollbar. Also, having to scroll back up to the top of the catalog to see the study list is annoying; make it a persistent entry that's always visible on the page, with a count; opening it shows the selected course names, unit prices, and total, allows removing a single entry and clearing all at once, and clearing needs an empty-state message. It should stand out, but don't turn our black-outline, hard-shadow, square-corner rough style into a rounded-gradient e-commerce look; buttons site-wide should be one tone. Don't restore any of the numbers or deleted things settled in the previous version."
|
| 45 |
}
|
| 46 |
],
|
| 47 |
"checklist": [
|
| 48 |
{
|
| 49 |
"id": "catalog.count.42",
|
| 50 |
"m": 1,
|
| 51 |
+
"dimension": "coverage",
|
| 52 |
"w": 1.5,
|
| 53 |
+
"description": "The catalog section contains 42 course cards, numbered AF-01 through AF-42 continuously, with no duplicates and no missing numbers (it's acceptable to verify all 42 cards page by page via pagination or filtering; they don't all need to be on one screen)."
|
| 54 |
},
|
| 55 |
{
|
| 56 |
"id": "catalog.stats.exact",
|
| 57 |
"m": 1,
|
| 58 |
+
"dimension": "functional",
|
| 59 |
"w": 1.5,
|
| 60 |
+
"description": "The stats line above the catalog precisely shows: 42 courses, 528 hours in total, 36 open for enrollment (all three numbers can be read in the page text)."
|
| 61 |
},
|
| 62 |
{
|
| 63 |
"id": "catalog.level.price.map",
|
| 64 |
"m": 1,
|
| 65 |
+
"dimension": "functional",
|
| 66 |
"w": 1.0,
|
| 67 |
+
"description": "Level/price/hours correspond strictly: spot-check AF-03 shows Intermediate, €75, 12 hours; AF-14 shows Master, €120, 20 hours; AF-36 shows Beginner, €45, 6 hours."
|
| 68 |
},
|
| 69 |
{
|
| 70 |
"id": "catalog.full.six",
|
| 71 |
"m": 1,
|
| 72 |
+
"dimension": "functional",
|
| 73 |
"w": 1.0,
|
| 74 |
+
"description": "Enrollment labels are exact: exactly these 6 cards — AF-07, AF-14, AF-21, AF-28, AF-35, AF-42 — are labeled \"Full\" (or 0 left), and the other 36 cards all show 12 places left."
|
| 75 |
},
|
| 76 |
{
|
| 77 |
"id": "catalog.style.keep",
|
| 78 |
"m": 1,
|
| 79 |
+
"dimension": "visual",
|
| 80 |
"w": 1.0,
|
| 81 |
+
"description": "The catalog section keeps the original red background (same color family as #fe3c3c) with uppercase bold headings, and the original copy and layout of the Hero, Updates, and footer are unchanged (the footer keeps its four-column structure of logo plus two link columns plus subscription form)."
|
| 82 |
},
|
| 83 |
{
|
| 84 |
"id": "trim.three.blocks.gone",
|
| 85 |
"m": 2,
|
| 86 |
+
"dimension": "coverage",
|
| 87 |
"w": 1.5,
|
| 88 |
+
"description": "After scrolling the whole page, none of the world map image and its big heading, the 12-tile theme image wall, or the red-and-black donation banner at the bottom can be found, and their respective outlined ghost headlines no longer appear."
|
| 89 |
},
|
| 90 |
{
|
| 91 |
"id": "trim.nav.rewire",
|
| 92 |
"m": 2,
|
| 93 |
+
"dimension": "functional",
|
| 94 |
"w": 1.5,
|
| 95 |
+
"description": "The header still keeps its original 5 nav links, the EN language button, and the DONEER NU button; clicking wat we steunen — which used to point at the theme wall — scrolls the page to the course catalog (the catalog enters the viewport), with no jump to an empty anchor and no console errors."
|
| 96 |
},
|
| 97 |
{
|
| 98 |
"id": "trim.no.gap",
|
| 99 |
"m": 2,
|
| 100 |
+
"dimension": "visual",
|
| 101 |
"w": 1.0,
|
| 102 |
+
"description": "After deletion, adjacent sections join directly: there is no blank band taller than 200px between the course catalog and the Updates section, and the page has no horizontal scrollbar at 1280px width."
|
| 103 |
},
|
| 104 |
{
|
| 105 |
"id": "trim.keep.stats",
|
| 106 |
"m": 2,
|
| 107 |
+
"dimension": "functional",
|
| 108 |
"w": 1.0,
|
| 109 |
+
"description": "The deletion did not affect the catalog: the stats line still shows 42 courses, 528 hours, 36 open for enrollment, and the total number of course cards is still 42."
|
| 110 |
},
|
| 111 |
{
|
| 112 |
"id": "state.paging.exact",
|
| 113 |
"m": 3,
|
| 114 |
+
"dimension": "functional",
|
| 115 |
"w": 1.5,
|
| 116 |
+
"description": "The default view shows 12 per page; page 1 is exactly AF-01 to AF-12, the total number of pages is 4, and page 4 has only 6 (AF-37 to AF-42)."
|
| 117 |
},
|
| 118 |
{
|
| 119 |
"id": "state.combo.diagonal",
|
| 120 |
"m": 3,
|
| 121 |
+
"dimension": "functional",
|
| 122 |
"w": 1.5,
|
| 123 |
+
"description": "With direction \"Documentary Film\" and level \"Intermediate\", the list is exactly 3 courses (AF-17, AF-18, AF-19), and all three cards are priced at €75; switching the level back to \"All\" gives exactly 7 courses for that direction."
|
| 124 |
},
|
| 125 |
{
|
| 126 |
"id": "state.sort.all.four",
|
| 127 |
"m": 3,
|
| 128 |
+
"dimension": "functional",
|
| 129 |
"w": 1.0,
|
| 130 |
+
"description": "With the filter at All, all four sorts work correctly: with \"Price high to low\" the 12 cards on page 1 are exactly all Master courses (AF-06, 07, 13, 14, 20, 21, 27, 28, 34, 35, 41, 42, in any order) and the first card on page 2 costs €75; with \"Price low to high\" the 12 cards on page 1 are all €45 Beginner courses; with \"Hours high to low\" the 12 cards on page 1 all have 20 hours; with the default sort the first card on page 1 is AF-01."
|
| 131 |
},
|
| 132 |
{
|
| 133 |
"id": "state.filter.reset.page",
|
| 134 |
"m": 3,
|
| 135 |
+
"dimension": "interaction",
|
| 136 |
"w": 1.0,
|
| 137 |
+
"description": "First go to page 3, then change any one of direction, level, or sort; the list immediately returns to page 1 (the page indicator is 1 and the first card is the first course under that filter)."
|
| 138 |
},
|
| 139 |
{
|
| 140 |
"id": "state.cart.exact.idempotent",
|
| 141 |
"m": 3,
|
| 142 |
+
"dimension": "interaction",
|
| 143 |
"w": 1.5,
|
| 144 |
+
"description": "After adding AF-01, AF-17, and AF-06 in sequence, the study-list status shows 3 courses, €240 total; then clicking AF-01's add button 5 times in a row still leaves 3 courses, €240."
|
| 145 |
},
|
| 146 |
{
|
| 147 |
"id": "state.full.and.stats.coupling",
|
| 148 |
"m": 3,
|
| 149 |
+
"dimension": "functional",
|
| 150 |
"w": 1.0,
|
| 151 |
+
"description": "The add buttons of the 6 full courses are disabled, and clicking them changes neither the study-list count nor the total amount; and no matter how you filter, sort, or page, the top stats line always shows 42 courses, 528 hours, 36 open for enrollment."
|
| 152 |
},
|
| 153 |
{
|
| 154 |
"id": "fix.single.submit",
|
| 155 |
"m": 4,
|
| 156 |
+
"dimension": "functional",
|
| 157 |
"w": 1.5,
|
| 158 |
+
"description": "Enter een@test.nl in the footer subscription box and submit: within 1.5 seconds a confirmation message appears, its text includes een@test.nl, and the page neither refreshes nor navigates."
|
| 159 |
},
|
| 160 |
{
|
| 161 |
"id": "fix.race.latest.wins",
|
| 162 |
"m": 4,
|
| 163 |
+
"dimension": "functional",
|
| 164 |
"w": 1.5,
|
| 165 |
+
"description": "Enter oud@test.nl and submit, then within 0.3 seconds change to nieuw@test.nl and submit again; after waiting 3 seconds the confirmation stably shows nieuw@test.nl and never changes back to oud@test.nl afterwards."
|
| 166 |
},
|
| 167 |
{
|
| 168 |
"id": "fix.no.stuck",
|
| 169 |
"m": 4,
|
| 170 |
+
"dimension": "interaction",
|
| 171 |
"w": 1.0,
|
| 172 |
+
"description": "After the two consecutive submissions above, the subscribe button can still be clicked again (not stuck in a sending state), the confirmation area contains only one message rather than several stacked, and there are no console errors."
|
| 173 |
},
|
| 174 |
{
|
| 175 |
"id": "fix.two.forms.isolated",
|
| 176 |
"m": 4,
|
| 177 |
+
"dimension": "functional",
|
| 178 |
"w": 1.0,
|
| 179 |
+
"description": "Regression: after submitting in the footer form, the subscription form in the Blijf op de hoogte section shows no confirmation message, and the two forms' email input contents and checkbox states don't affect each other."
|
| 180 |
},
|
| 181 |
{
|
| 182 |
"id": "fix.no.side.effect",
|
| 183 |
"m": 4,
|
| 184 |
+
"dimension": "functional",
|
| 185 |
"w": 1.0,
|
| 186 |
+
"description": "Regression coupling: before and after submitting the subscription, the catalog's current direction and level filters, page number, and the study list's count and total amount all remain unchanged."
|
| 187 |
},
|
| 188 |
{
|
| 189 |
"id": "layout.twocol.grid3",
|
| 190 |
"m": 5,
|
| 191 |
+
"dimension": "visual",
|
| 192 |
"w": 1.5,
|
| 193 |
+
"description": "At 1280px width the catalog is a two-column structure with a vertical filter column on the left and a card grid on the right; the filter and sort controls are both in the left column, and the 12 cards on page 1 of the right column are laid out 3 per row over 4 rows."
|
| 194 |
},
|
| 195 |
{
|
| 196 |
"id": "layout.cart.chain",
|
| 197 |
"m": 5,
|
| 198 |
+
"dimension": "interaction",
|
| 199 |
"w": 1.5,
|
| 200 |
+
"description": "The persistent list entry shows the current count; execution chain: filter to the Digital Security direction, add AF-36 and AF-38, open the list panel and it shows 2 entries, each with a course name and unit prices of €45 (AF-36) and €75 (AF-38) respectively, total €120; after removing AF-36 one entry remains, €75; after clearing all the count shows 0 and an empty-state message appears; after closing the panel the catalog is still on the 7 courses of the Digital Security direction."
|
| 201 |
},
|
| 202 |
{
|
| 203 |
"id": "layout.keep.state",
|
| 204 |
"m": 5,
|
| 205 |
+
"dimension": "functional",
|
| 206 |
"w": 1.0,
|
| 207 |
+
"description": "After the restructure pagination is still 4 pages with 6 cards on page 4, the stats line still shows 42 courses, 528 hours, 36 open for enrollment, and the 6 full courses still can't be added."
|
| 208 |
},
|
| 209 |
{
|
| 210 |
"id": "layout.keep.deleted.header",
|
| 211 |
"m": 5,
|
| 212 |
+
"dimension": "functional",
|
| 213 |
"w": 1.0,
|
| 214 |
+
"description": "After the restructure the map block, theme image wall, and donation banner still don't exist; the header still keeps its original 5 nav links, the EN language button, and the DONEER NU button, and DONEER NU still has its original style of white background, roughly 3px black square border, and hard shadow."
|
| 215 |
},
|
| 216 |
{
|
| 217 |
"id": "layout.style.consistency",
|
| 218 |
"m": 5,
|
| 219 |
+
"dimension": "visual",
|
| 220 |
"w": 1.0,
|
| 221 |
+
"description": "The list entry stays visible when the page is scrolled to the middle (catalog area) and the bottom (footer area) (fixed or floating both fine) and shows the correct count; this entry and the expanded panel use the same black thick outline, hard shadow, square corners, and no-gradient treatment as DONEER NU and WORD OOK DONATEUR, and site-wide buttons keep one consistent border-radius and outline treatment, with no rounded gradient buttons."
|
| 222 |
},
|
| 223 |
{
|
| 224 |
"id": "layout.narrow.single",
|
| 225 |
"m": 5,
|
| 226 |
+
"dimension": "visual",
|
| 227 |
"w": 1.0,
|
| 228 |
+
"description": "At 390px narrow width the catalog becomes a single column: the filter area is above the cards, cards are 1 per row, the page has no horizontal scrollbar, and the persistent list entry is still visible and shows the correct count."
|
| 229 |
}
|
| 230 |
],
|
| 231 |
"inject": {
|
| 232 |
+
"type": "async race condition",
|
| 233 |
+
"saboteur_prompt": "In src/components/NewsletterForm.jsx, turn submission into an async flow with simulated network latency and plant an \"early request overwrites later one\" race defect: on handleSubmit store the current email in a local variable, then use setTimeout to simulate the request returning and only afterwards call setSent/setConfirmedEmail; the key is to make the delay inversely related to submission order (for example, use 1200ms for the first submission and have each subsequent submission's delay decrease to around 400ms, or use longer delays for earlier requests), so that the old request sent first returns last and overwrites the result of the new request — the user briefly sees the new email in the confirmation, which then settles permanently on the old email typed the first time. Do not use request sequence numbers, timestamps, AbortController, or any other race protection. Requirements: no console errors or warnings; change only this one component file; do not modify other components, style class names, or page structure; still properly prevent the form's default behavior on submit; leave no comments or telltale variable names (avoid words such as race/bug/stale)."
|
| 234 |
},
|
| 235 |
"qc_static": [],
|
| 236 |
"review_status": "needs_human"
|
tasks/c21/task.json
CHANGED
|
@@ -3,243 +3,243 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
],
|
| 10 |
-
"difficulty": "
|
| 11 |
"levers": [
|
| 12 |
-
"
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {},
|
| 17 |
-
"title": "PixelForge
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
-
"operator": "
|
| 21 |
-
"request": "
|
| 22 |
},
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
}
|
| 39 |
],
|
| 40 |
"checklist": [
|
| 41 |
{
|
| 42 |
"id": "gen.count.total",
|
| 43 |
"m": 1,
|
| 44 |
-
"dimension": "
|
| 45 |
"w": 1.5,
|
| 46 |
-
"description": "
|
| 47 |
},
|
| 48 |
{
|
| 49 |
"id": "gen.format.cycle",
|
| 50 |
"m": 1,
|
| 51 |
-
"dimension": "
|
| 52 |
"w": 1.0,
|
| 53 |
-
"description": "
|
| 54 |
},
|
| 55 |
{
|
| 56 |
"id": "gen.resolution.rule",
|
| 57 |
"m": 1,
|
| 58 |
-
"dimension": "
|
| 59 |
"w": 1.0,
|
| 60 |
-
"description": "
|
| 61 |
},
|
| 62 |
{
|
| 63 |
"id": "gen.statusbar.sum",
|
| 64 |
"m": 1,
|
| 65 |
-
"dimension": "
|
| 66 |
"w": 1.5,
|
| 67 |
-
"description": "
|
| 68 |
},
|
| 69 |
{
|
| 70 |
"id": "gen.layout.urgent",
|
| 71 |
"m": 1,
|
| 72 |
-
"dimension": "
|
| 73 |
"w": 1.0,
|
| 74 |
-
"description": "
|
| 75 |
},
|
| 76 |
{
|
| 77 |
"id": "gen.detail.bind",
|
| 78 |
"m": 1,
|
| 79 |
-
"dimension": "
|
| 80 |
"w": 1.0,
|
| 81 |
-
"description": "
|
| 82 |
},
|
| 83 |
{
|
| 84 |
"id": "state.page.split",
|
| 85 |
"m": 2,
|
| 86 |
-
"dimension": "
|
| 87 |
"w": 1.5,
|
| 88 |
-
"description": "
|
| 89 |
},
|
| 90 |
{
|
| 91 |
"id": "state.sort.both",
|
| 92 |
"m": 2,
|
| 93 |
-
"dimension": "
|
| 94 |
"w": 1.5,
|
| 95 |
-
"description": "
|
| 96 |
},
|
| 97 |
{
|
| 98 |
"id": "state.search.combo",
|
| 99 |
"m": 2,
|
| 100 |
-
"dimension": "
|
| 101 |
"w": 1.0,
|
| 102 |
-
"description": "
|
| 103 |
},
|
| 104 |
{
|
| 105 |
"id": "state.select.cross",
|
| 106 |
"m": 2,
|
| 107 |
-
"dimension": "
|
| 108 |
"w": 1.5,
|
| 109 |
-
"description": "
|
| 110 |
},
|
| 111 |
{
|
| 112 |
"id": "state.filter.summary",
|
| 113 |
"m": 2,
|
| 114 |
-
"dimension": "
|
| 115 |
"w": 1.0,
|
| 116 |
-
"description": "
|
| 117 |
},
|
| 118 |
{
|
| 119 |
"id": "state.empty.reset",
|
| 120 |
"m": 2,
|
| 121 |
-
"dimension": "
|
| 122 |
"w": 1.0,
|
| 123 |
-
"description": "
|
| 124 |
},
|
| 125 |
{
|
| 126 |
"id": "wiz.gate.disabled",
|
| 127 |
"m": 3,
|
| 128 |
-
"dimension": "
|
| 129 |
"w": 1.5,
|
| 130 |
-
"description": "
|
| 131 |
},
|
| 132 |
{
|
| 133 |
"id": "wiz.estimate.exact",
|
| 134 |
"m": 3,
|
| 135 |
-
"dimension": "
|
| 136 |
"w": 1.5,
|
| 137 |
-
"description": "
|
| 138 |
},
|
| 139 |
{
|
| 140 |
"id": "wiz.options.summary",
|
| 141 |
"m": 3,
|
| 142 |
-
"dimension": "
|
| 143 |
"w": 1.0,
|
| 144 |
-
"description": "
|
| 145 |
},
|
| 146 |
{
|
| 147 |
"id": "wiz.step.keep",
|
| 148 |
"m": 3,
|
| 149 |
-
"dimension": "
|
| 150 |
"w": 1.0,
|
| 151 |
-
"description": "
|
| 152 |
},
|
| 153 |
{
|
| 154 |
"id": "wiz.confirm.writeback",
|
| 155 |
"m": 3,
|
| 156 |
-
"dimension": "
|
| 157 |
"w": 1.5,
|
| 158 |
-
"description": "
|
| 159 |
},
|
| 160 |
{
|
| 161 |
"id": "wiz.cancel.noop",
|
| 162 |
"m": 3,
|
| 163 |
-
"dimension": "
|
| 164 |
"w": 1.0,
|
| 165 |
-
"description": "
|
| 166 |
},
|
| 167 |
{
|
| 168 |
"id": "skin.dark.cover",
|
| 169 |
"m": 4,
|
| 170 |
-
"dimension": "
|
| 171 |
"w": 1.5,
|
| 172 |
-
"description": "
|
| 173 |
},
|
| 174 |
{
|
| 175 |
"id": "skin.state.preserve",
|
| 176 |
"m": 4,
|
| 177 |
-
"dimension": "
|
| 178 |
"w": 1.5,
|
| 179 |
-
"description": "
|
| 180 |
},
|
| 181 |
{
|
| 182 |
"id": "skin.urgent.consistent",
|
| 183 |
"m": 4,
|
| 184 |
-
"dimension": "
|
| 185 |
"w": 1.0,
|
| 186 |
-
"description": "
|
| 187 |
},
|
| 188 |
{
|
| 189 |
"id": "skin.compact.page",
|
| 190 |
"m": 4,
|
| 191 |
-
"dimension": "
|
| 192 |
"w": 1.0,
|
| 193 |
-
"description": "
|
| 194 |
},
|
| 195 |
{
|
| 196 |
"id": "skin.modal.dark",
|
| 197 |
"m": 4,
|
| 198 |
-
"dimension": "
|
| 199 |
"w": 1.0,
|
| 200 |
-
"description": "
|
| 201 |
},
|
| 202 |
{
|
| 203 |
"id": "bulk.remove.math",
|
| 204 |
"m": 5,
|
| 205 |
-
"dimension": "
|
| 206 |
"w": 1.5,
|
| 207 |
-
"description": "
|
| 208 |
},
|
| 209 |
{
|
| 210 |
"id": "bulk.undo.idem",
|
| 211 |
"m": 5,
|
| 212 |
-
"dimension": "
|
| 213 |
"w": 1.5,
|
| 214 |
-
"description": "
|
| 215 |
},
|
| 216 |
{
|
| 217 |
"id": "bulk.urgent.toggle",
|
| 218 |
"m": 5,
|
| 219 |
-
"dimension": "
|
| 220 |
"w": 1.0,
|
| 221 |
-
"description": "
|
| 222 |
},
|
| 223 |
{
|
| 224 |
"id": "bulk.exported.recount",
|
| 225 |
"m": 5,
|
| 226 |
-
"dimension": "
|
| 227 |
"w": 1.0,
|
| 228 |
-
"description": "
|
| 229 |
},
|
| 230 |
{
|
| 231 |
"id": "bulk.empty.state",
|
| 232 |
"m": 5,
|
| 233 |
-
"dimension": "
|
| 234 |
"w": 1.0,
|
| 235 |
-
"description": "
|
| 236 |
},
|
| 237 |
{
|
| 238 |
"id": "bulk.empty.dark",
|
| 239 |
"m": 5,
|
| 240 |
-
"dimension": "
|
| 241 |
"w": 1.0,
|
| 242 |
-
"description": "
|
| 243 |
}
|
| 244 |
],
|
| 245 |
"inject": null,
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"add state",
|
| 8 |
+
"restyle"
|
| 9 |
],
|
| 10 |
+
"difficulty": "challenging",
|
| 11 |
"levers": [
|
| 12 |
+
"state coupling",
|
| 13 |
+
"exact numeric assertions"
|
| 14 |
],
|
| 15 |
+
"domain": "tool dashboard",
|
| 16 |
"seed_meta": {},
|
| 17 |
+
"title": "PixelForge Asset Batch Processing Workbench",
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
+
"operator": "generate",
|
| 21 |
+
"request": "We need an internal asset batch-processing workbench called PixelForge; let's put the shell and the data out first. Top to bottom: a toolbar at the very top with the product name \"PixelForge Batch Workbench\" on the left and room for action buttons on the right; the middle main area splits left and right — on the left the asset queue list (filename, format, size, and resolution all visible), on the right a detail panel that shows guidance copy when nothing is selected (like \"Pick an asset on the left to see its details\"), and when an item is clicked shows its filename, format, size, and resolution; at the very bottom pin a persistent status bar where you can see at a glance how many assets are in the queue, the total in MB, how many are selected, and the combined MB of the selected ones — MB always to one decimal place — with nothing selected initially.\n\nDon't make up the data; the rules from ops are: 48 assets in the queue, filenames asset_001 through asset_048 (zero-padded to three digits). Formats cycle in PNG, JPG, WEBP, GIF order — the 1st PNG, the 2nd JPG, the 3rd WEBP, the 4th GIF, then back to PNG, all the way through 48. Size is the sequence number times 0.7 plus 1.2 MB, to one decimal place, so the first is 1.9 MB. Resolution has three tiers: numbers divisible by 3 are 3840×2160, remainder 1 is 1920×1080, remainder 2 is 1280×720. Also, ops flagged urgent ones — the ones whose number is a multiple of 7; the entry must show at a glance that it's urgent, and other entries must not carry this marker."
|
| 22 |
},
|
| 23 |
{
|
| 24 |
+
"operator": "add state",
|
| 25 |
+
"request": "Just looking isn't enough; we need to pick. Above the queue add a row of format filters — PNG, JPG, WEBP, GIF, each togglable, multi-select, with none selected meaning all; next to it an \"Urgent only\" toggle that stacks with the format filters; also a filename search box that keeps entries whose names contain the typed fragment. In the filter area there must also be a live summary of the current filter results telling me how many items are filtered and their combined MB (like \"Filtered results: 12 items / 224.4 MB\", MB still one decimal), and it must follow immediately when the filter conditions change. Sorting must support by number and by size, both ascending and descending. The list shows 10 per page with pagination below, and the current page must be visible.\n\nSelection: each row has a checkbox; pressing the checkbox in the header selects every entry currently filtered (not just this page). One pitfall to avoid: when the filter conditions change, anything previously selected that gets filtered out must no longer count in the stats below, nor be secretly remembered — switching back must not automatically restore the selection. Changing the filter or search returns to page 1. If nothing is left after filtering, the list area must show a clear empty-state message; don't leave a blank board."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "add state",
|
| 29 |
+
"request": "The export button on the right of the toolbar needs to actually work, but with nothing selected it should be gray and unclickable. With something selected, clicking it opens a three-step export wizard, with an indicator of which step you're on.\n\nStep 1 chooses export format and quality: the format has exactly three options — \"Keep original format\", \"Unify to PNG\", \"Unify to JPG\" — and this choice is only recorded and surfaces in the summary on the confirmation page; it doesn't feed into any size or time estimate. Quality offers 100%, 80%, and 60%. Step 2 sets the size (\"Original size\" / \"Scale to half\") and whether to add a watermark; the watermark likewise only affects how the confirmation-page summary is presented and doesn't change the estimates. Step 3 is the confirmation page: lay out everything chosen in the first two steps, and give me two estimates: the estimated size is the selected assets' original combined size times the chosen quality factor (80% means × 0.8); if the size is scaled to half, both dimensions halve, so multiply by another 0.25, to one decimal place. The estimated time is 1.5 seconds per file as a base, plus 2 extra seconds for each 4K file, with the total seconds rounded up.\n\nMoving back and forth between steps, none of the previous choices (format, quality, size, watermark) may be lost. After clicking confirm export, the modal closes, this batch of assets gets an \"Exported\" mark, the selection is cleared and the selected count at the bottom goes to zero, but the total queue count and combined size must not change; also, in an obvious place tell me how many were exported in total (like \"Exported 12/48\"), and exporting the same batch again must not make that number climb twice. Cancelling and closing the wizard midway counts as if nothing happened — no Exported mark may appear, and the previous selections must remain."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "restyle",
|
| 33 |
+
"request": "This tool is harsh on the eyes after a long day, so put a light/dark toggle in the toolbar. Switching to night gives a complete dark, compact version: background, panels, list, input fields, buttons — even the export wizard modal must be dark; don't let a white panel poke out abruptly, and text contrast must stay readable; switching back to day must fully restore. Tighten the row height too so more rows fit on screen, but still 10 per page, and the page count must not change because of the skin.\n\nUse your judgment on the balance here: the urgent marker needs to be prominent in day mode, but in dark mode a screen full of highly saturated blocks burns the eyes — I want restraint and something easy on the eyes. Handle it however you like, but the urgent expression must be the same logic in both modes; it can't be one thing by day and something else at night, and at night you must still be able to pick out urgent items at a glance. The skin is purely cosmetic: my filter conditions, selected entries, current page, filter-result summary, and all the numbers at the bottom may not change at all."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "add state",
|
| 37 |
+
"request": "Last, a few everyday operations. After selecting assets, they can be removed from the queue; afterwards the total queue count, combined size, page count, filter-result summary, and the numbers in the status bar must all line up; if already-exported assets are removed, the exported count must also align with what actually remains — no weird number larger than the queue. Mis-deletion happens all the time, so give an undo; undoing just the most recent removal is enough, but clicking it repeatedly must not duplicate assets into two copies. Also, in the detail panel the urgent status of a single asset can be toggled back and forth, and afterwards the count and total shown by the \"Urgent only\" filter (the summary in the filter area) must update immediately. If the whole queue is cleared, the list must show an empty-state message, all status-bar numbers go to zero, and buttons like export and select-all are grayed out — and undo must still be able to save the day. These operations and empty states must work normally in night mode too; don't let white backgrounds pop out again."
|
| 38 |
}
|
| 39 |
],
|
| 40 |
"checklist": [
|
| 41 |
{
|
| 42 |
"id": "gen.count.total",
|
| 43 |
"m": 1,
|
| 44 |
+
"dimension": "coverage",
|
| 45 |
"w": 1.5,
|
| 46 |
+
"description": "The queue has 48 entries, filenames continuous from asset_001 to asset_048 (three-digit zero-padding); the first, asset_001, shows a size of 1.9 MB, and paging to the end shows asset_048 at 34.8 MB."
|
| 47 |
},
|
| 48 |
{
|
| 49 |
"id": "gen.format.cycle",
|
| 50 |
"m": 1,
|
| 51 |
+
"dimension": "functional",
|
| 52 |
"w": 1.0,
|
| 53 |
+
"description": "Formats cycle PNG/JPG/WEBP/GIF: asset_001 is PNG, asset_002 JPG, asset_003 WEBP, asset_004 GIF, asset_005 PNG again; across the whole queue the four formats each have 12 entries."
|
| 54 |
},
|
| 55 |
{
|
| 56 |
"id": "gen.resolution.rule",
|
| 57 |
"m": 1,
|
| 58 |
+
"dimension": "functional",
|
| 59 |
"w": 1.0,
|
| 60 |
+
"description": "Resolution tiers by the remainder of the number divided by 3: asset_003 and asset_012 show 3840×2160, asset_004 shows 1920×1080, asset_005 shows 1280×720."
|
| 61 |
},
|
| 62 |
{
|
| 63 |
"id": "gen.statusbar.sum",
|
| 64 |
"m": 1,
|
| 65 |
+
"dimension": "coverage",
|
| 66 |
"w": 1.5,
|
| 67 |
+
"description": "The persistent status bar at the bottom initially shows a total queue count of 48 and a combined size of 880.8 MB, with 0 selected and 0.0 MB selected."
|
| 68 |
},
|
| 69 |
{
|
| 70 |
"id": "gen.layout.urgent",
|
| 71 |
"m": 1,
|
| 72 |
+
"dimension": "visual",
|
| 73 |
"w": 1.0,
|
| 74 |
+
"description": "The page has a four-region layout of top toolbar + left queue + right detail panel + bottom status bar, the toolbar shows the text \"PixelForge Batch Workbench\" on the left; the urgent marker appears on exactly these 6 entries — asset_007, asset_014, asset_021, asset_028, asset_035, asset_042 — and no others."
|
| 75 |
},
|
| 76 |
{
|
| 77 |
"id": "gen.detail.bind",
|
| 78 |
"m": 1,
|
| 79 |
+
"dimension": "interaction",
|
| 80 |
"w": 1.0,
|
| 81 |
+
"description": "When no entry is selected the right panel shows the guidance copy; after clicking asset_012 the right side shows all four of filename asset_012, format GIF, size 9.6 MB, resolution 3840×2160."
|
| 82 |
},
|
| 83 |
{
|
| 84 |
"id": "state.page.split",
|
| 85 |
"m": 2,
|
| 86 |
+
"dimension": "functional",
|
| 87 |
"w": 1.5,
|
| 88 |
+
"description": "With no filter, 10 entries per page over 5 pages, page 5 has only 8 entries and the last is asset_048; the page indicator matches what is actually displayed."
|
| 89 |
},
|
| 90 |
{
|
| 91 |
"id": "state.sort.both",
|
| 92 |
"m": 2,
|
| 93 |
+
"dimension": "functional",
|
| 94 |
"w": 1.5,
|
| 95 |
+
"description": "Sorting supports both by number and by size in both directions: with no filter and number ascending, the first entry on page 1 is asset_001; switching to number descending makes the first entry asset_048 and the last asset_039; checking only WEBP (12 results) with size ascending makes the first entry asset_003 (3.3 MB), and switching to size descending makes page 2 show exactly asset_007 and asset_003, in that order."
|
| 96 |
},
|
| 97 |
{
|
| 98 |
"id": "state.search.combo",
|
| 99 |
"m": 2,
|
| 100 |
+
"dimension": "functional",
|
| 101 |
"w": 1.0,
|
| 102 |
+
"description": "Typing \"_01\" in the search box yields asset_010 through asset_019, 10 entries; with the WEBP filter stacked on, only asset_011, asset_015, and asset_019 remain, 3 entries."
|
| 103 |
},
|
| 104 |
{
|
| 105 |
"id": "state.select.cross",
|
| 106 |
"m": 2,
|
| 107 |
+
"dimension": "interaction",
|
| 108 |
"w": 1.5,
|
| 109 |
+
"description": "Filter to WEBP and click the header select-all: the selected count is 12 (select-all across pages) and selected size shows 224.4 MB; then change the filter to GIF only, the status bar's selected count returns to 0 and selected size 0.0 MB, and switching back to WEBP does not restore the selection automatically."
|
| 110 |
},
|
| 111 |
{
|
| 112 |
"id": "state.filter.summary",
|
| 113 |
"m": 2,
|
| 114 |
+
"dimension": "coverage",
|
| 115 |
"w": 1.0,
|
| 116 |
+
"description": "The filter area persistently shows the item count and combined size of the current filter result: 48 items / 880.8 MB with no filter, 12 items / 224.4 MB with only WEBP checked, 6 items / 110.1 MB with Urgent only on, and 2 items / 31.8 MB with both (corresponding to asset_007 and asset_035)."
|
| 117 |
},
|
| 118 |
{
|
| 119 |
"id": "state.empty.reset",
|
| 120 |
"m": 2,
|
| 121 |
+
"dimension": "interaction",
|
| 122 |
"w": 1.0,
|
| 123 |
+
"description": "Changing any filter or search returns the page number to 1; searching a word that matches nothing (like zzz) shows an empty-state message in the list area rather than blankness, and the filter-result summary shows 0 items / 0.0 MB."
|
| 124 |
},
|
| 125 |
{
|
| 126 |
"id": "wiz.gate.disabled",
|
| 127 |
"m": 3,
|
| 128 |
+
"dimension": "interaction",
|
| 129 |
"w": 1.5,
|
| 130 |
+
"description": "With no assets selected the export button is disabled and clicking it opens no modal; with at least 1 selected the wizard opens, and the wizard has a step indicator for steps 1/2/3."
|
| 131 |
},
|
| 132 |
{
|
| 133 |
"id": "wiz.estimate.exact",
|
| 134 |
"m": 3,
|
| 135 |
+
"dimension": "functional",
|
| 136 |
"w": 1.5,
|
| 137 |
+
"description": "After selecting all 12 WEBP entries (224.4 MB) and entering the wizard, choosing 80% quality and Scale to half, the confirmation page shows an estimated size of 44.9 MB and an estimated time of 26 seconds."
|
| 138 |
},
|
| 139 |
{
|
| 140 |
"id": "wiz.options.summary",
|
| 141 |
"m": 3,
|
| 142 |
+
"dimension": "functional",
|
| 143 |
"w": 1.0,
|
| 144 |
+
"description": "Step 1 has exactly three format options — \"Keep original format / Unify to PNG / Unify to JPG\" — and step 2 has a togglable watermark switch; with the same 12 entries + 80% + Scale to half, choosing \"Unify to JPG\" and ticking the watermark makes the step-3 summary reflect both choices, while the estimated size stays 44.9 MB and the time stays 26 seconds."
|
| 145 |
},
|
| 146 |
{
|
| 147 |
"id": "wiz.step.keep",
|
| 148 |
"m": 3,
|
| 149 |
+
"dimension": "functional",
|
| 150 |
"w": 1.0,
|
| 151 |
+
"description": "Changing the same 12 entries to Original size in step 2 makes the step-3 estimated size 179.5 MB and the time still 26 seconds; going back from step 3 to step 1 repeatedly and then forward step by step to step 3 again leaves the four choices — format, quality, size, watermark — and both estimates unchanged."
|
| 152 |
},
|
| 153 |
{
|
| 154 |
"id": "wiz.confirm.writeback",
|
| 155 |
"m": 3,
|
| 156 |
+
"dimension": "interaction",
|
| 157 |
"w": 1.5,
|
| 158 |
+
"description": "After clicking confirm export the wizard closes, those 12 entries carry an \"Exported\" mark, the status bar's selected count goes to zero while the queue total is still 48 and the combined size still 880.8 MB, and it shows Exported 12/48; running the same batch through the wizard and confirming again leaves the count at 12/48, not accumulated to 24."
|
| 159 |
},
|
| 160 |
{
|
| 161 |
"id": "wiz.cancel.noop",
|
| 162 |
"m": 3,
|
| 163 |
+
"dimension": "interaction",
|
| 164 |
"w": 1.0,
|
| 165 |
+
"description": "After selecting 12 entries and entering the wizard, then cancelling to close it, no entry shows an \"Exported\" mark and the status bar still shows 12 selected / 224.4 MB."
|
| 166 |
},
|
| 167 |
{
|
| 168 |
"id": "skin.dark.cover",
|
| 169 |
"m": 4,
|
| 170 |
+
"dimension": "visual",
|
| 171 |
"w": 1.5,
|
| 172 |
+
"description": "After switching to night, the toolbar, queue list, detail panel, input fields, and buttons all have dark backgrounds with light text, and the four-region layout is unchanged; switching back to day fully restores the light version."
|
| 173 |
},
|
| 174 |
{
|
| 175 |
"id": "skin.state.preserve",
|
| 176 |
"m": 4,
|
| 177 |
+
"dimension": "interaction",
|
| 178 |
"w": 1.5,
|
| 179 |
+
"description": "In the state of \"WEBP filter + size descending + page 2 + all 12 selected\", switching the skin leaves it on page 2 showing asset_007 and asset_003, the filter-result summary still 12 items / 224.4 MB, and the status bar still 12 selected / 224.4 MB."
|
| 180 |
},
|
| 181 |
{
|
| 182 |
"id": "skin.urgent.consistent",
|
| 183 |
"m": 4,
|
| 184 |
+
"dimension": "visual",
|
| 185 |
"w": 1.0,
|
| 186 |
+
"description": "The urgent marker uses the same expressive means by day and at night (the same form of badge/icon/text label), and at night, without large highly saturated fills, it is still clearly distinguishable from ordinary entries; the two modes must not each use a different logic."
|
| 187 |
},
|
| 188 |
{
|
| 189 |
"id": "skin.compact.page",
|
| 190 |
"m": 4,
|
| 191 |
+
"dimension": "visual",
|
| 192 |
"w": 1.0,
|
| 193 |
+
"description": "The night compact version's list row height is clearly smaller than the day version's, but with no filter it is still 10 per page and still 5 pages in total."
|
| 194 |
},
|
| 195 |
{
|
| 196 |
"id": "skin.modal.dark",
|
| 197 |
"m": 4,
|
| 198 |
+
"dimension": "visual",
|
| 199 |
"w": 1.0,
|
| 200 |
+
"description": "Opening the export wizard in night mode shows a dark modal body (no white panel), with step indicators and button text clearly legible."
|
| 201 |
},
|
| 202 |
{
|
| 203 |
"id": "bulk.remove.math",
|
| 204 |
"m": 5,
|
| 205 |
+
"dimension": "functional",
|
| 206 |
"w": 1.5,
|
| 207 |
+
"description": "After filtering WEBP and selecting all 12 entries, executing remove-from-queue immediately changes the filter-area summary to 0 items / 0.0 MB and the status bar's queue total to 36 with a combined size of 656.4 MB; clearing the filter gives 4 pages with 6 entries on the last, and the removed entries no longer appear."
|
| 208 |
},
|
| 209 |
{
|
| 210 |
"id": "bulk.undo.idem",
|
| 211 |
"m": 5,
|
| 212 |
+
"dimension": "interaction",
|
| 213 |
"w": 1.5,
|
| 214 |
+
"description": "After executing undo the queue is restored to 48 entries / 880.8 MB; clicking undo twice in a row produces no duplicate entries, and the total remains 48."
|
| 215 |
},
|
| 216 |
{
|
| 217 |
"id": "bulk.urgent.toggle",
|
| 218 |
"m": 5,
|
| 219 |
+
"dimension": "functional",
|
| 220 |
"w": 1.0,
|
| 221 |
+
"description": "After marking asset_001 urgent in the detail panel, turning on \"Urgent only\" makes the filter-area summary show 7 items / 112.0 MB and the list include asset_001; toggling it back to non-urgent restores the summary to 6 items / 110.1 MB."
|
| 222 |
},
|
| 223 |
{
|
| 224 |
"id": "bulk.exported.recount",
|
| 225 |
"m": 5,
|
| 226 |
+
"dimension": "functional",
|
| 227 |
"w": 1.0,
|
| 228 |
+
"description": "First export the 12 WEBP entries (count shows 12/48), then remove those 12 from the queue; the exported count becomes 0/36, and no number with a numerator larger than the queue total appears."
|
| 229 |
},
|
| 230 |
{
|
| 231 |
"id": "bulk.empty.state",
|
| 232 |
"m": 5,
|
| 233 |
+
"dimension": "interaction",
|
| 234 |
"w": 1.0,
|
| 235 |
+
"description": "After removing all assets the list shows an empty-state message, the status bar's total count and size are both 0 (0 items / 0.0 MB), and the export button and header select-all are disabled; clicking undo at this point restores the queue."
|
| 236 |
},
|
| 237 |
{
|
| 238 |
"id": "bulk.empty.dark",
|
| 239 |
"m": 5,
|
| 240 |
+
"dimension": "visual",
|
| 241 |
"w": 1.0,
|
| 242 |
+
"description": "After switching to night mode, select all and clear all assets; the empty-state area, list container, and action-button area all keep dark styling, no white-background block appears, and the empty-state text is clearly legible."
|
| 243 |
}
|
| 244 |
],
|
| 245 |
"inject": null,
|
tasks/c22/task.json
CHANGED
|
@@ -3,241 +3,241 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"repair": true,
|
| 18 |
-
"inject_type": "
|
| 19 |
"seed_meta": {
|
| 20 |
"repo_src": null,
|
| 21 |
"exclude_slug": "react_en_001446",
|
| 22 |
"repo_shot": true
|
| 23 |
},
|
| 24 |
-
"title": "SEDA
|
| 25 |
"milestones": [
|
| 26 |
{
|
| 27 |
-
"operator": "
|
| 28 |
-
"request": "
|
| 29 |
},
|
| 30 |
{
|
| 31 |
-
"operator": "
|
| 32 |
-
"request": "
|
| 33 |
},
|
| 34 |
{
|
| 35 |
-
"operator": "
|
| 36 |
-
"request": "'
|
| 37 |
},
|
| 38 |
{
|
| 39 |
-
"operator": "
|
| 40 |
-
"request": "
|
| 41 |
},
|
| 42 |
{
|
| 43 |
-
"operator": "
|
| 44 |
-
"request": "
|
| 45 |
}
|
| 46 |
],
|
| 47 |
"checklist": [
|
| 48 |
{
|
| 49 |
"id": "repair.primer.nav",
|
| 50 |
"m": 1,
|
| 51 |
-
"dimension": "
|
| 52 |
"w": 1.5,
|
| 53 |
-
"description": "
|
| 54 |
},
|
| 55 |
{
|
| 56 |
"id": "repair.primer.hero",
|
| 57 |
"m": 1,
|
| 58 |
-
"dimension": "
|
| 59 |
"w": 1.5,
|
| 60 |
-
"description": "
|
| 61 |
},
|
| 62 |
{
|
| 63 |
"id": "repair.learn.whyseda",
|
| 64 |
"m": 1,
|
| 65 |
-
"dimension": "
|
| 66 |
"w": 1.0,
|
| 67 |
-
"description": "
|
| 68 |
},
|
| 69 |
{
|
| 70 |
"id": "repair.regression.anchors",
|
| 71 |
"m": 1,
|
| 72 |
-
"dimension": "
|
| 73 |
"w": 1.0,
|
| 74 |
-
"description": "
|
| 75 |
},
|
| 76 |
{
|
| 77 |
"id": "repair.regression.learn.toggle",
|
| 78 |
"m": 1,
|
| 79 |
-
"dimension": "
|
| 80 |
"w": 1.0,
|
| 81 |
-
"description": "
|
| 82 |
},
|
| 83 |
{
|
| 84 |
"id": "delete.backers.gone",
|
| 85 |
"m": 2,
|
| 86 |
-
"dimension": "
|
| 87 |
"w": 1.5,
|
| 88 |
-
"description": "
|
| 89 |
},
|
| 90 |
{
|
| 91 |
"id": "delete.raised.gone",
|
| 92 |
"m": 2,
|
| 93 |
-
"dimension": "
|
| 94 |
"w": 1.0,
|
| 95 |
-
"description": "
|
| 96 |
},
|
| 97 |
{
|
| 98 |
"id": "delete.stats.three",
|
| 99 |
"m": 2,
|
| 100 |
-
"dimension": "
|
| 101 |
"w": 1.5,
|
| 102 |
-
"description": "
|
| 103 |
},
|
| 104 |
{
|
| 105 |
"id": "delete.hero.height",
|
| 106 |
"m": 2,
|
| 107 |
-
"dimension": "
|
| 108 |
"w": 1.5,
|
| 109 |
-
"description": "
|
| 110 |
},
|
| 111 |
{
|
| 112 |
"id": "delete.hero.keep",
|
| 113 |
"m": 2,
|
| 114 |
-
"dimension": "
|
| 115 |
"w": 1.0,
|
| 116 |
-
"description": "
|
| 117 |
},
|
| 118 |
{
|
| 119 |
"id": "layout.five.texts",
|
| 120 |
"m": 3,
|
| 121 |
-
"dimension": "
|
| 122 |
"w": 1.5,
|
| 123 |
-
"description": "
|
| 124 |
},
|
| 125 |
{
|
| 126 |
"id": "layout.numbers",
|
| 127 |
"m": 3,
|
| 128 |
-
"dimension": "
|
| 129 |
"w": 1.0,
|
| 130 |
-
"description": "
|
| 131 |
},
|
| 132 |
{
|
| 133 |
"id": "layout.grid",
|
| 134 |
"m": 3,
|
| 135 |
-
"dimension": "
|
| 136 |
"w": 1.5,
|
| 137 |
-
"description": "
|
| 138 |
},
|
| 139 |
{
|
| 140 |
"id": "layout.height",
|
| 141 |
"m": 3,
|
| 142 |
-
"dimension": "
|
| 143 |
"w": 1.5,
|
| 144 |
-
"description": "
|
| 145 |
},
|
| 146 |
{
|
| 147 |
"id": "layout.images",
|
| 148 |
"m": 3,
|
| 149 |
-
"dimension": "
|
| 150 |
"w": 1.0,
|
| 151 |
-
"description": "
|
| 152 |
},
|
| 153 |
{
|
| 154 |
"id": "layout.style",
|
| 155 |
"m": 3,
|
| 156 |
-
"dimension": "
|
| 157 |
"w": 1.0,
|
| 158 |
-
"description": "
|
| 159 |
},
|
| 160 |
{
|
| 161 |
"id": "data.placement",
|
| 162 |
"m": 4,
|
| 163 |
-
"dimension": "
|
| 164 |
"w": 1.5,
|
| 165 |
-
"description": "
|
| 166 |
},
|
| 167 |
{
|
| 168 |
"id": "data.category.counts",
|
| 169 |
"m": 4,
|
| 170 |
-
"dimension": "
|
| 171 |
"w": 1.5,
|
| 172 |
-
"description": "
|
| 173 |
},
|
| 174 |
{
|
| 175 |
"id": "data.content.constraints",
|
| 176 |
"m": 4,
|
| 177 |
-
"dimension": "
|
| 178 |
"w": 1.0,
|
| 179 |
-
"description": "
|
| 180 |
},
|
| 181 |
{
|
| 182 |
"id": "data.paging.nav",
|
| 183 |
"m": 4,
|
| 184 |
-
"dimension": "
|
| 185 |
"w": 1.0,
|
| 186 |
-
"description": "'
|
| 187 |
},
|
| 188 |
{
|
| 189 |
"id": "data.sort.combo",
|
| 190 |
"m": 4,
|
| 191 |
-
"dimension": "
|
| 192 |
"w": 1.5,
|
| 193 |
-
"description": "
|
| 194 |
},
|
| 195 |
{
|
| 196 |
"id": "data.favorite.idempotent",
|
| 197 |
"m": 4,
|
| 198 |
-
"dimension": "
|
| 199 |
"w": 1.0,
|
| 200 |
-
"description": "
|
| 201 |
},
|
| 202 |
{
|
| 203 |
"id": "integrate.nav.newsroom",
|
| 204 |
"m": 5,
|
| 205 |
-
"dimension": "
|
| 206 |
"w": 1.5,
|
| 207 |
-
"description": "
|
| 208 |
},
|
| 209 |
{
|
| 210 |
"id": "integrate.chain.reset",
|
| 211 |
"m": 5,
|
| 212 |
-
"dimension": "
|
| 213 |
"w": 1.5,
|
| 214 |
-
"description": "
|
| 215 |
},
|
| 216 |
{
|
| 217 |
"id": "integrate.stats.linked",
|
| 218 |
"m": 5,
|
| 219 |
-
"dimension": "
|
| 220 |
"w": 1.5,
|
| 221 |
-
"description": "
|
| 222 |
},
|
| 223 |
{
|
| 224 |
"id": "integrate.no.revival",
|
| 225 |
"m": 5,
|
| 226 |
-
"dimension": "
|
| 227 |
"w": 1.0,
|
| 228 |
-
"description": "
|
| 229 |
},
|
| 230 |
{
|
| 231 |
"id": "integrate.style.consistency",
|
| 232 |
"m": 5,
|
| 233 |
-
"dimension": "
|
| 234 |
"w": 1.0,
|
| 235 |
-
"description": "
|
| 236 |
}
|
| 237 |
],
|
| 238 |
"inject": {
|
| 239 |
-
"type": "
|
| 240 |
-
"saboteur_prompt": "
|
| 241 |
},
|
| 242 |
"qc_static": [
|
| 243 |
"milestones 5 != operators 4"
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"repair",
|
| 7 |
+
"remove section",
|
| 8 |
+
"restructure layout",
|
| 9 |
+
"wire up data"
|
| 10 |
],
|
| 11 |
+
"difficulty": "challenging",
|
| 12 |
"levers": [
|
| 13 |
+
"non-local changes",
|
| 14 |
+
"exact numeric assertions"
|
| 15 |
],
|
| 16 |
+
"domain": "content & news",
|
| 17 |
"repair": true,
|
| 18 |
+
"inject_type": "selector drift",
|
| 19 |
"seed_meta": {
|
| 20 |
"repo_src": null,
|
| 21 |
"exclude_slug": "react_en_001446",
|
| 22 |
"repo_shot": true
|
| 23 |
},
|
| 24 |
+
"title": "SEDA website: fix broken anchors, slim down the hero, restructure the five-part section, and add a data-driven news section",
|
| 25 |
"milestones": [
|
| 26 |
{
|
| 27 |
+
"operator": "repair",
|
| 28 |
+
"request": "After last week's release we got feedback: clicking PRIMER in the nav bar does absolutely nothing, the PRIMER button on the left of the hero is the same, and even Why SEDA in the Learn dropdown doesn't move the page at all; but Developers, Validators, Community, and LITEPAPER in the same row all scroll smoothly to their respective spots. Please restore all three PRIMER entries to the same behavior as the other entries — smooth scroll, stopping at the top of that white rounded-card section (Secure / Fast / Permissionless). Also confirm the Learn menu itself isn't affected: one click expands three items, clicking elsewhere on the page collapses it, and repeated open/close works fine. Don't touch anything else. Also, for the record, we'll run all acceptance checks in a 1440×900 desktop window at 100% zoom, so tune sizes against that."
|
| 29 |
},
|
| 30 |
{
|
| 31 |
+
"operator": "remove section",
|
| 32 |
+
"request": "Two pieces of content come offline. First, remove the whole investor showcase strip at the bottom of the hero — the 'Backed by:' line and the four organization marks below it (Uncorrelated, Distributed Global, coinbase, Reciprocal Ventures) all go; legal won't allow us to display them anymore, so clean up the related graphics and text too. Second, remove the '+$22M / Raised' item from the stats strip as well. After removal the hero mustn't leave a big hole: at a 1440×900 window, tighten the hero overall, from the current 1085px down to within 900px, but don't squash it below 780px either; the stats strip moves up accordingly. The remaining numbers evenly fill the whole row; don't leave the empty slot of the old four-column layout. The relationship among the three-line heading, the two buttons, and the explanatory paragraph on the right stays as it was — don't misalign or clip them."
|
| 33 |
},
|
| 34 |
{
|
| 35 |
+
"operator": "restructure layout",
|
| 36 |
+
"request": "The five parts of 'Why SEDA' (currently one paragraph paired with one big image, staggered top to bottom over a very long stretch) take up too much room; users scroll forever and never reach the content below. Re-lay this out more compactly: arrange the five parts in two rows, 3 items on the top row and 2 on the bottom, scannable in about one screen. Keep the numbers 1 through 5 and keep them together with their respective copy; not a single word of the five original English texts may change, and all five images must be kept, each used once. At a 1440×900 window, the total height of the whole section must stay within 1400px. The style stays that textured black-background look; don't make it look like a different site."
|
| 37 |
},
|
| 38 |
{
|
| 39 |
+
"operator": "wire up data",
|
| 40 |
+
"request": "Add a news section to the homepage, positioned before the 'Our expanding network of ecosystems' block. The content team went through the pieces published over the past two years and gave them to you in a fairly scattered way: protocol updates are the most numerous, 12; ecosystem partnerships 9; research reports 8, all long-form; community events 11; plus product releases 8. That adds up to 48, no more and no less. Lay out the titles and dates to that count yourself: dates all fall on or after January 8, 2024 (inclusive), at most one per day without collisions, and no duplicate titles; each piece shows a reading time between 3 and 12 minutes. At the top of the section put a row of category buttons: All, plus the five categories above, each button showing that category's item count. Next to them give two sort options: newest first (default) and reading time longest first. The list shows 9 per page, with previous/next below, and it must be clear which page you're on and how many there are in total (wording and format are up to you); on page 1 the previous button must not be usable; switching categories must not dump the user on an empty page. Each article card also gets a 'Read later' marker control; marked ones must be obvious at a glance, and the section title shows the number of marked pieces; when nothing is marked there must be a friendly message there, not a blank. Clicking the same article repeatedly should toggle it back and forth, not keep adding. The selected category and the marked state must be prominent enough, but keep the overall textured black-background look — don't turn it into a garish second style."
|
| 41 |
},
|
| 42 |
{
|
| 43 |
+
"operator": "restructure layout",
|
| 44 |
+
"request": "Finally, wire the new section into the rest of the site. Add a Newsroom entry to the left nav group (next to Developers / Validators), styled consistently with the two beside it, and clicking it should smooth-scroll to the news section like the other entries; while you're at it, restore the news section to its initial state — category back to 'All', back to page 1 — but the read-later marks the user has already made must not be cleared; the marked pieces stay marked. Also, in the three cells of the stats strip, replace the 'Networks we support' cell with the size of our content library; the number must match the actual number of articles in the news library — don't hardcode some unrelated figure. The previously removed funding number and investor marks must not sneak back in; the stats strip still has three cells."
|
| 45 |
}
|
| 46 |
],
|
| 47 |
"checklist": [
|
| 48 |
{
|
| 49 |
"id": "repair.primer.nav",
|
| 50 |
"m": 1,
|
| 51 |
+
"dimension": "functional",
|
| 52 |
"w": 1.5,
|
| 53 |
+
"description": "After clicking PRIMER in the nav bar the page scrolls, and the white rounded-card section (containing the Secure / Fast / Permissionless blocks) finally enters the viewport, with the distance between the top of that section and the top of the viewport under 120px."
|
| 54 |
},
|
| 55 |
{
|
| 56 |
"id": "repair.primer.hero",
|
| 57 |
"m": 1,
|
| 58 |
+
"dimension": "functional",
|
| 59 |
"w": 1.5,
|
| 60 |
+
"description": "The PRIMER button on the left of the hero scrolls to the same landing point as the nav PRIMER (the top of the same white-card block; the difference in page scrollY after both scrolls finish is no more than 40px)."
|
| 61 |
},
|
| 62 |
{
|
| 63 |
"id": "repair.learn.whyseda",
|
| 64 |
"m": 1,
|
| 65 |
+
"dimension": "interaction",
|
| 66 |
"w": 1.0,
|
| 67 |
+
"description": "After expanding the Learn menu and clicking 'Why SEDA', the menu collapses and the page scrolls to the same white-card block (that block enters the viewport) rather than staying put."
|
| 68 |
},
|
| 69 |
{
|
| 70 |
"id": "repair.regression.anchors",
|
| 71 |
"m": 1,
|
| 72 |
+
"dimension": "functional",
|
| 73 |
"w": 1.0,
|
| 74 |
+
"description": "Regression: clicking Developers, Validators, Community, and LITEPAPER respectively brings their corresponding target sections (network intro, audience section, ecosystem section, footer) into the viewport; the behavior was not broken by the fix."
|
| 75 |
},
|
| 76 |
{
|
| 77 |
"id": "repair.regression.learn.toggle",
|
| 78 |
"m": 1,
|
| 79 |
+
"dimension": "interaction",
|
| 80 |
"w": 1.0,
|
| 81 |
+
"description": "Regression: after clicking Learn to expand, exactly 3 links are shown in the menu; clicking a blank area of the page dismisses the menu; clicking Learn again re-expands it, and after three consecutive open/close cycles the menu neither stays stuck open nor refuses to expand."
|
| 82 |
},
|
| 83 |
{
|
| 84 |
"id": "delete.backers.gone",
|
| 85 |
"m": 2,
|
| 86 |
+
"dimension": "coverage",
|
| 87 |
"w": 1.5,
|
| 88 |
+
"description": "Using the investor showcase strip at the bottom of the pre-deletion hero as a reference ('Backed by:' and the row of organization marks below it): that area no longer renders any organization-logo-type graphics (svg/img/brand background images); and searching the whole site's page text case-insensitively, none of 'backed by', 'uncorrelated', 'distributed global', 'coinbase', 'reciprocal ventures' appears anymore."
|
| 89 |
},
|
| 90 |
{
|
| 91 |
"id": "delete.raised.gone",
|
| 92 |
"m": 2,
|
| 93 |
+
"dimension": "coverage",
|
| 94 |
"w": 1.0,
|
| 95 |
+
"description": "Within the stats strip block, the two texts '+$22M' and 'Raised' (case-insensitive) do not exist."
|
| 96 |
},
|
| 97 |
{
|
| 98 |
"id": "delete.stats.three",
|
| 99 |
"m": 2,
|
| 100 |
+
"dimension": "visual",
|
| 101 |
"w": 1.5,
|
| 102 |
+
"description": "At a 1440×900 viewport: the stats strip has exactly 3 number items left (the first two are still +$152B / Total value enabled and +12M / Data-feed updates), the pairwise width difference among the three items is no more than 2px, and the span from the left edge of the leftmost item to the right edge of the rightmost item is at least 90% of the container width (no empty slot of a fourth cell)."
|
| 103 |
},
|
| 104 |
{
|
| 105 |
"id": "delete.hero.height",
|
| 106 |
"m": 2,
|
| 107 |
+
"dimension": "visual",
|
| 108 |
"w": 1.5,
|
| 109 |
+
"description": "At a 1440×900 viewport and 100% zoom, the rendered height of the hero section is between 780px and 900px (inclusive), and the top of the first stats-strip number sits at an absolute page position no greater than 960px."
|
| 110 |
},
|
| 111 |
{
|
| 112 |
"id": "delete.hero.keep",
|
| 113 |
"m": 2,
|
| 114 |
+
"dimension": "visual",
|
| 115 |
"w": 1.0,
|
| 116 |
+
"description": "Three lines of hero heading 'A Foundation / for Data in / web3' remain fully visible, the LITEPAPER and PRIMER buttons are stacked vertically below the heading, and the explanatory paragraph 'SEDA creates a standard for…' is to the right of the buttons; none of the three is clipped or overlapping."
|
| 117 |
},
|
| 118 |
{
|
| 119 |
"id": "layout.five.texts",
|
| 120 |
"m": 3,
|
| 121 |
+
"dimension": "coverage",
|
| 122 |
"w": 1.5,
|
| 123 |
+
"description": "The restructured section still preserves the original five English texts word for word (including the original sentences 'as the HTTP of web3.', 'open-source relay smart contract', 'permissionless by design', 'built with the Cosmos SDK', 'within a swift timeframe of just 24 hours'), none missing and none rewritten."
|
| 124 |
},
|
| 125 |
{
|
| 126 |
"id": "layout.numbers",
|
| 127 |
"m": 3,
|
| 128 |
+
"dimension": "visual",
|
| 129 |
"w": 1.0,
|
| 130 |
+
"description": "The numbers 1, 2, 3, 4, 5 are visible in sequence, and each number sits within the same item as its corresponding paragraph (visually grouped, not offset into another paragraph)."
|
| 131 |
},
|
| 132 |
{
|
| 133 |
"id": "layout.grid",
|
| 134 |
"m": 3,
|
| 135 |
+
"dimension": "visual",
|
| 136 |
"w": 1.5,
|
| 137 |
+
"description": "At a 1440×900 viewport the five items are arranged in two rows (items whose top y-coordinates differ by less than 20px count as the same row): 3 items on the first row, 2 on the second, and no row exceeds 3 items."
|
| 138 |
},
|
| 139 |
{
|
| 140 |
"id": "layout.height",
|
| 141 |
"m": 3,
|
| 142 |
+
"dimension": "functional",
|
| 143 |
"w": 1.5,
|
| 144 |
+
"description": "At a 1440×900 viewport the overall rendered height of this five-part section is no more than 1400px (it was on the order of 3338px before)."
|
| 145 |
},
|
| 146 |
{
|
| 147 |
"id": "layout.images",
|
| 148 |
"m": 3,
|
| 149 |
+
"dimension": "coverage",
|
| 150 |
"w": 1.0,
|
| 151 |
+
"description": "All five original images are kept and none is duplicated: exactly 5 image elements with different sources appear in the block, none missing and none reused."
|
| 152 |
},
|
| 153 |
{
|
| 154 |
"id": "layout.style",
|
| 155 |
"m": 3,
|
| 156 |
+
"dimension": "visual",
|
| 157 |
"w": 1.0,
|
| 158 |
+
"description": "The block continues the black-background, light-text style: the block background is still a near-pure-black dark tone (brightness no higher than a #202028 level), body text is white/near-white, and no large light-background area was introduced that would make it feel cut off from the hero."
|
| 159 |
},
|
| 160 |
{
|
| 161 |
"id": "data.placement",
|
| 162 |
"m": 4,
|
| 163 |
+
"dimension": "coverage",
|
| 164 |
"w": 1.5,
|
| 165 |
+
"description": "The news section block and the 'Our expanding network of ecosystems' block both exist, and the news section precedes the latter both in DOM order and in vertical page position (the top y-coordinate of the news section is less than that of the ecosystem section); in the default state the list shows 9 items, and the page hint shows both current page 1 and total pages 6 (language and format are unrestricted, e.g. 'Page 1 of 6', '1 / 6', 'Page 1 / 6 total')."
|
| 166 |
},
|
| 167 |
{
|
| 168 |
"id": "data.category.counts",
|
| 169 |
"m": 4,
|
| 170 |
+
"dimension": "functional",
|
| 171 |
"w": 1.5,
|
| 172 |
+
"description": "The counts shown on the category buttons are: Protocol Updates 12, Ecosystem Partnerships 9, Research Reports 8, Community Events 11, Product Releases 8, totaling 48, and matching the actual number of items that can be paged through in each category; after paging from 'All' to page 4 and switching to 'Research Reports', the list is non-empty and shows 8 items, with the page hint back to current page 1."
|
| 173 |
},
|
| 174 |
{
|
| 175 |
"id": "data.content.constraints",
|
| 176 |
"m": 4,
|
| 177 |
+
"dimension": "functional",
|
| 178 |
"w": 1.0,
|
| 179 |
+
"description": "Traversing all 48 pieces (obtainable by paging through each category): every date is no earlier than 2024-01-08 and the 48 dates are pairwise distinct, the 48 titles are pairwise distinct, and every piece's stated reading time is between 3 and 12 minutes (inclusive of 3 and 12)."
|
| 180 |
},
|
| 181 |
{
|
| 182 |
"id": "data.paging.nav",
|
| 183 |
"m": 4,
|
| 184 |
+
"dimension": "interaction",
|
| 185 |
"w": 1.0,
|
| 186 |
+
"description": "In the 'All' category: on page 1 the previous button is unusable (after clicking, both list and page number are unchanged); after going to page 2, clicking previous returns to page 1 and correctly renders 9 items; paging continuously to page 6 shows only 3 items, and clicking next again changes neither list nor page number."
|
| 187 |
},
|
| 188 |
{
|
| 189 |
"id": "data.sort.combo",
|
| 190 |
"m": 4,
|
| 191 |
+
"dimension": "interaction",
|
| 192 |
"w": 1.5,
|
| 193 |
+
"description": "Combination spot-check: Community Events + reading time longest first gives 2 pages with 2 items on page 2, and the reading time of the first item on page 2 is not greater than that of the last item on page 1; switching back to 'newest first' makes the first item on page 1 the newest of that category's 11 pieces."
|
| 194 |
},
|
| 195 |
{
|
| 196 |
"id": "data.favorite.idempotent",
|
| 197 |
"m": 4,
|
| 198 |
+
"dimension": "interaction",
|
| 199 |
"w": 1.0,
|
| 200 |
+
"description": "Clicking 'Read later' on the same piece twice in a row changes the marked count to 1 and then back to 0, and when it's back at 0 a message (such as 'No read-later articles yet') is shown next to the section title rather than blank space; the card's marked state also returns to the unmarked appearance."
|
| 201 |
},
|
| 202 |
{
|
| 203 |
"id": "integrate.nav.newsroom",
|
| 204 |
"m": 5,
|
| 205 |
+
"dimension": "interaction",
|
| 206 |
"w": 1.5,
|
| 207 |
+
"description": "The left nav group adds a Newsroom item after Developers / Validators (font size, uppercase, and letter spacing consistent with the two adjacent items); clicking it brings the top of the news section into the viewport, less than 120px from the top."
|
| 208 |
},
|
| 209 |
{
|
| 210 |
"id": "integrate.chain.reset",
|
| 211 |
"m": 5,
|
| 212 |
+
"dimension": "interaction",
|
| 213 |
"w": 1.5,
|
| 214 |
+
"description": "Multi-step chain verification: first select 'Research Reports' and switch to 'reading time longest first', mark 2 of them as read later, then switch to 'All' and go to page 3, then click Newsroom in the nav — the category returns to 'All', the page number returns to page 1, the list shows 9 items, the marked count is still 2, and when those two articles are found in the list they still show the marked appearance."
|
| 215 |
},
|
| 216 |
{
|
| 217 |
"id": "integrate.stats.linked",
|
| 218 |
"m": 5,
|
| 219 |
+
"dimension": "functional",
|
| 220 |
"w": 1.5,
|
| 221 |
+
"description": "The third cell of the stats strip shows the number 48 (matching the news library's actual total), and its label points to the content library (contains one of the words article / news / content / stories); the first two cells are still +$152B and +12M."
|
| 222 |
},
|
| 223 |
{
|
| 224 |
"id": "integrate.no.revival",
|
| 225 |
"m": 5,
|
| 226 |
+
"dimension": "coverage",
|
| 227 |
"w": 1.0,
|
| 228 |
+
"description": "The stats strip still has exactly 3 cells; searching within the stats strip block and the original investor showcase area of the hero, neither '+$22M' nor 'Raised' (case-insensitive) text exists, nor any organization logo graphic (regression of the earlier takedown requirement)."
|
| 229 |
},
|
| 230 |
{
|
| 231 |
"id": "integrate.style.consistency",
|
| 232 |
"m": 5,
|
| 233 |
+
"dimension": "visual",
|
| 234 |
"w": 1.0,
|
| 235 |
+
"description": "Consistency of trade-offs: the selected and unselected categories in the news section differ clearly in at least one of background/border/text color (distinguishable at a glance), while the news section's buttons and the Newsroom nav item follow the site's existing button language (consistent rounded corners and uppercase small-letter-spacing style); the site does not end up with two clearly disjoint button styles."
|
| 236 |
}
|
| 237 |
],
|
| 238 |
"inject": {
|
| 239 |
+
"type": "selector drift",
|
| 240 |
+
"saboteur_prompt": "In src/App.jsx, find the section targeted by scrollToId('pillars') (the section rendering the Secure / Fast / Permissionless white rounded cards, currently with id \"pillars\") and change its id attribute value to the slightly different \"pillars-cards\". Do not modify any scrollToId('pillars') call in the nav, hero buttons, or Learn menu, and do not modify the scrollToId function itself. If src/index.css contains id selectors like #pillars, rename them accordingly so the visual presentation is completely unchanged. Final effect: clicking nav PRIMER, the hero PRIMER button, and Why SEDA in the Learn menu does not scroll the page, while all other anchor entries keep working as usual; no console errors or warnings; do not change any unrelated functionality or styles; leave no comments or TODO traces."
|
| 241 |
},
|
| 242 |
"qc_static": [
|
| 243 |
"milestones 5 != operators 4"
|
tasks/c23/task.json
CHANGED
|
@@ -3,190 +3,190 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {},
|
| 17 |
-
"title": "
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
-
"operator": "
|
| 21 |
-
"request": "
|
| 22 |
},
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "brand.baseline",
|
| 39 |
"m": 1,
|
| 40 |
-
"dimension": "
|
| 41 |
"w": 1.0,
|
| 42 |
-
"description": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "list.count.pages",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "list.data.rule",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.5,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "list.channel.filter",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.0,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "list.sort.hot",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.5,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "list.featured.badge",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "hot.all.top5",
|
| 81 |
"m": 2,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.5,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "hot.filter.sync",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "search.combo.reset",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.5,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "read.state.core",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.5,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "search.chain.persist",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.5,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "search.empty",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.0,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "layout.two.column",
|
| 123 |
"m": 3,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.5,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "layout.sticky.nav",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.0,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "layout.state.intact",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.5,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "layout.pager.edge",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.0,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "layout.narrow",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.0,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "theme.toggle",
|
| 158 |
"m": 4,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "theme.signal.legible",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "theme.state.keep",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.5,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "theme.accent.unified",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.5,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "theme.restraint.tradeoff",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.0,
|
| 189 |
-
"description": "
|
| 190 |
}
|
| 191 |
],
|
| 192 |
"inject": null,
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"add section",
|
| 8 |
+
"restructure layout",
|
| 9 |
+
"restyle"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"non-local changes"
|
| 14 |
],
|
| 15 |
+
"domain": "content & news",
|
| 16 |
"seed_meta": {},
|
| 17 |
+
"title": "Zhiyuan Express · Tech News Site (from scratch to two-column redesign and dark skin)",
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
+
"operator": "generate",
|
| 21 |
+
"request": "We're launching a tech news site called \"Zhiyuan Express\"; let's get the homepage to a viewable, usable state first.\n\nAt the top put the site name \"Zhiyuan Express\" and a subtitle \"10 minutes a day to understand the tech world\". Below is the channel navigation, six items in this order: All, AI Frontier, Chips, Open Source, Security, Venture Capital, with \"All\" selected by default, and the selected one must be obvious at a glance. Next to the nav, give a sort toggle with two options \"Latest\" and \"Hottest\", default \"Latest\".\n\nThere are 45 articles in total; the list shows 12 per page, with pagination below (Previous / Next + current page number, formatted like \"Page 1 / 4\"). Each card must show: title, channel name, author, publication date, and read count; the few I marked \"Featured\" need a Featured badge.\n\nThe first 10 are hand-written by editors; I'll list them in the order I thought of, don't mix them up:\nNo. 1 \"Domestic LLM Platforms Slash API Prices by 80% at Once\", AI Frontier, by Lin Yan, 5120 reads, featured;\nNo. 2 \"3nm Capacity Hit by Another Buying Frenzy — Next Year's Orders Already Full\", Chips, Zhou Xia, 3980;\nNo. 3 \"Open Source Foundation Gets a New Leader, Who Wants to Cut Half the Projects\", Open Source, He Zhiyuan, 2760, featured;\nNo. 4 \"An Overlooked Firmware Flaw Affects 20 Million Routers\", Security, A Lan, 4310;\nNo. 5 \"Early-Stage Funds Start Backing AI Companions, Valuations Soar Absurdly\", Venture Capital, Shen Miao, 1890;\nNo. 6 \"The Energy-Efficiency Race for Edge Inference Chips Enters the Second Half\", Chips, Zhou Xia, 2240;\nNo. 7 \"We Trialed 12 AI Writing Tools — The Conclusion Was a Bit Surprising\", AI Frontier, Lin Yan, 6480, featured;\nNo. 8 \"The Open Source License Dispute: This Time It's Datasets\", Open Source, He Zhiyuan, 1530;\nNo. 9 \"Three Years of Zero Trust in Practice: Five Pitfalls Enterprises Have Fallen Into\", Security, A Lan, 990;\nNo. 10 \"Consumer Robot Funding Overtakes Industrial Robots for the First Time\", Venture Capital, Shen Miao, 2050, featured.\n\nThe remaining 35 are backlog pieces; I won't write them out one by one, fill them in by rule to 45: titles go \"Zhiyuan Observer No. 011\" through \"Zhiyuan Observer No. 045\" (numbers zero-padded to three digits), authors all \"Editorial Desk\"; channels starting from No. 11 cycle in the order AI Frontier, Chips, Open Source, Security, Venture Capital (No. 11 is AI Frontier); read counts, to keep it simple, are the number times 37; these 35 are all not featured.\n\nDates run backwards one per day: No. 1 is the newest at 2026-04-14, each subsequent number is one day earlier, all the way to No. 45, which is exactly 2026-03-01. The default \"Latest\" sort is this order from No. 1 to No. 45; clicking \"Hottest\" re-sorts by read count, highest to lowest. Keep the overall style clean — white background, one blue as the accent color is enough."
|
| 22 |
},
|
| 23 |
{
|
| 24 |
+
"operator": "add section",
|
| 25 |
+
"request": "A list alone is still flat; ops wants two things.\n\nFirst, add a \"Today's Trending\" block, placed for now directly above the article list, spanning the full row, with five slots side by side horizontally, labeled ranks 1 to 5, each showing the article title and read count. The rule: the trending list follows the currently visible results — whichever channel is selected and whatever is searched, the trending list picks only the 5 highest-read articles from that batch, unaffected by pagination (page 2 shows the same trending list as page 1). This block is ops's storefront, so it must be eye-catching. If there are currently no articles at all, the trending slot must show a message like \"No trending articles\", not a blank box.\n\nSecond, add a search box in the nav row; typing a term filters by whether the title contains it, stacking with the channel filter (both conditions must hold), and after searching it automatically returns to page 1. When nothing is found, the list area must have a clear empty-state message, and the pagination control must not still show page 2.\n\nOne more reader request: clicking an article title marks that piece as \"Read\"; read cards fade and carry the word \"Read\"; next to the site name show \"Read N articles\", starting at 0. Note that clicking the same piece repeatedly must not increase the count, nor turn it from read back to unread. Read state follows the article: switching channels, paging, or searching and then clearing the search must leave previously marked pieces still read."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "restructure layout",
|
| 29 |
+
"request": "The homepage information is too scattered; do a layout revision.\n\nOn wide screens switch to two columns: left (main area) is the article list and pagination, right is a narrow column; move \"Today's Trending\" from above the list into this right column, stacked vertically ranks 1 to 5; the right column's trending list must remain visible as the page scrolls. Merge the channel nav and search box into one sticky bar that stays pinned to the top as you scroll down, so channels can be switched at any time.\n\nOn narrow screens (phones) don't force two columns — go back to a single vertical column, move the whole trending block below the article list, not a single piece of content fewer, and pagination still works.\n\nRedesign or not, none of the existing things may be lost: channel filtering, search, sorting, pagination, the Featured badge, read fading and the \"Read N articles\" count, and the trending list following filters and search — behavior exactly as before the redesign. Put the pagination control at the bottom of the main-area list; on page 1 \"Previous\" must be unclickable, and likewise \"Next\" on the last page."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "restyle",
|
| 33 |
+
"request": "Finally, the theme. Put a theme toggle at the top of the page that switches between \"Light / Dark\", and the toggle must show which mode is current.\n\nIn dark mode the whole site's background and text invert, easy on the eyes. But don't just paint the background black and call it done — the visual signals established earlier must still hold in dark mode: the Featured badge must be recognizable, read cards must be clearly weaker than unread ones, and the top three trending ranks must be distinguishable from ranks 4 and 5.\n\nAlso unify the accent color: channel selected state, current page number, trending rank, and Featured badge use the same accent set, one set per mode — don't leave old blue blocks from the previous version stranded in the dark. For overall tone I want restraint and cleanliness, not a screen full of clashing high-saturation colors — but the trending list must remain the page's focal point; find that balance yourself and keep the trade-off consistent site-wide.\n\nSwitching themes must not wipe the current state: selected channel, search term, sort, current page, which articles are read, and the read count must all be exactly as they were when switching over and back."
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "brand.baseline",
|
| 39 |
"m": 1,
|
| 40 |
+
"dimension": "visual",
|
| 41 |
"w": 1.0,
|
| 42 |
+
"description": "The header shows both the site name \"Zhiyuan Express\" and the subtitle \"10 minutes a day to understand the tech world\"; the channels are the six items All / AI Frontier / Chips / Open Source / Security / Venture Capital in matching order, with \"All\" initially in a visibly selected state (clearly different from the other five); the page has a white background and exactly one blue accent color."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "list.count.pages",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "functional",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "Entering the \"All\" channel by default, the list has 45 articles, 12 per page, and the page number displays \"Page 1 / 4\"; page 4 shows exactly 9 articles."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "list.data.rule",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "functional",
|
| 55 |
"w": 1.5,
|
| 56 |
+
"description": "Under the default \"Latest\" sort, the first item on page 1 is \"Domestic LLM Platforms Slash API Prices by 80% at Once\" dated 2026-04-14; the first item on page 2 is \"Zhiyuan Observer No. 013\", channel \"Open Source\", read count 481; the last item on page 4 is \"Zhiyuan Observer No. 045\", channel \"Venture Capital\", author \"Editorial Desk\", date 2026-03-01, read count 1665."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "list.channel.filter",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "functional",
|
| 62 |
"w": 1.0,
|
| 63 |
+
"description": "After clicking \"Chips\" the list has only 9 articles and the page number becomes \"Page 1 / 1\", including both \"3nm Capacity Hit by Another Buying Frenzy — Next Year's Orders Already Full\" and \"Zhiyuan Observer No. 042\"; switching back to \"All\" restores 45 articles over 4 pages."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "list.sort.hot",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "functional",
|
| 69 |
"w": 1.5,
|
| 70 |
+
"description": "In the \"All\" channel, switching to \"Hottest\" makes the 1st item on page 1 \"We Trialed 12 AI Writing Tools — The Conclusion Was a Bit Surprising\" (6480), the 2nd \"Domestic LLM Platforms Slash API Prices by 80% at Once\" (5120), and the 9th \"Zhiyuan Observer No. 045\" (1665)."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "list.featured.badge",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "visual",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "Exactly 4 articles site-wide carry the Featured badge: hand-written pieces No. 1, 3, 7, and 10; no \"Zhiyuan Observer No. 0NN\" piece carries it."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "hot.all.top5",
|
| 81 |
"m": 2,
|
| 82 |
+
"dimension": "functional",
|
| 83 |
"w": 1.5,
|
| 84 |
+
"description": "The trending list renders as a full row directly above the article list, with 5 ranks side by side; in the \"All\" channel with no search they are, in order, \"We Trialed 12 AI Writing Tools…\" at 6480, 5120, \"An Overlooked Firmware Flaw…\" at 4310, 3980, and \"Open Source Foundation Gets a New Leader…\" at 2760, labeled ranks 1–5; going to page 3 shows exactly the same trending list as page 1."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "hot.filter.sync",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "interaction",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "After switching to the \"Venture Capital\" channel the trending list's 1st becomes \"Consumer Robot Funding Overtakes Industrial Robots for the First Time\" (2050), 2nd 1890, 3rd \"Zhiyuan Observer No. 045\" (1665), and the trending list contains only Venture Capital articles."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "search.combo.reset",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "interaction",
|
| 97 |
"w": 1.5,
|
| 98 |
+
"description": "First go to page 2, then type \"Zhiyuan Observer\": the page automatically returns to \"Page 1 / 3\" with 35 articles in total; now also click \"Chips\": the list, filtered on top of that, has only 7 articles (Nos. 012/017/022/027/032/037/042) and the page number is \"Page 1 / 1\"; the trending top 3 are, in order, \"Zhiyuan Observer No. 042\" 1554, No. 037 1369, No. 032 1184; after clearing the search box \"Chips\" restores 9 articles."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "read.state.core",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "interaction",
|
| 104 |
"w": 1.5,
|
| 105 |
+
"description": "Initially the site name is accompanied by \"Read 0 articles\"; clicking an article title fades that card and shows the word \"Read\", and the same spot next to the site name updates to \"Read 1 article\"; clicking the same piece 3 times in a row keeps the count at 1 and does not cancel read state; then switching to \"Chips\" and back to \"All\", going to page 2 and back to page 1, that piece still shows as read and the count is still \"Read 1 article\"."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "search.chain.persist",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "interaction",
|
| 111 |
"w": 1.5,
|
| 112 |
+
"description": "Searching \"Zhiyuan Observer\" yields 35 articles and \"Page 1 / 3\"; the first item on page 2 is \"Zhiyuan Observer No. 023\"; after clicking to mark it read, clearing the search box back to \"All\" and going to page 2, that piece still shows as read and the count is unchanged."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "search.empty",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "functional",
|
| 118 |
"w": 1.0,
|
| 119 |
+
"description": "Searching \"Quantum\" shows a clear no-results message in the list area and a no-data message in the trending area rather than an empty box, and page 2 does not appear (either the page number shows 0 or 1 with both paging buttons disabled, or the pagination control is not rendered at all)."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "layout.two.column",
|
| 123 |
"m": 3,
|
| 124 |
+
"dimension": "visual",
|
| 125 |
"w": 1.5,
|
| 126 |
+
"description": "On wide screens the page is two columns: the article list in the left main area, Today's Trending moved to the right narrow column stacked vertically ranks 1–5; the original full-width trending bar no longer sits above the list."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "layout.sticky.nav",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "interaction",
|
| 132 |
"w": 1.0,
|
| 133 |
+
"description": "When scrolling down to the middle of the list, the top bar containing the channel nav and search box stays fixed and visible, and channels can still be clicked to switch directly; the right-column trending list remains visible during scrolling."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "layout.state.intact",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.5,
|
| 140 |
+
"description": "Behavior doesn't regress after the redesign: \"Chips\" still gives 9 articles over 1 page, the Featured badge is still only on those 4 pieces, read cards still fade and the \"Read N articles\" count matches the pre-redesign behavior, and the first item under \"Hottest\" is still the 6480 piece; searching \"Zhiyuan Observer\" still yields 35 articles at \"Page 1 / 3\", and the right-column trending list updates with that search result to ranks starting with 045 (1665) / 044 (1628) / 043 (1591)."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "layout.pager.edge",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "interaction",
|
| 146 |
"w": 1.0,
|
| 147 |
+
"description": "The pagination control sits at the bottom of the left main-area list; on page 1 \"Previous\" is unclickable, on page 4 \"Next\" is unclickable, and clicking a disabled button changes the page number not at all."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "layout.narrow",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "visual",
|
| 153 |
"w": 1.0,
|
| 154 |
+
"description": "On narrow screens (about 375–768px wide) the layout becomes a single vertical column, the entire trending block sits below the article list with all 5 ranks present, and the pagination control can still page to page 2 normally."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "theme.toggle",
|
| 158 |
"m": 4,
|
| 159 |
+
"dimension": "interaction",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "A theme toggle is visible in the top area of the page and the toggle shows whether the current mode is light or dark; clicking it inverts the whole site's background and body text light/dark, clicking again fully restores light, with no leftover half-dark half-light regions."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "theme.signal.legible",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "visual",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "In dark mode the Featured badge remains clearly recognizable, read cards are clearly weaker than unread cards on the same screen, and the rank markers for the top three trending items are visibly distinguishable from ranks 4/5."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "theme.state.keep",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "functional",
|
| 174 |
"w": 1.5,
|
| 175 |
+
"description": "In the state of \"All\" channel + search term \"Zhiyuan Observer\" + \"Hottest\" sort + page 2 + 2 articles marked read, switching to dark and back to light: the search box still contains \"Zhiyuan Observer\", still 35 articles at \"Page 2 / 3\", the first item on that page is still \"Zhiyuan Observer No. 033\" (1221), the sort is still Hottest, those 2 still fade and the count is still \"Read 2 articles\"."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "theme.accent.unified",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "visual",
|
| 181 |
"w": 1.5,
|
| 182 |
+
"description": "Under the same theme, the channel selected state, current page number, trending rank, and Featured badge use the same accent set; dark mode shows no unadapted old light-mode blue remnants and no unreadable black-text-on-black text."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "theme.restraint.tradeoff",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "visual",
|
| 188 |
"w": 1.0,
|
| 189 |
+
"description": "The trade-off is consistent across both themes: highly saturated accent color appears only on small elements like trending rank markers, the Featured badge, channel selected state, and current page number, while large areas such as list cards and column backgrounds use low-saturation base colors; light and dark use the same allocation strategy (no inconsistency where trending is accented in light mode but the same color as ordinary cards in dark mode)."
|
| 190 |
}
|
| 191 |
],
|
| 192 |
"inject": null,
|
tasks/c24/task.json
CHANGED
|
@@ -3,213 +3,213 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
-
"title": "Castello Monaci
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
-
"operator": "
|
| 23 |
-
"request": "
|
| 24 |
},
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
}
|
| 37 |
],
|
| 38 |
"checklist": [
|
| 39 |
{
|
| 40 |
"id": "repl.section.order",
|
| 41 |
"m": 1,
|
| 42 |
-
"dimension": "
|
| 43 |
"w": 1.5,
|
| 44 |
-
"description": "
|
| 45 |
},
|
| 46 |
{
|
| 47 |
"id": "repl.top.header.hero",
|
| 48 |
"m": 1,
|
| 49 |
-
"dimension": "
|
| 50 |
"w": 1.0,
|
| 51 |
-
"description": "
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "repl.grid.nine",
|
| 55 |
"m": 1,
|
| 56 |
-
"dimension": "
|
| 57 |
"w": 1.5,
|
| 58 |
-
"description": "
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "repl.form.fields",
|
| 62 |
"m": 1,
|
| 63 |
-
"dimension": "
|
| 64 |
"w": 1.0,
|
| 65 |
-
"description": "CONTATTACI
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "repl.footer.strip",
|
| 69 |
"m": 1,
|
| 70 |
-
"dimension": "
|
| 71 |
"w": 1.0,
|
| 72 |
-
"description": "
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "repl.cookie.card",
|
| 76 |
"m": 1,
|
| 77 |
-
"dimension": "
|
| 78 |
"w": 1.0,
|
| 79 |
-
"description": "
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "inter.required.six",
|
| 83 |
"m": 2,
|
| 84 |
-
"dimension": "
|
| 85 |
"w": 1.5,
|
| 86 |
-
"description": "
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "inter.validate.format",
|
| 90 |
"m": 2,
|
| 91 |
-
"dimension": "
|
| 92 |
"w": 1.0,
|
| 93 |
-
"description": "
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "inter.counter.300",
|
| 97 |
"m": 2,
|
| 98 |
-
"dimension": "
|
| 99 |
"w": 1.5,
|
| 100 |
-
"description": "
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "inter.submit.list5",
|
| 104 |
"m": 2,
|
| 105 |
-
"dimension": "
|
| 106 |
"w": 1.5,
|
| 107 |
-
"description": "
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "inter.idempotent",
|
| 111 |
"m": 2,
|
| 112 |
-
"dimension": "
|
| 113 |
"w": 1.0,
|
| 114 |
-
"description": "
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "inter.newsletter.link",
|
| 118 |
"m": 2,
|
| 119 |
-
"dimension": "
|
| 120 |
"w": 1.0,
|
| 121 |
-
"description": "
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "inter.cookie.memory",
|
| 125 |
"m": 2,
|
| 126 |
-
"dimension": "
|
| 127 |
"w": 1.0,
|
| 128 |
-
"description": "
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "skin.primary.hex",
|
| 132 |
"m": 3,
|
| 133 |
-
"dimension": "
|
| 134 |
"w": 1.5,
|
| 135 |
-
"description": "
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "skin.bg.sand",
|
| 139 |
"m": 3,
|
| 140 |
-
"dimension": "
|
| 141 |
"w": 1.0,
|
| 142 |
-
"description": "
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "skin.content.intact",
|
| 146 |
"m": 3,
|
| 147 |
-
"dimension": "
|
| 148 |
"w": 1.5,
|
| 149 |
-
"description": "
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "skin.regression",
|
| 153 |
"m": 3,
|
| 154 |
-
"dimension": "
|
| 155 |
"w": 1.5,
|
| 156 |
-
"description": "
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "skin.tradeoff",
|
| 160 |
"m": 3,
|
| 161 |
-
"dimension": "
|
| 162 |
"w": 1.0,
|
| 163 |
-
"description": "
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "calc.place.dates",
|
| 167 |
"m": 4,
|
| 168 |
-
"dimension": "
|
| 169 |
"w": 1.0,
|
| 170 |
-
"description": "
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "calc.default.exact",
|
| 174 |
"m": 4,
|
| 175 |
-
"dimension": "
|
| 176 |
"w": 1.5,
|
| 177 |
-
"description": "
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "calc.discount.edge",
|
| 181 |
"m": 4,
|
| 182 |
-
"dimension": "
|
| 183 |
"w": 1.5,
|
| 184 |
-
"description": "Reale + 150
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "calc.floor.cents",
|
| 188 |
"m": 4,
|
| 189 |
-
"dimension": "
|
| 190 |
"w": 1.5,
|
| 191 |
-
"description": "
|
| 192 |
},
|
| 193 |
{
|
| 194 |
"id": "calc.range.bound",
|
| 195 |
"m": 4,
|
| 196 |
-
"dimension": "
|
| 197 |
"w": 1.0,
|
| 198 |
-
"description": "
|
| 199 |
},
|
| 200 |
{
|
| 201 |
"id": "calc.chain.prefill",
|
| 202 |
"m": 4,
|
| 203 |
-
"dimension": "
|
| 204 |
"w": 1.5,
|
| 205 |
-
"description": "
|
| 206 |
},
|
| 207 |
{
|
| 208 |
"id": "calc.skin.consistent",
|
| 209 |
"m": 4,
|
| 210 |
-
"dimension": "
|
| 211 |
"w": 1.0,
|
| 212 |
-
"description": "
|
| 213 |
}
|
| 214 |
],
|
| 215 |
"inject": null,
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"make interactive",
|
| 8 |
+
"restyle",
|
| 9 |
+
"add section"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"exact numeric assertions"
|
| 14 |
],
|
| 15 |
+
"domain": "community forms",
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
+
"title": "Castello Monaci Wedding Estate Website: Replicate · Form Interaction · Wine-Red Reskin · Budget Calculator Section",
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
+
"operator": "replicate",
|
| 23 |
+
"request": "We want to reproduce the homepage of the Castello Monaci wedding estate exactly, using the reference screenshot of how it looks live now, 1:1 within the visible area; all photos can be placeholders, but the text, colors, and layout must match.\n\nFrom top to bottom: at the very top is a thin narrow white bar, on the left the three horizontal lines plus the word MENU, in the exact center the estate's logo (fine-line castle graphic + the words CASTELLO MONACI), on the right first an olive-green solid rounded button reading RICHIEDI PREVENTIVO, then further right EN, a small flag, and a magnifying glass — this whole row on the same horizontal line.\n\nImmediately after is a large wedding-scene image, with two lines of white uppercase title overprinted on its lower-left area, \"LA MAGIA DI UN CASTELLO SOTTO UNA CASCATA DI FIORI\", and below the title a small white thin-outline button SCOPRI DI PIÙ.\n\nBelow is the white-background welcome section: a centered small heading BENVENUTI A CASTELLO MONACI, below it four lines of centered fine italic intro text (roughly: here you can combine the charm of history with high-caliber organization to give you a magical wedding befitting your personality; we are in the heart of Salento, in the Puglia region, by the sea and surrounded by the greenery of the countryside, among olive trees and vineyards).\n\nBelow that are the estate's nine service sections, in three rows of three. First row: AMBIENTI E SALE, PIANO A/PIANO B, MATRIMONI A TEMA; second row: BUFFET E PORTATE, WEDDING ASSISTANT, ADDOBBI E ALLESTIMENTI; third row: MUSICA E INTRATTENIMENTO, SUITE SPOSI, CAMERE PER OSPITI. The six sections in the first two rows each have a small banner image above; the three in the third row have only heading and text, no image. Each section is \"uppercase small heading + three to four lines of small gray text\". Below the nine sections a centered olive-green solid button SCOPRI DI PIÙ.\n\nBelow that is a light-gray-background area: a centered uppercase heading VISITA CASTELLO MONACI CON UN TOUR VIRTUALE, below it a placeholder aerial-video image, and in its exact center an overlaid play button — a white circle containing a triangle.\n\nThen a full-width olive-green band, its text arranged slightly right of center: heading MATRIMONIO CON RITO CIVILE, two lines of small white text (our estate is authorized by the Salice Salentino municipal government as a venue for civil wedding ceremonies), below a white thin-outline button SCOPRI DI PIÙ.\n\nBelow is the white-background retrospective area: the left column is a small heading RIVIVI UN EVENTO SVOLTO A CASTELLO MONACI plus two small paragraphs; the middle is a placeholder wedding-documentary image; the right is a dark card reading VIDEO TRAILERS, with a light small button SCOPRI DI PIÙ at the card's lower left.\n\nBelow that leave a blank stretch, then the Instagram section: a line of small text \"INSTAGRAM\" with a camera icon, below a very large light-colored heading #misposoacastellomonaci, below two lines of small italic text (inviting everyone to post photos taken at the estate with the official hashtag).\n\nThen the NEWSLETTER block (light beige background): small heading NEWSLETTER, two lines of small explanatory text, a very wide email input (placeholder \"Inserisci la tua email\"), below a small button ISCRIVITI.\n\nNext the CONTATTACI contact section: a small paragraph spelling out how to reach us by phone for inquiries, below a form — the left column, top to bottom, has three single-line inputs (name, email, phone, each with an Italian placeholder), then below a line of small text \"Richiesta di contatto per:\" and a dropdown defaulting to \"-- Seleziona un'opzione --\", with options Preventivo matrimonio, Visita alla location, Camere per ospiti, Altro; on the right a tall multi-line message box. Below the form two small checkboxes: ACCETTO I TERMINI DELLA PRIVACY, RICHIEDO ISCRIZIONE ALLA NEWSLETTER. Finally a centered INVIA button.\n\nAt the very bottom first a separate thin narrow light strip with a centered line of small text beginning with #ZEROSPRECHI (about the estate's participation in the Caritas anti-food-waste project), then the footer. The footer has four columns: the first the castle line-art icon and Copyright © 2019; the second the address and multiple phone numbers of CASTELLO MONACI SERVICE SRL; the third APERTO TUTTI I GIORNI, 9:30 - 19:30, and under SEGUICI three social links (Facebook / Instagram / Pinterest); the fourth RICONOSCIMENTI, below which is a square WEDDING AWARDS 2019 badge.\n\nAlso, in the page's lower-right corner a Cookie notice card always floats: heading Cookie Banner, an x at the upper right, a few lines of small gray cookie text in the middle, two buttons at the bottom — light gray Settings on the left and olive-green I accept on the right.\n\nThe main color is the olive green from the reference (around #7C8D6F), with generous whitespace and light gray/beige backgrounds, body small text in gray, headings all uppercase with letter spacing."
|
| 24 |
},
|
| 25 |
{
|
| 26 |
+
"operator": "make interactive",
|
| 27 |
+
"request": "Right now this page is only pretty and not usable at all. Sales takes calls all day; we want the contact form to actually receive inquiries, and the Cookie card shouldn't keep sitting on screen unable to be dismissed.\n\nThe form: name, email, phone, inquiry-type dropdown, and message — all five must be filled, and the privacy-terms checkbox must be ticked; missing any one blocks submission, and each missing one shows a line of red text below it telling the user what's missing. The email must look like an email (something obviously incomplete like \"abc@\" must be blocked), the phone accepts digits only and must be 8 to 15 digits long — too short or too long both fail; once the user corrects it the message must disappear on its own, don't let it linger. The message box holds at most 300 characters, and next to it show the remaining count live — it starts at 300, becomes 290 after 10 characters, and once full nothing more can be typed in.\n\nAfter a successful submit: the form clears back to its initial state (dropdown back to \"-- Seleziona un'opzione --\", both checkboxes unticked), a success message appears on the page, and below the form a small \"Recent inquiries\" list is added recording this submission's name and inquiry type, newest first, keeping at most 5 entries — more than that pushes the oldest out; next to it a counter stating how many inquiries have been received in total (label wording is up to you, as long as it's understandable). Careful about the user double-clicking: after the form is already empty, clicking submit again must not add a phantom entry.\n\nOne more small linkage: if the user ticks \"RICHIEDO ISCRIZIONE ALLA NEWSLETTER\" in the form and submits successfully, the NEWSLETTER block above must switch to a subscribed state showing the email the user just entered; if unticked, everything stays as-is.\n\nCookie card: clicking I accept closes it, and opening the site again later must not show it again — it has to be remembered; clicking the x at the upper right only hides it this time, and it must not pop up again during this browsing session."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "restyle",
|
| 31 |
+
"request": "The brand side is changing visual direction: the olive green feels too plain, and next year's push is a \"wine red + warm sand\" route. Please replace the whole site's green system with deep wine red #7A2E3C, replace the original light gray/off-white backgrounds uniformly with warm sand #F4EFE7, and keep body text in the dark range so it reads clearly on warm sand.\n\nTwo things I'll say up front, don't mess them up: first, the client wants the main call-to-action buttons (the top inquiry one, the SCOPRI DI PIÙ on the big image, the one below the nine-grid, the one in the full-width band, ISCRIVITI, INVIA, the Cookie's I accept) to stand out a bit more than now — don't make them hard to find; but second, the boss repeatedly stresses that the estate's tone is restrained, minimal, with lots of whitespace — no gaudiness allowed. Find that balance yourself; just keep it one consistent approach site-wide, don't do a different gimmick here and there.\n\nAlso, a reskin is a reskin: the page structure, copy, and the order of the nine sections may not change by a single word, and the previous version's form validation, character counter, inquiry list, and Cookie memory may not break either. While you're at it, watch the error messages — they're red text now, and the new theme's primary is also in the red family, so don't let the two reds collide until it's impossible to tell which is an error."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "add section",
|
| 35 |
+
"request": "The most common questions on the inquiry line are \"roughly how much?\" and \"is a certain date still open?\", so we want to offer self-service budget estimation right on the homepage, placed between the virtual tour block and the full-width civil-wedding band, styled of course to match the new wine-red warm-sand theme.\n\nThis area must let guests do three things: choose a package, drag the guest count, and pick a date. Three package tiers: Classico at €80 per person, Prestige at €110 per person, Reale at €150 per person, with Classico selected by default. The guest count uses a draggable slider from 50 to 300 people in steps of 10, default 120, and the current count must always be displayed.\n\nOps explains the algorithm to guests like this: first a fixed venue base fee of €4500, plus the per-person rate times the guest count; if it's held on a Saturday, the whole amount goes up by fifteen percent; at 150 guests and above a group rate applies, subtracting another 8% on top of what's been calculated (and a \"Group discount 8%\" marker must appear alongside — hidden if under 150); finally, no matter how much of a remainder comes out, always cut it off — keep whole euros only (not rounding, always rounding down), displayed with thousands separators, e.g. €14,100.\n\nDates are chosen from our open 2026 season; the list ops gave is: April 11 (Saturday), 17 (Friday), 18 (Saturday), 24 (Friday), 25 (Saturday), 30 (Thursday); May 2 (Saturday), 8 (Friday), 9 (Saturday), 16 (Saturday), 21 (Thursday), 23 (Saturday); June 5 (Friday), 6 (Saturday), 13 (Saturday), 19 (Friday), 20 (Saturday), 27 (Saturday); July 3 (Friday), 4 (Saturday), 10 (Friday), 11 (Saturday), 18 (Saturday), 25 (Saturday); August 1 (Saturday), 7 (Friday), 8 (Saturday), 14 (Friday), 15 (Saturday), 22 (Saturday); September 4 (Friday), 5 (Saturday), 11 (Friday), 12 (Saturday), 19 (Saturday), 26 (Saturday); October 2 (Friday), 3 (Saturday), 9 (Friday), 10 (Saturday), 17 (Saturday), 24 (Saturday). Every day in the date list must display uniformly in the \"2026-04-11 (Saturday)\" style (year-month-day plus weekday), every day must be selectable, and the selected day must make clear at a glance which date it is.\n\nThe amount must change immediately whenever any condition changes — don't make guests click a \"Calculate\" button. Finally, place a button at the bottom of this area, \"INVIA QUESTO PREVENTIVO\" (send us this quote); clicking it takes the guest straight down to the contact form below, auto-selects the inquiry type Preventivo matrimonio, and auto-writes the just-chosen date, package, guest count, and computed amount into the message box — the date copied exactly as written in the list, the amount copied exactly too, don't change the numbers yourself; the message's remaining character count must of course update accordingly. All the guest has to do is add name, email, and phone, tick the privacy box, and send it — after sending it enters the Recent inquiries list just like any ordinary inquiry."
|
| 36 |
}
|
| 37 |
],
|
| 38 |
"checklist": [
|
| 39 |
{
|
| 40 |
"id": "repl.section.order",
|
| 41 |
"m": 1,
|
| 42 |
+
"dimension": "coverage",
|
| 43 |
"w": 1.5,
|
| 44 |
+
"description": "The homepage has 12 blocks top to bottom, in exactly this order: top nav bar → large image with heading → BENVENUTI welcome section → nine-section services area → VISITA…TOUR VIRTUALE light area → full-width MATRIMONIO CON RITO CIVILE band → RIVIVI UN EVENTO retrospective area → #misposoacastellomonaci section → NEWSLETTER section → CONTATTACI form section → #ZEROSPRECHI thin narrow strip → footer; no extra blocks beyond the reference may be inserted in between."
|
| 45 |
},
|
| 46 |
{
|
| 47 |
"id": "repl.top.header.hero",
|
| 48 |
"m": 1,
|
| 49 |
+
"dimension": "visual",
|
| 50 |
"w": 1.0,
|
| 51 |
+
"description": "Inside the thin white top bar, from left to right: three horizontal lines + the word MENU, the centered CASTELLO MONACI logo, and on the right the olive-green solid (green background, white text) button RICHIEDI PREVENTIVO followed by EN, a small flag, and a magnifying glass — 3 elements in all, all on the same horizontal line; below it, in the lower-left area of the large image (not centered), the two-line white uppercase title \"LA MAGIA DI UN CASTELLO SOTTO UNA CASCATA DI FIORI\" is overprinted, and directly below the title is a white thin-outline (not solid) SCOPRI DI PIÙ button."
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "repl.grid.nine",
|
| 55 |
"m": 1,
|
| 56 |
+
"dimension": "visual",
|
| 57 |
"w": 1.5,
|
| 58 |
+
"description": "The services area has exactly 9 sections in three rows of three, with headings in order AMBIENTI E SALE / PIANO A/PIANO B / MATRIMONI A TEMA / BUFFET E PORTATE / WEDDING ASSISTANT / ADDOBBI E ALLESTIMENTI / MUSICA E INTRATTENIMENTO / SUITE SPOSI / CAMERE PER OSPITI; the 6 in the first two rows each have an image, and the 3 in the third row have no image, only heading and text."
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "repl.form.fields",
|
| 62 |
"m": 1,
|
| 63 |
+
"dimension": "functional",
|
| 64 |
"w": 1.0,
|
| 65 |
+
"description": "The CONTATTACI form contains exactly: 3 single-line inputs (name/email/phone), 1 dropdown defaulting to \"-- Seleziona un'opzione --\" with 4 options, 1 multi-line message box, 2 checkboxes (privacy terms, newsletter subscription), 1 centered INVIA button."
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "repl.footer.strip",
|
| 69 |
"m": 1,
|
| 70 |
+
"dimension": "visual",
|
| 71 |
"w": 1.0,
|
| 72 |
+
"description": "Above the footer there is a separate thin narrow light strip containing a centered line of small text beginning with \"#ZEROSPRECHI\"; the footer itself has 4 columns, the second containing the words CASTELLO MONACI SERVICE SRL and phone numbers, the third containing APERTO TUTTI I GIORNI and \"9:30 - 19:30\" plus the three social links Facebook/Instagram/Pinterest, and the fourth containing a square WEDDING AWARDS 2019 badge."
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "repl.cookie.card",
|
| 76 |
"m": 1,
|
| 77 |
+
"dimension": "visual",
|
| 78 |
"w": 1.0,
|
| 79 |
+
"description": "In the page's lower-right corner the Cookie card is fixed and floating, with heading Cookie Banner, an x at the upper right, and two buttons side by side at the bottom: light gray Settings on the left, olive-green I accept on the right; the card does not scroll away with content when the page scrolls."
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "inter.required.six",
|
| 83 |
"m": 2,
|
| 84 |
+
"dimension": "functional",
|
| 85 |
"w": 1.5,
|
| 86 |
+
"description": "Clicking INVIA in a completely blank state: the page does not submit, and error messages appear simultaneously in all 6 spots — name, email, phone, inquiry type, message, privacy checkbox — while the inquiry count still shows 0 and the Recent inquiries list produces no entry."
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "inter.validate.format",
|
| 90 |
"m": 2,
|
| 91 |
+
"dimension": "functional",
|
| 92 |
"w": 1.0,
|
| 93 |
+
"description": "Submitting an email of \"abc@\" is blocked with an error, and the error disappears after changing to a valid email; a phone of 7 digits or 16 digits is blocked with an error, and the error disappears after entering 10 pure digits; a phone containing letters is likewise blocked."
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "inter.counter.300",
|
| 97 |
"m": 2,
|
| 98 |
+
"dimension": "functional",
|
| 99 |
"w": 1.5,
|
| 100 |
+
"description": "The remaining character count next to the message box shows exactly 300 when blank and exactly 290 after entering 10 characters; after reaching 300 characters the 301st cannot be entered (the count never goes negative and the text stops growing)."
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "inter.submit.list5",
|
| 104 |
"m": 2,
|
| 105 |
+
"dimension": "functional",
|
| 106 |
"w": 1.5,
|
| 107 |
+
"description": "After filling everything valid and ticking privacy, submitting: the form is fully cleared (dropdown back to \"-- Seleziona un'opzione --\", both checkboxes unticked), a success message appears, the inquiry count goes from 0 to 1, and the first entry of the Recent inquiries list shows this submission's name and inquiry type; after submitting 6 times in a row the count shows 6 while the list keeps only the latest 5 with the newest at the top."
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "inter.idempotent",
|
| 111 |
"m": 2,
|
| 112 |
+
"dimension": "interaction",
|
| 113 |
"w": 1.0,
|
| 114 |
+
"description": "After one successful submission (form already cleared), immediately clicking INVIA twice more keeps the inquiry count unchanged and the Recent inquiries list entry count unchanged, and the required-field error messages appear again."
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "inter.newsletter.link",
|
| 118 |
"m": 2,
|
| 119 |
+
"dimension": "interaction",
|
| 120 |
"w": 1.0,
|
| 121 |
+
"description": "After ticking \"RICHIEDO ISCRIZIONE ALLA NEWSLETTER\" and submitting successfully, the NEWSLETTER block above switches to the subscribed state and shows the email just submitted (character-for-character as entered in the form); if that box is not ticked on submit, the NEWSLETTER block keeps the original input and ISCRIVITI button."
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "inter.cookie.memory",
|
| 125 |
"m": 2,
|
| 126 |
+
"dimension": "interaction",
|
| 127 |
"w": 1.0,
|
| 128 |
+
"description": "After clicking I accept the Cookie card disappears, and it does not reappear after refreshing the page; after clearing the site's local storage (or opening in a fresh session/private window) restores the card, clicking the x at the upper right makes the card disappear and it does not reappear while scrolling the page or operating the form within this session."
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "skin.primary.hex",
|
| 132 |
"m": 3,
|
| 133 |
+
"dimension": "visual",
|
| 134 |
"w": 1.5,
|
| 135 |
+
"description": "The top RICHIEDI PREVENTIVO button, the full-width MATRIMONIO CON RITO CIVILE block background, and the Cookie's I accept button are all deep wine red #7A2E3C (the same color value), and the original olive green #7C8D6F or any near green no longer appears site-wide."
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "skin.bg.sand",
|
| 139 |
"m": 3,
|
| 140 |
+
"dimension": "visual",
|
| 141 |
"w": 1.0,
|
| 142 |
+
"description": "The original light-gray virtual tour area and the original off-white NEWSLETTER area backgrounds both become warm sand #F4EFE7, with their body text and headings still in the dark range and clearly legible (no light text on a light background making things unreadable)."
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "skin.content.intact",
|
| 146 |
"m": 3,
|
| 147 |
+
"dimension": "coverage",
|
| 148 |
"w": 1.5,
|
| 149 |
+
"description": "After the reskin the order of the 12 blocks, the two-line heading over the large image, the headings and arrangement order of the nine service sections, the #ZEROSPRECHI strip copy, and the footer's four-column content are all exactly as in requirement 1, with no copy added, removed, or rewritten."
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "skin.regression",
|
| 153 |
"m": 3,
|
| 154 |
+
"dimension": "functional",
|
| 155 |
"w": 1.5,
|
| 156 |
+
"description": "After the reskin all of requirement 2's behavior is preserved: blank submission still produces 6 error messages, the message counter is still 300 → 290 after 10 characters, a successful submission increments the count by 1 with at most 5 list entries, and after I accept, refreshing no longer shows the Cookie card."
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "skin.tradeoff",
|
| 160 |
"m": 3,
|
| 161 |
+
"dimension": "visual",
|
| 162 |
"w": 1.0,
|
| 163 |
+
"description": "All the site's main call-to-action buttons (top inquiry, the large image's SCOPRI DI PIÙ, the button below the nine-grid, the full-width band button, ISCRIVITI, INVIA, I accept) use the same accent treatment (same color/shape language), with none obviously doing its own thing; meanwhile the form error message color is clearly distinguishable from the primary #7A2E3C, so the error state is recognizable at a glance."
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "calc.place.dates",
|
| 167 |
"m": 4,
|
| 168 |
+
"dimension": "coverage",
|
| 169 |
"w": 1.0,
|
| 170 |
+
"description": "The budget calculator area sits between the virtual tour area and the full-width MATRIMONIO CON RITO CIVILE band, containing three package choices (Classico/Prestige/Reale), a guest-count slider and current-count display, and a selectable date list; the list has exactly 42 dates displayed in the \"2026-04-11 (Saturday)\" style with year-month-day and weekday, exactly 27 of them labeled Saturday, and the selected date item shows a visible selected style distinguishable from unselected ones."
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "calc.default.exact",
|
| 174 |
"m": 4,
|
| 175 |
+
"dimension": "functional",
|
| 176 |
"w": 1.5,
|
| 177 |
+
"description": "The default state is Classico + 120 people; selecting any non-Saturday date (e.g. 2026-04-17, Friday) shows exactly €14,100; after switching to Prestige, dragging the count to 200, and selecting 2026-08-15 (Saturday), the amount becomes exactly €28,037, updating instantly with no extra \"Calculate\" click."
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "calc.discount.edge",
|
| 181 |
"m": 4,
|
| 182 |
+
"dimension": "functional",
|
| 183 |
"w": 1.5,
|
| 184 |
+
"description": "Reale + 150 people + 2026-06-06 (Saturday) is exactly €28,566; Classico + 50 people + 2026-10-03 (Saturday) is exactly €9,775; with Prestige + 2026-09-04 (Friday), dragging the count from 140 to 150 changes the amount from €19,900 to €19,320 and simultaneously shows the \"Group discount 8%\" marker (the marker is not shown at 140 people)."
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "calc.floor.cents",
|
| 188 |
"m": 4,
|
| 189 |
+
"dimension": "functional",
|
| 190 |
"w": 1.5,
|
| 191 |
+
"description": "Remainders are always cut off, never rounded: Classico + 170 people + 2026-07-18 (Saturday) shows exactly €19,149 (not €19,150); Prestige + 170 people + 2026-05-09 (Saturday) shows exactly €24,545 (not €24,546); Reale + 190 people + 2026-05-09 (Saturday) shows exactly €34,914."
|
| 192 |
},
|
| 193 |
{
|
| 194 |
"id": "calc.range.bound",
|
| 195 |
"m": 4,
|
| 196 |
+
"dimension": "functional",
|
| 197 |
"w": 1.0,
|
| 198 |
+
"description": "The guest slider can reach both extremes and steps by 10: minimum 50, maximum 300, and it cannot be dragged below 50 or above 300; Reale + 300 people + 2026-08-01 (Saturday) is exactly €52,371."
|
| 199 |
},
|
| 200 |
{
|
| 201 |
"id": "calc.chain.prefill",
|
| 202 |
"m": 4,
|
| 203 |
+
"dimension": "interaction",
|
| 204 |
"w": 1.5,
|
| 205 |
+
"description": "In the Prestige/200 people/2026-08-15 (Saturday) state, clicking \"INVIA QUESTO PREVENTIVO\": the page scrolls to the CONTATTACI form, the inquiry type auto-changes to Preventivo matrimonio, and the pre-filled text in the message box contains the selected date written exactly as in the date list (2026-08-15 (Saturday)), Prestige, 200, and 28,037, with the remaining character count updating from 300 to 300 minus the pre-filled character count; then after filling in valid name/email/phone, ticking privacy, and submitting successfully, the inquiry count increments by 1 and the first entry of the Recent inquiries list has inquiry type Preventivo matrimonio."
|
| 206 |
},
|
| 207 |
{
|
| 208 |
"id": "calc.skin.consistent",
|
| 209 |
"m": 4,
|
| 210 |
+
"dimension": "visual",
|
| 211 |
"w": 1.0,
|
| 212 |
+
"description": "The budget calculator area uses the same theme as requirement 3: CTA buttons are #7A2E3C, the area's background belongs to the warm-sand/white family, no olive-green element appears within it, and the buttons' accent treatment matches the other main CTAs."
|
| 213 |
}
|
| 214 |
],
|
| 215 |
"inject": null,
|
tasks/c25/task.json
CHANGED
|
@@ -3,204 +3,204 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {},
|
| 17 |
-
"title": "
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
-
"operator": "
|
| 21 |
-
"request": "
|
| 22 |
},
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "nav.items",
|
| 39 |
"m": 1,
|
| 40 |
-
"dimension": "
|
| 41 |
"w": 1.0,
|
| 42 |
-
"description": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "hero.stats.four",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "grid.all40",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.5,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "filterbar.static",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.0,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "live.block",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.0,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "visual.tone",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "footer.icp",
|
| 81 |
"m": 1,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.0,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "page.nine",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "combo.diagonal",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.5,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "sort.rating",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.0,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "combo.reset.empty",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.5,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "cart.idem.empty",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.5,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "cart.discount",
|
| 123 |
"m": 2,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.5,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "wizard.three.step",
|
| 130 |
"m": 2,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.5,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "live.removed",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.5,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "stats.three",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.5,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "regress.filter.after.delete",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.0,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "regress.cart.after.delete",
|
| 158 |
"m": 3,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "layout.sidebar",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "layout.mobile.drawer",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.5,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "state.kept.after.refactor",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.5,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "state.cart.after.refactor",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.0,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "style.consistency",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.0,
|
| 196 |
-
"description": "
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "result.count.display",
|
| 200 |
"m": 4,
|
| 201 |
-
"dimension": "
|
| 202 |
"w": 1.0,
|
| 203 |
-
"description": "
|
| 204 |
}
|
| 205 |
],
|
| 206 |
"inject": null,
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make interactive",
|
| 8 |
+
"remove section",
|
| 9 |
+
"restructure layout"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"boundary and error paths"
|
| 14 |
],
|
| 15 |
+
"domain": "education courses",
|
| 16 |
"seed_meta": {},
|
| 17 |
+
"title": "Zhixing Academy · Online Course Catalog Site (from PRD to sidebar redesign)",
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
+
"operator": "generate",
|
| 21 |
+
"request": "We're building an online course catalog site called \"Zhixing Academy\"; first put together the complete one-screen site, desktop-first, and just make sure nothing goes out of place on phones.\n\nTop to bottom the page has these blocks: a nav at the top, with the site name \"Zhixing Academy\" on the left and, on the right, four menus in order: \"Courses\", \"Instructors\", \"Corporate Training\", \"Help Center\", then further right a primary-color \"Log In / Sign Up\" button. Below the nav is the hero banner, big heading \"Find the course that's right for you\", subtitle \"40 selected courses, starting anytime, with a 7-day refund if you're not satisfied after finishing\". Directly below the banner is a stats strip with four items: 40 courses on sale, 128,000+ total learners, 86 contracted instructors, 3 live sessions this week.\n\nBelow that is the filter bar, a horizontal row above the course list, in three groups: Category (All / Programming & Development / Design & Creative / Workplace Skills / Language Learning / Exam Prep), Level (Any / Beginner / Intermediate / Advanced), Price (Any / Under ¥200 / ¥200–¥499 / ¥500 and above), with a search box on the right (placeholder \"Search course name\") and a sort dropdown with, in order: Recommended / Price: low to high / Enrollments: high to low / Rating: high to low. For this version make the filter bar static — whether it's clickable doesn't matter, the look must be right.\n\nBelow the filter bar is the course card grid; for this version lay out all 40 courses at once, three per row on wide desktop screens. Each card must have: a 16:9 placeholder cover image, course name, two small tags for category and level, instructor name, rating, hours, enrollments, price (with ¥), plus an \"Add to list\" button.\n\nThe course data came from our ops colleague, a bit messy, in the format name / category / level / price / hours / rating / enrollments / instructor; enter it as given, not a single course missing:\nPython Introduction & Data Processing / Programming & Development / Beginner / 299 / 12 / 4.8 / 1240 / Chen Ming; JavaScript from Zero to Production / Programming & Development / Beginner / 259 / 16 / 4.7 / 980 / Chen Ming; Advanced React Component Development / Programming & Development / Intermediate / 459 / 20 / 4.9 / 760 / Zhou Yu; Vue 3 Full-Stack in Practice / Programming & Development / Intermediate / 429 / 18 / 4.6 / 640 / Zhou Yu; Java Backend Engineer Bootcamp / Programming & Development / Intermediate / 899 / 36 / 4.5 / 1520 / Zhao Yan; Algorithms & Data Structures in Depth / Programming & Development / Advanced / 699 / 28 / 4.9 / 430 / Zhao Yan; Go Microservices in Practice / Programming & Development / Advanced / 759 / 24 / 4.4 / 210 / He Chuan; SQL Database Queries for Beginners / Programming & Development / Beginner / 149 / 10 / 4.6 / 2100 / He Chuan; Linux Server Operations Basics / Programming & Development / Beginner / 199 / 14 / 4.3 / 870 / He Chuan; Frontend Performance Optimization in Practice / Programming & Development / Advanced / 549 / 15 / 4.8 / 320 / Zhou Yu; Python Crawlers & Data Collection / Programming & Development / Intermediate / 359 / 14 / 4.5 / 1130 / Chen Ming; WeChat Mini Program Development Crash Course / Programming & Development / Beginner / 229 / 12 / 4.2 / 560 / Chen Ming.\nOn the design side: Photoshop Commercial Retouching / Design & Creative / Beginner / 189 / 20 / 4.7 / 1890 / Lin Lan; UI Interface Design Systems / Design & Creative / Intermediate / 499 / 24 / 4.8 / 720 / Lin Lan; Figma Team Collaboration Design / Design & Creative / Beginner / 159 / 8 / 4.6 / 1340 / Su Li; Brand Visual Identity Design / Design & Creative / Advanced / 689 / 18 / 4.5 / 260 / Su Li; Short Video Editing & Color Grading / Design & Creative / Beginner / 219 / 16 / 4.4 / 2450 / Zheng Ye; 3D Modeling with Blender / Design & Creative / Intermediate / 399 / 22 / 4.3 / 480 / Zheng Ye; Illustration & Hand Drawing Basics / Design & Creative / Beginner / 129 / 12 / 4.9 / 3020 / Su Li; Motion Design with After Effects / Design & Creative / Intermediate / 459 / 20 / 4.6 / 540 / Zheng Ye.\nOn the workplace side: Excel Pivot Tables in Practice / Workplace Skills / Beginner / 129 / 10 / 4.8 / 4120 / Wang Qi; Business Presentation Design with PowerPoint / Workplace Skills / Beginner / 149 / 12 / 4.7 / 3260 / Wang Qi; PMP Exam Preparation / Workplace Skills / Advanced / 899 / 40 / 4.5 / 610 / Ma Jun; Effective Communication & Managing Up / Workplace Skills / Intermediate / 259 / 8 / 4.4 / 980 / Ma Jun; Financial Statement Analysis Basics / Workplace Skills / Beginner / 269 / 14 / 4.3 / 730 / Xu Jing; The Data Analyst Career Path / Workplace Skills / Intermediate / 599 / 26 / 4.6 / 1080 / Xu Jing; Time & Energy Management / Workplace Skills / Beginner / 99 / 6 / 4.2 / 5210 / Ma Jun; Business Negotiation in Practice / Workplace Skills / Advanced / 559 / 12 / 4.5 / 340 / Ma Jun; Resume Polish & Interview Success / Workplace Skills / Beginner / 79 / 5 / 4.1 / 6100 / Wang Qi.\nOn the languages side: IELTS Writing Band 7 Breakthrough / Language Learning / Advanced / 799 / 30 / 4.7 / 890 / Emily Wang; Spoken English from Zero / Language Learning / Beginner / 199 / 24 / 4.5 / 3400 / Emily Wang; Business English Email Writing / Language Learning / Intermediate / 329 / 12 / 4.4 / 620 / Emily Wang; Japanese Kana to N4 / Language Learning / Beginner / 249 / 28 / 4.6 / 1560 / Sato Haruka; Korean Pronunciation for Beginners / Language Learning / Beginner / 179 / 16 / 4.2 / 740 / Kim Jieun; French A1 Foundations / Language Learning / Intermediate / 389 / 26 / 4.3 / 310 / Claire.\nOn the exams side: Postgraduate Entrance Math Intensive Sprint / Exam Prep / Advanced / 999 / 48 / 4.8 / 2300 / Li Wei; Teacher Certification Written Exam Full Course / Exam Prep / Intermediate / 399 / 32 / 4.4 / 1720 / Xu Jing; Civil Service Aptitude Test Techniques / Exam Prep / Intermediate / 459 / 30 / 4.3 / 1980 / Li Wei; High School Physics Full-Marks Guide / Exam Prep / Advanced / 699 / 36 / 4.6 / 560 / Li Wei; Junior Accounting Title in Depth / Exam Prep / Intermediate / 549 / 44 / 4.5 / 1440 / Xu Jing.\n\nBelow the course grid add a \"This Week's Live Previews\" block with three public sessions side by side: Wednesday 20:00 \"Frontend Engineers in the AI Era\" Chen Ming, Friday 19:30 \"How to Make Your Portfolio Stand Out\" Lin Lan, Sunday 10:00 \"IELTS Speaking Emergency Kit\" Emily Wang, each with a \"Reserve\" button at the card's bottom right.\n\nFinally the footer, three columns: About Us (Brand Story / Join Us), Learning Support (FAQ / Refund Policy), Contact Us (Partnership email hi@zhixing.edu / Customer service 400-800-1234), with a line of small text at the bottom: \"Beijing ICP License No. 2021000000 · Zhixing Academy\".\n\nKeep the visual tone restrained and clean: primary color indigo #1F4ED8 (buttons, accent text, selected states), page background light gray #F5F6F8, cards white with rounded corners and light shadows, body text dark gray. No gaudy gradients."
|
| 22 |
},
|
| 23 |
{
|
| 24 |
+
"operator": "make interactive",
|
| 25 |
+
"request": "The static page looks fine; now make it actually usable.\n\nFirst, the filter bar must really work: category, level, and price each single-select, stacking with the search box on the right (fuzzy match on course name, case-insensitive) to filter together, and all four sort modes must really sort (price low to high, enrollments high to low, rating high to low; Recommended is the original ops-list order). The four conditions stack; they don't override each other.\n\nSecond, paginate the course list, 9 per page, with previous/next and page numbers at the bottom. Note: whenever any filter condition or search term changes, the page must return to page 1 — no more \"page 4 but only 2 courses so it's blank\". If nothing is found, don't force an empty grid — show \"No courses match your criteria — try different filters\", with a \"Clear filters\" next to it; clicking it resets all conditions and returns the list to the full 40 courses on page 1.\n\nThird, \"Add to list\" must work. Put a list entry at the top right with a numeric badge equal to the number of courses in the list. If a course is already in the list, the button must change to an added appearance, and clicking again must not raise the badge a second time. Opening the list shows the selected course names and their prices, each removable individually; after removing all, the list shows \"No courses selected yet — go pick one\", and the \"Enroll\" button below becomes unclickable.\n\nFinance gave the price rule: with two or more courses in the list, the whole order is 10% off; with five or more, 20% off; if the result has decimals, cut the remainder and keep whole numbers only. The bottom of the list must show both the original total and the discounted amount due.\n\nFourth, clicking \"Enroll\" goes through a three-step flow (can be in a modal): step 1 confirms the list (courses, original total, discounted amount due); step 2 collects student info — name and phone number, the phone must be 11 digits, otherwise show a red error message on the spot and block progress to the next step, and you can go back to the previous step without losing what was entered; step 3 is the success page, stating \"Enrolled in X courses, paid ¥Y\", where X and Y must exactly match what step 1 showed."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "remove section",
|
| 29 |
+
"request": "We're discontinuing the live-streaming business this quarter; remove everything live-related from the site: the whole \"This Week's Live Previews\" block below the course grid comes out, and not one piece of info about the three public sessions stays; the \"3 live sessions this week\" item in the top stats strip comes out too, leaving three items, and none of the other three numbers may change.\n\nAfter the removal the page must flow: no odd blank area or lone divider between the course list and the footer. One reminder: this only removes live streaming; the filtering, pagination, course list, and enrollment flow from the previous version must not be affected at all — after deleting I'll click through it all the old way again."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "restructure layout",
|
| 33 |
+
"request": "Users say the horizontal filter bar is too cramped and hard to scan with many conditions; revise it: move the whole filter to the left side of the page as a vertical sidebar, with Category, Level, and Price groups stacked vertically, and put the search box at the top of the sidebar; on the right is the results area, whose top row shows the current result count and the sort dropdown (the sort must no longer stay in the sidebar); below that row is the course grid, still 3 cards per row on wide screens and 2 on medium screens. The sidebar and the top of the results area align, and the old horizontal filter bar must not remain.\n\nOn phones and narrow screens don't force the sidebar in — collapse it into a \"Filters\" button that opens a drawer or panel to choose conditions, and after closing it the results on the right are immediately filtered, cards in a single column filling the width.\n\nOne more balance point: the sidebar must let people see at a glance which conditions are selected, but the site must still keep the clean, restrained feel of the first version, reusing our existing brand accent color — don't let a second bright color steal the show (red form-error messages don't count; they should still be red).\n\nLast, the usual rule: this is a move, not a rebuild — filter combinations, sorting, 9-per-page pagination, the course list's badge and discount, and the three-step enrollment flow must all work exactly as before the change, and don't let the live-streaming block sneak back in either."
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "nav.items",
|
| 39 |
"m": 1,
|
| 40 |
+
"dimension": "coverage",
|
| 41 |
"w": 1.0,
|
| 42 |
+
"description": "The top nav has the site name \"Zhixing Academy\" on the left, and four menu items on the right in order: Courses, Instructors, Corporate Training, Help Center, with the \"Log In / Sign Up\" button at the far right."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "hero.stats.four",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "coverage",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "The hero stats strip presents four items with exact values: 40 courses on sale, 128,000+ total learners, 86 contracted instructors, 3 live sessions this week; the hero heading is \"Find the course that's right for you\", and the subtitle contains \"7-day refund\"."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "grid.all40",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "coverage",
|
| 55 |
"w": 1.5,
|
| 56 |
+
"description": "The course grid lays out 40 cards at once (countable), and any given card simultaneously contains a cover image, course name, category tag, level tag, instructor, rating, hours, enrollments, price, and an \"Add to list\" button; e.g. the Python Introduction & Data Processing card shows Programming & Development, Beginner, Chen Ming, 4.8, 12 hours, 1240, ¥299."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "filterbar.static",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "coverage",
|
| 62 |
"w": 1.0,
|
| 63 |
+
"description": "Above the course grid there is a horizontal filter bar; the Category group is exactly 6 items All/Programming & Development/Design & Creative/Workplace Skills/Language Learning/Exam Prep, the Level group 4 items, the Price group 4 items (including Under ¥200, ¥200–¥499, ¥500 and above); the search box placeholder on the right is exactly \"Search course name\", and the sort dropdown options are, in order, Recommended, Price: low to high, Enrollments: high to low, Rating: high to low — 4 items."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "live.block",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "coverage",
|
| 69 |
"w": 1.0,
|
| 70 |
+
"description": "The \"This Week's Live Previews\" block below the course grid lists 3 sessions with exact copy: Wednesday 20:00 Frontend Engineers in the AI Era Chen Ming, Friday 19:30 How to Make Your Portfolio Stand Out Lin Lan, Sunday 10:00 IELTS Speaking Emergency Kit Emily Wang, each with a \"Reserve\" button."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "visual.tone",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "visual",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "The \"Log In / Sign Up\" button and accent elements use indigo #1F4ED8, the page background is a light gray in the #F5F6F8 range, and cards are white with rounded corners and light shadows; on wide desktop screens the course grid is 3 aligned cards per row."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "footer.icp",
|
| 81 |
"m": 1,
|
| 82 |
+
"dimension": "coverage",
|
| 83 |
"w": 1.0,
|
| 84 |
+
"description": "The footer has a three-column structure (About Us / Learning Support / Contact Us), contains hi@zhixing.edu and 400-800-1234, and the small text at the bottom is exactly Beijing ICP License No. 2021000000 · Zhixing Academy."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "page.nine",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "functional",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "With no filter, the list paginates 9 per page over 5 pages; page 5 shows exactly 4 cards; the 1st card on page 1 is Python Introduction & Data Processing, first in the original ops-list order."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "combo.diagonal",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "functional",
|
| 97 |
"w": 1.5,
|
| 98 |
+
"description": "Selecting Category=Programming & Development and Price=¥500 and above at the same time and switching the sort to Price: low to high gives exactly 4 results in order: Frontend Performance Optimization in Practice ¥549, Algorithms & Data Structures in Depth ¥699, Go Microservices in Practice ¥759, Java Backend Engineer Bootcamp ¥899, with no page 2."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "sort.rating",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "functional",
|
| 104 |
"w": 1.0,
|
| 105 |
+
"description": "Selecting Category=Workplace Skills and switching the sort to Rating: high to low gives exactly 9 results over only 1 page (exactly filling a page, no page 2); the 1st card is Excel Pivot Tables in Practice (4.8), the 2nd Business Presentation Design with PowerPoint (4.7)."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "combo.reset.empty",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "functional",
|
| 111 |
"w": 1.5,
|
| 112 |
+
"description": "First, with no filters (5 pages total) go to page 3, then click Category=Programming & Development: the page automatically returns to page 1 and the grid has no blank placeholders; on top of that select Level=Beginner: exactly 5 results over only 1 page; then type \"quantum\" into the search box and the page shows \"No courses match your criteria — try different filters\" and \"Clear filters\"; clicking it restores 40 courses on page 1 with the category/level/price groups all reset; also, typing lowercase python matches 2 courses."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "cart.idem.empty",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "interaction",
|
| 118 |
"w": 1.5,
|
| 119 |
+
"description": "After clicking \"Add to list\" on a course the badge goes from 0 to 1 and the button changes to the added state; clicking 3 times in a row keeps the badge at 1; opening the list shows each entry's course name and price (e.g. Python Introduction & Data Processing ¥299); removing entries one by one down to 0 shows \"No courses selected yet — go pick one\" and the \"Enroll\" button becomes unclickable."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "cart.discount",
|
| 123 |
"m": 2,
|
| 124 |
+
"dimension": "functional",
|
| 125 |
"w": 1.5,
|
| 126 |
+
"description": "When the list contains Python Introduction & Data Processing ¥299 and Excel Pivot Tables in Practice ¥129, the original total shows 428 and the discounted amount due shows 385 (428×0.9, remainder cut); after adding Illustration & Hand Drawing Basics ¥129, Time & Energy Management ¥99, and Resume Polish & Interview Success ¥79 for 5 courses total, the original total is 735 and the discounted amount due 588 (735×0.8)."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "wizard.three.step",
|
| 130 |
"m": 2,
|
| 131 |
+
"dimension": "interaction",
|
| 132 |
"w": 1.5,
|
| 133 |
+
"description": "Clicking \"Enroll\" enters a three-step flow: step 1 lists the selected courses and amount due; step 2, when the phone number is filled with something not 11 digits like 1380000, shows an error and blocks progress to step 3, and going back then forward again keeps the entered name; after entering a valid 11-digit phone, the step-3 success page shows the same course count and amount paid as step 1 (e.g. 2 courses, ¥385)."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "live.removed",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "coverage",
|
| 139 |
"w": 1.5,
|
| 140 |
+
"description": "The \"This Week's Live Previews\" heading and any of Frontend Engineers in the AI Era, How to Make Your Portfolio Stand Out, IELTS Speaking Emergency Kit and the \"Reserve\" button can no longer be found on the page; no blank placeholder block or isolated divider remains between the course list and the footer."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "stats.three",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "coverage",
|
| 146 |
"w": 1.5,
|
| 147 |
+
"description": "The top stats strip goes from 4 items to 3; the entire 3 live sessions this week item disappears, and the remaining three read exactly 40 courses on sale, 128,000+ total learners, 86 contracted instructors."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "regress.filter.after.delete",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "functional",
|
| 153 |
"w": 1.0,
|
| 154 |
+
"description": "Regression after removing live content: with no filter still 40 courses over 5 pages with 4 cards on the last page; Category=Language Learning gives 6 results over only 1 page."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "regress.cart.after.delete",
|
| 158 |
"m": 3,
|
| 159 |
+
"dimension": "interaction",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "Regression after removing live content: adding Python Introduction & Data Processing and Excel Pivot Tables in Practice keeps the badge at 2 and the discounted amount due at 385, and the three-step enrollment flow still reaches the success page."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "layout.sidebar",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "visual",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "On wide desktop (≥1200px) the filters sit as a vertical sidebar on the left of the page (category/level/price groups stacked, search box inside the sidebar), while the right results area shows 3 cards per row and its top aligns with the sidebar top; on medium screens (about 769–1199px) the results area shows 2 cards per row; the original horizontal filter bar no longer appears, and there is still no live-streaming block anywhere on the page."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "layout.mobile.drawer",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "interaction",
|
| 174 |
"w": 1.5,
|
| 175 |
+
"description": "On narrow screens (≤768px) the sidebar collapses into a \"Filters\" entry; clicking it opens a drawer or panel, and after selecting Category=Exam Prep in it and closing, the right-side results immediately become 5 and the cards spread in a single column."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "state.kept.after.refactor",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "functional",
|
| 181 |
"w": 1.5,
|
| 182 |
+
"description": "After the redesign filtering and sorting still work fully: selecting Category=Design & Creative in the sidebar gives 8 results over only 1 page, and switching the sort to Enrollments: high to low makes the 1st card Illustration & Hand Drawing Basics (3020) and the 2nd Short Video Editing & Color Grading (2450)."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "state.cart.after.refactor",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "functional",
|
| 188 |
"w": 1.0,
|
| 189 |
+
"description": "After the redesign the course list and enrollment chain are intact: after adding any 2 courses the badge is 2 and the discounted amount still shows with the 10% discount and remainder cut; after clearing the list the \"Enroll\" button becomes unclickable again."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "style.consistency",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "visual",
|
| 195 |
"w": 1.0,
|
| 196 |
+
"description": "Selected filter items in the sidebar have a clear selected indicator (e.g. indigo background or indigo text/border), and the brand accent and selected states still use only one color, #1F4ED8; no second high-saturation theme color appears (semantic/status colors like red form-validation text don't count); the page background and the white card corners and light shadows from the first version remain unchanged."
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "result.count.display",
|
| 200 |
"m": 4,
|
| 201 |
+
"dimension": "functional",
|
| 202 |
"w": 1.0,
|
| 203 |
+
"description": "The top row of the results area shows both the current result count and the sort dropdown (the sort dropdown no longer appears in the sidebar), and the count matches the actual number of cards: 40 with no filter; 14 with Level=Intermediate, consistent with the list's pagination (2 pages in total, 9 cards on page 1 and 5 on page 2)."
|
| 204 |
}
|
| 205 |
],
|
| 206 |
"inject": null,
|
tasks/c26/task.json
CHANGED
|
@@ -3,247 +3,247 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
],
|
| 17 |
-
"domain": "
|
| 18 |
"seed_meta": {
|
| 19 |
"ref_image_src": "prototypes/reference.jpg"
|
| 20 |
},
|
| 21 |
-
"title": "PaulHoda.UK SEO
|
| 22 |
"milestones": [
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
}
|
| 43 |
],
|
| 44 |
"checklist": [
|
| 45 |
{
|
| 46 |
"id": "hero.nav.copy",
|
| 47 |
"m": 1,
|
| 48 |
-
"dimension": "
|
| 49 |
"w": 1.5,
|
| 50 |
-
"description": "
|
| 51 |
},
|
| 52 |
{
|
| 53 |
"id": "hero.twocol.cta",
|
| 54 |
"m": 1,
|
| 55 |
-
"dimension": "
|
| 56 |
"w": 1.0,
|
| 57 |
-
"description": "
|
| 58 |
},
|
| 59 |
{
|
| 60 |
"id": "cases.four.layout",
|
| 61 |
"m": 1,
|
| 62 |
-
"dimension": "
|
| 63 |
"w": 1.0,
|
| 64 |
-
"description": "
|
| 65 |
},
|
| 66 |
{
|
| 67 |
"id": "reviews.seven.grid",
|
| 68 |
"m": 1,
|
| 69 |
-
"dimension": "
|
| 70 |
"w": 1.0,
|
| 71 |
-
"description": "\"How Our Clients Review Us on Google\"
|
| 72 |
},
|
| 73 |
{
|
| 74 |
"id": "packages.four.colors",
|
| 75 |
"m": 1,
|
| 76 |
-
"dimension": "
|
| 77 |
"w": 1.5,
|
| 78 |
-
"description": "
|
| 79 |
},
|
| 80 |
{
|
| 81 |
"id": "timeline.footer.copy",
|
| 82 |
"m": 1,
|
| 83 |
-
"dimension": "
|
| 84 |
"w": 1.0,
|
| 85 |
-
"description": "
|
| 86 |
},
|
| 87 |
{
|
| 88 |
"id": "shop.count48",
|
| 89 |
"m": 2,
|
| 90 |
-
"dimension": "
|
| 91 |
"w": 1.5,
|
| 92 |
-
"description": "
|
| 93 |
},
|
| 94 |
{
|
| 95 |
"id": "shop.monthly.exact",
|
| 96 |
"m": 2,
|
| 97 |
-
"dimension": "
|
| 98 |
"w": 1.5,
|
| 99 |
-
"description": "
|
| 100 |
},
|
| 101 |
{
|
| 102 |
"id": "shop.total.discount",
|
| 103 |
"m": 2,
|
| 104 |
-
"dimension": "
|
| 105 |
"w": 1.5,
|
| 106 |
-
"description": "
|
| 107 |
},
|
| 108 |
{
|
| 109 |
"id": "shop.card.fields",
|
| 110 |
"m": 2,
|
| 111 |
-
"dimension": "
|
| 112 |
"w": 1.0,
|
| 113 |
-
"description": "
|
| 114 |
},
|
| 115 |
{
|
| 116 |
"id": "shop.hot.eight",
|
| 117 |
"m": 2,
|
| 118 |
-
"dimension": "
|
| 119 |
"w": 1.0,
|
| 120 |
-
"description": "
|
| 121 |
},
|
| 122 |
{
|
| 123 |
"id": "list.default.page3",
|
| 124 |
"m": 3,
|
| 125 |
-
"dimension": "
|
| 126 |
"w": 1.5,
|
| 127 |
-
"description": "
|
| 128 |
},
|
| 129 |
{
|
| 130 |
"id": "sort.monthly.asc",
|
| 131 |
"m": 3,
|
| 132 |
-
"dimension": "
|
| 133 |
"w": 1.5,
|
| 134 |
-
"description": "
|
| 135 |
},
|
| 136 |
{
|
| 137 |
"id": "sort.other.two",
|
| 138 |
"m": 3,
|
| 139 |
-
"dimension": "
|
| 140 |
"w": 1.0,
|
| 141 |
-
"description": "
|
| 142 |
},
|
| 143 |
{
|
| 144 |
"id": "filter.combo.eight",
|
| 145 |
"m": 3,
|
| 146 |
-
"dimension": "
|
| 147 |
"w": 1.5,
|
| 148 |
-
"description": "
|
| 149 |
},
|
| 150 |
{
|
| 151 |
"id": "search.match.silver",
|
| 152 |
"m": 3,
|
| 153 |
-
"dimension": "
|
| 154 |
"w": 1.0,
|
| 155 |
-
"description": "
|
| 156 |
},
|
| 157 |
{
|
| 158 |
"id": "filter.reset.page1",
|
| 159 |
"m": 3,
|
| 160 |
-
"dimension": "
|
| 161 |
"w": 1.0,
|
| 162 |
-
"description": "
|
| 163 |
},
|
| 164 |
{
|
| 165 |
"id": "search.empty.state",
|
| 166 |
"m": 3,
|
| 167 |
-
"dimension": "
|
| 168 |
"w": 1.0,
|
| 169 |
-
"description": "
|
| 170 |
},
|
| 171 |
{
|
| 172 |
"id": "del.blocks.gone",
|
| 173 |
"m": 4,
|
| 174 |
-
"dimension": "
|
| 175 |
"w": 1.5,
|
| 176 |
-
"description": "
|
| 177 |
},
|
| 178 |
{
|
| 179 |
"id": "del.colors.kept",
|
| 180 |
"m": 4,
|
| 181 |
-
"dimension": "
|
| 182 |
"w": 1.5,
|
| 183 |
-
"description": "
|
| 184 |
},
|
| 185 |
{
|
| 186 |
"id": "del.order.kept",
|
| 187 |
"m": 4,
|
| 188 |
-
"dimension": "
|
| 189 |
"w": 1.0,
|
| 190 |
-
"description": "
|
| 191 |
},
|
| 192 |
{
|
| 193 |
"id": "del.no.gap",
|
| 194 |
"m": 4,
|
| 195 |
-
"dimension": "
|
| 196 |
"w": 1.0,
|
| 197 |
-
"description": "
|
| 198 |
},
|
| 199 |
{
|
| 200 |
"id": "del.shop.intact",
|
| 201 |
"m": 4,
|
| 202 |
-
"dimension": "
|
| 203 |
"w": 1.0,
|
| 204 |
-
"description": "
|
| 205 |
},
|
| 206 |
{
|
| 207 |
"id": "cart.merge.badge",
|
| 208 |
"m": 5,
|
| 209 |
-
"dimension": "
|
| 210 |
"w": 1.5,
|
| 211 |
-
"description": "
|
| 212 |
},
|
| 213 |
{
|
| 214 |
"id": "cart.total.promo",
|
| 215 |
"m": 5,
|
| 216 |
-
"dimension": "
|
| 217 |
"w": 1.5,
|
| 218 |
-
"description": "
|
| 219 |
},
|
| 220 |
{
|
| 221 |
"id": "checkout.wizard.chain",
|
| 222 |
"m": 5,
|
| 223 |
-
"dimension": "
|
| 224 |
"w": 1.5,
|
| 225 |
-
"description": "
|
| 226 |
},
|
| 227 |
{
|
| 228 |
"id": "cart.filter.coupling",
|
| 229 |
"m": 5,
|
| 230 |
-
"dimension": "
|
| 231 |
"w": 1.5,
|
| 232 |
-
"description": "
|
| 233 |
},
|
| 234 |
{
|
| 235 |
"id": "cart.empty.idempotent",
|
| 236 |
"m": 5,
|
| 237 |
-
"dimension": "
|
| 238 |
"w": 1.0,
|
| 239 |
-
"description": "
|
| 240 |
},
|
| 241 |
{
|
| 242 |
"id": "style.accent.consistent",
|
| 243 |
"m": 5,
|
| 244 |
-
"dimension": "
|
| 245 |
"w": 1.0,
|
| 246 |
-
"description": "
|
| 247 |
}
|
| 248 |
],
|
| 249 |
"inject": null,
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"add section",
|
| 8 |
+
"add state",
|
| 9 |
+
"remove section",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"data scale × combined state"
|
| 16 |
],
|
| 17 |
+
"domain": "e-commerce",
|
| 18 |
"seed_meta": {
|
| 19 |
"ref_image_src": "prototypes/reference.jpg"
|
| 20 |
},
|
| 21 |
+
"title": "PaulHoda.UK SEO Site Replication + Package Store and Checkout Flow",
|
| 22 |
"milestones": [
|
| 23 |
{
|
| 24 |
+
"operator": "replicate",
|
| 25 |
+
"request": "First reproduce this version of our homepage 1:1 — I sent you the screenshot, work from the visible parts, and keep all text as the original English from the image, don't translate or reword it. Top to bottom, roughly: at the very top a very thin dark info bar; then a white header with the PaulHoda wordmark plus a UK flag on the left and a row of nav Home, SEO, Blog, Case studies, Contact on the right; below that the hero, with the big heading \"Welcome to PaulHoda.UK, your search engine optimisation (SEO) expert in London\" on the left, a few paragraphs of intro text below it, a blue rounded BOOK NOW button and a \"5 Stars Rated on Google Reviews\" Google five-star review strip, and on the right a screenshot of a Google search result (a placeholder is fine for the image), with two lines of bold large text \"#1 with SEO\" and \"by PaulHoda.UK\" below the screenshot. Below that the centered heading \"SEO Case Studies: Latest Achievements\", and under it four cases (ChrisBowers, Dental Practice, Scichart, Total K9), each a two-column layout with text on the left and a screenshot on the right, the left having a small heading and a bulleted list of achievements. Then the gray-background \"Results Timeline with our SEO Expertise\", with six progress passages from 1st Month to 12th Month, and a long paragraph of small-print disclaimer at the bottom. Below that \"How Our Clients Review Us on Google\", a two-column set of review cards totaling seven, the last one occupying its own row on the left, each card with a name, a URL, five stars, and an English comment. Then \"SEO Packages for the #1 page of Google.co.uk:\" and four dark package cards, from left to right Standard SEO, Bronze SEO, Silver SEO, Gold SEO, with the title bars at the tops of the four cards colored green, copper-orange, silver-blue-gray, and gold respectively. Finally the long-form \"SEO Specialist in London UK\" paragraph, and the multi-column copy under the heading \"50% of all UK SEO agencies buy SEO from us\". Restore the overall restrained white-with-blue-accents style."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "add section",
|
| 29 |
+
"request": "Static package cards aren't enough — clients keep calling to ask about prices. We want to add a package store below the review section where orders can be placed one by one. Ops dictated the pricing below; organize it yourself: what we actually sell is a combination — four tiers Standard, Bronze, Silver, Gold; keyword packs in four sizes of 3, 8, 15, 40; and contract lengths of 3 months, 6 months, 12 months. Listing the full permutation, every combination must appear on the page as a package that can be ordered on its own, so it's quite a lot — the page needs to show the total count for clients. The pricing is the boss's call: Standard £39 per keyword per month, Bronze £58, Silver £89, Gold £139; multiply by the number of keywords for the monthly fee; a half-year contract gets 10% off the whole contract, a full year gets 15% off, and 3 months gets no discount; if the result has a remainder, cut it off and keep whole pounds only. On every package card, both the monthly fee and the total to pay for that contract must be stated clearly, and the package name must reveal the tier, keyword size, and contract months. Also ops singled out a set of featured ones: any with 15 or 40 keywords and a full-year contract gets a HOT tag, and nothing else does. Don't change the color scheme on your own — for the tier colors follow the green/copper-orange/silver-blue/gold of the four dark package cards above."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "There are too many packages and clients can't scroll through them. Give the store filtering: tiers are multi-select (check any of the four), and keyword size and contract months can each be filtered independently; also give a search box for fuzzy matching on package name. All four sorts are needed: monthly fee low to high, monthly fee high to low, contract total low to high, contract total high to low; with no sort selected use the default order, which is down through the tiers Standard, Bronze, Silver, Gold, and within a tier fewer keywords first, and for the same keyword count shorter contracts first. The list is fixed at 12 per page, with pagination below and a visible total page count. Next to the filter panel always show how many packages are currently filtered, and the number must match the list. When a sort produces ties (e.g. equal monthly fees), always put the shorter contract first, so every refresh shows the same order. Changing any filter condition must jump back to page 1 — don't leave clients on an empty page. If a search returns nothing, give a friendly message, and at that point the pagination control must not appear."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "remove section",
|
| 37 |
+
"request": "Two points came out of the launch review: first, the original four dark SEO Packages cards are now fully replaced by the new store, and keeping them just makes clients think there are two price sets — remove the whole block, and the \"SEO Packages for the #1 page of Google.co.uk:\" heading goes with it; second, legal says the disclaimer wording in the gray-background timeline block \"Results Timeline with our SEO Expertise\" carries risk, so remove that whole block too — not one piece of the 1st Month through 12th Month text and the disclaimer small print below may remain. After deleting cleanly, don't let the page collapse into a big blank area; the spacing between the neighboring blocks should look similar to the other blocks. The hero, cases, and reviews are kept as-is, don't disturb their order, and the bottom \"SEO Specialist in London UK\" long-form and the \"50% of all UK SEO agencies buy SEO from us\" columns must stay too. One more thing to watch: although the package cards are deleted, the store's four tier colors came from them and must not disappear with them — green stays green. Keep the site's restrained white-with-blue-accents style from the reference; don't let this change introduce a new brand color. The store's filtering, sorting, and pagination must not be affected by this deletion either."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "make interactive",
|
| 41 |
+
"request": "Finally close the business loop. Every package card must be addable to the cart; clicking the same package repeatedly increases its quantity rather than creating another row; the page needs a cart entry with an item-count badge, and when the client scrolls to the store area this entry must stay visible and prominent (don't make people hunt for it) — but pick its colors from our existing set (the blue of the hero button, or the tier colors), don't bring in a new color just to be prominent; the whole site should still look like one brand. Opening the cart shows each row's package name, unit price, quantity, and line subtotal; the unit price here is the total the client pays for that contract (not the monthly fee, don't get that wrong), and the line subtotal is unit price times quantity; the quantity can go up and down, and dropping to 0 removes the row; when the cart is entirely empty, show an empty-cart message and make the checkout button unclickable. The cart has a promo code input: entering SEO10 takes 10% off the whole order, remainders still cut off, and the amount due updates in real time. Clicking checkout runs three steps: step 1 collects name and email, and an email without @ blocks progress to the next step with a message; step 2 confirms the order, listing every row and the final amount due clearly, and allows going back to step 1 to revise the info without losing what was entered; step 3, after submitting, shows a success page whose amount must be exactly the same as the step-2 confirmation, and simultaneously the cart clears and the badge resets to zero. One more detail not to get wrong: if a package already added to the cart is subsequently filtered out of view by the client, the cart rows and the badge must not change, but since it's filtered out of the list it must no longer have an add-to-cart entry there."
|
| 42 |
}
|
| 43 |
],
|
| 44 |
"checklist": [
|
| 45 |
{
|
| 46 |
"id": "hero.nav.copy",
|
| 47 |
"m": 1,
|
| 48 |
+
"dimension": "coverage",
|
| 49 |
"w": 1.5,
|
| 50 |
+
"description": "At the very top of the page is a dark thin info bar; below it the header's right side shows the nav in order Home, SEO, Blog, Case studies, Contact — 5 items — with the PaulHoda wordmark plus a UK flag on the left; the hero heading is verbatim \"Welcome to PaulHoda.UK, your search engine optimisation (SEO) expert in London\" (the original English, not replaced with Chinese or other business copy)."
|
| 51 |
},
|
| 52 |
{
|
| 53 |
"id": "hero.twocol.cta",
|
| 54 |
"m": 1,
|
| 55 |
+
"dimension": "visual",
|
| 56 |
"w": 1.0,
|
| 57 |
+
"description": "The hero is two columns: the left column contains the intro paragraphs, a blue rounded BOOK NOW button, and a five-star review strip reading \"5 Stars Rated on Google Reviews\"; the right column is the search-result image (a placeholder is fine), directly below which are the two lines of bold large text \"#1 with SEO\" and \"by PaulHoda.UK\"."
|
| 58 |
},
|
| 59 |
{
|
| 60 |
"id": "cases.four.layout",
|
| 61 |
"m": 1,
|
| 62 |
+
"dimension": "visual",
|
| 63 |
"w": 1.0,
|
| 64 |
+
"description": "Under the centered heading \"SEO Case Studies: Latest Achievements\" there are exactly 4 case sections (ChrisBowers, Dental Practice, Scichart, Total K9), each a two-column layout with text on the left and an image on the right, the left column containing at least one bulleted achievement list item."
|
| 65 |
},
|
| 66 |
{
|
| 67 |
"id": "reviews.seven.grid",
|
| 68 |
"m": 1,
|
| 69 |
+
"dimension": "visual",
|
| 70 |
"w": 1.0,
|
| 71 |
+
"description": "The \"How Our Clients Review Us on Google\" section is a two-column card grid with exactly 7 review cards (the 7th occupies its own row in the left column), each card containing a name, a URL, five stars, and an English comment."
|
| 72 |
},
|
| 73 |
{
|
| 74 |
"id": "packages.four.colors",
|
| 75 |
"m": 1,
|
| 76 |
+
"dimension": "visual",
|
| 77 |
"w": 1.5,
|
| 78 |
+
"description": "[This item is evaluated on the page as of milestone 1 completion; after milestone 4 the block is deleted as expected and is out of scope here] Under \"SEO Packages for the #1 page of Google.co.uk:\" are 4 dark package cards with titles from left to right Standard SEO, Bronze SEO, Silver SEO, Gold SEO, whose top title-bar colors are, in order, green, copper-orange, silver-blue-gray, and gold, with all four colors distinct."
|
| 79 |
},
|
| 80 |
{
|
| 81 |
"id": "timeline.footer.copy",
|
| 82 |
"m": 1,
|
| 83 |
+
"dimension": "coverage",
|
| 84 |
"w": 1.0,
|
| 85 |
+
"description": "[The timeline part is evaluated on the page as of milestone 1 completion; deletion after milestone 4 is expected] The gray-background \"Results Timeline with our SEO Expertise\" section contains six passages from 1st Month to 12th Month and the disclaimer small print at the bottom; at the bottom of the page there is also the \"SEO Specialist in London UK\" long-form paragraph and the multi-column copy under the \"50% of all UK SEO agencies buy SEO from us\" heading (these two are content that must be kept in the final state too), with all text as the original English from the reference image."
|
| 86 |
},
|
| 87 |
{
|
| 88 |
"id": "shop.count48",
|
| 89 |
"m": 2,
|
| 90 |
+
"dimension": "coverage",
|
| 91 |
"w": 1.5,
|
| 92 |
+
"description": "Below the review section a package store block appears, with a total of 48 packages (4 tiers × keyword sizes 3/8/15/40 × contract lengths 3/6/12 months), and the visible total-count copy on the page shows 48."
|
| 93 |
},
|
| 94 |
{
|
| 95 |
"id": "shop.monthly.exact",
|
| 96 |
"m": 2,
|
| 97 |
+
"dimension": "functional",
|
| 98 |
"w": 1.5,
|
| 99 |
+
"description": "The monthly fee is computed and displayed as the tier unit price (Standard 39 / Bronze 58 / Silver 89 / Gold 139) times the keyword count: Standard·3 keywords shows £117, Silver·15 keywords shows £1335, Gold·40 keywords shows £5560."
|
| 100 |
},
|
| 101 |
{
|
| 102 |
"id": "shop.total.discount",
|
| 103 |
"m": 2,
|
| 104 |
+
"dimension": "functional",
|
| 105 |
"w": 1.5,
|
| 106 |
+
"description": "Contract total = monthly fee × months, with 10% off for 6 months, 15% off for 12 months, no discount for 3 months, and remainders cut down to whole pounds: Standard·3 keywords·12 months = £1193, Bronze·8 keywords·6 months = £2505, Silver·15 keywords·12 months = £13617, Gold·40 keywords·3 months = £16680."
|
| 107 |
},
|
| 108 |
{
|
| 109 |
"id": "shop.card.fields",
|
| 110 |
"m": 2,
|
| 111 |
+
"dimension": "visual",
|
| 112 |
"w": 1.0,
|
| 113 |
+
"description": "Every package card shows all five pieces of information — tier, keyword size, contract months, monthly fee, and contract total — and the tier marker color follows the reference package-card scheme (Standard green / Bronze copper-orange / Silver silver-blue / Gold gold), with all four colors distinct."
|
| 114 |
},
|
| 115 |
{
|
| 116 |
"id": "shop.hot.eight",
|
| 117 |
"m": 2,
|
| 118 |
+
"dimension": "functional",
|
| 119 |
"w": 1.0,
|
| 120 |
+
"description": "Exactly 8 packages carry a HOT tag, and all of them satisfy \"15 or 40 keywords and a 12-month contract\"; the other 40 carry no HOT tag (for example Gold·40·6 months has none, Silver·15·12 months has one)."
|
| 121 |
},
|
| 122 |
{
|
| 123 |
"id": "list.default.page3",
|
| 124 |
"m": 3,
|
| 125 |
+
"dimension": "functional",
|
| 126 |
"w": 1.5,
|
| 127 |
+
"description": "With no filter and the default sort (tier Standard→Bronze→Silver→Gold, within a tier fewer→more keywords, then shorter→longer contracts), 12 per page, there are 4 pages in total; the 1st item on page 3 is Silver·3 keywords·3 months, showing a monthly fee of £267 and a contract total of £801."
|
| 128 |
},
|
| 129 |
{
|
| 130 |
"id": "sort.monthly.asc",
|
| 131 |
"m": 3,
|
| 132 |
+
"dimension": "functional",
|
| 133 |
"w": 1.5,
|
| 134 |
+
"description": "Switching to monthly fee low to high (ties broken by shorter contract first) with no filter, the last item on page 1 is Standard·8 keywords·12 months (monthly fee £312, total £3182), and the 1st item on page 2 is Gold·3 keywords·3 months (monthly fee £417)."
|
| 135 |
},
|
| 136 |
{
|
| 137 |
"id": "sort.other.two",
|
| 138 |
"m": 3,
|
| 139 |
+
"dimension": "functional",
|
| 140 |
"w": 1.0,
|
| 141 |
+
"description": "The other two sorts also work with correct results: with no filter and \"monthly fee high to low\", the 1st item on page 1 is Gold·40 keywords·3 months (monthly fee £5560, ties broken by shorter contract first); with \"contract total low to high\", the 1st item on page 1 is Standard·3 keywords·3 months (total £351)."
|
| 142 |
},
|
| 143 |
{
|
| 144 |
"id": "filter.combo.eight",
|
| 145 |
"m": 3,
|
| 146 |
+
"dimension": "functional",
|
| 147 |
"w": 1.5,
|
| 148 |
+
"description": "With tiers multi-selected Silver+Gold and the contract filtered to 12 months, the count copy shows 8 packages, all shown on one page with only 1 page left in the pager; on top of that, filtering the keyword size to 40 changes the count to 2, and sorted by contract total high to low the first item is Gold·40·12 months showing £56712 and the second Silver·40·12 months showing £36312."
|
| 149 |
},
|
| 150 |
{
|
| 151 |
"id": "search.match.silver",
|
| 152 |
"m": 3,
|
| 153 |
+
"dimension": "functional",
|
| 154 |
"w": 1.0,
|
| 155 |
+
"description": "After clearing the other filters and typing \"Silver\" in the search box, the count shows 12, the pager is 1 page, and every package in the list is Silver tier, with no Standard/Bronze/Gold packages mixed in."
|
| 156 |
},
|
| 157 |
{
|
| 158 |
"id": "filter.reset.page1",
|
| 159 |
"m": 3,
|
| 160 |
+
"dimension": "interaction",
|
| 161 |
"w": 1.0,
|
| 162 |
+
"description": "Changing any filter condition while on page 3 immediately returns to page 1; after clearing all filters and search the count returns to 48 and the pager to 4 pages."
|
| 163 |
},
|
| 164 |
{
|
| 165 |
"id": "search.empty.state",
|
| 166 |
"m": 3,
|
| 167 |
+
"dimension": "interaction",
|
| 168 |
"w": 1.0,
|
| 169 |
+
"description": "After typing a nonexistent word (like Platinum) in the search box, the list shows a friendly empty-state message, the count shows 0, and at that point no pagination control appears on the page."
|
| 170 |
},
|
| 171 |
{
|
| 172 |
"id": "del.blocks.gone",
|
| 173 |
"m": 4,
|
| 174 |
+
"dimension": "coverage",
|
| 175 |
"w": 1.5,
|
| 176 |
+
"description": "On the final page the four dark SEO Packages cards and the \"SEO Packages for the #1 page of Google.co.uk:\" heading no longer exist, nor does the gray-background timeline block — searching the whole page finds no \"Results Timeline\", \"12th Month\", or their disclaimer small print."
|
| 177 |
},
|
| 178 |
{
|
| 179 |
"id": "del.colors.kept",
|
| 180 |
"m": 4,
|
| 181 |
+
"dimension": "visual",
|
| 182 |
"w": 1.5,
|
| 183 |
+
"description": "After deletion the tier colors on the store's package cards still take effect: Standard green, Bronze copper-orange, Silver silver-blue, Gold gold remain visible and distinct, not degraded to the same gray or a default color."
|
| 184 |
},
|
| 185 |
{
|
| 186 |
"id": "del.order.kept",
|
| 187 |
"m": 4,
|
| 188 |
+
"dimension": "coverage",
|
| 189 |
"w": 1.0,
|
| 190 |
+
"description": "After deletion the page order top to bottom is still: top dark info bar → header (5 nav items) → hero (with the blue BOOK NOW button) → cases (4 cases) → reviews (7 review cards) → store block → \"SEO Specialist in London UK\" long-form and \"50% of all UK SEO agencies buy SEO from us\" multi-column copy."
|
| 191 |
},
|
| 192 |
{
|
| 193 |
"id": "del.no.gap",
|
| 194 |
"m": 4,
|
| 195 |
+
"dimension": "visual",
|
| 196 |
"w": 1.0,
|
| 197 |
+
"description": "The deleted blocks leave no empty shell containers: the blank space between neighboring blocks is comparable to the spacing elsewhere on the page, with no large blank area taller than half a screen or leftover divider line."
|
| 198 |
},
|
| 199 |
{
|
| 200 |
"id": "del.shop.intact",
|
| 201 |
"m": 4,
|
| 202 |
+
"dimension": "functional",
|
| 203 |
"w": 1.0,
|
| 204 |
+
"description": "After the deletion the store's functionality is unaffected: by default still 48 packages over 4 pages, and filtering, searching, sorting, and pagination all work normally with the count matching the list (e.g. Silver+Gold and 12 months still 8 items)."
|
| 205 |
},
|
| 206 |
{
|
| 207 |
"id": "cart.merge.badge",
|
| 208 |
"m": 5,
|
| 209 |
+
"dimension": "interaction",
|
| 210 |
"w": 1.5,
|
| 211 |
+
"description": "After clicking add-to-cart twice in a row on Standard·3 keywords·12 months, the cart has only one row for that package with quantity 2 (no second row), that row's unit price shows £1193 (the contract total, not the monthly fee £117), the line subtotal shows £2386, and the cart entry badge shows 2 by item count."
|
| 212 |
},
|
| 213 |
{
|
| 214 |
"id": "cart.total.promo",
|
| 215 |
"m": 5,
|
| 216 |
+
"dimension": "functional",
|
| 217 |
"w": 1.5,
|
| 218 |
+
"description": "When the cart contains Standard·3 keywords·12 months ×1 (line unit price and subtotal both showing £1193) and Bronze·8 keywords·6 months ×1 (line unit price and subtotal both showing £2505), the combined subtotal shows £3698; after entering promo code SEO10 the amount due becomes £3328 (remainder cut after 10% off), and after removing the promo code the amount returns to £3698."
|
| 219 |
},
|
| 220 |
{
|
| 221 |
"id": "checkout.wizard.chain",
|
| 222 |
"m": 5,
|
| 223 |
+
"dimension": "interaction",
|
| 224 |
"w": 1.5,
|
| 225 |
+
"description": "In the state where the cart contains Standard·3 keywords·12 months ×1 and Bronze·8 keywords·6 months ×1 with promo code SEO10 applied (amount due £3328), clicking checkout: filling the step-1 email with \"abc.com\" (no @) blocks progress to the next step with a message, and changing to a valid email allows progress; step 2 lists these two rows and the amount due £3328, and going back to step 1 retains the name/email; after submitting the success page shows the same amount £3328, after which the cart is empty and the badge shows 0."
|
| 226 |
},
|
| 227 |
{
|
| 228 |
"id": "cart.filter.coupling",
|
| 229 |
"m": 5,
|
| 230 |
+
"dimension": "interaction",
|
| 231 |
"w": 1.5,
|
| 232 |
+
"description": "First add Gold·40 keywords·12 months to the cart, then switch the tier filter to Standard only: the package disappears from the list and no clickable add-to-cart entry remains, but the cart row, its quantity, and the badge number all stay unchanged; after clearing the filter the package reappears and the cart still has only one row, not duplicated."
|
| 233 |
},
|
| 234 |
{
|
| 235 |
"id": "cart.empty.idempotent",
|
| 236 |
"m": 5,
|
| 237 |
+
"dimension": "interaction",
|
| 238 |
"w": 1.0,
|
| 239 |
+
"description": "When the cart is empty, an empty-state message is shown and the checkout button is unavailable (clicking causes no navigation); reducing a row's quantity to 0 removes that row, and after removing all rows it returns to the empty state with the badge showing 0."
|
| 240 |
},
|
| 241 |
{
|
| 242 |
"id": "style.accent.consistent",
|
| 243 |
"m": 5,
|
| 244 |
+
"dimension": "visual",
|
| 245 |
"w": 1.0,
|
| 246 |
+
"description": "The cart entry stays visible when scrolled to the store area (a fixed entry or a persistent entry within the block); the site introduces no new brand/accent colors beyond the reference's existing scheme (white background, the hero BOOK NOW blue, the four tier colors, and the dark of the top info bar), and the add-to-cart and checkout buttons take their accent colors from that existing scheme with consistent usage throughout."
|
| 247 |
}
|
| 248 |
],
|
| 249 |
"inject": null,
|
tasks/c27/task.json
CHANGED
|
@@ -3,242 +3,242 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"seed_meta": {
|
| 18 |
"ref_image_src": "prototypes/reference.jpg"
|
| 19 |
},
|
| 20 |
-
"title": "SOLDOUT LA
|
| 21 |
"milestones": [
|
| 22 |
{
|
| 23 |
-
"operator": "
|
| 24 |
-
"request": "
|
| 25 |
},
|
| 26 |
{
|
| 27 |
-
"operator": "
|
| 28 |
-
"request": "
|
| 29 |
},
|
| 30 |
{
|
| 31 |
-
"operator": "
|
| 32 |
-
"request": "42
|
| 33 |
},
|
| 34 |
{
|
| 35 |
-
"operator": "
|
| 36 |
-
"request": "
|
| 37 |
},
|
| 38 |
{
|
| 39 |
-
"operator": "
|
| 40 |
-
"request": "
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "replicate.cookie",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.0,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "replicate.hero-video",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.0,
|
| 56 |
-
"description": "cookie
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "replicate.located",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.0,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "replicate.grid",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.5,
|
| 70 |
-
"description": "\"Newest Arrivals\"
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "replicate.statement",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "replicate.footer",
|
| 81 |
"m": 1,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.0,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "data.total42",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "data.soldout9",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.0,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "data.sample",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.0,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "data.naming",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.0,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "data.format",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.0,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "state.counts",
|
| 123 |
"m": 3,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.5,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "state.paging",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.0,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "state.sort",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.0,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "state.chain",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.5,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "state.wish",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.0,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "state.faq-cookie",
|
| 158 |
"m": 3,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "block.plan-price",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "block.save",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.0,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "block.toggle",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.0,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "block.member-price",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.5,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "block.coupling",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.5,
|
| 196 |
-
"description": "
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "block.wish-total",
|
| 200 |
"m": 4,
|
| 201 |
-
"dimension": "
|
| 202 |
"w": 1.0,
|
| 203 |
-
"description": "
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "skin.dark",
|
| 207 |
"m": 5,
|
| 208 |
-
"dimension": "
|
| 209 |
"w": 1.5,
|
| 210 |
-
"description": "
|
| 211 |
},
|
| 212 |
{
|
| 213 |
"id": "skin.accent",
|
| 214 |
"m": 5,
|
| 215 |
-
"dimension": "
|
| 216 |
"w": 1.0,
|
| 217 |
-
"description": "
|
| 218 |
},
|
| 219 |
{
|
| 220 |
"id": "skin.state-keep",
|
| 221 |
"m": 5,
|
| 222 |
-
"dimension": "
|
| 223 |
"w": 1.5,
|
| 224 |
-
"description": "
|
| 225 |
},
|
| 226 |
{
|
| 227 |
"id": "skin.regression",
|
| 228 |
"m": 5,
|
| 229 |
-
"dimension": "
|
| 230 |
"w": 1.5,
|
| 231 |
-
"description": "
|
| 232 |
},
|
| 233 |
{
|
| 234 |
"id": "skin.plan-intact",
|
| 235 |
"m": 5,
|
| 236 |
-
"dimension": "
|
| 237 |
"w": 1.0,
|
| 238 |
-
"description": "
|
| 239 |
}
|
| 240 |
],
|
| 241 |
"inject": null,
|
| 242 |
"qc_static": [],
|
| 243 |
"review_status": "needs_human"
|
| 244 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"add section",
|
| 8 |
+
"restyle",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"add state"
|
| 11 |
],
|
| 12 |
+
"difficulty": "regular",
|
| 13 |
"levers": [
|
| 14 |
+
"exact numeric assertions"
|
| 15 |
],
|
| 16 |
+
"domain": "marketing landing page",
|
| 17 |
"seed_meta": {
|
| 18 |
"ref_image_src": "prototypes/reference.jpg"
|
| 19 |
},
|
| 20 |
+
"title": "SOLDOUT LA streetwear store landing page: from replicate to membership operations",
|
| 21 |
"milestones": [
|
| 22 |
{
|
| 23 |
+
"operator": "replicate",
|
| 24 |
+
"request": "Our store SOLDOUT LA's website homepage — design only handed over one long screenshot, so first build this screen exactly as-is. Don't change a single word of the copy, don't swap it for another brand's wording, and where an image is missing just top it with a gray placeholder block. From top to bottom it's roughly like this: pinned at the very top is a full-width cookie banner, with a little cookie icon and the line \"This website uses cookies to ensure you get the best experience.\" on the left, followed by a \"Learn more\" link, and on the right two side-by-side buttons \"Decline\" and \"Accept\", with a close X at the far right. Below that is a near full-width storefront hero image (the sign reads SOLDOUTLA), with margins left and right. Below that is the store info band: on the left a small upward-slanting arrow icon, and under it an uppercase heading \"LOCATED AT TOPANGA VILLAGE*\", where TOPANGA VILLAGE* should be bolder and heavier; on the right are two lines of opening hours, right-aligned, \"Sun - Thurs: 11am - 7pm\" and \"Fri - Sat: 11am - 9pm\", with the time parts bolded; at the far right a small map block (a placeholder is fine), and below the map a small line of address text \"6250 CA-27 Unit 1580, Canoga Park, CA 91367\". Next is the small heading \"Newest Arrivals\", under which are eight product cards in four columns and two rows; the top half of each card is a square image area on a light gray background, and below it are two left-aligned small lines: product name and price, in order HMDD Crystal Sweatpants Orange $180.00, HMDD Crystal Sweatpants Green $250.00, Jordan 4 Retro OG Nigel Sylvester Brick After Brick $320.00, Chrome Hearts White Foil Hoodie $795.00, Nike Kobe 4 Protro Draft Day Pack Vancouver Grizzlies (Opened Packaging) $300.00, Nike Kobe 4 Protro Draft Day Pack Golden State Warriors (Opened Packaging) $300.00, Nike Kobe 6 Proto Grinch (2020) $380.00, Jordan 3 Retro Black Cement (2018) $90.00; the second card in the second row has no image, so show a gray placeholder with a prohibition symbol and \"No image\". Below that is a full black background block, with a video/image placeholder in the middle (the screen shows SOLDOUT LA's checkout display), a small pause-style button in the lower right, and a circular down arrow centered at the bottom of the black block. Right after that is a full-screen background photo section, overlaid with a white all-caps body paragraph: \"WE ARE CONSTANTLY UPDATING OUR INVENTORY AND ADDING NEW PRODUCTS, SO BE SURE TO CHECK BACK REGULARLY. WE ARE ALSO OPEN TO CUSTOMER SUGGESTIONS, SO IF THERE'S SOMETHING YOU'RE LOOKING FOR THAT YOU DON'T SEE ON OUR SHOP, PLEASE LET US KNOW AND WE'LL DO OUR BEST TO GET IT IN STOCK FOR YOU*\", with the letter spacing widened; below the paragraph, centered, a pale yellow pill button \"VIEW SHOP\", and below the button a large upward-slanting white arrow. Finally the black footer area: a small line \"SoldOut LA\" at the top left, below it the large heading \"Newsletter\" with a slanted arrow, on the right a small paragraph \"Stay ahead of the game and be the first to know about our latest drops by signing up for our newsletter.\", below that a wide input with placeholder \"Enter your Email\", to its right a red \"SIGN UP\" button, and below that a gray line of small text \"By clicking Sign Up you're confirming that you agree with our Terms and Conditions.\". Further down in the footer, on the left write \"Questions?\", and on the right five Q&A rows, each with a thin underline and a \">\" arrow on the right, in order \"Do You Offer International Shipping?\", \"Are Your Sneakers Authentic? How Do I Know?\", \"Can I Track My Order Once Shipped?\", \"Can I Hold A Shoe To Pickup In Store?\", \"What Payment Methods Do You Offer?\". At the very bottom, a row with three links HOME / ABOUT / CONTACT on the left and two social icons on the right. Overall it's a cold, minimal black-white-gray feel with an industrial-leaning typeface."
|
| 25 |
},
|
| 26 |
{
|
| 27 |
+
"operator": "wire up data",
|
| 28 |
+
"request": "The homepage only has eight hardcoded items right now — too fake. Put the inventory ledger up there: change the product section to read from this list, lay out all 42 items at once (no pagination for now), and the original eight hardcoded cards should be replaced by the corresponding entries from the ledger — don't leave them showing up twice. Where the ledger's names differ from how the homepage currently writes them (e.g. the Jordan 4 pair has no After Brick in the ledger, and the ledger writes Protro for the Kobe 6), the ledger wins. Keep the card style from the previous version — that light gray image block plus two left-aligned lines of text — don't change it beyond recognition; prices all use two decimals. The ledger is scribbled down by our warehouse colleague, I'll paste it for you: on the shoes side — Jordan 4 Retro OG Nigel Sylvester Brick $320; Nike Kobe 4 Protro Draft Day Pack Vancouver Grizzlies (Opened Packaging) $300; Nike Kobe 4 Protro Draft Day Pack Golden State Warriors (Opened Packaging) $300; Nike Kobe 6 Protro Grinch (2020) $380; Jordan 3 Retro Black Cement (2018) $90; Jordan 1 Retro High OG Chicago Lost & Found $420 (this one's long gone); Nike Dunk Low Panda $110; Nike SB Dunk Low Sandy Bodecker $560 (gone); Yeezy Boost 350 V2 Zebra $240; Yeezy Slide Onyx $85; New Balance 990v6 Grey $210; New Balance 550 White Green $95; Asics Gel-Kayano 14 Cream $150; Adidas Samba OG Black $100; Air Max 1 Patta Waves Noise Aqua $330 (gone); Jordan 11 Retro Cool Grey (2021) $260; Travis Scott Jordan 1 Low Reverse Mocha $1150 (gone); Nike Air Force 1 Low White $115; Converse Chuck 70 Hi Black $85; Salomon XT-6 Black $200; Vans Knu Skool Black $75; Puma Palermo Green $90; Nike Kobe 8 Protro Radioactive $190; Jordan 4 Military Black $265 (gone). On the apparel side — HMDD Crystal Sweatpants Orange $180; HMDD Crystal Sweatpants Green $250; Chrome Hearts White Foil Hoodie $795; Supreme Box Logo Crewneck Navy $650 (gone); Stussy 8 Ball Tee Black $70; Corteiz Alcatraz Cargo Grey $220; Essentials Fear of God Hoodie Cream $130; Palace Tri-Ferg Tee White $80; Nike Tech Fleece Joggers Black $120; Bape Shark Full Zip Hoodie Camo $480 (gone); Denim Tears Cotton Wreath Sweatpants $340; Hellstar Studios Tee Black $95. Accessories are a scattered handful — Supreme Box Logo Beanie Red $60; Chrome Hearts Trucker Hat Black $420 (gone); Nike Everyday Crew Socks 3-Pack $22; Goyard Card Holder Black $780 (gone); Stussy Bucket Hat Stone $65; Crep Protect Cleaning Kit $30. Anything I marked \"gone\" counts as sold out, and it must be obvious at a glance on the card. Also put a total count line at the top of the product section, and the number has to match what's actually laid out."
|
| 29 |
},
|
| 30 |
{
|
| 31 |
+
"operator": "add state",
|
| 32 |
+
"request": "42 items all piled up is unwalkable — the product section needs filtering and paging. Add a row of category switching on top: All / Shoes / Apparel / Accessories, with an obvious active style on the selected one; next to it an \"In stock only\" toggle — when on, the sold-out ones don't show in the list; and give a sort, default being the order recorded in the ledger, plus price low to high and price high to low. The list holds only 12 per page, with page numbers and previous/next below; after paging, changing the filter, or changing the sort, the total count line should update in real time, and paging to a nonexistent page should snap back to page 1. Also, our page doesn't even have site navigation right now — add a clean nav bar at the top (the brand name and a few placeholder links are enough, don't touch the replicated content below), and on the right side of the nav put a wishlist icon with a numeric badge: cards can be \"added to wishlist\", clicking an added one again removes it, and sold-out items can't be added at all; the badge number tracks only the items actually added — hiding an item via filtering or paging shouldn't change the number. While you're at it, fix two old bugs: the five Q&A rows in the footer currently do nothing when clicked — they should expand an answer (just write one decent sentence of answer copy), and at most one should be expanded at a time; clicking an already-expanded one collapses it; and the cookie banner at the top should really disappear after clicking Decline or Accept, with the page content shifting up, and it shouldn't reappear until refresh."
|
| 33 |
},
|
| 34 |
{
|
| 35 |
+
"operator": "add section",
|
| 36 |
+
"request": "Ops wants to push memberships, so insert a membership subscription section between the product section and that black video block, titled \"SOLDOUT CLUB\", with three tiers side by side below, tier names clearly written as Basic, Pro, Founder: Basic monthly $19, Pro monthly $49, Founder monthly $99, each with three benefit lines below it (write them in the tone of a streetwear store, e.g. priority access, free shipping and such). Put a monthly/yearly toggle on top, defaulting to monthly; switching to yearly shows the whole year's price — the annual fee is the monthly fee at 15% off for a full year, with the odd cents dropped so only whole dollars remain, and each tier should mark how much you save per year, which is the original annual price minus the current annual fee — just make the numbers add up; when switched back to monthly, that savings annotation should not show, don't leave it there to mislead. Also, the membership's core selling point is 15% off everything, so add a \"member price preview\" toggle (putting it at the top of the product section is fine): when on, all product card prices switch to the member price, computed the same way as the annual fee — 15% off with the odd cents dropped; but note sorting is still by original price, and turning this preview on or off must not mess up the list order, total count, or pagination. Also tweak the wishlist: besides the badge number, also show a total amount, which is the sum of the currently displayed prices of the items in the wishlist; when member price preview is on, the total is computed at member price too."
|
| 37 |
},
|
| 38 |
{
|
| 39 |
+
"operator": "restyle",
|
| 40 |
+
"request": "There's a late-night drop at the end of the month, and marketing wants the page to be able to switch wholesale to dark mode. Add one more small theme toggle on the right side of the top nav; after switching, the whole page (nav bar, store info band, product section, membership subscription section, that all-caps copy section, Newsletter and Q&A section, footer) becomes near-black background with light text, and switching back restores it exactly. There's a contradiction for you to handle yourself: marketing says it has to be \"eye-catching enough\" in dark mode and wants to use the orange from the sign as the accent; but our store's tone is still cold and minimal, so don't make the whole page garish — orange only touches a few key spots (such as the selected category, primary buttons, the wishlist badge and the like), and the accent color usage must stay consistent across both themes — don't have one rule in light mode and another in dark mode. Most important: restyling is just skin-deep — the user's currently selected category, in-stock-only, sort, current page, member price preview, and items added to the wishlist must not be lost at all after switching, and don't collapse the expanded Q&A row either. What was built before (store address, opening hours, VIEW SHOP button, email signup box, five Q&A rows) must still be there in dark mode, with not a word of copy changed and the layout not caving in."
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "replicate.cookie",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "visual",
|
| 48 |
"w": 1.0,
|
| 49 |
+
"description": "At the very top of the page there is a full-width, edge-pinned cookie banner; the copy is verbatim \"This website uses cookies to ensure you get the best experience.\" and is followed by a \"Learn more\" link; on the right are side-by-side \"Decline\" and \"Accept\" buttons plus a close X — all four on the same horizontal row."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "replicate.hero-video",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "visual",
|
| 55 |
"w": 1.0,
|
| 56 |
+
"description": "Below the cookie banner is a near full-width storefront image with left and right margins (containing the SOLDOUTLA text, or a same-size gray placeholder block); after the product grid there is also a full-width black block, with a media placeholder at its center, a pause-style small control in the lower right, and a circular down arrow centered at the bottom of the black block."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "replicate.located",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "visual",
|
| 62 |
"w": 1.0,
|
| 63 |
+
"description": "The info band below the storefront hero has, on the left, the all-caps heading \"LOCATED AT TOPANGA VILLAGE*\" (with the latter part visibly bolder), on the right two right-aligned lines \"Sun - Thurs: 11am - 7pm\" and \"Fri - Sat: 11am - 9pm\", and below the map placeholder block at the far right a small line \"6250 CA-27 Unit 1580, Canoga Park, CA 91367\"."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "replicate.grid",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "visual",
|
| 69 |
"w": 1.5,
|
| 70 |
+
"description": "Under the \"Newest Arrivals\" heading are 8 cards in four columns and two rows; each card is a light gray square image area plus two left-aligned lines of name and price below; the 8 prices are verbatim $180.00, $250.00, $320.00, $795.00, $300.00, $300.00, $380.00, $90.00, and the second card in the second row shows a prohibition symbol with a \"No image\" placeholder."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "replicate.statement",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "visual",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "A white, all-caps, letter-spaced paragraph sits over the full-screen background photo section, starting with \"WE ARE CONSTANTLY UPDATING OUR INVENTORY\" and ending with \"IN STOCK FOR YOU*\"; below the paragraph, centered, is a pale yellow pill button whose text is \"VIEW SHOP\", and below the button is a large upward-slanting white arrow."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "replicate.footer",
|
| 81 |
"m": 1,
|
| 82 |
+
"dimension": "coverage",
|
| 83 |
"w": 1.0,
|
| 84 |
+
"description": "The dark footer has a small line \"SoldOut LA\" at the top left, with the large heading \"Newsletter\" beneath it; on the right is an input with placeholder \"Enter your Email\" and a red \"SIGN UP\" button; below the button a gray line of small text verbatim \"By clicking Sign Up you're confirming that you agree with our Terms and Conditions.\"; further down, to the right of \"Questions?\" there are exactly 5 Q&A rows with \">\" arrows (first \"Do You Offer International Shipping?\", last \"What Payment Methods Do You Offer?\"), and the bottom row is HOME / ABOUT / CONTACT with social icons on the right."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "data.total42",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "functional",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "The product section renders 42 product cards at once (all countable when there's no pagination, with no old hardcoded cards duplicated against the ledger), and the total count line visible at the top of the product section reads 42, matching the actual card count."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "data.soldout9",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "functional",
|
| 97 |
"w": 1.0,
|
| 98 |
+
"description": "Exactly 9 products carry an obvious sold-out mark (Jordan 1 Retro High OG Chicago Lost & Found, Nike SB Dunk Low Sandy Bodecker, Air Max 1 Patta Waves Noise Aqua, Travis Scott Jordan 1 Low Reverse Mocha, Jordan 4 Military Black, Supreme Box Logo Crewneck Navy, Bape Shark Full Zip Hoodie Camo, Chrome Hearts Trucker Hat Black, Goyard Card Holder Black), and the other 33 have no sold-out mark."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "data.sample",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "functional",
|
| 104 |
"w": 1.0,
|
| 105 |
+
"description": "Spot-check three data points for accuracy: Travis Scott Jordan 1 Low Reverse Mocha shows $1150.00 and is sold out; Nike Everyday Crew Socks 3-Pack shows $22.00 and is not sold out; Chrome Hearts White Foil Hoodie shows $795.00 and is not sold out."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "data.naming",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "functional",
|
| 111 |
"w": 1.0,
|
| 112 |
+
"description": "Names all use the ledger wording: the page contains \"Jordan 4 Retro OG Nigel Sylvester Brick\" (without After Brick) and \"Nike Kobe 6 Protro Grinch (2020)\" (Protro, not Proto), and the old wordings \"…Brick After Brick\" or \"Kobe 6 Proto\" no longer appear anywhere on the page."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "data.format",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "visual",
|
| 118 |
"w": 1.0,
|
| 119 |
+
"description": "All 42 prices are in the format \"$\" plus two decimals (e.g. $75.00, $1150.00), and the cards keep requirement 1's light gray image block + left-aligned two-line name/price layout, still a multi-column grid on wide screens rather than degrading to a single-column long list."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "state.counts",
|
| 123 |
"m": 3,
|
| 124 |
+
"dimension": "functional",
|
| 125 |
"w": 1.5,
|
| 126 |
+
"description": "When the category switches to All / Shoes / Apparel / Accessories the total count line reads 42 / 24 / 12 / 6 in order, and the currently selected item has an active style clearly distinct from the others; after turning on \"In stock only\" the same three switches (All / Shoes / Accessories) give totals of 33 / 19 / 4, and turning it off restores 42 / 24 / 6."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "state.paging",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "functional",
|
| 132 |
"w": 1.0,
|
| 133 |
+
"description": "At most 12 cards per page: the All category has 4 pages with exactly 6 cards on page 4; \"Shoes\" + in-stock-only has 2 pages with exactly 7 cards on page 2; when staying on page 2, tightening the filter so the page count shrinks makes the list snap back to page 1 rather than going blank."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "state.sort",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.0,
|
| 140 |
+
"description": "Default sort is the ledger order: in the All category page 1's first card is Jordan 4 Retro OG Nigel Sylvester Brick $320.00 and the 12th is New Balance 550 White Green $95.00; after switching to \"Price high to low\" the All category's first card is Travis Scott Jordan 1 Low Reverse Mocha $1150.00 (with sold-out mark) and the second is Chrome Hearts White Foil Hoodie $795.00; under Shoes + in-stock-only + price high to low the first card is Nike Kobe 6 Protro Grinch (2020) $380.00."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "state.chain",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "interaction",
|
| 146 |
"w": 1.5,
|
| 147 |
+
"description": "Perform in order Shoes → turn on \"In stock only\" → choose \"Price low to high\" → go to page 2: page 1's first card is Vans Knu Skool Black $75.00, page 2's first card is New Balance 990v6 Grey $210.00 and its last card is Nike Kobe 6 Protro Grinch (2020) $380.00, with no sold-out product appearing throughout."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "state.wish",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "interaction",
|
| 153 |
"w": 1.0,
|
| 154 |
+
"description": "The newly added site nav bar at the top of the page (with brand name and links) has a wishlist icon and numeric badge on its right, and the badge changes exactly with the number of items added: after adding 2 items it shows 2, clicking the same item again goes back to 1; clicking any sold-out product cannot add it and the badge number stays; then switching category, toggling in-stock-only, or paging leaves the badge number unchanged."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "state.faq-cookie",
|
| 158 |
"m": 3,
|
| 159 |
+
"dimension": "interaction",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "Clicking any Q&A row expands its answer; clicking another one auto-collapses the previous (at most 1 expanded at a time); clicking the expanded one collapses it; clicking Decline or Accept makes the cookie banner disappear from the page, the content below shifts up, and it doesn't reappear without a refresh."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "block.plan-price",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "functional",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "Between the product section and the black video block there is a three-tier subscription section titled \"SOLDOUT CLUB\", with the tier names Basic / Pro / Founder clearly visible, showing $19 / $49 / $99 on the default monthly billing; after switching to yearly the three tier prices show exactly $193 / $499 / $1009."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "block.save",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "functional",
|
| 174 |
"w": 1.0,
|
| 175 |
+
"description": "In the yearly state each tier's marked annual savings are $35 / $89 / $179 in order (equal to monthly × 12 minus the annual fee); after switching back to monthly that savings annotation does not show on any of the three tiers, and each tier's 3 benefit lines remain visible at all times."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "block.toggle",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "interaction",
|
| 181 |
"w": 1.0,
|
| 182 |
+
"description": "After clicking the monthly/yearly toggle 4 times in a row it returns to the initial monthly state with the three tier prices still $19 / $49 / $99, and no odd-cents or wrong-tier numbers like $193.8 appear in between."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "block.member-price",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "functional",
|
| 188 |
"w": 1.5,
|
| 189 |
+
"description": "After turning on \"member price preview\" the product card prices display as original price × 85% floored to whole dollars: $320.00→$272.00, $180.00→$153.00, $795.00→$675.00, $22.00→$18.00, $1150.00→$977.00; turning it off restores all original prices."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "block.coupling",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "functional",
|
| 195 |
"w": 1.5,
|
| 196 |
+
"description": "Under the state Shoes + in-stock-only + price low to high + page 2, turning on member price preview: the total is still 19, still 2 pages, page 2 still has 7 cards, the first card is still New Balance 990v6 Grey with the price shown as $178.00, and the last card is still Nike Kobe 6 Protro Grinch (2020) shown as $323.00."
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "block.wish-total",
|
| 200 |
"m": 4,
|
| 201 |
+
"dimension": "functional",
|
| 202 |
"w": 1.0,
|
| 203 |
+
"description": "The wishlist shows both the item count and the total amount: after adding Jordan 4 Retro OG Nigel Sylvester Brick and Stussy 8 Ball Tee Black the total is $390.00; turning on member price preview changes the total to $331.00; turning it off returns to $390.00."
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "skin.dark",
|
| 207 |
"m": 5,
|
| 208 |
+
"dimension": "visual",
|
| 209 |
"w": 1.5,
|
| 210 |
+
"description": "A theme toggle control exists on the right of the top nav; clicking it turns the nav bar, store info band, product section, SOLDOUT CLUB section, Newsletter and Q&A section, and footer all into near-black background with light text (body text and background clearly contrasting, no leftover light-background blocks), and clicking again fully restores the light appearance."
|
| 211 |
},
|
| 212 |
{
|
| 213 |
"id": "skin.accent",
|
| 214 |
"m": 5,
|
| 215 |
+
"dimension": "visual",
|
| 216 |
"w": 1.0,
|
| 217 |
+
"description": "Orange accents appear only on a few key elements (such as the active category, primary buttons, wishlist badge and the like, with the total kept to a small set) and are not used as large-area block backgrounds; the same element's accent usage stays consistent across the light and dark themes (any restrained and consistent scheme is fine; inconsistency between the two is a fail)."
|
| 218 |
},
|
| 219 |
{
|
| 220 |
"id": "skin.state-keep",
|
| 221 |
"m": 5,
|
| 222 |
+
"dimension": "functional",
|
| 223 |
"w": 1.5,
|
| 224 |
+
"description": "Under the state Shoes + in-stock-only + price low to high + page 2 + member price preview on + 2 wishlist items, switch the theme: after switching it still stays on page 2, still the same 7 cards, the first card still New Balance 990v6 Grey $178.00, the total still shows 19, the wishlist badge still 2, and the expanded Q&A row stays expanded."
|
| 225 |
},
|
| 226 |
{
|
| 227 |
"id": "skin.regression",
|
| 228 |
"m": 5,
|
| 229 |
+
"dimension": "coverage",
|
| 230 |
"w": 1.5,
|
| 231 |
+
"description": "In dark mode all of requirement 1's content is retained with not a word of copy changed: \"LOCATED AT TOPANGA VILLAGE*\", the two opening-hours lines, the address line, the \"VIEW SHOP\" button, the input with placeholder \"Enter your Email\" and the \"SIGN UP\" button, and the 5 Q&A rows are all visible, and the Q&A accordion still keeps at most 1 expanded at a time."
|
| 232 |
},
|
| 233 |
{
|
| 234 |
"id": "skin.plan-intact",
|
| 235 |
"m": 5,
|
| 236 |
+
"dimension": "functional",
|
| 237 |
"w": 1.0,
|
| 238 |
+
"description": "In dark mode the SOLDOUT CLUB section is still a three-tier side-by-side layout, not misaligned or stacked, and after switching to yearly the prices are still exactly $193 / $499 / $1009 with savings of $35 / $89 / $179."
|
| 239 |
}
|
| 240 |
],
|
| 241 |
"inject": null,
|
| 242 |
"qc_static": [],
|
| 243 |
"review_status": "needs_human"
|
| 244 |
+
}
|
tasks/c28/task.json
CHANGED
|
@@ -3,202 +3,202 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"repair": true,
|
| 17 |
-
"inject_type": "
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_zh_000080",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
-
"title": "tria
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
},
|
| 37 |
{
|
| 38 |
-
"operator": "
|
| 39 |
-
"request": "
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "data.rows.43",
|
| 45 |
"m": 1,
|
| 46 |
-
"dimension": "
|
| 47 |
"w": 1.5,
|
| 48 |
-
"description": "
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "data.stats.exact",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "data.soldout.4",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.0,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "data.fields.price",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.0,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "data.style.palette",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.0,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "data.nav.entry",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "filter.combo.counts",
|
| 87 |
"m": 2,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.5,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "filter.paging.reset",
|
| 94 |
"m": 2,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.5,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "sort.price.first",
|
| 101 |
"m": 2,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.0,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "book.chain.total",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "book.limit.remain",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.0,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "book.stats.sync",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.5,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "fix.indent.zoniou",
|
| 129 |
"m": 3,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.5,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "fix.indent.others",
|
| 136 |
"m": 3,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.0,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "fix.reveal.kept",
|
| 143 |
"m": 3,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.0,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "fix.regress.works",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.0,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "fix.regress.booking",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.0,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "del.marquee.gone",
|
| 164 |
"m": 4,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.5,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "del.footer.intact",
|
| 171 |
"m": 4,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.0,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "del.nav.contact",
|
| 178 |
"m": 4,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.5,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.regress.stats",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.0,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.regress.indent",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.0,
|
| 195 |
-
"description": "
|
| 196 |
}
|
| 197 |
],
|
| 198 |
"inject": {
|
| 199 |
-
"type": "
|
| 200 |
-
"saboteur_prompt": "
|
| 201 |
},
|
| 202 |
"qc_static": [],
|
| 203 |
"review_status": "needs_human"
|
| 204 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"make interactive",
|
| 7 |
+
"repair",
|
| 8 |
+
"remove section",
|
| 9 |
+
"wire up data"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"non-local changes"
|
| 14 |
],
|
| 15 |
+
"domain": "booking service",
|
| 16 |
"repair": true,
|
| 17 |
+
"inject_type": "style override",
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_zh_000080",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
+
"title": "tria studio booking overhaul (wire up data + three-step booking + tiered heading repair + remove the scrolling marquee)",
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
+
"operator": "wire up data",
|
| 27 |
+
"request": "This year we're opening the calendars of our three shooting studios and the online studio directly to clients for booking — first add a \"Book a session / BOOK A SESSION\" block after the case study list and before the footer. Schedule it for October 2025 (October 6 is a Monday); ops gave me a messy list, sort it out yourself: Alpha studio in Athens, Oct 6 to Oct 10, Monday to Friday, three sessions a day at 10:00, 14:00, 19:00; Beta studio in Thessaloniki only opens on five days — Oct 7, 9, 13, 15, 17 — with two sessions a day at 11:00 and 16:00; the online livestream studio Gamma has one session at 20:00 on weekday evenings between Oct 6 and Oct 17, i.e. 10/6, 10/7, 10/8, 10/9, 10/10, 10/13, 10/14, 10/15, 10/16, 10/17; Delta studio in Mykonos only does weekends, Oct 11, 12, 18, 19, two sessions a day at 09:30 and 15:00. Seat counts: Alpha 12 per session, Beta 8, Gamma 30, Delta 6. Prices: Alpha and Beta €120 per person, Gamma €45, Delta €150. Only these sessions are booked so far: Alpha Oct 6 10:00 is fully booked; Alpha Oct 8 14:00 has 11 booked; Beta Oct 9 16:00 fully booked; Gamma Oct 13 20:00 fully booked; Delta Oct 11 09:30 fully booked; everything else has sold none. Each row should show date, time, studio name (with city), unit price and seats left; fully booked ones must be obvious at a glance and can't be ordered. At the top of the section give me three numbers: total sessions, bookable sessions, and total remaining seats — the numbers must match the list below. Also add a new entry in the top nav that jumps straight to this section; don't change where the two old entries Agency and Works go. This block should be prominent enough to find at a glance, but don't mess up the site's tone: colors may only use the ones already on the site, no new colors."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "make interactive",
|
| 31 |
+
"request": "The list is too long; clients need to pick. Give me filtering by studio (five options: All / Alpha / Beta / Gamma / Delta), an \"Only show ones with seats left\" toggle, and sorting that can switch between \"by time\" and \"price low to high\"; 12 rows per page with pagination for the rest, and any filter or sort change returns to page 1. Make booking a three-step flow: first click the book button on a session, then choose the number of people (at most 4, and no more than the seats left in that session), then land on the confirmation page and see the total before ordering. Pricing: 3 people or more get 10% off, and any odd cents in the result are simply dropped, leaving whole euros. After confirmation the session's remaining seats must actually decrease, and the summary numbers at the top must stay consistent. Step two must allow going back to pick another session, and going back resets the people count to 1. Also don't let a double-click on confirm deduct seats twice."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "repair",
|
| 35 |
+
"request": "Another bug report: the case study headings were originally in a staggered stair-step layout (the \"A WAY / TO LABEL / SCENTS\" kind of indent, one level after another). It looks right when the page first opens, but after you scroll and they fade in, the lines along with the eyebrow above them all jump flush to the left — the stair step is gone, on all three case studies. Please fix it, keep the fade-in effect itself, and don't change anything else while you're at it."
|
| 36 |
},
|
| 37 |
{
|
| 38 |
+
"operator": "remove section",
|
| 39 |
+
"request": "We don't want that black horizontal scrolling marquee at the bottom (the one saying DARE TO GO HYPER?, CONTACT US and that big purple cursor) — take the whole strip out. After deleting it the page shouldn't collapse, and don't leave a black edge or a big blank area; the top nav Contact must still work, but its destination changes to the booking section. Keep the blue footer block and the circular badge in the lower right as they are. After deleting, go through it yourself — the booking numbers, filters, and heading layout must not get broken."
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "data.rows.43",
|
| 45 |
"m": 1,
|
| 46 |
+
"dimension": "coverage",
|
| 47 |
"w": 1.5,
|
| 48 |
+
"description": "The booking section sits after the last case study (Onoma Hotel) and before the footer; the section heading contains \"Book a session\" and \"BOOK A SESSION\"; under the default filter the full data set is 43 slots (Alpha 15, Beta 10, Gamma 10, Delta 8), the first page shows exactly 12 rows, and pagination reaches all 43."
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "data.stats.exact",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "functional",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "The three stats at the top of the section are exactly: 43 total sessions, 39 bookable sessions, 541 remaining seats; all three are visible at the same time and consistent with the list data."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "data.soldout.4",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.0,
|
| 62 |
+
"description": "Exactly 4 rows are marked fully booked (Alpha Oct 6 10:00, Beta Oct 9 16:00, Gamma Oct 13 20:00, Delta Oct 11 09:30), and these 4 have no clickable booking entry; Alpha Oct 8 14:00 shows 1 seat left and is still bookable."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "data.fields.price",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "coverage",
|
| 68 |
"w": 1.0,
|
| 69 |
+
"description": "Each slot shows date, time, studio name (with city/online marker), unit price and seats left at the same time; unit prices are correct per studio: Alpha and Beta €120, Gamma €45, Delta €150."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "data.style.palette",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "visual",
|
| 75 |
"w": 1.0,
|
| 76 |
+
"description": "The booking section uses only colors that already appear in the site's seed styles (black #0a0a0a, white #fff, blue #2622ff, pale yellow #f2eda2, the existing purple tones in the footer/hero), with no new hues absent from the seed (e.g. green, orange, red); within the section the book button, the fully-booked marker, and the filter selected state share one accent color, with no mixing of two different accents."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "data.nav.entry",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "interaction",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "A new entry pointing to the booking section is added to the top nav; clicking it scrolls the page to that section and brings the \"Book a session / BOOK A SESSION\" heading into the viewport; meanwhile the Agency entry still scrolls to the footer intro area and the Works entry still scrolls to the case study area, with neither target changed."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "filter.combo.counts",
|
| 87 |
"m": 2,
|
| 88 |
+
"dimension": "functional",
|
| 89 |
"w": 1.5,
|
| 90 |
+
"description": "All five studio filters are present with exact counts: All 43, Alpha 15, Beta 10, Gamma 10, Delta 8; combined with \"Only show ones with seats left\" they become 39, 14, 9, 9, 7 respectively."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "filter.paging.reset",
|
| 94 |
"m": 2,
|
| 95 |
+
"dimension": "interaction",
|
| 96 |
"w": 1.5,
|
| 97 |
+
"description": "12 rows per page: by default 4 pages with 12/12/12/7; with \"Only show ones with seats left\" the last page has 3; while on page 3, switching any filter or sort immediately returns the list to page 1 and the first row is the first of the new result set."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "sort.price.first",
|
| 101 |
"m": 2,
|
| 102 |
+
"dimension": "functional",
|
| 103 |
"w": 1.0,
|
| 104 |
+
"description": "Switching to \"Price low to high\" makes the first row on the first page the 45-euro online Gamma session; switching back to \"by time\" makes the first row the Oct 6 10:00 Alpha session; ties at the same price are still ordered by time."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "book.chain.total",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "interaction",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "The three-step booking chain works end to end: click a session's book button → choose people → the confirmation page shows the total. A Gamma session with 3 people shows a total of 121 (45×3 with 10% off and odd cents dropped), a Delta session with 3 people shows 405, an Alpha session with 4 people shows 432, and 2 people or fewer get no discount (e.g. Alpha with 2 people is 240)."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "book.limit.remain",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "functional",
|
| 117 |
"w": 1.0,
|
| 118 |
+
"description": "The step-two people cap is enforced both ways: an ordinary session with 4+ seats left (e.g. any Alpha session that isn't full) allows at most 4 people and can't go to 5; Alpha Oct 8 14:00 with 1 seat left allows at most 1 person and can't go to 2; after going back from step two to step one and choosing another session, the people count restarts at 1 rather than keeping the previous value."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "book.stats.sync",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "functional",
|
| 124 |
"w": 1.5,
|
| 125 |
+
"description": "After booking 3 people for an unfilled Gamma session: that session's remaining seats decrease accordingly, the top total remaining seats goes from 541 to 538, total sessions is still 43, and bookable sessions still 39; clicking confirm twice in quick succession deducts only once (remaining seats must not become 535); sessions hidden by the filter do not appear in the booking flow."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "fix.indent.zoniou",
|
| 129 |
"m": 3,
|
| 130 |
+
"dimension": "visual",
|
| 131 |
"w": 1.5,
|
| 132 |
+
"description": "After scrolling so the first case study finishes fading in, the headings are still in the stair-step layout: the left start of the \"TO LABEL\" line is clearly to the right of \"A WAY\" and \"SCENTS\" (about 5% of the viewport width, roughly 100px at 1920 wide), and the eyebrow \"Zoniou Perfumes\" is left-aligned with \"A WAY\" and \"SCENTS\" (no extra indent)."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "fix.indent.others",
|
| 136 |
"m": 3,
|
| 137 |
+
"dimension": "visual",
|
| 138 |
"w": 1.0,
|
| 139 |
+
"description": "After fading in, the second case study's \"SOMETHING TO\" and \"GENERATION Z\" are still shifted right by about 5.9% of the viewport width (roughly 113px at 1920 wide) relative to \"TUNE IN\", and the eyebrow \"Shook Radio\" is left-aligned with \"TUNE IN\"; the third case study's eyebrow \"Onoma Hotel\" and \"A STORY OF AN\" / \"HOTEL\" are still shifted right by about 5% (roughly 96px) relative to \"INSTAGRAMMABLE\"."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "fix.reveal.kept",
|
| 143 |
"m": 3,
|
| 144 |
+
"dimension": "interaction",
|
| 145 |
"w": 1.0,
|
| 146 |
+
"description": "The fade-in behavior itself is retained after the fix: a case study area that has never entered the viewport still transitions from transparent/offset-down to opaque when scrolled into place, rather than being static and visible from the start."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "fix.regress.works",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "visual",
|
| 152 |
"w": 1.0,
|
| 153 |
+
"description": "The fix does not damage neighboring layout: the positions and size relationships of the three case study images are unchanged (first case image on the left, second full-width, third on the right), the three ↳ arrows are still in their original positions (the second case's arrow to the right of the heading, the third's at the lower left of the image), and clicking an arrow still gives a zoom-pulse feedback."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "fix.regress.booking",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "functional",
|
| 159 |
"w": 1.0,
|
| 160 |
+
"description": "The fix does not damage the booking section: after the fix the stats are still 43 / 39 / 541 (assuming no orders placed), Gamma + in-stock-only is still 9 rows, and the three-step booking chain still completes."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "del.marquee.gone",
|
| 164 |
"m": 4,
|
| 165 |
+
"dimension": "coverage",
|
| 166 |
"w": 1.5,
|
| 167 |
+
"description": "The black scrolling marquee's text \"DARE TO GO HYPER?\" and \"CONTACT US\" and the big purple cursor graphic no longer appear anywhere on the page, and there is no residual black empty strip or blank gap taller than one screen."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "del.footer.intact",
|
| 171 |
"m": 4,
|
| 172 |
+
"dimension": "visual",
|
| 173 |
"w": 1.0,
|
| 174 |
+
"description": "The footer stays as-is: blue background, white text, the three lines of agency intro copy, the Facebook and Instagram links, © Tria 2021 and Privacy policy all present, and the round tria→hyper→Branding badge in the lower right unchanged in position."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "del.nav.contact",
|
| 178 |
"m": 4,
|
| 179 |
+
"dimension": "interaction",
|
| 180 |
"w": 1.5,
|
| 181 |
+
"description": "Clicking Contact in the top nav scrolls to the booking section (that section's heading enters the viewport) — neither no reaction, nor jumping back to the top of the page or to the footer."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.regress.stats",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "functional",
|
| 187 |
"w": 1.0,
|
| 188 |
+
"description": "After removing the marquee the booking section is intact: the stats are still 43 / 39 / 541, Delta + in-stock-only is still 7 rows, and a three-step booking can still be completed with the total remaining seats decreasing correctly."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.regress.indent",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "visual",
|
| 194 |
"w": 1.0,
|
| 195 |
+
"description": "After removing the marquee, scrolling through the case study area again still shows the stair-step indentation of the three case study headings and eyebrows (they did not regress to all-left alignment)."
|
| 196 |
}
|
| 197 |
],
|
| 198 |
"inject": {
|
| 199 |
+
"type": "style override",
|
| 200 |
+
"saboteur_prompt": "After the works (case studies) style block in src/styles.css, insert a higher-priority override rule that only takes effect after the scroll fade-in completes, making the already-shown case study headings lose their stair-step indentation. Concretely: after the `.work-title .line` rule add a rule of the form `.reveal.is-visible .eyebrow, .reveal.is-visible .work-title .line { padding-left: 0; }` (the selector and writing style should match the rest of the file, with no comments and no !important so it isn't too conspicuous). Do not modify Works.jsx, useReveal.js, or any inline --indent value; do not touch the styles of header, hero, marquee, footer; must not produce console errors or layout errors. The effect should be: on first page load, while the elements haven't entered the viewport yet, the indentation is still there, but once the fade-in class is added, the three case studies' eyebrows and title lines all collapse to left alignment."
|
| 201 |
},
|
| 202 |
"qc_static": [],
|
| 203 |
"review_status": "needs_human"
|
| 204 |
+
}
|
tasks/c29/task.json
CHANGED
|
@@ -3,209 +3,209 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"repair": true,
|
| 17 |
-
"inject_type": "
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_en_000807",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
-
"title": "Dispatch
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
},
|
| 37 |
{
|
| 38 |
-
"operator": "
|
| 39 |
-
"request": "
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "remove.copy.gone",
|
| 45 |
"m": 1,
|
| 46 |
-
"dimension": "
|
| 47 |
"w": 1.5,
|
| 48 |
-
"description": "
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "remove.discs.gone",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.0,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "remove.seam",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.5,
|
| 62 |
-
"description": "Lost Recording
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "remove.backtotop",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.0,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "skin.bg.navy",
|
| 73 |
"m": 2,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.5,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "skin.accent.links",
|
| 80 |
"m": 2,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.5,
|
| 83 |
-
"description": "Discover the design
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "skin.accent.controls",
|
| 87 |
"m": 2,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "skin.wordmark",
|
| 94 |
"m": 2,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.0,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "skin.region.count",
|
| 101 |
"m": 2,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.5,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "skin.region.select",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.0,
|
| 111 |
-
"description": "1440
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "skin.restraint",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.0,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "fix.enter.scroll",
|
| 122 |
"m": 3,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.5,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "fix.anchor.link",
|
| 129 |
"m": 3,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.0,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "fix.regress.menu",
|
| 136 |
"m": 3,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.0,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "fix.regress.footer",
|
| 143 |
"m": 3,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.0,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "fix.chain.newsletter",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.5,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "rwd.no.hscroll",
|
| 157 |
"m": 4,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.5,
|
| 160 |
-
"description": "375
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "rwd.region.mobile",
|
| 164 |
"m": 4,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.0,
|
| 167 |
-
"description": "375
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "rwd.hero.stack",
|
| 171 |
"m": 4,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.5,
|
| 174 |
-
"description": "375
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "rwd.enter.mobile",
|
| 178 |
"m": 4,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.5,
|
| 181 |
-
"description": "375
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "rwd.state.coupling",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.0,
|
| 188 |
-
"description": "375
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "rwd.desktop.intact",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.0,
|
| 195 |
-
"description": "1440
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "rwd.tablet",
|
| 199 |
"m": 4,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.0,
|
| 202 |
-
"description": "768
|
| 203 |
}
|
| 204 |
],
|
| 205 |
"inject": {
|
| 206 |
-
"type": "
|
| 207 |
-
"saboteur_prompt": "
|
| 208 |
},
|
| 209 |
"qc_static": [],
|
| 210 |
"review_status": "needs_human"
|
| 211 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"make responsive",
|
| 7 |
+
"restyle",
|
| 8 |
+
"repair",
|
| 9 |
+
"remove section"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"state coupling"
|
| 14 |
],
|
| 15 |
+
"domain": "content & news",
|
| 16 |
"repair": true,
|
| 17 |
+
"inject_type": "selector drift",
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_en_000807",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
+
"title": "Dispatch homepage revamp: remove section, night-reading skin, fix broken scrolling, and three-tier responsive layout",
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
+
"operator": "remove section",
|
| 27 |
+
"request": "The most urgent first: that whole light-colored \"The Button / digital proof of authenticity\" section is being taken down this week — legal hasn't approved it. Remove the whole section from the homepage — the entire light-background block, the small line DIGITAL PROOF OF AUTHENTICITY above it, the big heading 'Introducing The Button: our digital superhero', the Read the story link below, and the six circular relief patterns floating all over — leave none of it. After removing it, don't leave a white seam in the middle of the page or a big blank screen; the Lost Recording short film section should flow straight into the footer. The back-to-top arrow in the top right of the footer must still work as before."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "restyle",
|
| 31 |
+
"request": "Next, restyle the whole site with the night-reading skin of our news brand \"Dispatch\". Stop using that dead black as the base color — go with ink blue #0B1520 uniformly (page body background, the dark canvas of the fragrance + subscription block, and the footer are all this color); the all-caps small labels at the top of each section and the subtitle on the first screen — these explanatory small texts — use the cool gray #9AA7B4 uniformly; all clickable text links (Discover the design, Discover the fragrances, Explore the Film, the subscription one), the background of the first-screen Enter button, the footer back-to-top arrow, and the selected state of the subscription identity — all use our amber #C8922F. Stylistically we're an editorial house, keep it restrained — the big heading on the first screen stays white, don't turn the screen gold; don't tint the section headings either. The rule is: only clickable and selected things use amber, one rule across the site. Also update the brand attribution: the two moooi wordmarks — in the first-screen header and the top bar of the menu overlay — both become lowercase dispatch (keep that wide letter-spacing feel), and the footer copyright line becomes ©2025 Dispatch; leave the other English copy alone this round. Also the country selector in the footer: change the button label to Select your region, and make the list match our current distribution regions. Ops sent me this string (scrambled order, sort it out yourself): Netherlands, Belgium, Luxembourg, Germany, France, Italy, Spain, Portugal, Switzerland, Austria, Denmark, Sweden, Norway, Finland, Iceland, Ireland, United Kingdom, Poland, Czechia, Hungary, Greece, Türkiye, Israel, United Arab Emirates, South Africa, India, Thailand, Vietnam, Singapore, Malaysia, Indonesia, Philippines, China, Japan, South Korea, Australia, New Zealand, Canada, United States, Brazil, Chile, Argentina — don't miss a single one; opening it shows the full list, selecting someone shows them on the button and collapses the list."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "repair",
|
| 35 |
+
"request": "Readers complain about an old problem: clicking the Enter button in the middle of the first screen does nothing, and Discover the design in the Boogie section on the second screen doesn't work either; Enter used to smoothly scroll to the Boogie screen, and Discover the design used to pin the Boogie screen to the very top of the viewport. Find it and fix it, and don't break other buttons while you're at it (menu badge, Sound toggle, footer region selector, back to top all must keep working). Also check that the subscription path is complete: choose an identity → enter email → click subscribe shows a thank-you message → editing the email again returns to a submittable state, and the already-selected identity must not be reset in the middle."
|
| 36 |
},
|
| 37 |
{
|
| 38 |
+
"operator": "make responsive",
|
| 39 |
+
"request": "Finally, fix mobile. Right now it's terrible on phones: the first-screen text is crammed together and overlapping, and you can drag a horizontal scrollbar out of the sides. Please tune the homepage at all three tiers — phone 375, tablet 768, desktop 1440: on the first screen the small label, big heading, subtitle, Enter, Sound, and Menu badge should stack top to bottom without overlapping and all stay within the first screen; the menu overlay, subscription form, footer navigation, and region list must all be fully usable on mobile, not overflow the screen, and be tappable. Don't mess up the desktop version's look; the previously decided skin and the just-fixed scrolling must work equally well on small screens."
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "remove.copy.gone",
|
| 45 |
"m": 1,
|
| 46 |
+
"dimension": "coverage",
|
| 47 |
"w": 1.5,
|
| 48 |
+
"description": "Searching the whole page at any scroll position, the texts 'Introducing The Button', 'Digital proof of authenticity' (including case variants) and 'Read the story' do not exist; and there is no \"full-screen light block\" anywhere — defined as a visible block whose background RGB has all three channels ≥230 and whose own visible height is ≥80% of the viewport height."
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "remove.discs.gone",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "visual",
|
| 54 |
"w": 1.0,
|
| 55 |
+
"description": "No circular relief decorative image is rendered any more (all six original disc-a~disc-f images are gone, and the page's total image count decreases by 6 accordingly)."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "remove.seam",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.5,
|
| 62 |
+
"description": "The vertical gap between the bottom edge of the Lost Recording short film block and the top edge of the footer is no more than 8px, with no other visible block or blank screen between them."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "remove.backtotop",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "interaction",
|
| 68 |
"w": 1.0,
|
| 69 |
+
"description": "After scrolling to the bottom of the page and clicking the up arrow in the footer, the page returns to the top (vertical scroll back to 0±5px) and the first-screen heading 'A LIFE EXTRAORDINARY' reappears in the viewport."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "skin.bg.navy",
|
| 73 |
"m": 2,
|
| 74 |
+
"dimension": "visual",
|
| 75 |
"w": 1.5,
|
| 76 |
+
"description": "The page body background (body / the container holding the first screen), the dark canvas containing 'Stay in the loop', and the footer all sample as #0B1520 (±3 per channel) at the three points, no longer the original #010101/near-black."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "skin.accent.links",
|
| 80 |
"m": 2,
|
| 81 |
+
"dimension": "visual",
|
| 82 |
"w": 1.5,
|
| 83 |
+
"description": "The text and underline colors of the Discover the design, Discover the fragrances, Explore the Film, and subscribe-submit text links are all #C8922F (±3); meanwhile the first-screen big heading 'A LIFE EXTRAORDINARY' is still white (near #FFFFFF) and has not been tinted amber."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "skin.accent.controls",
|
| 87 |
"m": 2,
|
| 88 |
+
"dimension": "visual",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "The background of the first-screen Enter button is #C8922F (±3), and the stroke/fill of the footer back-to-top arrow is also #C8922F (±3)."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "skin.wordmark",
|
| 94 |
"m": 2,
|
| 95 |
+
"dimension": "coverage",
|
| 96 |
"w": 1.0,
|
| 97 |
+
"description": "All three brand attribution spots have been replaced: the wordmarks in the first-screen header and the menu overlay top bar both display lowercase 'dispatch' with clearly wide letter-spacing (tracking no less than 0.3× the font size), and the footer copyright line displays '©2025 Dispatch'; moooi/Moooi no longer appears in these three places. Other English copy on the page (such as the subscribe button copy) is not constrained by this item."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "skin.region.count",
|
| 101 |
"m": 2,
|
| 102 |
+
"dimension": "functional",
|
| 103 |
"w": 1.5,
|
| 104 |
+
"description": "The footer region button's initial label is 'Select your region'; opening it shows exactly 42 items, including Türkiye, United Arab Emirates, Argentina, and Czechia."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "skin.region.select",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "interaction",
|
| 110 |
"w": 1.0,
|
| 111 |
+
"description": "At 1440 wide, clicking Argentina in the expanded region list collapses the list and changes the button text to Argentina; opening the list again still shows 42 items, and after selecting Japan the button text becomes Japan."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "skin.restraint",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "visual",
|
| 117 |
"w": 1.0,
|
| 118 |
+
"description": "Explanatory small text is cool gray #9AA7B4 (±3): the first-screen 'Moooi presents' label, the fragrance section's 'Brand-new' label, the short film section's 'A series of short films' label and the first-screen subtitle 'A unique journey through the unexpected.' all satisfy this at four sample points; and these four plus the Boogie and fragrance section headings are all non-amber, i.e. amber appears only on clickable elements and selected states, consistently across the four sections."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "fix.enter.scroll",
|
| 122 |
"m": 3,
|
| 123 |
+
"dimension": "functional",
|
| 124 |
"w": 1.5,
|
| 125 |
+
"description": "At 1440 wide, with the page at the top, clicking Enter causes the page to scroll down (vertical scroll > 500px), and after scrolling stops the heading 'Boogie to the rhythm of Space' is fully in the viewport."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "fix.anchor.link",
|
| 129 |
"m": 3,
|
| 130 |
+
"dimension": "functional",
|
| 131 |
"w": 1.0,
|
| 132 |
+
"description": "First scroll the page to the fragrance section ('A scent journey' heading visible) as the starting point, then click 'Discover the design' in the Boogie section: the page should scroll up and pin the Boogie section to the very top of the screen (the block's top edge within 10px of the viewport top, its heading in the viewport); if the viewport position after the click is unchanged from the moment of clicking, it fails."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "fix.regress.menu",
|
| 136 |
"m": 3,
|
| 137 |
+
"dimension": "interaction",
|
| 138 |
"w": 1.0,
|
| 139 |
+
"description": "After the fix, clicking the Menu badge still opens the full-screen menu overlay showing the six links Products, Brand-new, Stories, Spaces, Showrooms, Contact; clicking Close closes the overlay, and the page's vertical scroll position is the same as before opening the menu (difference no more than 5px)."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "fix.regress.footer",
|
| 143 |
"m": 3,
|
| 144 |
+
"dimension": "functional",
|
| 145 |
"w": 1.0,
|
| 146 |
+
"description": "After the fix the footer region selector can still expand 42 items and complete a selection (after selecting Canada the button shows Canada); clicking the first-screen Sound button toggles back and forth between 'Sound on' and 'Sound off'; the Enter button background is still #C8922F (±3)."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "fix.chain.newsletter",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "interaction",
|
| 152 |
"w": 1.5,
|
| 153 |
+
"description": "The full chain works: click Press → Press is highlighted with the highlight color #C8922F (±3) and Consumer loses its highlight at the same time → type reader@dispatch.io into the email box and submit, the submit button copy becomes the thank-you copy → type one more character into the email box, the button copy reverts to the initial subscribe copy, and Press is still the selected identity (not reset to Consumer)."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "rwd.no.hscroll",
|
| 157 |
"m": 4,
|
| 158 |
+
"dimension": "visual",
|
| 159 |
"w": 1.5,
|
| 160 |
+
"description": "At a 375-wide viewport the page produces no horizontal scrolling (document scroll width no more than viewport width +1px), including with the footer region list expanded; and the five footer navigation items (region button, Press Area, Shipping & Return Policy, FAQ, Newsletter) are all fully visible, untruncated, with both left and right edges inside the viewport."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "rwd.region.mobile",
|
| 164 |
"m": 4,
|
| 165 |
+
"dimension": "interaction",
|
| 166 |
"w": 1.0,
|
| 167 |
+
"description": "At 375 wide, clicking the footer region button expands the list and the items are fully visible (not clipped by the viewport's left/right edges); clicking Canada collapses the list and the button text becomes Canada; then clicking the footer FAQ link produces no page error and no horizontal displacement."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "rwd.hero.stack",
|
| 171 |
"m": 4,
|
| 172 |
+
"dimension": "visual",
|
| 173 |
"w": 1.5,
|
| 174 |
+
"description": "At 375 wide the six elements on the first screen — small label, big heading, subtitle, Enter button, Sound button, Menu badge — are arranged top to bottom, with no overlapping bounding boxes between any two, and all within the first-screen block's vertical range (not spilling into the next block)."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "rwd.enter.mobile",
|
| 178 |
"m": 4,
|
| 179 |
+
"dimension": "interaction",
|
| 180 |
"w": 1.5,
|
| 181 |
+
"description": "At 375 wide, clicking Enter still scrolls to the Boogie section (the heading 'Boogie to the rhythm of Space' enters the viewport); after clicking Menu to open the overlay, each of the six links' text on its line is fully visible, neither truncated nor overflowing the screen, and clicking any one of them closes the overlay."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "rwd.state.coupling",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "functional",
|
| 187 |
"w": 1.0,
|
| 188 |
+
"description": "At 375 wide the subscription section's three identity options and email input are all fully visible and within the viewport width, and after clicking Press the highlight color is still #C8922F (±3); meanwhile at all three widths 375, 768, and 1440 the 'Introducing The Button' copy cannot be found and no full-screen light block with background RGB all channels ≥230 exists."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "rwd.desktop.intact",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "visual",
|
| 194 |
"w": 1.0,
|
| 195 |
+
"description": "At 1440 wide the desktop layout stays as-is: the first-screen big heading is large centered serif uppercase text (visibly larger than at 375), the Boogie section is still a full-screen background image with centered copy, and the footer navigation links are still arranged vertically, not polluted by mobile styles."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "rwd.tablet",
|
| 199 |
"m": 4,
|
| 200 |
+
"dimension": "functional",
|
| 201 |
"w": 1.0,
|
| 202 |
+
"description": "At 768 wide there is likewise no horizontal scrolling, and clicking Enter scrolls the page so that the Boogie section heading enters the viewport."
|
| 203 |
}
|
| 204 |
],
|
| 205 |
"inject": {
|
| 206 |
+
"type": "selector drift",
|
| 207 |
+
"saboteur_prompt": "In src/components/FeatureDome.jsx, change the id on that section from \"brand-new\" to \"feature-dome\" (change only this one attribute value). Do not modify document.getElementById('brand-new') in scrollToNext in src/components/Hero.jsx, and do not modify the text-link's href=\"#brand-new\" inside FeatureDome. The result: clicking the Enter button on the first screen and clicking 'Discover the design' both no longer scroll to that section, with no console errors (getElementById returns null and is swallowed by optional chaining; the anchor has no matching target). Do not add any comments or TODOs, do not change styles, copy, other components, or any unrelated functionality; don't leave explanatory strings in the commit."
|
| 208 |
},
|
| 209 |
"qc_static": [],
|
| 210 |
"review_status": "needs_human"
|
| 211 |
+
}
|
tasks/c30/task.json
CHANGED
|
@@ -3,216 +3,216 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"repair": true,
|
| 17 |
-
"inject_type": "
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_en_000645",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
-
"title": "DesignBetter
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
},
|
| 37 |
{
|
| 38 |
-
"operator": "
|
| 39 |
-
"request": "
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "works.first.page",
|
| 45 |
"m": 1,
|
| 46 |
-
"dimension": "
|
| 47 |
"w": 1.5,
|
| 48 |
-
"description": "
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "works.last.page",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "works.filter.count",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.0,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "works.filter.all",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.0,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "works.combo.sort",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.5,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "works.card.fields",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "works.cards.titles",
|
| 87 |
"m": 1,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "works.visual.style",
|
| 94 |
"m": 1,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.0,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "basket.badge.idempotent",
|
| 101 |
"m": 2,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.5,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "basket.price.discount",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "basket.remove.recalc",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.0,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "basket.clear.empty",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.0,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "basket.filter.coupling",
|
| 129 |
"m": 2,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.5,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "basket.header.style",
|
| 136 |
"m": 2,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.0,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "donut.major.arc",
|
| 143 |
"m": 3,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.5,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "donut.segments.order",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.0,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "donut.labels.intact",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.0,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "donut.section.regression",
|
| 164 |
"m": 3,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.5,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "donut.app.regression",
|
| 171 |
"m": 3,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.0,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "cta.removed",
|
| 178 |
"m": 4,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.5,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "cta.gap.clean",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.0,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "cta.header.link",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.5,
|
| 195 |
-
"description": "
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "cta.text.link",
|
| 199 |
"m": 4,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.0,
|
| 202 |
-
"description": "
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "cta.state.preserved",
|
| 206 |
"m": 4,
|
| 207 |
-
"dimension": "
|
| 208 |
"w": 1.5,
|
| 209 |
-
"description": "
|
| 210 |
}
|
| 211 |
],
|
| 212 |
"inject": {
|
| 213 |
-
"type": "
|
| 214 |
-
"saboteur_prompt": "
|
| 215 |
},
|
| 216 |
"qc_static": [],
|
| 217 |
"review_status": "needs_human"
|
| 218 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"make interactive",
|
| 7 |
+
"add state",
|
| 8 |
+
"repair",
|
| 9 |
+
"remove section"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"exact numeric assertions"
|
| 14 |
],
|
| 15 |
+
"domain": "portfolio",
|
| 16 |
"repair": true,
|
| 17 |
+
"inject_type": "condition boundary error",
|
| 18 |
"seed_meta": {
|
| 19 |
"repo_src": null,
|
| 20 |
"exclude_slug": "react_en_000645",
|
| 21 |
"repo_shot": true
|
| 22 |
},
|
| 23 |
+
"title": "DesignBetter report site overhaul: studio case study portfolio and proposal basket",
|
| 24 |
"milestones": [
|
| 25 |
{
|
| 26 |
+
"operator": "make interactive",
|
| 27 |
+
"request": "This site is just a report right now — we're planning to turn it into the studio's public case study entry point. After the big \"How design teams level up\" section and before the download CTA at the bottom, insert an \"Our case studies\" block.\n\nI haven't put the case list into a table, so let me dictate it — just lay them out following the pattern: 42 in total, numbered from P001 all the way to P042. Industry cycles with the number — P001 finance, P002 healthcare, P003 retail, P004 education, P005 mobility, then P006 goes back to finance, cycling like that to fill all 42. Launch year cycles too: P001 is 2019, increasing one year at a time, so P006 is 2024, and P007 restarts from 2019. Person-days are easy to remember: number × 2 plus 10 (so P001 is 12 person-days, P042 is 94 person-days).\n\nEach card must show all four: number, industry, launch year, and person-days; make up the titles yourselves, just don't repeat any.\n\nDon't cram too many on one screen: 12 per page, with pagination below, and it should be clear which page you're on and how many pages there are in total; page 1 must not allow going back and the last page must not allow going forward.\n\nAbove the list put a row of industry filters (including \"All\") and a sort toggle: default by number ascending; the other one is called \"Newest first\", newer years first, and within the same year smaller numbers first. Filter and sort must work together, and pagination follows the current filter and sort.\n\nVisually it should be one system with the current site — don't make a component that looks bolted on as an afterthought."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "add state",
|
| 31 |
+
"request": "Looking alone isn't enough; clients need to pick. Add an \"Add to proposal basket\" button to each case card; an added card must clearly show that it's already in the basket, and clicking again must not count it twice.\n\nThe top navigation must show at any time how many items are in the basket — when there are none, don't show a number, so people don't get confused.\n\nOpening the basket shows the selected list; each item can be removed individually, and there's a one-click clear-all. The list must do the math: one person-day is 1880, and the total is the sum over the whole basket; 3 items or more (3 included) gets a 7% discount on the whole order, with the digits after the decimal point simply dropped after the calculation; under 3 items is at full price, and don't show a discount.\n\nWhen the basket is empty there must be a prompt, not a blank area, and the \"Generate proposal\" button must not be clickable then.\n\nTwo more things to note: when filtering hides some cases, they naturally can't be added; conversely, paging, changing filters, or changing sort must not lose what's already been selected.\n\nThe basket number must be visible at a glance, but don't mess up the original look of the top navigation."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "repair",
|
| 35 |
+
"request": "Also there's an old bug nobody has dealt with: when you scroll down to the donut chart in \"A view of the design universe\", the largest segment (Enterprise 71%) is drawn wrong — it's supposed to go a long way around the ring, but now it's become a short arc cutting diagonally across from the side, and the whole ring is missing a big chunk, looking like only twenty-something percent. The other segments Agency, Nonprofit, Government and the four text labels are all correct. Please fix it, and while fixing don't break anything else in this block, and don't affect the just-built case study list and proposal basket."
|
| 36 |
},
|
| 37 |
{
|
| 38 |
+
"operator": "remove section",
|
| 39 |
+
"request": "Finally, we're not keeping the whole \"Ready for liftoff?\" report download CTA block — the starry background, that planet-ground illustration, the string of insights on the right and the button, all go, delete the whole section cleanly, don't leave an empty background strip below, and the footer should follow directly.\n\nBut the entries on the page that originally pointed to it can't become dead: the button on the right of the top nav, and the pink \"Get the full report.\" text link in the body, both change to take people to the case study block (or open the proposal basket directly) — clicking must have a reaction.\n\nAfter changing, check it yourself again: the donut chart is still in its fixed state, and the items already selected in the basket must not be cleared."
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "works.first.page",
|
| 45 |
"m": 1,
|
| 46 |
+
"dimension": "coverage",
|
| 47 |
"w": 1.5,
|
| 48 |
+
"description": "The \"Our case studies\" block appears after the Levels (How design teams level up) content; in the default state the first page shows exactly 12 cards, numbered P001 through P012 in order, and the page shows that the current page is 1 of 4 total (any equivalent wording such as \"Page 1 / 4\" or \"1/4\" is fine)."
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "works.last.page",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "functional",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "In the default sort without filters, going to page 4 shows only 6 cards numbered P037–P042; continuing to click \"Next\" leaves the page content and page number unchanged, and after returning to page 1, clicking \"Previous\" is likewise unchanged."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "works.filter.count",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.0,
|
| 62 |
+
"description": "After selecting the industry \"Healthcare\" the list has exactly 9 cards left (P002, P007, P012, P017, P022, P027, P032, P037, P042), and the page info shows current page 1 of 1 total."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "works.filter.all",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "functional",
|
| 68 |
"w": 1.0,
|
| 69 |
+
"description": "With \"Healthcare\" filtered and sort set to \"Newest first\", clicking \"All\" restores the list to 42 items (12 on the first page), total pages back to 4 and current page back to 1, while the \"Newest first\" sort is still in effect: the first card on the first page is P006 (2024, the smallest number in that year), not P001."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "works.combo.sort",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "functional",
|
| 75 |
"w": 1.5,
|
| 76 |
+
"description": "With the \"Healthcare\" filter active, switching to \"Newest first\" makes the first card P012 (2024), the second P042 (2024), and the last P037 (2019)."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "works.card.fields",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "coverage",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "Card P014 simultaneously shows the number P014, industry \"Education\", year 2020, 38 person-days, and a non-empty title."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "works.cards.titles",
|
| 87 |
"m": 1,
|
| 88 |
+
"dimension": "functional",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "Browsing all 4 pages and 42 cards under the default sort, every title is non-empty, and the 42 titles are pairwise distinct (no title appears twice)."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "works.visual.style",
|
| 94 |
"m": 1,
|
| 95 |
+
"dimension": "visual",
|
| 96 |
"w": 1.0,
|
| 97 |
+
"description": "The case study block follows the site's existing typographic language: the section heading is large sans-serif bold black text (same style as the \"A view of the design universe\" class), the filter selected state/buttons use the site's pink accent family (#ff3366 / #f6335f and similar), with no browser-default blue links, gray system borders, or default control looks that clash with the site."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "basket.badge.idempotent",
|
| 101 |
"m": 2,
|
| 102 |
+
"dimension": "interaction",
|
| 103 |
"w": 1.5,
|
| 104 |
+
"description": "After clicking \"Add to proposal basket\" on P001 the nav badge shows 1 and that card's button changes to the added state; clicking that card's button again leaves the badge at 1 and the basket still has only 1 item."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "basket.price.discount",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "functional",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "With P001 + P014 in the basket the total amount equals 94000 (with or without thousands separators), with no discount notice; after adding P042 the count becomes 3, the total amount equals 251769 (93% of 270720 with decimals dropped), and a discount notice appears."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "basket.remove.recalc",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "functional",
|
| 117 |
"w": 1.0,
|
| 118 |
+
"description": "In the above 3-item state, removing P014 item by item makes the badge 2, leaves P001 and P042 in the basket, makes the total amount equal 199280, and the discount notice disappears."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "basket.clear.empty",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "interaction",
|
| 124 |
"w": 1.0,
|
| 125 |
+
"description": "The basket panel provides a clear-all control; clicking it with 2 or more items in the basket empties the basket in one go: the nav badge no longer shows any number, the basket shows empty-state prompt copy rather than a blank area, and the \"Generate proposal\" button becomes unclickable (clicking it changes nothing on the page)."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "basket.filter.coupling",
|
| 129 |
"m": 2,
|
| 130 |
+
"dimension": "functional",
|
| 131 |
"w": 1.5,
|
| 132 |
+
"description": "First add P001 (finance) and then switch the filter to \"Retail\"; P001 does not appear in the list and therefore can't be added again; in this state, paging, switching filters, and switching sort leave the badge number unchanged, and when returning to a view where P001 is visible it still shows as added."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "basket.header.style",
|
| 136 |
"m": 2,
|
| 137 |
+
"dimension": "visual",
|
| 138 |
"w": 1.0,
|
| 139 |
+
"description": "The badge uses the site's accent color family (pink/red) and the same family as the case block's filter selected state; meanwhile the top nav's original elements are unchanged — the DesignBetter owl mark, the 5 uppercase nav texts, the white underline active state on \"Design Maturity Model\", and the white outlined pill button at the top right all stay as they were."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "donut.major.arc",
|
| 143 |
"m": 3,
|
| 144 |
+
"dimension": "visual",
|
| 145 |
"w": 1.5,
|
| 146 |
+
"description": "The Enterprise pink segment in the donut runs continuously around more than half the circumference (about 71% of the full circle), the four segments join end to end to form a closed ring, and there is no short arc cutting across the inside of the circle or big gap in the ring."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "donut.segments.order",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "visual",
|
| 152 |
"w": 1.0,
|
| 153 |
+
"description": "The four segments' colors and clockwise order remain Enterprise pink → Agency cyan → Nonprofit green → Government blue-purple, with the Agency cyan segment occupying about a quarter of the full circle."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "donut.labels.intact",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "coverage",
|
| 159 |
"w": 1.0,
|
| 160 |
+
"description": "The four labels are still \"Nonprofit 2%\", \"Government 1%\", \"Agency 25%\", \"Enterprise 71%\", in the same positions as before the fix (two outside the top of the ring, two inside the ring at mid-left and center)."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "donut.section.regression",
|
| 164 |
"m": 3,
|
| 165 |
+
"dimension": "functional",
|
| 166 |
"w": 1.5,
|
| 167 |
+
"description": "After the fix the rest of the Universe block is unaffected: the three headings and body texts \"24 industries\", \"2,200 companies\", \"77 countries\", and the world map image are still in their original positions with unchanged copy."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "donut.app.regression",
|
| 171 |
"m": 3,
|
| 172 |
+
"dimension": "functional",
|
| 173 |
"w": 1.0,
|
| 174 |
+
"description": "After the fix the browser console has no errors, and the case block's filter/sort/pagination and the proposal basket count and total amount (e.g. P001+P014 still totals 94000) still work correctly per the values above."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "cta.removed",
|
| 178 |
"m": 4,
|
| 179 |
+
"dimension": "coverage",
|
| 180 |
"w": 1.5,
|
| 181 |
+
"description": "Nowhere on the page do the \"Ready for liftoff?\" heading, \"Get these business-critical insights\" and its three list items, the starry dot background, or the planet-ground illustration appear any more."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "cta.gap.clean",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "visual",
|
| 187 |
"w": 1.0,
|
| 188 |
+
"description": "After deletion the last content block connects directly to the light pink footer with no residual dark purple/starry blank strip between them; the footer's three links and the \"© InVision 2019\" copy stay as-is."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "cta.header.link",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "interaction",
|
| 194 |
"w": 1.5,
|
| 195 |
+
"description": "Clicking the button at the top right of the top nav scrolls the page to the case study block and makes it visible (or opens the proposal basket panel directly), and no longer does nothing on click."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "cta.text.link",
|
| 199 |
"m": 4,
|
| 200 |
+
"dimension": "interaction",
|
| 201 |
"w": 1.0,
|
| 202 |
+
"description": "Clicking the pink \"Get the full report.\" text link in the Universe block body likewise reaches the case study block or opens the proposal basket, with a visible change in page position/state rather than staying put."
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "cta.state.preserved",
|
| 206 |
"m": 4,
|
| 207 |
+
"dimension": "functional",
|
| 208 |
"w": 1.5,
|
| 209 |
+
"description": "After the deletion changes, the donut's Enterprise segment is still a correctly closed large arc, and the cases added to the basket before deletion are still there (the badge number and total amount value match before deletion, not cleared or zeroed)."
|
| 210 |
}
|
| 211 |
],
|
| 212 |
"inject": {
|
| 213 |
+
"type": "condition boundary error",
|
| 214 |
+
"saboteur_prompt": "Modify only the arcPath function in src/components/Universe.jsx: change the large-arc threshold from 0.5 to 0.75, i.e. change `const large = endFrac - startFrac > 0.5 ? 1 : 0` to `const large = endFrac - startFrac > 0.75 ? 1 : 0`. This makes Enterprise (span about 0.708) drawn as a small arc, so the largest segment of the ring becomes a short arc taking a shortcut across the circle, leaving a big gap in the ring, while the other three segments are unaffected. Do not add any comments, do not change any logic other than variable names, do not change data (SEGMENTS values and label texts stay unchanged), styles, or other files, and ensure the page has no console errors."
|
| 215 |
},
|
| 216 |
"qc_static": [],
|
| 217 |
"review_status": "needs_human"
|
| 218 |
+
}
|
tasks/c31/task.json
CHANGED
|
@@ -3,200 +3,200 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {},
|
| 17 |
-
"title": "
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
-
"operator": "
|
| 21 |
-
"request": "
|
| 22 |
},
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "list.count.paging",
|
| 39 |
"m": 1,
|
| 40 |
-
"dimension": "
|
| 41 |
"w": 1.5,
|
| 42 |
-
"description": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "filter.pet.empty",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "sort.default.top",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.0,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "cart.badge.dedup",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.5,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "empty.states",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.0,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "search.name.or.shop",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "seckill.price.70",
|
| 81 |
"m": 1,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.0,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "skin.dark.global",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "skin.accent.states",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.0,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "skin.keep.behavior",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.5,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "skin.card.fields",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.0,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "skin.empty.dark",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.0,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "block.seckill.removed",
|
| 123 |
"m": 3,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.5,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "discount.prices",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.5,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "discount.sort.low",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.0,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "discount.counts.intact",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.0,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "discount.badge.tone",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.0,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "order.row.controls",
|
| 158 |
"m": 4,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.0,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "order.wizard.steps",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "order.amount.exact",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.5,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "order.fee.threshold",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.0,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "order.validate.block",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.0,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "order.submit.idempotent",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.5,
|
| 196 |
-
"description": "
|
| 197 |
}
|
| 198 |
],
|
| 199 |
"inject": null,
|
| 200 |
"qc_static": [],
|
| 201 |
"review_status": "needs_human"
|
| 202 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"restyle",
|
| 8 |
+
"remove section",
|
| 9 |
+
"make interactive"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"boundary and error paths"
|
| 14 |
],
|
| 15 |
+
"domain": "local services",
|
| 16 |
"seed_meta": {},
|
| 17 |
+
"title": "Alley Corner community home-service booking site: build from scratch, night redesign, and checkout",
|
| 18 |
"milestones": [
|
| 19 |
{
|
| 20 |
+
"operator": "generate",
|
| 21 |
+
"request": "The new project is called \"Alley Corner\", a community home-service booking site, desktop-first — build the whole site from scratch.\n\nA top nav: on the left the site name \"Alley Corner\" plus a small line \"Things at your doorstep — leave them to Alley Corner\", in the middle a search box (searching by service name or shop name is fine), on the right a \"My bookings\" entry with a numeric badge showing how many services are currently in the list; when the list is empty the badge must not show.\n\nThe homepage is laid out top to bottom like this: first a hero banner, the big slogan \"Things at your doorstep — leave them to Alley Corner\", with a line of small text below \"Cleaning · Repairs · Nails · Pets · Errands — at your door within an hour\"; next a horizontal \"Flash sale\" card row with 6 services, each card showing both the limited-time price and the struck-through original price, each with a \"Grab\" button that adds straight to my booking list (charged at the limited-time price); below that, the main service list.\n\nThe list needs filters and sorting above it. Six categories: Cleaning, Appliance repair, Repair & installation, Nails & lashes, Pet services, Errands; four areas: Chaoyang, Haidian, Xicheng, Fengtai; three sorts: Recommended (by monthly orders high to low), Price low to high, Rating high to low, defaulting to Recommended. The list holds 12 per page, with the pager below the list. Each card must have service name, shop, unit price (how much per hour), rating, monthly orders, area, plus an \"Add to booking\" button. Clicking the same service repeatedly must not add a second row — just show a notice that it's already in the list, and the badge number must not go up either.\n\n\"My bookings\" lists service name and unit price row by row; each row can be deleted, and at the bottom there's a total (the sum of the rows' unit prices). When the list is empty there must be an empty state reading \"No services selected yet — go pick one\"; when a search finds nothing there must also be an empty state reading \"No matching services\".\n\nThe data is what the ops colleague tossed over, 42 entries in total; I'll paste a few for you, fill in the rest the same way, just make the names sound plausible: Auntie's Here · 3-Bedroom Deep Clean 98/hour 4.9 1280 monthly orders Haidian can be urgent; CleanNest · Daily Wipe-Down 68 4.6 860 Chaoyang can be urgent; Jiebang · Sofa & Carpet Cleaning 128 4.7 430 Xicheng cannot be urgent; Old Zhang Appliances · Range Hood Deep Clean 168 4.8 2130 Chaoyang can be urgent; Elec Er · AC Refrigerant & Relocation 138 4.5 970 Fengtai can be urgent; Quickhand Wang · Drain Unclogging 158 4.4 610 Xicheng can be urgent; Screwdriver · Furniture Assembly 88 4.6 520 Haidian cannot be urgent; Fingertip Garden · At-Home Manicure 158 4.9 340 Chaoyang cannot be urgent; Lash Whisper · Lash Extensions 198 4.8 210 Haidian cannot be urgent; Paw Pal · Pet Bath & SPA 200 4.7 180 Chaoyang can be urgent; Meow Planet · At-Home Pet Feeding 60 4.9 760 Haidian can be urgent; Courier Lao Li · Same-City Pickup & Delivery 40 4.3 3050 Chaoyang can be urgent; Golden Hand · Rosewood Furniture Care 298 4.6 90 Xicheng cannot be urgent (this one goes under Repair & installation).\n\nThe counts have to match: Cleaning 10, Appliance repair 8, Repair & installation 5, Nails & lashes 6, Pet services 6, Errands 7; by area Chaoyang 14, Haidian 12, Xicheng 9, Fengtai 7. Pets hasn't been rolled out in Fengtai yet — not a single one there. Prices all fall between 40 and 298; the cheapest is Lao Li's 40, the most expensive is Golden Hand's 298; the best seller is Lao Li's at 3050, second best is Old Zhang Appliances' 2130 — for the data you fill in, monthly orders must not exceed 2130 and must not be below 50.\n\nThe flash sale slots hold these 6: CleanNest · Daily Wipe-Down, Elec Er · AC Refrigerant & Relocation, Quickhand Wang · Drain Unclogging, Screwdriver · Furniture Assembly, Paw Pal · Pet Bath & SPA, Courier Lao Li · Same-City Pickup & Delivery. The limited-time price is 30% off the original, with odd cents dropped (i.e. just cut off the decimal part, no rounding)."
|
| 22 |
},
|
| 23 |
{
|
| 24 |
+
"operator": "restyle",
|
| 25 |
+
"request": "Before launch the style needs a refresh. This version is too bright and white — we want to go night-toned: dark background across the site (near-black dark gray), primary color switched to warm orange, body text in light colors, cards as dark blocks slightly brighter than the background. Buttons, badges, the filter selected state, and the current page in pagination are all pointed out with this warm orange, while everything else unselected stays dark neutral. Be restrained — don't turn it into the multicolored look of an e-commerce sales event; the whole site is threaded through by this one primary color.\n\nA new skin is a new skin, but don't mess up what the previous version built — the list is still 12 per page, the default is still sorted by monthly orders, the badge's \"repeated adds don't increase\" logic stays the same, and no field on the cards is lost; the empty states must turn dark too, don't leave a glaring white block in the page."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "remove section",
|
| 29 |
+
"request": "Product isn't going to continue with the flash sale gimmick — remove the whole \"Flash sale\" horizontal row on the homepage, together with its heading, and don't leave a hole in the page; the content below moves up accordingly.\n\nBut the discount can't disappear along with it: the 6 services that were in the flash sale slots should be marked directly on the list cards as discounted (state clearly that it's 30% off), with the price showing the discounted number (same algorithm as before: 30% off, odd cents dropped), and adding to the booking list charges the discounted price too. The tag must be noticeable so users can tell at a glance who's discounted, but don't make a mess of the overall tone we just settled on.\n\nAlso, the total list count and the counts per category and per area must not be affected; price sorting must also sort by the discounted prices."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "make interactive",
|
| 33 |
+
"request": "Finally, wire up the checkout flow end to end.\n\nFirst, in the booking list, each row can choose a service duration of 1 to 4 hours; services marked as not urgent must not be given an urgency option, while urgent-capable ones get a toggle.\n\nClicking \"Book now\" goes through three steps: step one reviews the service, duration, and urgency, and can still change them here; step two fills in contact name, phone number, door address, and desired time slot; step three is the bill breakdown plus submit. There must be a step indicator showing which step you're on, the ability to go back to the previous step, and what you've filled in or selected must not be lost.\n\nHow the money is calculated, so we're clear: throughout, \"drop the odd cents\" means cutting off the decimal part directly, no rounding: each row first takes unit price × duration; a row of 3 hours or more gets 10% off first, with odd cents dropped; if that row has urgency checked, add 15% on top of the discounted integer, and drop the odd cents again. The rows add up to the subtotal. The first-order coupon takes 30 off orders of 200 or more, applied only once to the whole order, checked by default for the user, and they can also uncheck it. If the final amount is under 99, add a 15 basic service fee. The breakdown must list everything clearly so users can understand every line.\n\nIn step two the phone number must be 11 digits and the address must not be empty; if they're not filled in correctly, don't let the user proceed, and show a notice. After submitting, show a success page with an order number, clear the list, and reset the badge to the empty state. Clicking the submit button several times by accident must not create several orders."
|
| 34 |
}
|
| 35 |
],
|
| 36 |
"checklist": [
|
| 37 |
{
|
| 38 |
"id": "list.count.paging",
|
| 39 |
"m": 1,
|
| 40 |
+
"dimension": "coverage",
|
| 41 |
"w": 1.5,
|
| 42 |
+
"description": "With no filters, the service list has 42 entries, 12 per page, the pager has 4 pages in total, and page 4 shows exactly 6 cards."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
"id": "filter.pet.empty",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "functional",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "After filtering category \"Pet services\" the result is 6 entries; selecting area \"Fengtai\" on top of that gives 0 entries and the page shows an empty state such as \"No matching services\", with no service cards left in the list area."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "sort.default.top",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "functional",
|
| 55 |
"w": 1.0,
|
| 56 |
+
"description": "The default sort is \"Recommended\": page 1 row 1 is \"Courier Lao Li · Same-City Pickup & Delivery\" (3050 monthly orders) and row 2 is \"Old Zhang Appliances · Range Hood Deep Clean\" (2130 monthly orders), the whole page sorted by monthly orders high to low; after switching to \"Rating high to low\" the first row's rating is 4.9."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "cart.badge.dedup",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "interaction",
|
| 62 |
"w": 1.5,
|
| 63 |
+
"description": "After adding \"Auntie's Here · 3-Bedroom Deep Clean\" and \"Old Zhang Appliances · Range Hood Deep Clean\" from the list, the badge shows 2, the list has 2 rows, and the total is 266; clicking the add button on \"Auntie's Here\" again leaves the list at 2 rows and the badge at 2, and shows a notice that it's already in the list."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "empty.states",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "interaction",
|
| 69 |
"w": 1.0,
|
| 70 |
+
"description": "Deleting the list entries one by one down to 0 makes \"No services selected yet — go pick one\" appear and the top badge stop showing a number; typing \"submarine\" into the search box makes the list show \"No matching services\"."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "search.name.or.shop",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "functional",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "Typing the service-name keyword \"range hood\" into the search box matches \"Old Zhang Appliances · Range Hood Deep Clean\"; typing the shop-name keyword \"Old Zhang\" likewise matches that entry — both search modes return results."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "seckill.price.70",
|
| 81 |
"m": 1,
|
| 82 |
+
"dimension": "functional",
|
| 83 |
"w": 1.0,
|
| 84 |
+
"description": "The 6 flash sale cards show both the discounted price and the struck-through original price, with discounted prices respectively: CleanNest 47, Elec Er 96, Quickhand Wang 110, Screwdriver 61, Paw Pal 140, Courier Lao Li 28; after clicking \"Grab\" the list totals at the discounted prices."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "skin.dark.global",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "visual",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "The homepage banner, list area, filter area, and booking list all have near-black dark gray backgrounds with light body text, with no large white-background blocks anywhere on the page; the primary buttons and the \"My bookings\" badge are warm orange."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "skin.accent.states",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "visual",
|
| 97 |
"w": 1.0,
|
| 98 |
+
"description": "Filter selected states and the current page in the pager are marked in warm orange, while unselected ones are dark neutral; across the site there is only this one highlight color, with no second clashing high-saturation color scheme."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "skin.keep.behavior",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "coverage",
|
| 104 |
"w": 1.5,
|
| 105 |
+
"description": "After the restyle it still holds: 12 per page, 4 pages, the default Recommended sort's first row is still \"Courier Lao Li · Same-City Pickup & Delivery\", and repeatedly adding the same service does not increase the badge number."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "skin.card.fields",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "visual",
|
| 111 |
"w": 1.0,
|
| 112 |
+
"description": "On the dark cards all six pieces of information — service name, shop, unit price, rating, monthly orders, area — are present, and the card background is slightly brighter than the page background with clearly readable text."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "skin.empty.dark",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "visual",
|
| 118 |
"w": 1.0,
|
| 119 |
+
"description": "The list empty state and the search-no-results empty state are both dark background with light copy, and the copy is still \"No services selected yet — go pick one\" and \"No matching services\" respectively."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "block.seckill.removed",
|
| 123 |
"m": 3,
|
| 124 |
+
"dimension": "coverage",
|
| 125 |
"w": 1.5,
|
| 126 |
+
"description": "The \"Flash sale\" heading and the horizontal flash sale cards no longer appear anywhere on the homepage; the hero banner is directly followed by the filter/list area, with no abnormally tall blank placeholder in between."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "discount.prices",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "functional",
|
| 132 |
"w": 1.5,
|
| 133 |
+
"description": "These 6 entries in the list show the 30%-off tag and the discounted price: CleanNest 47, Elec Er 96, Quickhand Wang 110, Screwdriver 61, Paw Pal 140, Courier Lao Li 28; the other services' prices are unchanged (e.g. Auntie's Here is still 98)."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "discount.sort.low",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.0,
|
| 140 |
+
"description": "Switching to \"Price low to high\", row 1 is Courier Lao Li (28), and the sorting as a whole is ascending by discounted price; the last row on the last page is Golden Hand · Rosewood Furniture Care (298)."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "discount.counts.intact",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "coverage",
|
| 146 |
"w": 1.0,
|
| 147 |
+
"description": "After removing the flash sale section the list still has 42 entries in 4 pages, category \"Cleaning\" still has 10, and area \"Chaoyang\" still has 14."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "discount.badge.tone",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "visual",
|
| 153 |
"w": 1.0,
|
| 154 |
+
"description": "The discount tag is noticeable and distinguishable (e.g. a 30%-off label with a warm orange background or warm orange outline), but follows requirement 2's dark + single warm orange tone without introducing a new clashing color, and after adding to the booking list the total is charged at the discounted price."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "order.row.controls",
|
| 158 |
"m": 4,
|
| 159 |
+
"dimension": "interaction",
|
| 160 |
"w": 1.0,
|
| 161 |
+
"description": "Each booking list row can choose 1–4 hours; services marked as not urgent (e.g. Jiebang · Sofa & Carpet Cleaning, Screwdriver · Furniture Assembly) have no urgency option on that row, while urgent-capable services (e.g. Old Zhang Appliances) have an urgency toggle on that row."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "order.wizard.steps",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "interaction",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "Clicking \"Book now\" enters the three-step flow with the step indicator marking the current step; going back from step 2 to step 1 and forward again preserves the contact name/phone/address already filled in for step 2 as well as the selected desired time slot, and the duration changed in step 1 is preserved too."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "order.amount.exact",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "functional",
|
| 174 |
"w": 1.5,
|
| 175 |
+
"description": "When the list is \"Auntie's Here 98 × 3 hours with urgency on\" and \"Meow Planet · At-Home Pet Feeding 60 × 1 hour\", the breakdown shows those two lines as 303 and 60, subtotal 363, the first-order coupon checked by default taking 30 off, no basic service fee, and an amount due of 333; after unchecking the coupon the amount due becomes 363."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "order.fee.threshold",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "functional",
|
| 181 |
"w": 1.0,
|
| 182 |
+
"description": "When the list only has \"Courier Lao Li 28 × 1 hour\", the subtotal is 28, the coupon doesn't apply since it's under 200, a 15 basic service fee is added because it's under 99, the amount due is 43, and this service fee is listed separately in the breakdown."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "order.validate.block",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "interaction",
|
| 188 |
"w": 1.0,
|
| 189 |
+
"description": "In step 2, if the phone number is 10 digits or contains letters, or the address is left empty, clicking next is blocked with a notice and stays on step 2; only after changing it to 11 pure digits with a non-empty address can step 3 be entered."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "order.submit.idempotent",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "interaction",
|
| 195 |
"w": 1.5,
|
| 196 |
+
"description": "In step 3, quickly clicking submit 3 times in a row generates only 1 order number and shows the success page only once; after success the list has 0 rows, the top badge no longer shows a number, and the list area returns to the empty-state copy."
|
| 197 |
}
|
| 198 |
],
|
| 199 |
"inject": null,
|
| 200 |
"qc_static": [],
|
| 201 |
"review_status": "needs_human"
|
| 202 |
+
}
|
tasks/c34/task.json
CHANGED
|
@@ -3,252 +3,252 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
],
|
| 10 |
-
"difficulty": "
|
| 11 |
"levers": [
|
| 12 |
-
"
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
-
"title": "LUXHABITAT
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
-
"operator": "
|
| 23 |
-
"request": "
|
| 24 |
},
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
},
|
| 37 |
{
|
| 38 |
-
"operator": "
|
| 39 |
-
"request": "
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "rep.header.tabs",
|
| 45 |
"m": 1,
|
| 46 |
-
"dimension": "
|
| 47 |
"w": 1.5,
|
| 48 |
-
"description": "
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "rep.search.pill",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "rep.hero.overlay",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.0,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "rep.intro.copy",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.0,
|
| 69 |
-
"description": "hero
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "rep.sections.count",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.5,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "rep.buttons.four",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "rep.card.footer",
|
| 87 |
"m": 1,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "Featured villas
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "bar.controls.default",
|
| 94 |
"m": 2,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.5,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "bar.count.region",
|
| 101 |
"m": 2,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.5,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "bar.count.guests",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "bar.bounds",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.0,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "bar.tabs.inert",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.0,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "bar.nights.noeffect",
|
| 129 |
"m": 2,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.0,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "list.merge.removed",
|
| 136 |
"m": 3,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.5,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "list.page.nine",
|
| 143 |
"m": 3,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.5,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "list.card.fields",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.0,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "list.card.darkstyle",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.0,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "list.sort.diagonal",
|
| 164 |
"m": 3,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.5,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "list.filter.sort.cross",
|
| 171 |
"m": 3,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.5,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "list.page.reset",
|
| 178 |
"m": 3,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.0,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "book.cta.replace",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.5,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "book.panel.inherit",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.5,
|
| 195 |
-
"description": "
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "book.price.exact",
|
| 199 |
"m": 4,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.5,
|
| 202 |
-
"description": "
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "book.chain.3step",
|
| 206 |
"m": 4,
|
| 207 |
-
"dimension": "
|
| 208 |
"w": 1.5,
|
| 209 |
-
"description": "
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "book.idempotent",
|
| 213 |
"m": 4,
|
| 214 |
-
"dimension": "
|
| 215 |
"w": 1.5,
|
| 216 |
-
"description": "
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.sections.gone",
|
| 220 |
"m": 5,
|
| 221 |
-
"dimension": "
|
| 222 |
"w": 1.5,
|
| 223 |
-
"description": "
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "del.kept.blocks",
|
| 227 |
"m": 5,
|
| 228 |
-
"dimension": "
|
| 229 |
"w": 1.0,
|
| 230 |
-
"description": "Curated collection of luxury rentals
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "del.layout.clean",
|
| 234 |
"m": 5,
|
| 235 |
-
"dimension": "
|
| 236 |
"w": 1.0,
|
| 237 |
-
"description": "
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "del.regress.filter",
|
| 241 |
"m": 5,
|
| 242 |
-
"dimension": "
|
| 243 |
"w": 1.5,
|
| 244 |
-
"description": "
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "del.regress.booking",
|
| 248 |
"m": 5,
|
| 249 |
-
"dimension": "
|
| 250 |
"w": 1.5,
|
| 251 |
-
"description": "
|
| 252 |
}
|
| 253 |
],
|
| 254 |
"inject": null,
|
|
@@ -256,4 +256,4 @@
|
|
| 256 |
"milestones 5 != operators 3"
|
| 257 |
],
|
| 258 |
"review_status": "qc_fail"
|
| 259 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"restructure layout",
|
| 8 |
+
"remove section"
|
| 9 |
],
|
| 10 |
+
"difficulty": "challenging",
|
| 11 |
"levers": [
|
| 12 |
+
"non-local changes",
|
| 13 |
+
"exact numeric assertions"
|
| 14 |
],
|
| 15 |
+
"domain": "booking service",
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
+
"title": "LUXHABITAT luxury property booking site: homepage replicate → working filter toolbar → unified property list → booking flow → section trimming",
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
+
"operator": "replicate",
|
| 23 |
+
"request": "First build a 1:1 version of this homepage from the reference image, keeping the English copy and content on the image exactly as-is — not a single word changed into our own wording; this version is to show the boss the fidelity. Overall it's a restrained near-black background with light text. Top to bottom: a dark nav at the top, with the LUXHABITAT wordmark in the center, and on the right a List with us text link and a square icon button; below that a centered line of large text The leading marketplace for luxury property in Dubai.; then a row of four text tabs Buy / Rent / Stay / Off-plan, with Buy as the currently selected one (brighter, underlined) and the other three gray; right after, a white rounded pill search bar, with Location and Area, development… on the left, Filters on the right, and at the far right an inset dark rounded button containing a magnifier plus the text 1,420 results. Below that a full-width hero image with the small text Featured property, the big heading The Pearl Residence, a line of intro text, and a white outlined button View property stacked centered on the image. Placeholder images are fine. Below the hero is a centered narrow-column intro text — the two paragraphs starting with Discover exceptional design-led homes in Dubai. — copy them.\n\nThen these sections in order: Featured villas (one row of three cards), Featured apartments (one row of three cards) — the rightmost end of each of these two sections' title row carries three small text tags Editor's picks, New to market, Price reductions, while each card has a small Featured badge in its top-left corner; each card bottom has a line of NNN Views · N Followers, an Email button and a green circular WhatsApp icon button, and below that the AED amount and two small lines for property type/location. Next Featured developments (three columns, two rows, six cards in total, with the image in the lower half of the card, project name overlaid on the image, and a line of location small text below the card), International properties (one row of three, likewise with Editor's picks / New to market tags, with a View international luxury homes button below the section).\n\nFurther down is the light-background Curated collection of luxury rentals two-column text-left image-right block (left text right image, with a few underlined place-name links in the left body and a View luxury rentals button below), then Our partners (a centered paragraph plus a row of six white square logo cards, with a See more button below), From The Journal (three columns two rows, six article cards, each with a title, an excerpt, a small line DESIGN & ARCHITECTURE · 1 MIN. READ and a date), the bottom Editor's Picks centered paragraph with a View Editor's Picks button, and finally the black footer, with Stay well-informed. in the middle and the line of small text about subscribing to market news below it."
|
| 24 |
},
|
| 25 |
{
|
| 26 |
+
"operator": "restructure layout",
|
| 27 |
+
"request": "Version two starts moving toward the real business: what we're pushing now is short-stay bookings (Stay), so that white pill can no longer be decoration — it must become a find-property toolbar that actually works. On the left switch it to an area dropdown, defaulting to \"All areas\", with six options in total: All areas, Palm Jumeirah, Jumeirah, Dubai Marina, Downtown, Business Bay; in the middle put two plus/minus counters, one for \"nights\" default 3, minimum 1 night maximum 14 nights, and one for \"guests\" default 2, minimum 1 maximum 8, and once at the limit don't let people click past it; on the far right the number on the black button must become the real result count, updating live with the filters, showing 42 results on entering the page. Note guests filter people — a property that can't fit that many people should not be counted; nights only affect the money calculated later, not the result count. Keep the row of Buy / Rent / Stay / Off-plan for now, but the default must land on Stay, and clicking the other three must not cause trouble (neither the result count nor the selected filter conditions may change).\n\nLet me paste the inventory, exported by ops, 42 units in total, numbered L01 through L42 (two digits, zero-padded). Areas are split by number ranges: L01–L12 in Palm Jumeirah, L13–L21 in Jumeirah, L22–L29 in Dubai Marina, L30–L36 in Downtown, and the remaining L37–L42 all in Business Bay. Don't invent names one by one — just join \"area + number\", e.g. Palm Jumeirah L01, Jumeirah L13, Dubai Marina L22, Downtown L30, Business Bay L37, so it's easy for them to reconcile. They couldn't be bothered to fill in prices one by one and only gave the rule: L01 is 1,550 dirhams per night, and every subsequent number adds 350, continuing all the way. Property types also cycle: number divided by 4 leaves remainder 1 → 1 bedroom, remainder 2 → 2 bedrooms, remainder 3 → 3 bedrooms, divisible → 4 bedrooms; capacity is bedrooms doubled (1 bedroom sleeps 2, 4 bedrooms sleeps 8, and so on). Ratings are flat per area: Palm Jumeirah 4.9, Jumeirah 4.7, Dubai Marina 4.6, Downtown 4.8, Business Bay 4.4; ties in rating sort by number ascending."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "restructure layout",
|
| 31 |
+
"request": "Next, tidy up that big pile of card sections in the middle. Featured villas, Featured apartments, Featured developments, International properties are now too fragmented and their content doesn't match our inventory — merge all four into one unified \"Available properties\" list section, and drop the original four small headings and the View international luxury homes button. Next to the new section's heading, write out how many units there currently are — the live count of the current filter, not a hardcoded total, and it must update after filtering. The list holds 9 cards per page with pagination below, and it must show which page you're on and the total number of pages. Cards must have: property name, area, nightly price (written like AED 1,550 / night, with thousands separators), property type and maximum guests, plus rating. Add a sort dropdown with four options: Recommended (i.e. number ascending), Price low to high, Price high to low, Rating high to low, defaulting to Recommended. Sorting must stack with the area and guest filters in the toolbar above — don't let them each do their own thing. One more detail: whenever the area or guests change, the page number must return to page 1 by itself, and the total page count must follow — don't leave people parked on a page that no longer exists staring at blank space. The card visuals keep version one's dark card style — dark card background, light text, thin border, rounded corners all as before; don't take the opportunity to switch to white backgrounds or another style."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "restructure layout",
|
| 35 |
+
"request": "Now turn \"browsing properties\" into \"able to order\". The Email button plus green WhatsApp icon set at the bottom of each card is a leftover from the home-selling era — remove them all and replace them with a \"Select this one\" button; this button must pop, ideally the first thing seen on the whole page — but don't make the site garish; apart from these few booking-related controls (Select this one, Confirm booking, itinerary badge), everywhere else keeps the original black-white dark scheme, and the accent color is just that one kind — don't give each button its own color.\n\nClicking \"Select this one\" slides out an itinerary panel from the right, clearly stating which property it is and how much per night; inside you can likewise adjust nights and guests, with initial values carried straight over from the two currently set in the toolbar above (e.g. if the toolbar is 5 nights 3 guests, the panel opens at 5 nights 3 guests), and changes in the panel do not feed back into the list filters. The panel must make the bill clear, listed line by line: the room charge is nightly price × nights; staying 7 nights or more (7 included) takes 15% off the room charge, with the discounted odd cents simply dropped leaving whole numbers; for guests beyond 4, each extra person adds 120 per night; finally a fixed 450 cleaning fee. The extra-guest fee and cleaning fee don't participate in the discount. Give the total at the bottom.\n\nClicking \"Confirm booking\" puts the panel into a success state, keeping this booking's total and a success line at the top, while the itinerary badge at the top of the page increments by 1. After confirmation the button stays in its original position but becomes grayed out and no longer submittable — fast users will keep clicking at the old spot and several clicks must still count as only one order; neither the badge nor the amount may double, and no duplicate amount row may appear."
|
| 36 |
},
|
| 37 |
{
|
| 38 |
+
"operator": "remove section",
|
| 39 |
+
"request": "The last version is subtraction. The boss says the homepage is now too long and cluttered, so cut everything unrelated to booking: the whole Our partners block (the explanatory text, the six partner logos and See more together), the whole From The Journal block (delete all six articles), the bottom Editor's Picks paragraph and the View Editor's Picks button — all gone, and clean up any entries on the page pointing to these sections too, don't leave links that do nothing when clicked. Keep the Curated collection of luxury rentals text-left image-right block (along with the View luxury rentals button), and keep the footer's Stay well-informed. block; leave the top wordmark, List with us, the hero image and View property untouched. After deleting, wrap up properly — don't leave a large blank area or a lonely divider line, and the spacing between sections should look even. Also a reminder: the filtering, sorting, pagination, and pricing built in earlier versions must not break because of this round of deletions; the numbers must still add up; and keep the overall style as-is — don't turn light-colored while deleting."
|
| 40 |
}
|
| 41 |
],
|
| 42 |
"checklist": [
|
| 43 |
{
|
| 44 |
"id": "rep.header.tabs",
|
| 45 |
"m": 1,
|
| 46 |
+
"dimension": "visual",
|
| 47 |
"w": 1.5,
|
| 48 |
+
"description": "The page has a near-black background with light text; at the center of the top nav is the LUXHABITAT wordmark, with a List with us text link and a square icon button on the same row to the right; below it a centered line of large text verbatim The leading marketplace for luxury property in Dubai., and below that a row of four text tabs from left to right Buy, Rent, Stay, Off-plan, where Buy is in the selected state (brighter or underlined) and the other three are gray unselected."
|
| 49 |
},
|
| 50 |
{
|
| 51 |
"id": "rep.search.pill",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "visual",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "Below the tabs is a white rounded pill search bar, containing two lines of text Location and Area, development… on the left, and on the right in order Filters and a dark rounded button whose inside is a magnifier icon plus the text 1,420 results."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "rep.hero.overlay",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "visual",
|
| 61 |
"w": 1.0,
|
| 62 |
+
"description": "Below the pill is a full-width hero image, on which are stacked centered top to bottom the small line Featured property, the big heading The Pearl Residence, a line of intro small text, and a white outlined button View property."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "rep.intro.copy",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "visual",
|
| 68 |
"w": 1.0,
|
| 69 |
+
"description": "Between the hero image and Featured villas there is a centered narrow-column intro text of two paragraphs, whose opening sentence is verbatim Discover exceptional design-led homes in Dubai.; the paragraph is center-aligned and clearly narrower than the card area."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "rep.sections.count",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "functional",
|
| 75 |
"w": 1.5,
|
| 76 |
+
"description": "From top to bottom appear the Featured villas, Featured apartments, Featured developments, International properties, Curated collection of luxury rentals, Our partners, From The Journal, Editor's Picks sections in that order; the counts are exact: villas 3, apartments 3, developments 6 (3 columns 2 rows, image in the lower half of the card, project name overlaid on the image, and one line of location small text below the card), International properties 3, partner logos 6, Journal article cards 6 (3 columns 2 rows, each with title, excerpt, DESIGN & ARCHITECTURE · 1 MIN. READ and date — four items)."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "rep.buttons.four",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "coverage",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "In the first version exactly the following four buttons/links exist with verbatim matching copy: View international luxury homes below the International properties section, View luxury rentals inside the Curated collection of luxury rentals section, See more below the Our partners section, View Editor's Picks below the Editor's Picks paragraph at the bottom of the page; the footer contains Stay well-informed. and its next line of small market-news subscription text."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "rep.card.footer",
|
| 87 |
"m": 1,
|
| 88 |
+
"dimension": "visual",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "At the rightmost end of the title row of both the Featured villas and Featured apartments sections sit three small text tags Editor's picks, New to market, Price reductions, while each card itself has a small Featured badge in its top-left corner; at the bottom of every card in both sections there is a line of Views/Followers stats, an Email button and a green circular WhatsApp icon button, with an AED amount line and a small property type/location line below."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "bar.controls.default",
|
| 94 |
"m": 2,
|
| 95 |
+
"dimension": "functional",
|
| 96 |
"w": 1.5,
|
| 97 |
+
"description": "The pill becomes an interactive toolbar: the area dropdown defaults to \"All areas\" and has exactly 6 options (All areas, Palm Jumeirah, Jumeirah, Dubai Marina, Downtown, Business Bay); nights defaults to 3, guests to 2, and the button on the right initially shows 42 results."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "bar.count.region",
|
| 101 |
"m": 2,
|
| 102 |
+
"dimension": "functional",
|
| 103 |
"w": 1.5,
|
| 104 |
+
"description": "With guests kept at 2 and only the area switched, the result counts are exact: Palm Jumeirah → 12, Jumeirah → 9, Dubai Marina → 8, Downtown → 7, Business Bay → 6; switching back to All areas restores 42."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "bar.count.guests",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "functional",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "Guests filters out properties that can't fit them: under All areas, setting guests to 5 shows 20 results and to 8 shows 10 results; with area Palm Jumeirah and guests 5 it shows 6 results."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "bar.bounds",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "interaction",
|
| 117 |
"w": 1.0,
|
| 118 |
+
"description": "Nights cap at 1 and 14, guests cap at 1 and 8: after reaching a boundary, clicking the corresponding minus/plus button 5 times in a row leaves the value unchanged and the result count unchanged, with no out-of-range values like 0, 15, or 9 appearing."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "bar.tabs.inert",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "interaction",
|
| 124 |
"w": 1.0,
|
| 125 |
+
"description": "All four tabs are still present and the default selected one is Stay; after setting area to Downtown and guests to 4, clicking Buy, Rent, Off-plan in turn leaves the area, nights, guests, and result count unchanged and produces no errors."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "bar.nights.noeffect",
|
| 129 |
"m": 2,
|
| 130 |
+
"dimension": "functional",
|
| 131 |
"w": 1.0,
|
| 132 |
+
"description": "Changing nights from 3 to 7 and then to 14 keeps the result count on the right at the same value under the then-current filters (e.g. always 42 results for All areas with 2 guests)."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "list.merge.removed",
|
| 136 |
"m": 3,
|
| 137 |
+
"dimension": "coverage",
|
| 138 |
"w": 1.5,
|
| 139 |
+
"description": "The four headings Featured villas, Featured apartments, Featured developments, International properties and the View international luxury homes button no longer exist on the page; instead there is one unified property list section whose heading shows 42 units in the default state (All areas, 2 guests)."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "list.page.nine",
|
| 143 |
"m": 3,
|
| 144 |
+
"dimension": "functional",
|
| 145 |
"w": 1.5,
|
| 146 |
+
"description": "In the default state (All areas, 2 guests, Recommended sort) the homepage renders exactly 9 cards and the pagination indicator shows page 1 of 5; page 5 has only 6 cards."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "list.card.fields",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "visual",
|
| 152 |
"w": 1.0,
|
| 153 |
+
"description": "The first card on the default homepage shows the name Palm Jumeirah L01, area Palm Jumeirah, price AED 1,550 / night (with thousands separator), 1 bedroom and maximum 2 guests, rating 4.9."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "list.card.darkstyle",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "visual",
|
| 159 |
"w": 1.0,
|
| 160 |
+
"description": "The new list's cards keep version one's dark card style: dark card background (not white), light body text, thin border and rounded corners, consistent with the background/text feel of the first version's Featured villas cards, and the whole page is still near-black."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "list.sort.diagonal",
|
| 164 |
"m": 3,
|
| 165 |
+
"dimension": "functional",
|
| 166 |
"w": 1.5,
|
| 167 |
+
"description": "Sort and filters stack correctly: under All areas with 2 guests, choosing \"Price high to low\" makes the first card Business Bay L42 at AED 15,900 / night; after switching to \"Rating high to low\" the first card is again Palm Jumeirah L01 (rating 4.9; ties by number ascending)."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "list.filter.sort.cross",
|
| 171 |
"m": 3,
|
| 172 |
+
"dimension": "functional",
|
| 173 |
"w": 1.5,
|
| 174 |
+
"description": "Cross-condition spot check: with area Dubai Marina, 5 guests, and sort \"Price low to high\", the unit count next to the section heading updates to 4, the list has 4 cards in total, and the first card is Dubai Marina L23 (price AED 9,250 / night, 3 bedrooms, maximum 6 guests)."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "list.page.reset",
|
| 178 |
"m": 3,
|
| 179 |
+
"dimension": "interaction",
|
| 180 |
"w": 1.0,
|
| 181 |
+
"description": "While on page 3, change the area to Jumeirah: the list immediately returns to page 1, pagination shows 1 page total, and 9 cards render; then raise guests to 6, the list stays on page 1 and the card count becomes exactly 4 (Jumeirah L15, L16, L19, L20), with the unit count next to the heading also showing 4."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "book.cta.replace",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "coverage",
|
| 187 |
"w": 1.5,
|
| 188 |
+
"description": "The Email button and green circular WhatsApp icon no longer appear at the bottom of property cards — each card has only one \"Select this one\" button; that button uses a single accent color that contrasts with the page's dark base, and this accent color appears only on the three kinds of elements — Select this one / Confirm booking / itinerary badge — while the rest stays black-and-white dark."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "book.panel.inherit",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "interaction",
|
| 194 |
"w": 1.5,
|
| 195 |
+
"description": "After setting the toolbar to 5 nights 3 guests, click \"Select this one\" on any card: the itinerary panel slides out from the right showing that property's name and nightly price, with nights 5 and guests 3 inside; changing guests to 8 inside the panel leaves the list's result count, the unit count next to the heading, and the card count completely unchanged."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "book.price.exact",
|
| 199 |
"m": 4,
|
| 200 |
+
"dimension": "functional",
|
| 201 |
"w": 1.5,
|
| 202 |
+
"description": "The amounts are calculated exactly: for Palm Jumeirah L01 (1,550/night) with 3 nights 2 guests, room charge 4,650, no extra-guest fee, cleaning fee 450, total 5,100; with 7 nights 6 guests, the room charge shows the discounted 9,222 (1550×7×0.85=9222.5 with odd cents dropped), extra-guest fee 1,680 (2 people×120×7 nights), cleaning fee 450, total 11,352."
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "book.chain.3step",
|
| 206 |
"m": 4,
|
| 207 |
+
"dimension": "interaction",
|
| 208 |
"w": 1.5,
|
| 209 |
+
"description": "Full chain: filter area Downtown → click \"Select this one\" on the 2nd card → adjust nights to 7 and guests to 5 in the panel → each line's amount updates live with each step → after clicking \"Confirm booking\" the panel switches to the success state, showing the success copy with the amount identical to the total before confirmation."
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "book.idempotent",
|
| 213 |
"m": 4,
|
| 214 |
+
"dimension": "functional",
|
| 215 |
"w": 1.5,
|
| 216 |
+
"description": "Click idempotence: after clicking \"Confirm booking\" the button stays in its original position but appears grayed out and unsubmittable; triggering 5 more clicks at that position within 1 second only moves the top itinerary badge from 0 to 1 (no 2 or above), the success state's total does not double, and no duplicate amount row is added."
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.sections.gone",
|
| 220 |
"m": 5,
|
| 221 |
+
"dimension": "coverage",
|
| 222 |
"w": 1.5,
|
| 223 |
+
"description": "The page no longer contains the Our partners heading, its explanatory text, the six partner logo cards, and the See more button; it no longer contains the From The Journal heading or any article card, nor the bottom Editor's Picks paragraph and View Editor's Picks button; there are also no residual anchors pointing to these three blocks or links that do nothing when clicked."
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "del.kept.blocks",
|
| 227 |
"m": 5,
|
| 228 |
+
"dimension": "visual",
|
| 229 |
"w": 1.0,
|
| 230 |
+
"description": "The Curated collection of luxury rentals text-left image-right block is still present with unchanged copy, and its View luxury rentals button is still visible; the footer's Stay well-informed. and the subscription small text are retained; the top LUXHABITAT wordmark, List with us, the hero image and the View property button keep their first-version form."
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "del.layout.clean",
|
| 234 |
"m": 5,
|
| 235 |
+
"dimension": "visual",
|
| 236 |
"w": 1.0,
|
| 237 |
+
"description": "The deletion spots leave no blank strip taller than one screen and no orphan divider or empty heading shell; the vertical spacing between the property list section and the Curated collection block, and between Curated and the footer, looks even and consistent, and the whole site still has a dark background."
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "del.regress.filter",
|
| 241 |
"m": 5,
|
| 242 |
+
"dimension": "functional",
|
| 243 |
"w": 1.5,
|
| 244 |
+
"description": "Post-deletion regression: the toolbar still initially shows 42 results and the list heading shows 42 units; after selecting Business Bay, 8 guests, and sort \"Price low to high\" the result count is exactly 1, the only card in the list is Business Bay L40 (AED 15,200 / night, 4 bedrooms maximum 8 guests), and the pager shows 1 page total."
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "del.regress.booking",
|
| 248 |
"m": 5,
|
| 249 |
+
"dimension": "functional",
|
| 250 |
"w": 1.5,
|
| 251 |
+
"description": "The booking chain is undamaged after deletion: clicking \"Select this one\" on any card still slides out the panel, and for Palm Jumeirah L01 with 7 nights 2 guests the total is still 9,672 (discounted room charge 9,222 + cleaning fee 450); after confirming the booking the badge increments by 1 from its current value, the button is grayed out, and repeated clicks no longer increase the badge."
|
| 252 |
}
|
| 253 |
],
|
| 254 |
"inject": null,
|
|
|
|
| 256 |
"milestones 5 != operators 3"
|
| 257 |
],
|
| 258 |
"review_status": "qc_fail"
|
| 259 |
+
}
|
tasks/c35/task.json
CHANGED
|
@@ -3,237 +3,237 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"seed_meta": {
|
| 18 |
"repo_src": null,
|
| 19 |
"exclude_slug": "react_en_000740",
|
| 20 |
"repo_shot": true
|
| 21 |
},
|
| 22 |
-
"title": "Owo
|
| 23 |
"milestones": [
|
| 24 |
{
|
| 25 |
-
"operator": "
|
| 26 |
-
"request": "
|
| 27 |
},
|
| 28 |
{
|
| 29 |
-
"operator": "
|
| 30 |
-
"request": "
|
| 31 |
},
|
| 32 |
{
|
| 33 |
-
"operator": "
|
| 34 |
-
"request": "
|
| 35 |
},
|
| 36 |
{
|
| 37 |
-
"operator": "
|
| 38 |
-
"request": "
|
| 39 |
},
|
| 40 |
{
|
| 41 |
-
"operator": "
|
| 42 |
-
"request": "
|
| 43 |
}
|
| 44 |
],
|
| 45 |
"checklist": [
|
| 46 |
{
|
| 47 |
"id": "data.count.42",
|
| 48 |
"m": 1,
|
| 49 |
-
"dimension": "
|
| 50 |
"w": 1.5,
|
| 51 |
-
"description": "
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "data.stage.split",
|
| 55 |
"m": 1,
|
| 56 |
-
"dimension": "
|
| 57 |
"w": 1.5,
|
| 58 |
-
"description": "
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "data.card.fields",
|
| 62 |
"m": 1,
|
| 63 |
-
"dimension": "
|
| 64 |
"w": 1.0,
|
| 65 |
-
"description": "
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "data.full.badge",
|
| 69 |
"m": 1,
|
| 70 |
-
"dimension": "
|
| 71 |
"w": 1.5,
|
| 72 |
-
"description": "
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "data.seed.three",
|
| 76 |
"m": 1,
|
| 77 |
-
"dimension": "
|
| 78 |
"w": 1.5,
|
| 79 |
-
"description": "
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "data.style.keep",
|
| 83 |
"m": 1,
|
| 84 |
-
"dimension": "
|
| 85 |
"w": 1.0,
|
| 86 |
-
"description": "
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "inter.page.base",
|
| 90 |
"m": 2,
|
| 91 |
-
"dimension": "
|
| 92 |
"w": 1.5,
|
| 93 |
-
"description": "
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "inter.filter.stage",
|
| 97 |
"m": 2,
|
| 98 |
-
"dimension": "
|
| 99 |
"w": 1.5,
|
| 100 |
-
"description": "
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "inter.filter.difficulty",
|
| 104 |
"m": 2,
|
| 105 |
-
"dimension": "
|
| 106 |
"w": 1.5,
|
| 107 |
-
"description": "
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "inter.filter.vacancy.sort",
|
| 111 |
"m": 2,
|
| 112 |
-
"dimension": "
|
| 113 |
"w": 1.0,
|
| 114 |
-
"description": "
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "inter.plan.price",
|
| 118 |
"m": 2,
|
| 119 |
-
"dimension": "
|
| 120 |
"w": 1.5,
|
| 121 |
-
"description": "
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "inter.plan.edge",
|
| 125 |
"m": 2,
|
| 126 |
-
"dimension": "
|
| 127 |
"w": 1.0,
|
| 128 |
-
"description": "
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "del.faq.gone",
|
| 132 |
"m": 3,
|
| 133 |
-
"dimension": "
|
| 134 |
"w": 1.5,
|
| 135 |
-
"description": "
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "del.banks.gone",
|
| 139 |
"m": 3,
|
| 140 |
-
"dimension": "
|
| 141 |
"w": 1.5,
|
| 142 |
-
"description": "
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "del.nav.links",
|
| 146 |
"m": 3,
|
| 147 |
-
"dimension": "
|
| 148 |
"w": 1.5,
|
| 149 |
-
"description": "
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "del.hero.keep",
|
| 153 |
"m": 3,
|
| 154 |
-
"dimension": "
|
| 155 |
"w": 1.0,
|
| 156 |
-
"description": "
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "del.gap.tight",
|
| 160 |
"m": 3,
|
| 161 |
-
"dimension": "
|
| 162 |
"w": 1.0,
|
| 163 |
-
"description": "1440px
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "layout.sidebar.grid",
|
| 167 |
"m": 4,
|
| 168 |
-
"dimension": "
|
| 169 |
"w": 1.5,
|
| 170 |
-
"description": "1440px
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "layout.filter.parity",
|
| 174 |
"m": 4,
|
| 175 |
-
"dimension": "
|
| 176 |
"w": 1.5,
|
| 177 |
-
"description": "
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "layout.nav.sticky",
|
| 181 |
"m": 4,
|
| 182 |
-
"dimension": "
|
| 183 |
"w": 1.0,
|
| 184 |
-
"description": "
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "layout.plan.badge",
|
| 188 |
"m": 4,
|
| 189 |
-
"dimension": "
|
| 190 |
"w": 1.5,
|
| 191 |
-
"description": "
|
| 192 |
},
|
| 193 |
{
|
| 194 |
"id": "layout.accent.consistent",
|
| 195 |
"m": 4,
|
| 196 |
-
"dimension": "
|
| 197 |
"w": 1.0,
|
| 198 |
-
"description": "
|
| 199 |
},
|
| 200 |
{
|
| 201 |
"id": "resp.mobile.single",
|
| 202 |
"m": 5,
|
| 203 |
-
"dimension": "
|
| 204 |
"w": 1.5,
|
| 205 |
-
"description": "375px
|
| 206 |
},
|
| 207 |
{
|
| 208 |
"id": "resp.tablet.two",
|
| 209 |
"m": 5,
|
| 210 |
-
"dimension": "
|
| 211 |
"w": 1.0,
|
| 212 |
-
"description": "768px
|
| 213 |
},
|
| 214 |
{
|
| 215 |
"id": "resp.state.persist",
|
| 216 |
"m": 5,
|
| 217 |
-
"dimension": "
|
| 218 |
"w": 1.5,
|
| 219 |
-
"description": "
|
| 220 |
},
|
| 221 |
{
|
| 222 |
"id": "resp.plan.empty",
|
| 223 |
"m": 5,
|
| 224 |
-
"dimension": "
|
| 225 |
"w": 1.5,
|
| 226 |
-
"description": "375px
|
| 227 |
},
|
| 228 |
{
|
| 229 |
"id": "resp.hero.fit",
|
| 230 |
"m": 5,
|
| 231 |
-
"dimension": "
|
| 232 |
"w": 1.0,
|
| 233 |
-
"description": "375px
|
| 234 |
}
|
| 235 |
],
|
| 236 |
"inject": null,
|
| 237 |
"qc_static": [],
|
| 238 |
"review_status": "ok"
|
| 239 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "brownfield",
|
| 5 |
"operators": [
|
| 6 |
+
"make interactive",
|
| 7 |
+
"restructure layout",
|
| 8 |
+
"remove section",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"make responsive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "regular",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling"
|
| 15 |
],
|
| 16 |
+
"domain": "education courses",
|
| 17 |
"seed_meta": {
|
| 18 |
"repo_src": null,
|
| 19 |
"exclude_slug": "react_en_000740",
|
| 20 |
"repo_shot": true
|
| 21 |
},
|
| 22 |
+
"title": "Owo Classroom: turning the payments landing page into a course catalog site",
|
| 23 |
"milestones": [
|
| 24 |
{
|
| 25 |
+
"operator": "wire up data",
|
| 26 |
+
"request": "Our business has pivoted — this page is no longer about WhatsApp transfers; it needs to become the \"Owo Classroom\" course site. First step: remove the four big marketing panels in the middle (SEND MONEY / BUY AIRTIME / PAY TV SUBSCRIPTION / SCHEDULE PAYMENTS, along with the phone screenshots inside them) entirely, and replace them with our real course catalog laid out as cards; just show all courses for now.\n\nI've put the courses in order, 42 in total, grouped by stage: Early years 9, Middle school 11, High school 13, Adult interests 9. Each course card must show the course name, stage, instructor, number of lessons, price, difficulty (choose one of the three tiers Beginner / Advanced / Intensive) and enrollment status. Make up the course names and instructor names to match each stage's tone; the 42 course names must not repeat, and neither may the instructor names; give prices by a range per stage — Early years 280 to 460, Middle school 460 to 720, High school 520 to 980, Adult 199 to 599, all in whole tens, no decimals; lessons between 8 and 48.\n\nAlso 7 courses are already full and must be marked \"Full\", distributed as High school 3, Middle school 2, Early years 1, Adult 1; these should be visually weaker than the others so it's obvious at a glance they can't be enrolled.\n\nThere are also three featured courses whose information is fixed and can't change: Python Data Analysis for Beginners (Adult interests, instructor Li Zhiyao, 24 lessons, ¥480, Advanced, enrollable); New Concept English Book 2 Intensive (Middle school, instructor Chen Li, 36 lessons, ¥680, Intensive, enrollable); Middle School Physics: Mechanics Special Topic (Middle school, instructor Zhou Mingyuan, 18 lessons, ¥520, Beginner, enrollable).\n\nDon't improvise on the style — the current dark background + candy colors works well, keep using it."
|
| 27 |
},
|
| 28 |
{
|
| 29 |
+
"operator": "make interactive",
|
| 30 |
+
"request": "Just laying out 42 cards means parents can't find courses at all — it needs filtering and paging. Above the catalog put a set of controls: a search box (search by course name, results as you type, no need to press Enter), four stage filter entries, three difficulty filters (Beginner/Advanced/Intensive, selecting one leaves only that tier), an \"Only show with seats\" toggle, and a sort (default Recommended, Price low to high, Price high to low). The list holds 12 courses per page with pagination below, and it must show which page you're on and the total number of pages.\n\nFilters and sort must respect each other: at any time, changing a filter, changing the sort, or changing the search term restarts from page 1 — don't stay on an old page number. When a search finds nothing, don't give me a blank page — write a human-readable notice, and the pager shouldn't just sit there inviting clicks either.\n\nAlso add \"My study plan\": every enrollable card gets an add button; after adding, the plan shows the selected courses, the count, and the total amount. The amount rule: under 3 courses, sum at original price; 3 courses or more (inclusive) takes 10% off the whole order, with odd cents dropped, and no decimal prices may appear on the page. Each course in the plan can be removed individually, and there's a one-click clear all. Full courses can't be added to the plan, and clicking the button should do nothing. Clicking add repeatedly on the same course must not produce two rows in the plan."
|
| 31 |
},
|
| 32 |
{
|
| 33 |
+
"operator": "remove section",
|
| 34 |
+
"request": "The page still has a bunch of leftovers from the previous finance business; clean them all out this time: drop the whole \"Frequently asked questions\" chat Q&A block at the bottom; and also the row of partner bank logos and the line \"WORKS WITH YOUR FAVOURITE BANKS\" — every occurrence on the page must be cleaned up. In the nav, remove FAQs from the original four entries; the remaining Features, Security, Getting started must actually scroll to the corresponding places when clicked — no dead links.\n\nCareful not to collapse the page after deletion: keep the staggered layout of the colorful title blocks and QR at the top, and the SCROLL pill button as-is; clicking SCROLL must scroll to the course catalog. After removing the bank strip, don't leave a big stretch of empty black above and below — tighten the spacing. The footer's brand intro, three columns of links, and social icons must all be kept."
|
| 35 |
},
|
| 36 |
{
|
| 37 |
+
"operator": "restructure layout",
|
| 38 |
+
"request": "Now the filter bar crammed above the catalog is too long; re-lay it out on desktop: make a filter bar on the left that gathers the search, stage, difficulty, \"Only show with seats\", and sort; on the right is the course grid, three cards per row on wide screens. The filter bar must stay in place as you scroll down — don't let it scroll away. Moving things is moving things, but the filtered results and page numbers must be exactly the same as before; don't miscount during the move.\n\nAlso make the nav bar stick to the top so it's clickable anywhere. Add a \"My study plan\" entry on the right side of the nav, showing the current selected count, updating immediately when courses are added or removed, and clicking it shows the plan details.\n\nI want this entry to be visible at a glance, but at the same time — don't mess up the current color scheme; the few primary colors already on the site are enough, don't pop out any new garish colors; keep the nav's own dark red background, rounded-pill shape and green Try it out button as-is."
|
| 39 |
},
|
| 40 |
{
|
| 41 |
+
"operator": "make responsive",
|
| 42 |
+
"request": "Finally, handle phones and tablets. On narrow screens cards go single-column, on tablets two per row, and horizontal scrollbars absolutely must not appear. The left filter bar collapses on small screens into a filter panel that can expand and collapse, and after expanding all filters work as usual. On small screens the nav tucks its links into a hamburger; expanding it shows all entries and Try it out.\n\nThe study plan should span the full width on phones to look comfortable. One more detail: after deleting the courses in the plan one by one down to empty, show an empty prompt and display the total amount as zero; at that point the \"Clear\" action makes no sense, so don't let people click it.\n\nMost important, don't let state get lost when resizing — the filters I set and courses I selected on desktop must still be there after I narrow the window; shrinking the screen must not reset it. The top title blocks must not overflow or have their text clipped on phones either."
|
| 43 |
}
|
| 44 |
],
|
| 45 |
"checklist": [
|
| 46 |
{
|
| 47 |
"id": "data.count.42",
|
| 48 |
"m": 1,
|
| 49 |
+
"dimension": "functional",
|
| 50 |
"w": 1.5,
|
| 51 |
+
"description": "The course catalog area renders exactly 42 course cards, and the original four colorful marketing panels SEND MONEY / BUY AIRTIME AND DATA / PAY TV SUBSCRIPTION / SCHEDULE PAYMENTS and their phone screenshots no longer appear anywhere on the page."
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "data.stage.split",
|
| 55 |
"m": 1,
|
| 56 |
+
"dimension": "functional",
|
| 57 |
"w": 1.5,
|
| 58 |
+
"description": "Counting cards by stage gives exactly: Early years 9, Middle school 11, High school 13, Adult interests 9, summing to 42; and the 42 course names are pairwise distinct, as are the instructor names."
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "data.card.fields",
|
| 62 |
"m": 1,
|
| 63 |
+
"dimension": "visual",
|
| 64 |
"w": 1.0,
|
| 65 |
+
"description": "Any card simultaneously shows course name, stage, instructor, lesson count (an integer between 8–48), a price starting with ¥, and a difficulty of Beginner/Advanced/Intensive; and sampling each stage, all prices are whole tens within the corresponding range: Early years 280–460, Middle school 460–720, High school 520–980, Adult 199–599."
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "data.full.badge",
|
| 69 |
"m": 1,
|
| 70 |
+
"dimension": "functional",
|
| 71 |
"w": 1.5,
|
| 72 |
+
"description": "Exactly 7 cards carry the \"Full\" mark, distributed as High school 3, Middle school 2, Early years 1, Adult 1; these 7 are visibly weaker than other cards (e.g. reduced opacity/grayed out/disabled button), and the other 35 are all enrollable."
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "data.seed.three",
|
| 76 |
"m": 1,
|
| 77 |
+
"dimension": "coverage",
|
| 78 |
"w": 1.5,
|
| 79 |
+
"description": "The three featured courses exist exactly with fields verbatim: Python Data Analysis for Beginners (Adult interests · Li Zhiyao · 24 lessons · ¥480 · Advanced), New Concept English Book 2 Intensive (Middle school · Chen Li · 36 lessons · ¥680 · Intensive), Middle School Physics: Mechanics Special Topic (Middle school · Zhou Mingyuan · 18 lessons · ¥520 · Beginner)."
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "data.style.keep",
|
| 83 |
"m": 1,
|
| 84 |
+
"dimension": "visual",
|
| 85 |
"w": 1.0,
|
| 86 |
+
"description": "The course catalog keeps the page's original dark background and candy palette (not switched wholesale to light or another scheme); the catalog section's overall container width aligns with the page's main content area, with no horizontal overflow and no obvious left/right offset."
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "inter.page.base",
|
| 90 |
"m": 2,
|
| 91 |
+
"dimension": "functional",
|
| 92 |
"w": 1.5,
|
| 93 |
+
"description": "With no filters, each page shows 12 courses, the page indicator shows 4 pages in total, page 4 shows exactly 6 courses, and the four pages' content does not overlap and totals 42; when on page 2 or later, switching any filter, switching sort, or modifying the search term returns the page number immediately to 1."
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "inter.filter.stage",
|
| 97 |
"m": 2,
|
| 98 |
+
"dimension": "functional",
|
| 99 |
"w": 1.5,
|
| 100 |
+
"description": "Selecting stages one by one, the exact result counts are: High school 13 (2 pages, 1 on page 2), Middle school 11 (1 page), Early years 9, Adult interests 9; every result's card stage labels match the selected stage."
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "inter.filter.difficulty",
|
| 104 |
"m": 2,
|
| 105 |
+
"dimension": "functional",
|
| 106 |
"w": 1.5,
|
| 107 |
+
"description": "After selecting Beginner/Advanced/Intensive respectively, every card's difficulty label in the current results matches the selected tier: the Beginner results contain \"Middle School Physics: Mechanics Special Topic\", the Advanced results contain \"Python Data Analysis for Beginners\", and the Intensive results contain \"New Concept English Book 2 Intensive\"; clearing the difficulty filter restores 42 courses over 4 pages."
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "inter.filter.vacancy.sort",
|
| 111 |
"m": 2,
|
| 112 |
+
"dimension": "functional",
|
| 113 |
"w": 1.0,
|
| 114 |
+
"description": "Turning on only \"Only show with seats\" gives 35 courses over 3 pages (12/12/11) with no \"Full\" card on any page; adding \"High school\" makes it 10 courses on 1 page (pagination can't go forward); turning the toggle off restores 42 courses over 4 pages. Switching to \"Price low to high\" makes adjacent cards' prices non-decreasing, and switching to \"high to low\" makes them non-increasing."
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "inter.plan.price",
|
| 118 |
"m": 2,
|
| 119 |
+
"dimension": "functional",
|
| 120 |
"w": 1.5,
|
| 121 |
+
"description": "Adding Python Data Analysis for Beginners (¥480) and New Concept English Book 2 Intensive (¥680) in turn makes the plan show 2 courses with a total of ¥1160; adding Middle School Physics: Mechanics Special Topic (¥520) makes it 3 courses with a total of ¥1512 (10% off 1680 with no decimals); removing any one returns to 2 courses with the total restored to the sum of both original prices; clicking \"Clear\" turns it into 0 courses with a total of ¥0 in one go."
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "inter.plan.edge",
|
| 125 |
"m": 2,
|
| 126 |
+
"dimension": "interaction",
|
| 127 |
"w": 1.0,
|
| 128 |
+
"description": "Adding a full course has no effect (button disabled, or after clicking the plan's course count and total amount are unchanged); clicking add 3 times in a row on the same enrollable course leaves only 1 row for that course in the plan; typing character by character into the search box requires no Enter press and the list narrows immediately with each input; entering a nonexistent word shows a text empty-state notice with the pager unusable, and clearing the search term restores 42 courses."
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "del.faq.gone",
|
| 132 |
"m": 3,
|
| 133 |
+
"dimension": "coverage",
|
| 134 |
"w": 1.5,
|
| 135 |
+
"description": "The page no longer contains the \"Frequently asked questions\" heading, chat bubbles, or the question button list; meanwhile the footer CTA and footer are fully retained (brand slogan, three columns of links, three social icons all visible)."
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "del.banks.gone",
|
| 139 |
"m": 3,
|
| 140 |
+
"dimension": "functional",
|
| 141 |
"w": 1.5,
|
| 142 |
+
"description": "No bank logo icon appears anywhere on the site, and the copy \"WORKS WITH YOUR FAVOURITE BANKS\" cannot be found either (all the multiple places in the original first screen and original panels have been cleared)."
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "del.nav.links",
|
| 146 |
"m": 3,
|
| 147 |
+
"dimension": "interaction",
|
| 148 |
"w": 1.5,
|
| 149 |
+
"description": "The nav no longer contains the FAQs entry, while Features, Security, Getting started are retained; clicking each one scrolls to a section that actually exists on the page, with no no-reaction click or scrolling to a blank area at the page bottom."
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "del.hero.keep",
|
| 153 |
"m": 3,
|
| 154 |
+
"dimension": "visual",
|
| 155 |
"w": 1.0,
|
| 156 |
+
"description": "The first screen's colorful title blocks still keep the original three-row staggered arrangement and the combination of purple/orange/yellow/pink color blocks plus the QR square, not recolored or changed to a single row; the SCROLL pill is still there and clicking it scrolls to the course catalog area."
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "del.gap.tight",
|
| 160 |
"m": 3,
|
| 161 |
+
"dimension": "visual",
|
| 162 |
"w": 1.0,
|
| 163 |
+
"description": "At 1440px wide, the pure-background vertical gap between the bottom of the SCROLL pill and the top of the first course card is less than 400px, and the page has no near-full-screen blank stretch left by section deletion."
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "layout.sidebar.grid",
|
| 167 |
"m": 4,
|
| 168 |
+
"dimension": "visual",
|
| 169 |
"w": 1.5,
|
| 170 |
+
"description": "At 1440px wide the left filter bar and the right course grid sit side by side, with exactly 3 cards per grid row; while scrolling down through the list, the filter bar stays visible in the viewport."
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "layout.filter.parity",
|
| 174 |
"m": 4,
|
| 175 |
+
"dimension": "functional",
|
| 176 |
"w": 1.5,
|
| 177 |
+
"description": "The five control groups — search, stage, difficulty, only show with seats, sort — have all moved into the sidebar, with results identical to before the revamp: selecting \"High school\" + \"Only show with seats\" in the sidebar still gives 10 courses on a single page, selecting only \"Intensive\" still leaves only Intensive courses including \"New Concept English Book 2 Intensive\", and with no filters there are still 42 courses over 4 pages."
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "layout.nav.sticky",
|
| 181 |
"m": 4,
|
| 182 |
+
"dimension": "interaction",
|
| 183 |
"w": 1.0,
|
| 184 |
+
"description": "When scrolled to the middle of the course catalog the nav bar is still fixed and visible, and its dark red background, rounded-pill shape and green \"Try it out\" button look the same as before the revamp, not overridden by new styles."
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "layout.plan.badge",
|
| 188 |
"m": 4,
|
| 189 |
+
"dimension": "functional",
|
| 190 |
"w": 1.5,
|
| 191 |
+
"description": "The \"My study plan\" entry in the nav initially shows 0; after adding 3 courses it shows 3, and after removing 1 it immediately becomes 2, and this number always matches the number of rows in the plan details."
|
| 192 |
},
|
| 193 |
{
|
| 194 |
"id": "layout.accent.consistent",
|
| 195 |
"m": 4,
|
| 196 |
+
"dimension": "visual",
|
| 197 |
"w": 1.0,
|
| 198 |
+
"description": "The accent colors used by the plan entry's numeric badge, the selected filter items, and the add buttons all come from the site's existing primary colors (green #84ff00 / magenta #ff009c / yellow #fff527; different elements may use different ones); the page introduces no new high-saturation accent colors beyond these three."
|
| 199 |
},
|
| 200 |
{
|
| 201 |
"id": "resp.mobile.single",
|
| 202 |
"m": 5,
|
| 203 |
+
"dimension": "visual",
|
| 204 |
"w": 1.5,
|
| 205 |
+
"description": "At 375px wide course cards are arranged in a single column and the page produces no horizontal scrollbar; the filter bar collapses into an expandable filter entry, and after expanding, the five control groups operate normally and it can be collapsed again."
|
| 206 |
},
|
| 207 |
{
|
| 208 |
"id": "resp.tablet.two",
|
| 209 |
"m": 5,
|
| 210 |
+
"dimension": "visual",
|
| 211 |
"w": 1.0,
|
| 212 |
+
"description": "At 768px wide the course grid has exactly 2 cards per row and the page has no horizontal scrollbar; nav links are tucked into a hamburger entry, and expanding it shows all retained nav entries and the \"Try it out\" button."
|
| 213 |
},
|
| 214 |
{
|
| 215 |
"id": "resp.state.persist",
|
| 216 |
"m": 5,
|
| 217 |
+
"dimension": "interaction",
|
| 218 |
"w": 1.5,
|
| 219 |
+
"description": "After completing \"filter High school + Only show with seats + add 2 courses\" at desktop width, without refreshing, shrink the window to 375px: the filtered result is still 10 courses, the plan still has 2 courses, and the total amount is exactly the same as before narrowing."
|
| 220 |
},
|
| 221 |
{
|
| 222 |
"id": "resp.plan.empty",
|
| 223 |
"m": 5,
|
| 224 |
+
"dimension": "functional",
|
| 225 |
"w": 1.5,
|
| 226 |
+
"description": "At 375px wide the study plan panel spans the full screen width; when the plan's courses are deleted one by one down to 0, a text empty-state prompt appears, the total amount shows ¥0, and the \"Clear\" action disappears or is unclickable at that point."
|
| 227 |
},
|
| 228 |
{
|
| 229 |
"id": "resp.hero.fit",
|
| 230 |
"m": 5,
|
| 231 |
+
"dimension": "visual",
|
| 232 |
"w": 1.0,
|
| 233 |
+
"description": "At 375px wide the first screen's colorful title blocks are entirely within the viewport, all four blocks of text are fully readable, with no horizontal overflow, clipping, or overlap."
|
| 234 |
}
|
| 235 |
],
|
| 236 |
"inject": null,
|
| 237 |
"qc_static": [],
|
| 238 |
"review_status": "ok"
|
| 239 |
+
}
|
tasks/c36/task.json
CHANGED
|
@@ -3,242 +3,242 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
],
|
| 16 |
-
"domain": "
|
| 17 |
"seed_meta": {
|
| 18 |
"ref_image_src": "prototypes/reference.jpg"
|
| 19 |
},
|
| 20 |
-
"title": "CREDITGUIDE.DE
|
| 21 |
"milestones": [
|
| 22 |
{
|
| 23 |
-
"operator": "
|
| 24 |
-
"request": "
|
| 25 |
},
|
| 26 |
{
|
| 27 |
-
"operator": "
|
| 28 |
-
"request": "
|
| 29 |
},
|
| 30 |
{
|
| 31 |
-
"operator": "
|
| 32 |
-
"request": "
|
| 33 |
},
|
| 34 |
{
|
| 35 |
-
"operator": "
|
| 36 |
-
"request": "
|
| 37 |
},
|
| 38 |
{
|
| 39 |
-
"operator": "
|
| 40 |
-
"request": "
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "rep.header.nav",
|
| 46 |
"m": 1,
|
| 47 |
-
"dimension": "
|
| 48 |
"w": 1.5,
|
| 49 |
-
"description": "
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "rep.hero.layout",
|
| 53 |
"m": 1,
|
| 54 |
-
"dimension": "
|
| 55 |
"w": 1.5,
|
| 56 |
-
"description": "
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "rep.strip.four",
|
| 60 |
"m": 1,
|
| 61 |
-
"dimension": "
|
| 62 |
"w": 1.0,
|
| 63 |
-
"description": "
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "rep.hex.count",
|
| 67 |
"m": 1,
|
| 68 |
-
"dimension": "
|
| 69 |
"w": 1.5,
|
| 70 |
-
"description": "
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "rep.lists.subheads",
|
| 74 |
"m": 1,
|
| 75 |
-
"dimension": "
|
| 76 |
"w": 1.0,
|
| 77 |
-
"description": "VERWENDUNG
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "rep.headings.tricolor",
|
| 81 |
"m": 1,
|
| 82 |
-
"dimension": "
|
| 83 |
"w": 1.0,
|
| 84 |
-
"description": "
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "data.count42",
|
| 88 |
"m": 2,
|
| 89 |
-
"dimension": "
|
| 90 |
"w": 1.5,
|
| 91 |
-
"description": "
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "data.calc.extreme",
|
| 95 |
"m": 2,
|
| 96 |
-
"dimension": "
|
| 97 |
"w": 1.5,
|
| 98 |
-
"description": "
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "data.amount.steps",
|
| 102 |
"m": 2,
|
| 103 |
-
"dimension": "
|
| 104 |
"w": 1.0,
|
| 105 |
-
"description": "
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "data.sort.combo",
|
| 109 |
"m": 2,
|
| 110 |
-
"dimension": "
|
| 111 |
"w": 1.0,
|
| 112 |
-
"description": "
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "data.filter.page",
|
| 116 |
"m": 2,
|
| 117 |
-
"dimension": "
|
| 118 |
"w": 1.5,
|
| 119 |
-
"description": "
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "data.empty.badge",
|
| 123 |
"m": 2,
|
| 124 |
-
"dimension": "
|
| 125 |
"w": 1.0,
|
| 126 |
-
"description": "
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "wiz.select.single",
|
| 130 |
"m": 3,
|
| 131 |
-
"dimension": "
|
| 132 |
"w": 1.5,
|
| 133 |
-
"description": "
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "wiz.age.gate",
|
| 137 |
"m": 3,
|
| 138 |
-
"dimension": "
|
| 139 |
"w": 1.0,
|
| 140 |
-
"description": "
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "wiz.income.rule",
|
| 144 |
"m": 3,
|
| 145 |
-
"dimension": "
|
| 146 |
"w": 1.5,
|
| 147 |
-
"description": "
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "wiz.summary.match",
|
| 151 |
"m": 3,
|
| 152 |
-
"dimension": "
|
| 153 |
"w": 1.0,
|
| 154 |
-
"description": "
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "wiz.coupling.filter",
|
| 158 |
"m": 3,
|
| 159 |
-
"dimension": "
|
| 160 |
"w": 1.5,
|
| 161 |
-
"description": "
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "layout.twocol",
|
| 165 |
"m": 4,
|
| 166 |
-
"dimension": "
|
| 167 |
"w": 1.5,
|
| 168 |
-
"description": "
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "layout.sticky.merge",
|
| 172 |
"m": 4,
|
| 173 |
-
"dimension": "
|
| 174 |
"w": 1.5,
|
| 175 |
-
"description": "
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "layout.sticky.bound",
|
| 179 |
"m": 4,
|
| 180 |
-
"dimension": "
|
| 181 |
"w": 1.5,
|
| 182 |
-
"description": "
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "layout.anchor.targets",
|
| 186 |
"m": 4,
|
| 187 |
-
"dimension": "
|
| 188 |
"w": 1.0,
|
| 189 |
-
"description": "
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "layout.anchor.zinsen",
|
| 193 |
"m": 4,
|
| 194 |
-
"dimension": "
|
| 195 |
"w": 1.0,
|
| 196 |
-
"description": "
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "layout.regression",
|
| 200 |
"m": 4,
|
| 201 |
-
"dimension": "
|
| 202 |
"w": 1.0,
|
| 203 |
-
"description": "
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "skin.toggle",
|
| 207 |
"m": 5,
|
| 208 |
-
"dimension": "
|
| 209 |
"w": 1.5,
|
| 210 |
-
"description": "
|
| 211 |
},
|
| 212 |
{
|
| 213 |
"id": "skin.consistency",
|
| 214 |
"m": 5,
|
| 215 |
-
"dimension": "
|
| 216 |
"w": 1.5,
|
| 217 |
-
"description": "
|
| 218 |
},
|
| 219 |
{
|
| 220 |
"id": "skin.state.keep",
|
| 221 |
"m": 5,
|
| 222 |
-
"dimension": "
|
| 223 |
"w": 1.5,
|
| 224 |
-
"description": "
|
| 225 |
},
|
| 226 |
{
|
| 227 |
"id": "skin.persist",
|
| 228 |
"m": 5,
|
| 229 |
-
"dimension": "
|
| 230 |
"w": 1.0,
|
| 231 |
-
"description": "
|
| 232 |
},
|
| 233 |
{
|
| 234 |
"id": "skin.hex.regression",
|
| 235 |
"m": 5,
|
| 236 |
-
"dimension": "
|
| 237 |
"w": 1.0,
|
| 238 |
-
"description": "
|
| 239 |
}
|
| 240 |
],
|
| 241 |
"inject": null,
|
| 242 |
"qc_static": [],
|
| 243 |
"review_status": "needs_human"
|
| 244 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"restyle",
|
| 8 |
+
"add section",
|
| 9 |
+
"restructure layout",
|
| 10 |
+
"wire up data"
|
| 11 |
],
|
| 12 |
+
"difficulty": "regular",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling"
|
| 15 |
],
|
| 16 |
+
"domain": "e-commerce",
|
| 17 |
"seed_meta": {
|
| 18 |
"ref_image_src": "prototypes/reference.jpg"
|
| 19 |
},
|
| 20 |
+
"title": "CREDITGUIDE.DE loan comparison landing page: replicate + real quote data + application wizard + layout rearrangement + night mode",
|
| 21 |
"milestones": [
|
| 22 |
{
|
| 23 |
+
"operator": "replicate",
|
| 24 |
+
"request": "First build this German landing page exactly as in the reference image — this is a page the client has already shipped, don't change a single word of the copy, don't translate it into Chinese, copy the German original verbatim. What's needed: a narrow dark navy bar at the top, the CREDITGUIDE.DE logo on the left, and on the right the entries Sofortkredit, Online, Beantragen, Zinsen, Ohne Schufa? in that order, with a bright blue rounded button Direktvergleich → at the far right. Below, the hero has a portrait photo on the left (the image isn't finalized, use a placeholder for now), and on the right on a white background the big heading Sofortkredit, below it the smaller Online vergleichen & Direkt beantragen, and below that four short phrases with checkmarks in two rows of two: Schneller Überblick, Top-Zins Angebote, Sofort-Antrag, Express-Auszahlung, and finally a blue button » Kreditvergleich starten. Under the hero sits a dark horizontal bar with four items in one row: Zahlreiche Bankangebote, Mit wenigen Klicks vergleichen, Top-Zinsen erhalten, Schnelle Prüfung & Auszahlung, each preceded by a checkmark icon. The body has a blue-outlined hexagonal badge on the left and a German paragraph on the right, in three blocks in order: SOFORTKREDIT, VERWENDUNG, VERGLEICH; under the VERWENDUNG body there is an 8-item bulleted list (from Unvorhersehbare Reparaturen to Ausgleich des Girokontos). The body area contains three identical dark banners in total, positioned: one after the VERGLEICH paragraph, one after the Sofortkredit Online block, and one after the Sofortkredit Beantragen block; all three read Ihr Creditguide zum Sofortkredit. Vergleichen, Anfragen, Abschließen., each with a blue » Jetzt starten button below. Next is the light gray Sofortkredit Online block, with a two-color centered heading (dark navy first half, bright blue second half) and a short underline below it, then three white cards, each with a hexagonal badge on the left reading SCHRITT 1 / SCHRITT 2 / SCHRITT 3 and a small heading plus German body on the right. Further down the Sofortkredit Beantragen block, with the same two-color centered heading, body split into sections by four hexagonal badges ALLGEMEIN, UNTERLAGEN, HINWEISE, LEGITIMATION: 2 list items under ALLGEMEIN, 7 under UNTERLAGEN, four underlined small headings inside HINWEISE (Kreditvergleich, Dokument-Upload, Qualifizierte elektronische Signatur (QES), Bonitätsprüfung in Echtzeit), and two underlined small headings inside LEGITIMATION (Post-Ident-Verfahren and Video-Ident-Verfahren). At the very bottom of the page, leave a two-color centered heading in the same style, Sofortkredit Ohne Schufa?. The overall feel should match the image: plenty of whitespace, steady dark navy + bright blue, with gray-black small body text."
|
| 25 |
},
|
| 26 |
{
|
| 27 |
+
"operator": "wire up data",
|
| 28 |
+
"request": "An article alone is useless — what the client wants is comparison. After the VERGLEICH paragraph, add a real quote comparison area. Ops sent a messy list of base annual rates, I'll copy it for you: Santander 3.49; ING cheapest 3.29; DKB 3.95; Postbank 4.15; Targobank 4.59 (the most expensive); Norisbank 3.79; Commerzbank 4.29. Each of these seven offers all six terms — 12, 24, 36, 48, 60, 72 months — list every combination. The industry rule is the longer the term the more expensive: each additional year adds 0.25 points to that bank's base rate, 12 months is the base, and rates are written to two decimal places. Users can pick the loan amount from 5,000 to 25,000 in steps of 5,000, five tiers in total, default 10,000; changing the amount doesn't change the rates, only the money figures. Don't use the banks' complicated repayment formula — just use total repayment = principal × (1 + annual rate × years), monthly payment = total repayment ÷ number of months rounded up to whole euros, and interest is total repayment minus principal. The list defaults to rate ascending, ties by bank name alphabetically; it must also be switchable to sort by monthly payment and by total interest. On the left users can check banks and filter by term (both multi-select), 10 rows per page with pagination, and paging must not lose the filter conditions. When the filters leave nothing, show a decent empty state prompt, don't give the user a blank board. Also give the lowest-rate row across all offers a prominent marker so it's visible at a glance, but don't make it garish — still the original steady blue."
|
| 29 |
},
|
| 30 |
{
|
| 31 |
+
"operator": "add section",
|
| 32 |
+
"request": "After comparing, users must be able to apply right away. Add a select button to the right of each offer; once selected, show a selected notice at the top (as many as are selected, but we only allow one at a time — changing selection directly swaps the old one), and the selected row itself must visibly show it's selected. At the same time a three-step application wizard appears on the page: step one fills in name and age; under 18 can't proceed to the next step, and a notice must be shown; step two fills in monthly net income — our risk line is the monthly payment must not exceed 35% of net income, and exceeding it must clearly notify and block further progress, and only once adjusted enough and the notice gone can they continue; step three is a confirmation summary where bank, term, amount, monthly payment, and total interest must all exactly match that row in the list, and submitting shows a success notice. When no offer is selected yet the wizard must show a guided empty state and must not let people click through empty. One detail don't forget: if the user selects an offer and then changes the filters so that row is hidden, the selected item must not be lost; clearing is only possible via an explicit clear-selection action, after which it returns to the empty state."
|
| 33 |
},
|
| 34 |
{
|
| 35 |
+
"operator": "restructure layout",
|
| 36 |
+
"request": "The page is too long; rearrange it. On large screens put the quote list and the application wizard side by side, with the wizard on the right, staying visible as you scroll down; on narrow screens keep them stacked vertically, list on top and wizard below. The three identical dark banners are too wordy — don't repeat them in the body any more; merge them into one bar permanently pinned to the bottom of the page: when no offer is selected it still shows the original German copy and the » Jetzt starten button; once an offer is selected it switches to that offer's summary, with at least bank and monthly payment, and the numbers must match the list. All five entries at the top must scroll to the corresponding place when clicked: Sofortkredit to the top of the hero, Online to the Sofortkredit Online block, Beantragen to the Sofortkredit Beantragen block, Zinsen to the newly built quote comparison area, Ohne Schufa? to the heading at the bottom of the page; whichever block you scroll to, that entry lights up, and only one at a time. Don't mess up the hexagons, German body text, underlined small headings, the three two-color headings, and the hero's text-left image-right layout from the previous version."
|
| 37 |
},
|
| 38 |
{
|
| 39 |
+
"operator": "restyle",
|
| 40 |
+
"request": "Add a night mode toggle at the top that switches the whole site together, and remember the user's last choice after a refresh. Dark mode must still be the original blue palette — don't pop out a second theme color; the newly built quote list, filters, wizard, and bottom pinned bar must all switch along with it, and no block may remain white and look out of place. The lowest-rate marker must be visible at a glance in both modes, but its style must belong to the same family as the whole site. Most important, don't interrupt the user: when switching skins, the filter conditions, sort order, current page number, which offer is selected, and which step the wizard is on must all be preserved exactly."
|
| 41 |
}
|
| 42 |
],
|
| 43 |
"checklist": [
|
| 44 |
{
|
| 45 |
"id": "rep.header.nav",
|
| 46 |
"m": 1,
|
| 47 |
+
"dimension": "coverage",
|
| 48 |
"w": 1.5,
|
| 49 |
+
"description": "The narrow dark navy top bar shows CREDITGUIDE.DE on the left, and on the right 5 nav items in the order Sofortkredit, Online, Beantragen, Zinsen, Ohne Schufa?, with a bright blue rounded button reading Direktvergleich → (including the arrow) at the far right — the order and copy exactly consistent."
|
| 50 |
},
|
| 51 |
{
|
| 52 |
"id": "rep.hero.layout",
|
| 53 |
"m": 1,
|
| 54 |
+
"dimension": "visual",
|
| 55 |
"w": 1.5,
|
| 56 |
+
"description": "The hero is text-left image-right: the left image (can be a placeholder) takes about half the hero width, and on the right on a white background in order are the big heading Sofortkredit, the subtitle Online vergleichen & Direkt beantragen, the four checked short phrases Schneller Überblick / Top-Zins Angebote / Sofort-Antrag / Express-Auszahlung (arranged in two rows of two columns), and the blue button » Kreditvergleich starten, with the copy verbatim."
|
| 57 |
},
|
| 58 |
{
|
| 59 |
"id": "rep.strip.four",
|
| 60 |
"m": 1,
|
| 61 |
+
"dimension": "visual",
|
| 62 |
"w": 1.0,
|
| 63 |
+
"description": "Directly below the hero is a dark navy horizontal bar arranged horizontally with exactly 4 items, copy in order Zahlreiche Bankangebote, Mit wenigen Klicks vergleichen, Top-Zinsen erhalten, Schnelle Prüfung & Auszahlung, each preceded by a checkmark icon."
|
| 64 |
},
|
| 65 |
{
|
| 66 |
"id": "rep.hex.count",
|
| 67 |
"m": 1,
|
| 68 |
+
"dimension": "coverage",
|
| 69 |
"w": 1.5,
|
| 70 |
+
"description": "The whole page has 10 blue-outlined hexagonal badges, with text in order SOFORTKREDIT, VERWENDUNG, VERGLEICH, SCHRITT 1, SCHRITT 2, SCHRITT 3, ALLGEMEIN, UNTERLAGEN, HINWEISE, LEGITIMATION, and the badges are uniformly aligned in a column on the left of the body — not circles or squares."
|
| 71 |
},
|
| 72 |
{
|
| 73 |
"id": "rep.lists.subheads",
|
| 74 |
"m": 1,
|
| 75 |
+
"dimension": "coverage",
|
| 76 |
"w": 1.0,
|
| 77 |
+
"description": "The bulleted list in the VERWENDUNG section is exactly 8 items (first Unvorhersehbare Reparaturen…, last Ausgleich des Girokontos…), UNTERLAGEN exactly 7, ALLGEMEIN exactly 2; the HINWEISE section has 4 underlined small headings Kreditvergleich, Dokument-Upload, Qualifizierte elektronische Signatur (QES), Bonitätsprüfung in Echtzeit, and the LEGITIMATION section has 2 underlined small headings Post-Ident-Verfahren, Video-Ident-Verfahren — 6 small headings in total with verbatim matching text and underlined styling."
|
| 78 |
},
|
| 79 |
{
|
| 80 |
"id": "rep.headings.tricolor",
|
| 81 |
"m": 1,
|
| 82 |
+
"dimension": "visual",
|
| 83 |
"w": 1.0,
|
| 84 |
+
"description": "The page has 3 centered two-color headings in total, from top to bottom Sofortkredit Online, Sofortkredit Beantragen, Sofortkredit Ohne Schufa? (the third at the very bottom of the page); all three have a dark navy first half and bright blue second half, each with a short underline below."
|
| 85 |
},
|
| 86 |
{
|
| 87 |
"id": "data.count42",
|
| 88 |
"m": 2,
|
| 89 |
+
"dimension": "functional",
|
| 90 |
"w": 1.5,
|
| 91 |
+
"description": "With no filters applied and the amount at the default 10,000, there are 42 quotes in total (7 banks × 6 terms, verifiable via the total count copy or by summing the pages), the default sort is rate ascending, and the first row is ING 12 Monate with the rate shown as 3.29% (or 3,29 %), monthly payment 861 €, total interest 329 €."
|
| 92 |
},
|
| 93 |
{
|
| 94 |
"id": "data.calc.extreme",
|
| 95 |
"m": 2,
|
| 96 |
+
"dimension": "functional",
|
| 97 |
"w": 1.5,
|
| 98 |
+
"description": "At an amount of 10,000, the Targobank 72 Monate row has a rate of 5.84% (or 5,84 %), monthly payment 188 €, total interest 3,504 €; the ING 36 Monate row is 3.79% (or 3,79 %), monthly payment 310 €, total interest 1,137 € (monthly payment rounded up; either decimal-point or thousands-separator notation is acceptable)."
|
| 99 |
},
|
| 100 |
{
|
| 101 |
"id": "data.amount.steps",
|
| 102 |
"m": 2,
|
| 103 |
+
"dimension": "functional",
|
| 104 |
"w": 1.0,
|
| 105 |
+
"description": "The amount selector provides exactly five tiers — 5,000, 10,000, 15,000, 20,000, 25,000 — defaulting to 10,000; switching to 5,000 keeps the ING 12 Monate rate at 3.29% (or 3,29 %) while the monthly payment becomes 431 €; switching to 20,000 makes the ING 36 Monate monthly payment 619 € with total interest 2,274 €."
|
| 106 |
},
|
| 107 |
{
|
| 108 |
"id": "data.sort.combo",
|
| 109 |
"m": 2,
|
| 110 |
+
"dimension": "functional",
|
| 111 |
"w": 1.0,
|
| 112 |
+
"description": "At an amount of 10,000 with no filters: switching the sort to monthly payment ascending makes the first row ING 72 Monate with a monthly payment of 177 €; switching the sort to total interest ascending makes the first row ING 12 Monate (total interest 329 €) and the second Santander 12 Monate (total interest 349 €), and the two sorts' first rows differ from each other."
|
| 113 |
},
|
| 114 |
{
|
| 115 |
"id": "data.filter.page",
|
| 116 |
"m": 2,
|
| 117 |
+
"dimension": "interaction",
|
| 118 |
"w": 1.5,
|
| 119 |
+
"description": "With no filters there are 10 rows per page over 5 pages, with only 2 rows on page 5; after going to page 2, and after switching sort on page 2, the checked bank/term conditions stay unchanged and page 2 always shows rows 11–20 of the current filtered, sorted results; checking only DKB and Postbank with only 36 and 60 months selected gives exactly 4 results shown fully on one page (pager disappears or shows only 1 page)."
|
| 120 |
},
|
| 121 |
{
|
| 122 |
"id": "data.empty.badge",
|
| 123 |
"m": 2,
|
| 124 |
+
"dimension": "functional",
|
| 125 |
"w": 1.0,
|
| 126 |
+
"description": "In day mode, with no filters, at an amount of 10,000, only the ING 12 Monate row carries a prominent lowest-rate marker (the other 41 rows don't), and the marker's color belongs to the site's blue family rather than an added red/green/orange second primary color; after unchecking all banks the list area shows a clear empty-state prompt with no quote rows or page numbers."
|
| 127 |
},
|
| 128 |
{
|
| 129 |
"id": "wiz.select.single",
|
| 130 |
"m": 3,
|
| 131 |
+
"dimension": "interaction",
|
| 132 |
"w": 1.5,
|
| 133 |
+
"description": "After clicking the select button on a quote, a selected notice appears at the top with a count of 1, and that row shows an obvious selected state; clicking another quote moves the selected state to the new row, the old row reverts to unselected, and the count stays 1 (no accumulation)."
|
| 134 |
},
|
| 135 |
{
|
| 136 |
"id": "wiz.age.gate",
|
| 137 |
"m": 3,
|
| 138 |
+
"dimension": "functional",
|
| 139 |
"w": 1.0,
|
| 140 |
+
"description": "Entering age 17 in wizard step one prevents proceeding to step two and shows a clear notice; changing to 18 or above allows entering step two."
|
| 141 |
},
|
| 142 |
{
|
| 143 |
"id": "wiz.income.rule",
|
| 144 |
"m": 3,
|
| 145 |
+
"dimension": "functional",
|
| 146 |
"w": 1.5,
|
| 147 |
+
"description": "After selecting ING 12 Monate (amount 10,000, monthly payment 861 €), entering monthly net income 2000 in step two shows a notice that the 35% risk line is exceeded and prevents entering step three; changing to 2500 removes the notice and allows step three (threshold is monthly payment ≤ net income × 35%, i.e. a cap of 700 for 2000 and 875 for 2500)."
|
| 148 |
},
|
| 149 |
{
|
| 150 |
"id": "wiz.summary.match",
|
| 151 |
"m": 3,
|
| 152 |
+
"dimension": "functional",
|
| 153 |
"w": 1.0,
|
| 154 |
+
"description": "The step-three summary lists all five items — bank, term, amount, monthly payment, total interest — with values exactly matching the selected row in the list (e.g. selecting ING 36 Monate at amount 10,000 shows monthly payment 310 € and total interest 1,137 €); submitting shows a success notice; with no quote selected the wizard shows the guided empty state and cannot advance to the income check step."
|
| 155 |
},
|
| 156 |
{
|
| 157 |
"id": "wiz.coupling.filter",
|
| 158 |
"m": 3,
|
| 159 |
+
"dimension": "functional",
|
| 160 |
"w": 1.5,
|
| 161 |
+
"description": "First select an ING quote, then uncheck ING in the filters so that row disappears from the list: the top selected count is still 1, and the wizard's bank/term/monthly payment information for that offer stays exactly the same; only after clicking clear selection does the count go to zero and the wizard return to the guided empty state with no offer selected."
|
| 162 |
},
|
| 163 |
{
|
| 164 |
"id": "layout.twocol",
|
| 165 |
"m": 4,
|
| 166 |
+
"dimension": "visual",
|
| 167 |
"w": 1.5,
|
| 168 |
+
"description": "At a browser width of about 1280px the quote list and application wizard sit side by side (wizard on the right), and the wizard stays visible in the viewport as you scroll the list; at about 480px they stack vertically with the list on top and the wizard below."
|
| 169 |
},
|
| 170 |
{
|
| 171 |
"id": "layout.sticky.merge",
|
| 172 |
"m": 4,
|
| 173 |
+
"dimension": "functional",
|
| 174 |
"w": 1.5,
|
| 175 |
+
"description": "The body area no longer contains the repeated Ihr Creditguide… dark banners (the original three are merged), and the page bottom instead has one pinned bar; when no offer is selected the bar shows the original German copy Ihr Creditguide zum Sofortkredit. Vergleichen, Anfragen, Abschließen. and the » Jetzt starten button."
|
| 176 |
},
|
| 177 |
{
|
| 178 |
"id": "layout.sticky.bound",
|
| 179 |
"m": 4,
|
| 180 |
+
"dimension": "functional",
|
| 181 |
"w": 1.5,
|
| 182 |
+
"description": "After selecting ING 36 Monate (amount 10,000), the bottom pinned bar switches to showing that offer's summary, containing at least the bank name ING and monthly payment 310 €, with values consistent across the list row, the wizard summary, and the bar; after clearing the selection the bar returns to the original German copy."
|
| 183 |
},
|
| 184 |
{
|
| 185 |
"id": "layout.anchor.targets",
|
| 186 |
"m": 4,
|
| 187 |
+
"dimension": "interaction",
|
| 188 |
"w": 1.0,
|
| 189 |
+
"description": "Clicking Online scrolls to the Sofortkredit Online block, clicking Beantragen scrolls to the Sofortkredit Beantragen block, and clicking Ohne Schufa? scrolls to the Sofortkredit Ohne Schufa? heading at the bottom of the page — the three jump targets are all different and all visible."
|
| 190 |
},
|
| 191 |
{
|
| 192 |
"id": "layout.anchor.zinsen",
|
| 193 |
"m": 4,
|
| 194 |
+
"dimension": "interaction",
|
| 195 |
"w": 1.0,
|
| 196 |
+
"description": "Clicking Zinsen scrolls to the quote comparison area (filters and quote list enter the viewport), and clicking Sofortkredit returns to the top of the hero; while scrolling only one nav item is highlighted at a time, and when stopped at the quote comparison area the highlighted one is Zinsen."
|
| 197 |
},
|
| 198 |
{
|
| 199 |
"id": "layout.regression",
|
| 200 |
"m": 4,
|
| 201 |
+
"dimension": "coverage",
|
| 202 |
"w": 1.0,
|
| 203 |
+
"description": "After the rearrangement the 10 hexagonal badges, 6 underlined small headings, and three two-color centered headings all still exist with unchanged styling; the hero is still text-left image-right, and all German body copy is unchanged word for word (not replaced with Chinese or new copy)."
|
| 204 |
},
|
| 205 |
{
|
| 206 |
"id": "skin.toggle",
|
| 207 |
"m": 5,
|
| 208 |
+
"dimension": "visual",
|
| 209 |
"w": 1.5,
|
| 210 |
+
"description": "A theme toggle exists at the top; after switching to night the header, body area, and card backgrounds all turn dark, with body text turning light and readable; switching back to day restores the reference image's white background + dark navy + bright blue palette."
|
| 211 |
},
|
| 212 |
{
|
| 213 |
"id": "skin.consistency",
|
| 214 |
"m": 5,
|
| 215 |
+
"dimension": "visual",
|
| 216 |
"w": 1.5,
|
| 217 |
+
"description": "In night mode the quote list, filter controls, application wizard, and bottom pinned bar all darken with the theme, with no residual block still on a white background; the primary color remains the blue family (no second colorful primary color introduced), and the ING 12 Monate row's lowest-rate marker is clearly distinguishable in both modes and stylistically of the same family as the site."
|
| 218 |
},
|
| 219 |
{
|
| 220 |
"id": "skin.state.keep",
|
| 221 |
"m": 5,
|
| 222 |
+
"dimension": "functional",
|
| 223 |
"w": 1.5,
|
| 224 |
+
"description": "Under the state of DKB+Postbank checked, sorted by monthly payment ascending, staying on a non-first page (if that combination has multiple pages), an offer selected, and the wizard stopped at step two with content filled in, switching the theme preserves exactly: the number of filter results, the sort result order, the current page number, the selected row, the wizard step, and the filled content."
|
| 225 |
},
|
| 226 |
{
|
| 227 |
"id": "skin.persist",
|
| 228 |
"m": 5,
|
| 229 |
+
"dimension": "functional",
|
| 230 |
"w": 1.0,
|
| 231 |
+
"description": "After choosing night mode and refreshing the page, the page is still in night mode (it doesn't flash back to day before switching), and after the refresh the bottom pinned bar still shows the original German copy Ihr Creditguide zum Sofortkredit. Vergleichen, Anfragen, Abschließen. when no offer is selected."
|
| 232 |
},
|
| 233 |
{
|
| 234 |
"id": "skin.hex.regression",
|
| 235 |
"m": 5,
|
| 236 |
+
"dimension": "coverage",
|
| 237 |
"w": 1.0,
|
| 238 |
+
"description": "In night mode the 10 badges are still hexagonal with clearly visible outlines (not degraded into squares or disappearing), and the 6 underlined small headings, three two-color headings, and German body copy are exactly the same as in day mode."
|
| 239 |
}
|
| 240 |
],
|
| 241 |
"inject": null,
|
| 242 |
"qc_static": [],
|
| 243 |
"review_status": "needs_human"
|
| 244 |
+
}
|
tasks/c37/task.json
CHANGED
|
@@ -3,229 +3,229 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
],
|
| 17 |
-
"domain": "
|
| 18 |
"seed_meta": {
|
| 19 |
"ref_image_src": "prototypes/reference.jpg"
|
| 20 |
},
|
| 21 |
-
"title": "Monday Happy Monday
|
| 22 |
"milestones": [
|
| 23 |
{
|
| 24 |
-
"operator": "
|
| 25 |
-
"request": "
|
| 26 |
},
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
}
|
| 43 |
],
|
| 44 |
"checklist": [
|
| 45 |
{
|
| 46 |
"id": "replicate.hero.quote",
|
| 47 |
"m": 1,
|
| 48 |
-
"dimension": "
|
| 49 |
"w": 1.5,
|
| 50 |
-
"description": "
|
| 51 |
},
|
| 52 |
{
|
| 53 |
"id": "replicate.cards.six",
|
| 54 |
"m": 1,
|
| 55 |
-
"dimension": "
|
| 56 |
"w": 1.5,
|
| 57 |
-
"description": "
|
| 58 |
},
|
| 59 |
{
|
| 60 |
"id": "replicate.blog.three",
|
| 61 |
"m": 1,
|
| 62 |
-
"dimension": "
|
| 63 |
"w": 1.5,
|
| 64 |
-
"description": "
|
| 65 |
},
|
| 66 |
{
|
| 67 |
"id": "replicate.header.topbar",
|
| 68 |
"m": 1,
|
| 69 |
-
"dimension": "
|
| 70 |
"w": 1.0,
|
| 71 |
-
"description": "
|
| 72 |
},
|
| 73 |
{
|
| 74 |
"id": "replicate.subscribe.stats",
|
| 75 |
"m": 1,
|
| 76 |
-
"dimension": "
|
| 77 |
"w": 1.0,
|
| 78 |
-
"description": "
|
| 79 |
},
|
| 80 |
{
|
| 81 |
"id": "replicate.clients.wall",
|
| 82 |
"m": 1,
|
| 83 |
-
"dimension": "
|
| 84 |
"w": 1.0,
|
| 85 |
-
"description": "
|
| 86 |
},
|
| 87 |
{
|
| 88 |
"id": "refactor.summary.values",
|
| 89 |
"m": 2,
|
| 90 |
-
"dimension": "
|
| 91 |
"w": 1.5,
|
| 92 |
-
"description": "
|
| 93 |
},
|
| 94 |
{
|
| 95 |
"id": "refactor.subscribe.preserved",
|
| 96 |
"m": 2,
|
| 97 |
-
"dimension": "
|
| 98 |
"w": 1.5,
|
| 99 |
-
"description": "
|
| 100 |
},
|
| 101 |
{
|
| 102 |
"id": "refactor.cards.fields",
|
| 103 |
"m": 2,
|
| 104 |
-
"dimension": "
|
| 105 |
"w": 1.0,
|
| 106 |
-
"description": "
|
| 107 |
},
|
| 108 |
{
|
| 109 |
"id": "refactor.sort.default",
|
| 110 |
"m": 2,
|
| 111 |
-
"dimension": "
|
| 112 |
"w": 1.5,
|
| 113 |
-
"description": "
|
| 114 |
},
|
| 115 |
{
|
| 116 |
"id": "refactor.upstream.intact",
|
| 117 |
"m": 2,
|
| 118 |
-
"dimension": "
|
| 119 |
"w": 1.0,
|
| 120 |
-
"description": "
|
| 121 |
},
|
| 122 |
{
|
| 123 |
"id": "state.filter.multi",
|
| 124 |
"m": 3,
|
| 125 |
-
"dimension": "
|
| 126 |
"w": 1.5,
|
| 127 |
-
"description": "
|
| 128 |
},
|
| 129 |
{
|
| 130 |
"id": "state.filter.badge.static",
|
| 131 |
"m": 3,
|
| 132 |
-
"dimension": "
|
| 133 |
"w": 1.0,
|
| 134 |
-
"description": "
|
| 135 |
},
|
| 136 |
{
|
| 137 |
"id": "state.summary.coupled",
|
| 138 |
"m": 3,
|
| 139 |
-
"dimension": "
|
| 140 |
"w": 1.5,
|
| 141 |
-
"description": "
|
| 142 |
},
|
| 143 |
{
|
| 144 |
"id": "state.search.intersect",
|
| 145 |
"m": 3,
|
| 146 |
-
"dimension": "
|
| 147 |
"w": 1.0,
|
| 148 |
-
"description": "
|
| 149 |
},
|
| 150 |
{
|
| 151 |
"id": "state.sort.year",
|
| 152 |
"m": 3,
|
| 153 |
-
"dimension": "
|
| 154 |
"w": 1.0,
|
| 155 |
-
"description": "
|
| 156 |
},
|
| 157 |
{
|
| 158 |
"id": "state.paging.reset",
|
| 159 |
"m": 3,
|
| 160 |
-
"dimension": "
|
| 161 |
"w": 1.5,
|
| 162 |
-
"description": "
|
| 163 |
},
|
| 164 |
{
|
| 165 |
"id": "block.distribution.percent",
|
| 166 |
"m": 4,
|
| 167 |
-
"dimension": "
|
| 168 |
"w": 1.5,
|
| 169 |
-
"description": "
|
| 170 |
},
|
| 171 |
{
|
| 172 |
"id": "block.distribution.pageIndependent",
|
| 173 |
"m": 4,
|
| 174 |
-
"dimension": "
|
| 175 |
"w": 1.5,
|
| 176 |
-
"description": "
|
| 177 |
},
|
| 178 |
{
|
| 179 |
"id": "block.empty.state",
|
| 180 |
"m": 4,
|
| 181 |
-
"dimension": "
|
| 182 |
"w": 1.0,
|
| 183 |
-
"description": "
|
| 184 |
},
|
| 185 |
{
|
| 186 |
"id": "block.palette.reuse",
|
| 187 |
"m": 4,
|
| 188 |
-
"dimension": "
|
| 189 |
"w": 1.0,
|
| 190 |
-
"description": "
|
| 191 |
},
|
| 192 |
{
|
| 193 |
"id": "inter.drawer.open",
|
| 194 |
"m": 5,
|
| 195 |
-
"dimension": "
|
| 196 |
"w": 1.5,
|
| 197 |
-
"description": "
|
| 198 |
},
|
| 199 |
{
|
| 200 |
"id": "inter.drawer.avg.second",
|
| 201 |
"m": 5,
|
| 202 |
-
"dimension": "
|
| 203 |
"w": 1.0,
|
| 204 |
-
"description": "
|
| 205 |
},
|
| 206 |
{
|
| 207 |
"id": "inter.drawer.filterChain",
|
| 208 |
"m": 5,
|
| 209 |
-
"dimension": "
|
| 210 |
"w": 1.5,
|
| 211 |
-
"description": "
|
| 212 |
},
|
| 213 |
{
|
| 214 |
"id": "inter.drawer.dismiss",
|
| 215 |
"m": 5,
|
| 216 |
-
"dimension": "
|
| 217 |
"w": 1.0,
|
| 218 |
-
"description": "
|
| 219 |
},
|
| 220 |
{
|
| 221 |
"id": "inter.style.consistency",
|
| 222 |
"m": 5,
|
| 223 |
-
"dimension": "
|
| 224 |
"w": 1.0,
|
| 225 |
-
"description": "
|
| 226 |
}
|
| 227 |
],
|
| 228 |
"inject": null,
|
| 229 |
"qc_static": [],
|
| 230 |
"review_status": "needs_human"
|
| 231 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"restructure layout",
|
| 8 |
+
"add state",
|
| 9 |
+
"add section",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"non-local changes"
|
| 16 |
],
|
| 17 |
+
"domain": "data display",
|
| 18 |
"seed_meta": {
|
| 19 |
"ref_image_src": "prototypes/reference.jpg"
|
| 20 |
},
|
| 21 |
+
"title": "Monday Happy Monday client data panel overhaul",
|
| 22 |
"milestones": [
|
| 23 |
{
|
| 24 |
+
"operator": "replicate",
|
| 25 |
+
"request": "First build our homepage 1:1 from the reference image — don't change a single word of copy (keep the Spanish original), and where images are missing use same-color or gray placeholder blocks, but the layout, palette, and order must match. From top to bottom:\n1) A very thin dark bar at the top, with a row of small social icons and the Es / Ca / En language switcher on the right; the header has the white monday happy monday wordmark at the top left and an orange square menu button at the top right.\n2) The hero is a large warm-yellow-toned photo background, with the white large quote centered on it: \"La creatividad es la capacidad de imaginar un futuro que aún no existe. La innovación es la forma en que lo hacemos realidad. – Tim Brown\" (copy with the quotation marks).\n3) Then six service cards, three columns two rows. First row: Design Sprint (yellow background, small text \"Resuelve grandes problemas y testea nuevas ideas en sólo 5 días\"), Formación (dark blue background, small text \"La escuela para convertirse en un líder del siglo XXI, ser un emprendedor o Simplemente cambiar el mundo.\"), Design Thinking (light blue background, small text \"Proyectos de innovación con Design Thinking que podrás llevar a la práctica\"). Second row: Design Research (coral red background, small text \"¿Conoces a tu usuario y su entorno y enfoca tu reto en sólo 2 días?\"), Talleres de Creatividad (green background, small text \"¡Haz emerger las mejores ideas en solo un día!\"), Agile (pink-purple background, small text \"Te acompañamos para sacar el mejor rendimiento de tu plan\"). Card titles are all white text placed in the upper part of the card, with a small illustration slot in the middle.\n4) A full teal block, with the large white heading \"Conócenos\" centered, and below it a centered portrait photo whose bottom edge crosses the teal block and presses into the orange block below.\n5) The orange block, with the large white heading \"Novedades en el blog\", below it the small text link \"TODOS LOS ARTÍCULOS\", and below that three white article cards: titles are \"El coste político de no decidir (y la calma que sale cara)\", \"Cuando la matriz decide por nadie: poder, ambigüedad y gobernanza en estructuras complejas\", \"Lo que realmente ocurre en un workshop estratégico (y por qué algunos fracasan)\", each with a line below the title \"por Alicia Linares Roger | 20 May. 2026\", \"por Alejo Montero Bosch | 15 May. 2026\", \"por Alicia Linares Roger | 28 Abr. 2026\", then a line of comma-separated categories (Innovación, Tendencias / Innovación, Tendencias / Historias reales, Innovación, Tendencias), and finally a paragraph of gray excerpt text.\n6) The dark blue subscription block, with jagged edges top and bottom. Inside, a centered heading \"Suscríbete\", a small megaphone icon, the explanatory text \"Introduce tu correo para recibir novedades y actualizaciones de Monday Happy Monday\", an input with placeholder \"Tu correo\" and an \"ENVÍA\" button; below, three groups of large orange numbers in a row: 92 (Empresas), 176 (Proyectos), 3121 (Personas), with small gray-white labels.\n7) Finally the light gray-white block, with the large blue heading \"Clientes\", and below it a grayscale logo wall, five per row, at least six rows."
|
| 26 |
},
|
| 27 |
{
|
| 28 |
+
"operator": "restructure layout",
|
| 29 |
+
"request": "That whole logo wall in the client section is too much hand-waving — investors will just ask \"so how many are there really?\". Turn the whole Clientes block into a client data panel: three summary numbers in a row at the top; below, a narrow industry column on the left and a client card grid on the right (three to four per row on wide screens, stacking vertically into one column on narrow screens); each card must show the client name, industry, first collaboration year, and number of projects done.\n\nOne more thing while you're at it: move the three hardcoded numbers in the subscription block (92 / 176 / 3121) up to the top of the new panel, and don't leave them in the subscription block — keep only the heading, megaphone icon, explanatory text, email box, and ENVÍA button, and don't change the dark blue background or the jagged edges top and bottom at all. The three numbers moved over must no longer be hardcoded — compute them for real from the list below: how many clients in total, how many projects in total, and how many industries are covered. For type size and color follow the original feel of large orange numbers plus small gray labels. Don't carelessly mess up what was built well in the previous version — the hero, six service cards, Conócenos, and blog area.\n\nClient list (from sales, messy format, sort it out yourself; parentheses are industry, first collaboration year, project count, in that order): EDEM (Education, 2016, 7), La Salle (Education, 2018, 4), ESADE (Education, 2015, 9), UOC (Education, 2019, 3), IEBS (Education, 2020, 2), inesdi (Education, 2017, 5), EAE Business School (Education, 2014, 6), eada (Education, 2021, 1), Barcelona Activa (Education, 2013, 11), Fundació Pere Tarrés (Education, 2019, 4); Roche (Health, 2016, 8), B.Braun (Health, 2018, 3), Uriach (Health, 2015, 6), Clínic (Health, 2017, 5), Boehringer Ingelheim (Health, 2020, 2), Sanofi (Health, 2019, 4), INDIBA (Health, 2021, 1); DENSO (Industry, 2014, 5), Schneider Electric (Industry, 2016, 7), SHAD (Industry, 2018, 3), Werfen (Industry, 2015, 6), Carglass (Industry, 2017, 4), Altran (Industry, 2019, 2), Volkswagen (Industry, 2013, 9), Keysight (Industry, 2020, 3); Diputació de Barcelona (Public sector, 2013, 10), Ajuntament de Lleida (Public sector, 2016, 4), Port de Barcelona (Public sector, 2015, 6), FGC (Public sector, 2018, 5), Incasol (Public sector, 2019, 2), Foment de Ciutat (Public sector, 2017, 3), Òmnium (Public sector, 2020, 1), Abertis (Public sector, 2014, 7); Vodafone (Tech & telecom, 2016, 6), Cellnex (Tech & telecom, 2018, 4), InPost (Tech & telecom, 2021, 2), Mediapro (Tech & telecom, 2015, 5); PepsiCo (Consumer, 2014, 8), Makro (Consumer, 2017, 5), Vueling (Consumer, 2016, 6), Endesa (Consumer, 2015, 7), McCann (Consumer, 2018, 4), Serunion (Consumer, 2019, 3).\n\nFor now lay them out by project count high to low; when project counts tie, the one that started collaborating earlier comes first; if even the year is the same, alphabetical by name. Show them all at this stage, no pagination needed."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "The panel can only be looked at right now — people need to filter it themselves. Make the industry column on the left clickable, with all six industries multi-selectable (clicking again deselects); also label each button with how many clients that industry itself has — this number is the fixed total and must not change with filtering. Above the panel add a search box by client name; typing a fragment matches (case-insensitive, name contains the fragment counts as a match), and search and industry filters stack — both conditions must be satisfied to show. Also give a sort choice with two options: \"Projects high→low\" and \"First collaboration year early→late\"; when sorting by year, within the same year put higher project counts first, and when project counts are also equal sort alphabetically by name — same tie-breaking rules as before.\n\nThe cards hold at most 12 per page, with pagination for the rest, page numbers and previous/next, and on the first page don't let people page backwards, on the last page don't let them overshoot, and frantic clicking must not break anything. The three summary numbers at the top must follow the current filter — after filtering (including search) they show the number of clients in the result, the total projects, and the number of industries involved; the numbers must add up, don't fob people off with the grand totals.\n\nAlso, any change to filters, search term, or sort automatically returns to page 1 — don't leave people on a blank page 4. When no industry is selected and the search box is empty, treat it as viewing everything."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "add section",
|
| 37 |
+
"request": "Below the client card grid add an \"Industry distribution\" block: each industry involved in the current filter results gets one horizontal bar, with the industry name and share written on it; the share is computed by project count (that industry's project count in the current result ÷ the total project count of the current result), rounded to a whole percentage, and the bar length follows the share, sorted longest to shortest. The bar colors should be picked from the six service cards' palette above — don't start another garish set.\n\nNote that this block must follow filtering and search, but paging does not affect it (the distribution on page 2 should be the same as on page 1). Also, when a search term matches nobody, neither this block nor the card area should leave an empty shell there — just give a human-readable notice, and the summary numbers should show 0 when they should."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "make interactive",
|
| 41 |
+
"request": "Finally, let client cards open to view details: clicking any card slides a drawer out from the right showing the client's name, industry, first collaboration year, project count, and a line \"an average of X projects per year\" — X is project count divided by the number of years from the first collaboration year to 2026 (inclusive of both ends), to one decimal place. The drawer also has an \"Only this industry\" button; clicking it switches the left industry column to select only this industry, closes the drawer, and returns the list to page 1, with the summary numbers above and the industry distribution following to this industry's figures. When the drawer is open there must be an overlay behind it; clicking the overlay or pressing Esc closes it.\n\nOne small contradiction I should state up front: the boss wants the drawer \"visible at a glance\", but doesn't want to mess up the clean, airy style of the homepage — work out a scheme yourself, but make it consistent across the site; don't have this block in heavy makeup and that block bare-faced."
|
| 42 |
}
|
| 43 |
],
|
| 44 |
"checklist": [
|
| 45 |
{
|
| 46 |
"id": "replicate.hero.quote",
|
| 47 |
"m": 1,
|
| 48 |
+
"dimension": "visual",
|
| 49 |
"w": 1.5,
|
| 50 |
+
"description": "The hero has a warm-yellow-toned large image/color-block background with the white large Spanish quote centered on it, the text containing \"La creatividad es la capacidad de imaginar un futuro que aún no existe\" and \"– Tim Brown\", unchanged."
|
| 51 |
},
|
| 52 |
{
|
| 53 |
"id": "replicate.cards.six",
|
| 54 |
"m": 1,
|
| 55 |
+
"dimension": "coverage",
|
| 56 |
"w": 1.5,
|
| 57 |
+
"description": "The service card area has exactly 6 cards, arranged 3 columns 2 rows at desktop width, with titles in order Design Sprint, Formación, Design Thinking, Design Research, Talleres de Creatividad, Agile, and background colors in order yellow, dark blue, light blue, coral red, green, pink-purple, each card with the corresponding Spanish description text below its title."
|
| 58 |
},
|
| 59 |
{
|
| 60 |
"id": "replicate.blog.three",
|
| 61 |
"m": 1,
|
| 62 |
+
"dimension": "coverage",
|
| 63 |
"w": 1.5,
|
| 64 |
+
"description": "The orange section's heading is \"Novedades en el blog\", directly below it the small text link \"TODOS LOS ARTÍCULOS\"; below that 3 white article cards in order with titles \"El coste político de no decidir (y la calma que sale cara)\", \"Cuando la matriz decide por nadie: poder, ambigüedad y gobernanza en estructuras complejas\", \"Lo que realmente ocurre en un workshop estratégico (y por qué algunos fracasan)\", bylines in order verbatim \"por Alicia Linares Roger | 20 May. 2026\", \"por Alejo Montero Bosch | 15 May. 2026\", \"por Alicia Linares Roger | 28 Abr. 2026\", category lines in order \"Innovación, Tendencias\", \"Innovación, Tendencias\", \"Historias reales, Innovación, Tendencias\", each card ending with a paragraph of gray excerpt text."
|
| 65 |
},
|
| 66 |
{
|
| 67 |
"id": "replicate.header.topbar",
|
| 68 |
"m": 1,
|
| 69 |
+
"dimension": "coverage",
|
| 70 |
"w": 1.0,
|
| 71 |
+
"description": "At the very top of the page is a thin dark bar, with a row of small social icons and the three language switcher texts Es, Ca, En on its right side; the header has the white wordmark \"monday happy monday\" at the top left and an orange square menu button at the top right."
|
| 72 |
},
|
| 73 |
{
|
| 74 |
"id": "replicate.subscribe.stats",
|
| 75 |
"m": 1,
|
| 76 |
+
"dimension": "visual",
|
| 77 |
"w": 1.0,
|
| 78 |
+
"description": "The dark blue subscription block has jagged top and bottom edges, and from top to bottom contains the heading \"Suscríbete\", a megaphone icon, the explanatory text \"Introduce tu correo para recibir novedades y actualizaciones de Monday Happy Monday\", an input with placeholder \"Tu correo\" and an \"ENVÍA\" button, with three groups of large orange numbers 92 / 176 / 3121 in a row at the bottom, with labels Empresas / Proyectos / Personas respectively."
|
| 79 |
},
|
| 80 |
{
|
| 81 |
"id": "replicate.clients.wall",
|
| 82 |
"m": 1,
|
| 83 |
+
"dimension": "visual",
|
| 84 |
"w": 1.0,
|
| 85 |
+
"description": "The teal block has the large white heading \"Conócenos\" centered, below it a centered portrait photo whose bottom edge crosses into the orange block below; at the very bottom of the page is the light gray-white block with the large blue heading \"Clientes\", below it a logo wall with 5 grayscale placeholders per row, at least 6 rows."
|
| 86 |
},
|
| 87 |
{
|
| 88 |
"id": "refactor.summary.values",
|
| 89 |
"m": 2,
|
| 90 |
+
"dimension": "functional",
|
| 91 |
"w": 1.5,
|
| 92 |
+
"description": "The three summary numbers at the top of the panel are computed for real from the list: client count shows 43, total projects shows 208, industry count shows 6 (initial unfiltered state)."
|
| 93 |
},
|
| 94 |
{
|
| 95 |
"id": "refactor.subscribe.preserved",
|
| 96 |
"m": 2,
|
| 97 |
+
"dimension": "visual",
|
| 98 |
"w": 1.5,
|
| 99 |
+
"description": "The subscription block no longer shows the three numbers 92, 176, 3121 or their labels, but the dark blue background, jagged top and bottom edges, \"Suscríbete\" heading, megaphone icon, explanatory text, email input, and ENVÍA button are all retained as-is."
|
| 100 |
},
|
| 101 |
{
|
| 102 |
"id": "refactor.cards.fields",
|
| 103 |
"m": 2,
|
| 104 |
+
"dimension": "coverage",
|
| 105 |
"w": 1.0,
|
| 106 |
+
"description": "The client grid renders 43 cards in total, each simultaneously showing client name, industry name, first collaboration year, and project count; at desktop width 3–4 cards per row, on narrow screens (about 375px) cards stack vertically into a single column; a narrow industry column on the left lists the 6 industry names."
|
| 107 |
},
|
| 108 |
{
|
| 109 |
"id": "refactor.sort.default",
|
| 110 |
"m": 2,
|
| 111 |
+
"dimension": "functional",
|
| 112 |
"w": 1.5,
|
| 113 |
+
"description": "The default sort is by project count descending: the first four cards are in order Barcelona Activa (11), Diputació de Barcelona (10), Volkswagen (9), ESADE (9) (Volkswagen 2013 comes before ESADE 2015, hence earlier)."
|
| 114 |
},
|
| 115 |
{
|
| 116 |
"id": "refactor.upstream.intact",
|
| 117 |
"m": 2,
|
| 118 |
+
"dimension": "visual",
|
| 119 |
"w": 1.0,
|
| 120 |
+
"description": "After the overhaul the hero quote, the six service cards' titles and background colors, the Conócenos teal block, and the three article cards' copy in the blog area are all consistent with requirement 1, unchanged or misaligned."
|
| 121 |
},
|
| 122 |
{
|
| 123 |
"id": "state.filter.multi",
|
| 124 |
"m": 3,
|
| 125 |
+
"dimension": "interaction",
|
| 126 |
"w": 1.5,
|
| 127 |
+
"description": "Clicking \"Education\" in the industry column shows only Education clients (10 in total); clicking \"Health\" then shows Education and Health clients together (17 in total); clicking \"Education\" again to deselect leaves only Health's 7."
|
| 128 |
},
|
| 129 |
{
|
| 130 |
"id": "state.filter.badge.static",
|
| 131 |
"m": 3,
|
| 132 |
+
"dimension": "functional",
|
| 133 |
"w": 1.0,
|
| 134 |
+
"description": "The client count labeled next to each industry in the industry column is always the fixed total (Education 10, Health 7, Industry 8, Public sector 8, Tech & telecom 4, Consumer 6), never changing under any filter, search, or sort state."
|
| 135 |
},
|
| 136 |
{
|
| 137 |
"id": "state.summary.coupled",
|
| 138 |
"m": 3,
|
| 139 |
+
"dimension": "functional",
|
| 140 |
"w": 1.5,
|
| 141 |
+
"description": "With only \"Tech & telecom\" selected, the three summary numbers at the top become client count 4, projects 17, industries 1; clearing all selections restores 43 / 208 / 6."
|
| 142 |
},
|
| 143 |
{
|
| 144 |
"id": "state.search.intersect",
|
| 145 |
"m": 3,
|
| 146 |
+
"dimension": "functional",
|
| 147 |
"w": 1.0,
|
| 148 |
+
"description": "After clearing the industry selection, typing \"barcelona\" (case-insensitive) into the search box shows only three cards: Barcelona Activa, Diputació de Barcelona, Port de Barcelona, with top summary 3 / 27 / 2; then clicking \"Education\" leaves only Barcelona Activa, with summary 1 / 11 / 1."
|
| 149 |
},
|
| 150 |
{
|
| 151 |
"id": "state.sort.year",
|
| 152 |
"m": 3,
|
| 153 |
+
"dimension": "functional",
|
| 154 |
"w": 1.0,
|
| 155 |
+
"description": "Switching to \"First collaboration year early→late\" with no filters and an empty search box makes the first two cards Barcelona Activa (2013, 11) and Diputació de Barcelona (2013, 10) (within the same year, the one with more projects comes first); within the same year and same project count, sort alphabetically by name, so under this sort Serunion comes before UOC, and Altran comes before Incasol."
|
| 156 |
},
|
| 157 |
{
|
| 158 |
"id": "state.paging.reset",
|
| 159 |
"m": 3,
|
| 160 |
+
"dimension": "interaction",
|
| 161 |
"w": 1.5,
|
| 162 |
+
"description": "With no filters, at most 12 cards per page over 4 pages (7 on the last page); after going to page 3, clicking any industry filter, modifying the search term, or switching sort immediately returns the list to page 1; on page 1 clicking \"Previous\" 5 times in a row still stays on page 1 with the same card count, and on the last page clicking \"Next\" repeatedly doesn't overshoot either."
|
| 163 |
},
|
| 164 |
{
|
| 165 |
"id": "block.distribution.percent",
|
| 166 |
"m": 4,
|
| 167 |
+
"dimension": "functional",
|
| 168 |
"w": 1.5,
|
| 169 |
+
"description": "An \"Industry distribution\" block exists below the grid; with only \"Education\" and \"Tech & telecom\" selected (total projects 52+17=69), it shows two bars: Education about 75%, Tech & telecom about 25%, with bar length proportional to the percentage and the longer bar first."
|
| 170 |
},
|
| 171 |
{
|
| 172 |
"id": "block.distribution.pageIndependent",
|
| 173 |
"m": 4,
|
| 174 |
+
"dimension": "functional",
|
| 175 |
"w": 1.5,
|
| 176 |
+
"description": "In the unfiltered state, paging from page 1 to page 3 leaves the industry distribution block's bar count, order, and percentage values completely unchanged (still 6 bars, changing only with filters/search, not with paging)."
|
| 177 |
},
|
| 178 |
{
|
| 179 |
"id": "block.empty.state",
|
| 180 |
"m": 4,
|
| 181 |
+
"dimension": "interaction",
|
| 182 |
"w": 1.0,
|
| 183 |
+
"description": "Typing a keyword that matches no client (e.g. \"zzzz\") into the search box makes the card area and industry distribution area show a readable no-data notice rather than blank frames, while all three summary numbers at the top show 0; clearing the search term restores 43 / 208 / 6 and returns to page 1."
|
| 184 |
},
|
| 185 |
{
|
| 186 |
"id": "block.palette.reuse",
|
| 187 |
"m": 4,
|
| 188 |
+
"dimension": "visual",
|
| 189 |
"w": 1.0,
|
| 190 |
+
"description": "The colors used for the industry distribution bars are within the range of the six service card colors (yellow/dark blue/light blue/coral red/green/pink-purple), with no new palette introduced that clashes with the page's overall color system."
|
| 191 |
},
|
| 192 |
{
|
| 193 |
"id": "inter.drawer.open",
|
| 194 |
"m": 5,
|
| 195 |
+
"dimension": "interaction",
|
| 196 |
"w": 1.5,
|
| 197 |
+
"description": "Clicking the Barcelona Activa card slides out the drawer on the right showing the name, industry Education, first collaboration 2013, project count 11, and \"an average of 0.8 projects per year\" (11 ÷ 14 years = 0.79 rounded to one decimal)."
|
| 198 |
},
|
| 199 |
{
|
| 200 |
"id": "inter.drawer.avg.second",
|
| 201 |
"m": 5,
|
| 202 |
+
"dimension": "functional",
|
| 203 |
"w": 1.0,
|
| 204 |
+
"description": "Clicking INDIBA (Health, 2021, 1) makes the drawer show an average of 0.2 projects per year (1 ÷ 6 years); clicking PepsiCo (Consumer, 2014, 8) shows 0.6 (8 ÷ 13 years)."
|
| 205 |
},
|
| 206 |
{
|
| 207 |
"id": "inter.drawer.filterChain",
|
| 208 |
"m": 5,
|
| 209 |
+
"dimension": "interaction",
|
| 210 |
"w": 1.5,
|
| 211 |
+
"description": "Opening the drawer for an Industry client on page 2 and clicking \"Only this industry\": the drawer closes, only \"Industry\" is selected in the industry column, the list returns to page 1, the top summary becomes client count 8 / projects 39 / industries 1, and the industry distribution has only one bar, Industry 100%."
|
| 212 |
},
|
| 213 |
{
|
| 214 |
"id": "inter.drawer.dismiss",
|
| 215 |
"m": 5,
|
| 216 |
+
"dimension": "interaction",
|
| 217 |
"w": 1.0,
|
| 218 |
+
"description": "When the drawer is open an overlay covers the page content behind it; clicking the overlay closes the drawer, and pressing Esc on the keyboard likewise closes it, with the current page number, search term, and filter state unchanged after closing."
|
| 219 |
},
|
| 220 |
{
|
| 221 |
"id": "inter.style.consistency",
|
| 222 |
"m": 5,
|
| 223 |
+
"dimension": "visual",
|
| 224 |
"w": 1.0,
|
| 225 |
+
"description": "The drawer's visuals come from the same source as the panel controls: the drawer's accent color (buttons/highlights) comes from the page's existing primary colors (one of orange, dark blue, teal) rather than a newly introduced hue; the drawer buttons' corner radius matches the industry filter buttons/pagination buttons, and the close control belongs to the same border and font-size system as the search box; meeting the above anchors passes — if the drawer introduces an obviously different second primary color or corner-radius system from the panel controls, it's judged as inconsistent."
|
| 226 |
}
|
| 227 |
],
|
| 228 |
"inject": null,
|
| 229 |
"qc_static": [],
|
| 230 |
"review_status": "needs_human"
|
| 231 |
+
}
|
tasks/c38/task.json
CHANGED
|
@@ -3,195 +3,195 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
],
|
| 11 |
-
"difficulty": "
|
| 12 |
"levers": [
|
| 13 |
-
"
|
| 14 |
],
|
| 15 |
-
"domain": "
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
-
"title": "Innovify
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
-
"operator": "
|
| 23 |
-
"request": "
|
| 24 |
},
|
| 25 |
{
|
| 26 |
-
"operator": "
|
| 27 |
-
"request": "
|
| 28 |
},
|
| 29 |
{
|
| 30 |
-
"operator": "
|
| 31 |
-
"request": "
|
| 32 |
},
|
| 33 |
{
|
| 34 |
-
"operator": "
|
| 35 |
-
"request": "
|
| 36 |
}
|
| 37 |
],
|
| 38 |
"checklist": [
|
| 39 |
{
|
| 40 |
"id": "rep.nav.order",
|
| 41 |
"m": 1,
|
| 42 |
-
"dimension": "
|
| 43 |
"w": 1.0,
|
| 44 |
-
"description": "
|
| 45 |
},
|
| 46 |
{
|
| 47 |
"id": "rep.hero.main",
|
| 48 |
"m": 1,
|
| 49 |
-
"dimension": "
|
| 50 |
"w": 1.5,
|
| 51 |
-
"description": "
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "rep.hero.cookie",
|
| 55 |
"m": 1,
|
| 56 |
-
"dimension": "
|
| 57 |
"w": 1.0,
|
| 58 |
-
"description": "
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "rep.shift.stats",
|
| 62 |
"m": 1,
|
| 63 |
-
"dimension": "
|
| 64 |
"w": 1.0,
|
| 65 |
-
"description": "
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "rep.featured.projects",
|
| 69 |
"m": 1,
|
| 70 |
-
"dimension": "
|
| 71 |
"w": 1.5,
|
| 72 |
-
"description": "
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "rep.solutions.process",
|
| 76 |
"m": 1,
|
| 77 |
-
"dimension": "
|
| 78 |
"w": 1.5,
|
| 79 |
-
"description": "Solutions We Offer
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "data.total.paging",
|
| 83 |
"m": 2,
|
| 84 |
-
"dimension": "
|
| 85 |
"w": 1.5,
|
| 86 |
-
"description": "
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "data.dataset.constraints",
|
| 90 |
"m": 2,
|
| 91 |
-
"dimension": "
|
| 92 |
"w": 1.0,
|
| 93 |
-
"description": "
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "data.combo.sort",
|
| 97 |
"m": 2,
|
| 98 |
-
"dimension": "
|
| 99 |
"w": 1.0,
|
| 100 |
-
"description": "
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "data.sort.order",
|
| 104 |
"m": 2,
|
| 105 |
-
"dimension": "
|
| 106 |
"w": 1.0,
|
| 107 |
-
"description": "
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "data.cart.chain",
|
| 111 |
"m": 2,
|
| 112 |
-
"dimension": "
|
| 113 |
"w": 1.5,
|
| 114 |
-
"description": "
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "data.cart.edge",
|
| 118 |
"m": 2,
|
| 119 |
-
"dimension": "
|
| 120 |
"w": 1.0,
|
| 121 |
-
"description": "
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "del.blocks.gone",
|
| 125 |
"m": 3,
|
| 126 |
-
"dimension": "
|
| 127 |
"w": 1.5,
|
| 128 |
-
"description": "
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "del.layout.keep",
|
| 132 |
"m": 3,
|
| 133 |
-
"dimension": "
|
| 134 |
"w": 1.0,
|
| 135 |
-
"description": "
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "del.stats.bound",
|
| 139 |
"m": 3,
|
| 140 |
-
"dimension": "
|
| 141 |
"w": 1.5,
|
| 142 |
-
"description": "
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "del.stats.stable",
|
| 146 |
"m": 3,
|
| 147 |
-
"dimension": "
|
| 148 |
"w": 1.5,
|
| 149 |
-
"description": "
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "del.rest.intact",
|
| 153 |
"m": 3,
|
| 154 |
-
"dimension": "
|
| 155 |
"w": 1.0,
|
| 156 |
-
"description": "
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "skin.palette.global",
|
| 160 |
"m": 4,
|
| 161 |
-
"dimension": "
|
| 162 |
"w": 1.5,
|
| 163 |
-
"description": "
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "skin.cta.consistent",
|
| 167 |
"m": 4,
|
| 168 |
-
"dimension": "
|
| 169 |
"w": 1.0,
|
| 170 |
-
"description": "
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "skin.func.regress",
|
| 174 |
"m": 4,
|
| 175 |
-
"dimension": "
|
| 176 |
"w": 1.5,
|
| 177 |
-
"description": "
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "skin.states.visible",
|
| 181 |
"m": 4,
|
| 182 |
-
"dimension": "
|
| 183 |
"w": 1.0,
|
| 184 |
-
"description": "
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "skin.copy.keep",
|
| 188 |
"m": 4,
|
| 189 |
-
"dimension": "
|
| 190 |
"w": 1.0,
|
| 191 |
-
"description": "
|
| 192 |
}
|
| 193 |
],
|
| 194 |
"inject": null,
|
| 195 |
"qc_static": [],
|
| 196 |
"review_status": "needs_human"
|
| 197 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "replicate",
|
| 5 |
"operators": [
|
| 6 |
+
"replicate",
|
| 7 |
+
"wire up data",
|
| 8 |
+
"remove section",
|
| 9 |
+
"restyle"
|
| 10 |
],
|
| 11 |
+
"difficulty": "regular",
|
| 12 |
"levers": [
|
| 13 |
+
"non-local changes"
|
| 14 |
],
|
| 15 |
+
"domain": "booking service",
|
| 16 |
"seed_meta": {
|
| 17 |
"ref_image_src": "prototypes/reference.jpg"
|
| 18 |
},
|
| 19 |
+
"title": "Innovify website replicate → booking schedule overhaul → brand restyle",
|
| 20 |
"milestones": [
|
| 21 |
{
|
| 22 |
+
"operator": "replicate",
|
| 23 |
+
"request": "First make a landing page based on the website screenshot I gave you, as close as possible. Everything in the visible range must be there: a nav at the very top (logo on the left, the items AI Labs, Work, Services, Solutions, Industry, Insights in the middle, and an orange rounded solid button Discuss Your Project at the far right); the hero is text-left image-right, with the big heading in two lines \"Embrace AI/ML Tech\" and \"and Get Future Ready\", where Future Ready is orange italic, below it a short intro paragraph, below that a dark blue pill button Talk to us with a separate circular arrow button right next to it; for the pink-orange geometric sphere illustration on the right, a placeholder is fine, but its position and size must hold up the right half. At the lower right of the hero sits a privacy consent overlay, titled We Value Your Privacy, with SETTINGS at the top right, a long paragraph of small text, and two side-by-side buttons DECLINE ALL and ALLOW ALL at the bottom. Below is the \"Engineering the Shift to AI-Native Systems\" section, with this heading on the left and a paragraph of explanatory text on the right, in two side-by-side columns. Below that a row of three side-by-side white cards: 120+ / Digital Products Launched, 4.7★ / Clutch Rating, 15+ / Years of Experience, each with a short gray explanatory line below. Below that the Featured Projects section: a small eyebrow Featured Projects at the top left, the centered heading Innovating Tech at Enterprise Scale, an explanatory paragraph on the left, and a bunch of client case cards on the right — zilch's BNPL Platform, arm's Cloud-Based SoC Design System, VONAGE's Enterprise Communication APIs, gener8's Ad Blocker Platform, LANDBAY's Property-Backed Investment Platform; each card has a client logo area on top (placeholder is fine) and a title plus a short description below, with a centered dark blue button View Case Studies at the bottom of the section. Below that the Our Solutions section, heading Solutions We Offer, eight cards in two columns, in order Prediction Markets & Exchanges, Agentic Commerce & Payments, Embedded Finance & Wallets, Fraud & Risk Mitigation, Financial Intelligence & Analytics, Credit & Lending, Asset & Wealth Management, Crypto, Stablecoins & Blockchains, each card being a title + a short line + an image (placeholder is fine), with a centered Discuss Your Requirements button at the bottom. Finally the Our Process section, heading A Collaborative Process That Delivers Impactful Outcomes, with four steps below: 01 Discover and Analyse, 02 Validate and Derisk, 03 Launch and Scale, 04 Measure and Optimize, with large orange numbers, and image/text alternating left and right. Note: keep the English copy as-is, don't replace it with our own business wording — this version is about matching the reference."
|
| 24 |
},
|
| 25 |
{
|
| 26 |
+
"operator": "wire up data",
|
| 27 |
+
"request": "Next this page has to actually work — we're turning the Solutions section from an \"image-and-text display\" into a schedule where people can book expert time slots. Keep the Our Solutions eyebrow and the Solutions We Offer heading, but replace the eight static cards below with a filterable, sortable session list. The schedule was pulled from a spreadsheet by ops; I'll read out three so you get the format: 'Agentic Commerce Deep Diagnostic / London / March 12 / 90min / £240 / 4 seats left / 4.8', 'Fraud & Risk Risk Workshop / Online / March 15 / 60min / £180 / 6 seats left / 4.6', 'Embedded Finance Architecture Review / Manchester / March 20 / 120min / £320 / 2 seats left / 4.9' — fill in the rest in this format, 45 sessions in total. Cities are only these four — London / Manchester / Dublin / Online — no more, no fewer; topics reuse the eight Solutions titles above; dates all fall in March, with at most 3 sessions on any one day, don't pile a whole bunch onto one day; ratings fall between 4.2 and 5.0, prices between £120 and £480, and 6 of them must already be fully booked (0 seats left). Two hard requirements: London must have at least 2 sessions on the Fraud & Risk Mitigation topic, and those sessions must not share the same price; also finance has a reconciliation requirement — the three price points £240, £180, £320 may each appear only once across all 45 sessions, and the other sessions' prices must avoid these three numbers. The list holds 8 per page with page numbers below. Provide three filters: city, topic, and an \"Only show with seats left\" toggle; three sorts: earliest date, price low to high, rating high to low. Whether changing filters or changing sort, immediately return to page 1 — don't leave people stuck on page 5 staring at blank space. Each session card has a book button; clicking it adds to the booking list on the right; the fully booked ones' buttons don't respond. The list must make the money clear: first show the subtotal; booking 3 sessions or more together takes 12% off the whole order, with the odd cents simply dropped so no decimals remain; today charge 20% of the discounted amount as a deposit, likewise dropping odd cents. Sessions in the list can be removed individually, and clicking the same session repeatedly must not add it twice. When the list is empty the confirm button must not be clickable; clicking confirm shows a success notice plus a booking number so users can screenshot it, and after confirming the button must become unclickable — don't let a slip of the hand order twice."
|
| 28 |
},
|
| 29 |
{
|
| 30 |
+
"operator": "remove section",
|
| 31 |
+
"request": "Before launch, cut two things: remove the whole privacy consent overlay at the top of the hero (legal is going another route; title, SETTINGS, body text, and both buttons — none remain), and remove the whole Featured Projects section — the client logo authorization hasn't been renewed, so remove it along with the small eyebrow, heading, explanatory text, the zilch/arm/VONAGE/gener8/LANDBAY cards, and the View Case Studies button; don't leave a big blank area or squeeze the hero illustration out of shape, and the order stays hero → Engineering the Shift section → three data cards → booking schedule → Our Process. Also the three data cards should stop hardcoding numbers — clients find them fake: change the first to how many sessions we currently have bookable in total (i.e. the row count of the schedule table), the second to the average rating across all sessions to one decimal place, and the third to the sum of remaining seats across all sessions; just reword the gray explanatory line below each card to fit the new meaning. Note these three numbers describe \"our entire schedule\" — no matter how users filter, page, or add sessions to the list below, they must not change."
|
| 32 |
},
|
| 33 |
{
|
| 34 |
+
"operator": "restyle",
|
| 35 |
+
"request": "Brand has a new visual identity, and the whole site needs a new skin: the primary color changes from dark blue to ink green (a #0F3D33 sort of tone), the accent from orange to warm sand gold (a #D9A441 sort of tone), and the page background goes off-white (a #FAF7F2 sort). The whole site must switch over completely — the nav CTA, the hero buttons, the 01–04 numbers in Our Process, the filter selected state and current page number in the booking section, the book buttons, and the accent color on the subtotal/amount due/deposit figures in the booking list — not one spot missed, and the old orange and dark blue must no longer be visible on the page; you decide which elements use ink green and which use sand gold based on visual sense, as long as it's the new palette; the money figures must still stand out, not degrade into ordinary gray-black body text. There's a contradiction to handle yourself: the boss wants the primary CTA more prominent, while brand wants the whole thing restrained, so my view is at most one solid gold button per major section, with all other buttons downgraded; whether the downgrade is outlined or plain text is your call — pick one and use the same one site-wide, don't be inconsistent. Also a new skin is just a color change — layout, English copy (in the hero heading Future Ready must still be italic-emphasized, just recolored to the new palette), and the order of the four-step process must not be messed up, and the booking section's filters, paging, discount, and deposit must still compute correctly."
|
| 36 |
}
|
| 37 |
],
|
| 38 |
"checklist": [
|
| 39 |
{
|
| 40 |
"id": "rep.nav.order",
|
| 41 |
"m": 1,
|
| 42 |
+
"dimension": "coverage",
|
| 43 |
"w": 1.0,
|
| 44 |
+
"description": "The top nav is, left to right, the logo + AI Labs, Work, Services, Solutions, Industry, Insights — six items in exactly that order — with an orange rounded solid button at the far right reading Discuss Your Project."
|
| 45 |
},
|
| 46 |
{
|
| 47 |
"id": "rep.hero.main",
|
| 48 |
"m": 1,
|
| 49 |
+
"dimension": "visual",
|
| 50 |
"w": 1.5,
|
| 51 |
+
"description": "The hero heading shows on two lines \"Embrace AI/ML Tech\" and \"and Get Future Ready\", where only \"Future Ready\" is orange italic and the rest is dark blue upright; below the heading is a short explanatory line, and below that the dark blue pill button Talk to us and, immediately to its right, a separate circular arrow button on the same row; the right half of the hero has a sphere/geometric illustration (a placeholder is fine), about as tall as the left copy area and not clipped."
|
| 52 |
},
|
| 53 |
{
|
| 54 |
"id": "rep.hero.cookie",
|
| 55 |
"m": 1,
|
| 56 |
+
"dimension": "coverage",
|
| 57 |
"w": 1.0,
|
| 58 |
+
"description": "At the lower right of the hero sits a privacy consent overlay containing the title We Value Your Privacy, SETTINGS at the top right, a paragraph of small body text, and two side-by-side buttons DECLINE ALL and ALLOW ALL at the bottom."
|
| 59 |
},
|
| 60 |
{
|
| 61 |
"id": "rep.shift.stats",
|
| 62 |
"m": 1,
|
| 63 |
+
"dimension": "visual",
|
| 64 |
"w": 1.0,
|
| 65 |
+
"description": "An \"Engineering the Shift to AI-Native Systems\" section exists, laid out as two side-by-side columns with the heading on the left and the explanation on the right (the copy is the reference image's original English); below it three equal-width white cards in a row, from left to right 120+ / Digital Products Launched, 4.7★ / Clutch Rating, 15+ / Years of Experience, with the numbers in large dark blue bold text, each card with a gray explanatory line below."
|
| 66 |
},
|
| 67 |
{
|
| 68 |
"id": "rep.featured.projects",
|
| 69 |
"m": 1,
|
| 70 |
+
"dimension": "coverage",
|
| 71 |
"w": 1.5,
|
| 72 |
+
"description": "A Featured Projects section exists: with the small eyebrow Featured Projects, the heading Innovating Tech at Enterprise Scale, an explanatory paragraph on the left, and on the right five case cards whose titles appear in order BNPL Platform (zilch), Cloud-Based SoC Design System (arm), Enterprise Communication APIs (VONAGE), Ad Blocker Platform (gener8), Property-Backed Investment Platform (LANDBAY), with a centered dark blue button View Case Studies at the bottom of the section."
|
| 73 |
},
|
| 74 |
{
|
| 75 |
"id": "rep.solutions.process",
|
| 76 |
"m": 1,
|
| 77 |
+
"dimension": "visual",
|
| 78 |
"w": 1.5,
|
| 79 |
+
"description": "The Solutions We Offer area is two columns of 8 cards total, with titles appearing in the order Prediction Markets & Exchanges, Agentic Commerce & Payments, Embedded Finance & Wallets, Fraud & Risk Mitigation, Financial Intelligence & Analytics, Credit & Lending, Asset & Wealth Management, Crypto, Stablecoins & Blockchains; the Our Process area has large orange numbers 01–04 with headings in order Discover and Analyse, Validate and Derisk, Launch and Scale, Measure and Optimize, and adjacent steps alternate image/text left and right."
|
| 80 |
},
|
| 81 |
{
|
| 82 |
"id": "data.total.paging",
|
| 83 |
"m": 2,
|
| 84 |
+
"dimension": "functional",
|
| 85 |
"w": 1.5,
|
| 86 |
+
"description": "With no filters the schedule has 45 rows, 8 per page, 6 pages, with only 5 rows on page 6; turning on \"Only show with seats left\" makes it 39 rows / 5 pages, no session with 0 seats left appears in the list, and the view automatically returns to page 1."
|
| 87 |
},
|
| 88 |
{
|
| 89 |
"id": "data.dataset.constraints",
|
| 90 |
"m": 2,
|
| 91 |
+
"dimension": "functional",
|
| 92 |
"w": 1.0,
|
| 93 |
+
"description": "Paging through all 45 sessions verifies: each of the three price points £240, £180, £320 appears exactly once, and all other sessions' prices differ from these three numbers; all prices fall in £120–£480, all ratings in 4.2–5.0, all dates in March with no more than 3 sessions on any day; the city filter's options are exactly London, Manchester, Dublin, Online."
|
| 94 |
},
|
| 95 |
{
|
| 96 |
"id": "data.combo.sort",
|
| 97 |
"m": 2,
|
| 98 |
+
"dimension": "functional",
|
| 99 |
"w": 1.0,
|
| 100 |
+
"description": "With both city London and topic Fraud & Risk Mitigation selected, there are no fewer than 2 results and each satisfies both conditions; after also choosing \"Price low to high\", these results' prices strictly increase from top to bottom (no equal prices); at this point changing any filter immediately returns the page number to 1."
|
| 101 |
},
|
| 102 |
{
|
| 103 |
"id": "data.sort.order",
|
| 104 |
"m": 2,
|
| 105 |
+
"dimension": "functional",
|
| 106 |
"w": 1.0,
|
| 107 |
+
"description": "Without filters, first go to page 3, then choose \"Rating high to low\": the view immediately returns to page 1, and across pages Embedded Finance Architecture Review (4.9) comes before Agentic Commerce Deep Diagnostic (4.8), which comes before Fraud & Risk Risk Workshop (4.6); switching to \"Earliest date\" likewise returns to page 1, and their order becomes March 12 Diagnostic → March 15 Risk Workshop → March 20 Architecture Review, with the dates non-decreasing top to bottom."
|
| 108 |
},
|
| 109 |
{
|
| 110 |
"id": "data.cart.chain",
|
| 111 |
"m": 2,
|
| 112 |
+
"dimension": "interaction",
|
| 113 |
"w": 1.5,
|
| 114 |
+
"description": "After booking the three sessions \"Agentic Commerce Deep Diagnostic\", \"Fraud & Risk Risk Workshop\", \"Embedded Finance Architecture Review\" in turn, the list shows subtotal £740, discounted amount due £651, deposit £130; then removing \"Embedded Finance Architecture Review\" alone changes the three figures to subtotal £420, amount due £420 (no discount), deposit £84."
|
| 115 |
},
|
| 116 |
{
|
| 117 |
"id": "data.cart.edge",
|
| 118 |
"m": 2,
|
| 119 |
+
"dimension": "interaction",
|
| 120 |
"w": 1.0,
|
| 121 |
+
"description": "Boundary behavior is correct: clicking book 3 times in a row on the same session leaves only one row in the list with unchanged amounts; the button for a session with 0 seats left is disabled, and clicking it adds nothing to the list; when the list is empty the confirm button is unclickable; when there are sessions, clicking confirm shows a success notice and a booking number, after which the confirm button becomes unclickable and no second booking number is produced."
|
| 122 |
},
|
| 123 |
{
|
| 124 |
"id": "del.blocks.gone",
|
| 125 |
"m": 3,
|
| 126 |
+
"dimension": "coverage",
|
| 127 |
"w": 1.5,
|
| 128 |
+
"description": "Nowhere on the page can We Value Your Privacy, SETTINGS, DECLINE ALL, ALLOW ALL be found, nor the eyebrow Featured Projects, the heading Innovating Tech at Enterprise Scale, or the button View Case Studies; the client brand names zilch, arm, VONAGE, gener8, LANDBAY no longer appear as brands/logos (judged by complete brand names, not false positives from letter substrings in ordinary words)."
|
| 129 |
},
|
| 130 |
{
|
| 131 |
"id": "del.layout.keep",
|
| 132 |
"m": 3,
|
| 133 |
+
"dimension": "visual",
|
| 134 |
"w": 1.0,
|
| 135 |
+
"description": "After deletion the order top to bottom is still hero → Engineering the Shift two-column section → three data cards → booking schedule → Our Process; the hero's right-side illustration is fully visible, not clipped or stretched, and the deletion spots leave no continuous blank taller than one screen."
|
| 136 |
},
|
| 137 |
{
|
| 138 |
"id": "del.stats.bound",
|
| 139 |
"m": 3,
|
| 140 |
+
"dimension": "functional",
|
| 141 |
"w": 1.5,
|
| 142 |
+
"description": "The three data cards now read scheduling data: the first shows 45 (total sessions), the second shows the average rating of all 45 sessions to one decimal place, and the third shows the sum of remaining seats across all sessions (matching the total verified page by page), and each card's gray explanatory line below has been reworded to match the new meaning."
|
| 143 |
},
|
| 144 |
{
|
| 145 |
"id": "del.stats.stable",
|
| 146 |
"m": 3,
|
| 147 |
+
"dimension": "functional",
|
| 148 |
"w": 1.5,
|
| 149 |
+
"description": "After turning on \"Only show with seats left\", switching topic filters, going to page 3, and adding 3 sessions to the booking list, the three data cards' numbers are exactly the same as before those actions (still computed over all 45 sessions), not changing with filtering/paging/list."
|
| 150 |
},
|
| 151 |
{
|
| 152 |
"id": "del.rest.intact",
|
| 153 |
"m": 3,
|
| 154 |
+
"dimension": "coverage",
|
| 155 |
"w": 1.0,
|
| 156 |
+
"description": "Above the schedule area the eyebrow Our Solutions and the heading Solutions We Offer are still retained; the 01–04 numbers, order, and English headings (Discover and Analyse / Validate and Derisk / Launch and Scale / Measure and Optimize) of Our Process remain unchanged."
|
| 157 |
},
|
| 158 |
{
|
| 159 |
"id": "skin.palette.global",
|
| 160 |
"m": 4,
|
| 161 |
+
"dimension": "visual",
|
| 162 |
"w": 1.5,
|
| 163 |
+
"description": "The site's primary color is replaced with dark ink green, the accent with warm sand gold, and the page background off-white; the nav CTA, hero buttons, the 01–04 numbers in Our Process, the booking section's filters and book buttons, and the subtotal/amount due/deposit figures in the booking list have all switched to the new palette, with the money figures still accented in sand gold and not reverted to ordinary gray-black body text; nowhere on the page do the former orange (like #F05A28) or dark blue (like #0B2A5B) buttons, text, or color blocks appear."
|
| 164 |
},
|
| 165 |
{
|
| 166 |
"id": "skin.cta.consistent",
|
| 167 |
"m": 4,
|
| 168 |
+
"dimension": "visual",
|
| 169 |
"w": 1.0,
|
| 170 |
+
"description": "The prominence-versus-restraint tradeoff is consistent site-wide: the downgraded style is uniform across the site (outlined or plain text, pick one — either passes), and within the nav area, hero, and booking area each section has at most one solid gold button, with no coexistence of outlined and plain-text downgrades in the same section."
|
| 171 |
},
|
| 172 |
{
|
| 173 |
"id": "skin.func.regress",
|
| 174 |
"m": 4,
|
| 175 |
+
"dimension": "functional",
|
| 176 |
"w": 1.5,
|
| 177 |
+
"description": "Functionality is not broken after the restyle: it is still 45 rows / 8 per page / 6 pages by default, and 39 rows / 5 pages with \"Only show with seats left\"; the three sample bookings (£240+£180+£320) still give subtotal £740, amount due £651, deposit £130."
|
| 178 |
},
|
| 179 |
{
|
| 180 |
"id": "skin.states.visible",
|
| 181 |
"m": 4,
|
| 182 |
+
"dimension": "interaction",
|
| 183 |
"w": 1.0,
|
| 184 |
+
"description": "After the restyle the filter selected state, the current page highlight, and the disabled button on fully booked sessions remain visually distinguishable: the selected item and current page are marked in the new palette (ink green or sand gold, either) and clearly different from unselected items, and disabled buttons are gray with no reaction on click."
|
| 185 |
},
|
| 186 |
{
|
| 187 |
"id": "skin.copy.keep",
|
| 188 |
"m": 4,
|
| 189 |
+
"dimension": "coverage",
|
| 190 |
"w": 1.0,
|
| 191 |
+
"description": "After the restyle the hero heading is still \"Embrace AI/ML Tech and Get Future Ready\" with \"Future Ready\" still italic-emphasized (in the new palette color), and the Our Process four steps' number order and English headings, and the three data cards' numeric meanings are unchanged."
|
| 192 |
}
|
| 193 |
],
|
| 194 |
"inject": null,
|
| 195 |
"qc_static": [],
|
| 196 |
"review_status": "needs_human"
|
| 197 |
+
}
|
tasks/c41/task.json
CHANGED
|
@@ -3,258 +3,258 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.channels.five",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.count.26",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.first.reads",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.last.reads",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.0,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.chan.split",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.header.bm0",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card.parts",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.slogan",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "skin.toggle.exists",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.5,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "skin.dark.applied",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "skin.persist.page",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "skin.persist.chan",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "skin.text.contrast",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.0,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "int.bm.add",
|
| 142 |
"m": 3,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "int.bm.three",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "int.bm.cancel",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "int.bm.keep.page",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "int.bm.keep.chan",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "int.bm.keep.skin",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.5,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "int.bm.no.dup",
|
| 184 |
"m": 3,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.0,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.sports.gone",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.count.20",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.5,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.no.empty",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.0,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sports.items",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.bm",
|
| 219 |
"m": 4,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "data.sum.all",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "data.sum.tech",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.5,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "data.sum.exists",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.0,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "data.sum.switch",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "data.sum.dark",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.0,
|
| 257 |
-
"description": "
|
| 258 |
}
|
| 259 |
],
|
| 260 |
"inject": null,
|
|
@@ -263,10 +263,10 @@
|
|
| 263 |
"hand_notes": {
|
| 264 |
"cross_requirement_items": 7,
|
| 265 |
"dim_counts": {
|
| 266 |
-
"
|
| 267 |
-
"
|
| 268 |
-
"
|
| 269 |
-
"
|
| 270 |
}
|
| 271 |
}
|
| 272 |
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"restyle",
|
| 8 |
+
"make interactive",
|
| 9 |
+
"remove section",
|
| 10 |
+
"wire up data"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "content & news",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Inkstone Express: a news site from scratch to dark mode and topic takedown",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build the homepage of a news site called “Inkstone Express”, with the tagline “Seven minutes a day to make the world a little lighter”.\n\nFrom top to bottom: the header holds the site name and tagline, with a “My bookmarks (0)” entry on the right; below the header is a channel bar whose tabs are fixed as All / Tech / Finance / Culture / Sports, defaulting to “All”; below that is the article list, 8 per page, with pagination at the bottom.\n\nPut 26 articles in total. Every article needs a title, its channel, a read count, and an “Bookmark” button. Of the 26, Tech has 9, Finance 6, Culture 5 and Sports 6. Sort the read counts from high to low, with the first article at 9800 and each following article 300 less than the previous one. The list is sorted by read count, high to low, by default."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "restyle",
|
| 33 |
+
"request": "It is too harsh on the eyes at night. Add a “Night mode” toggle on the right of the header; when switched on the whole site goes dark: dark background, light body text. The toggle state must persist — going to page 2 or switching channels must not flip it back to day mode."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "make interactive",
|
| 37 |
+
"request": "The bookmarks must actually work. Clicking “Bookmark” turns the button into “Added”, and the N in the header’s “My bookmarks (N)” must go up; clicking again cancels it and N goes down. Both this count and each article’s button state must survive switching channels, paging and toggling night mode."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "remove section",
|
| 41 |
+
"request": "We are dropping “Sports” from the channel bar: remove that tab entirely, and withdraw the 6 Sports articles from the list as well. Afterwards the total article count and the number of pages must change accordingly; do not leave an empty page."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "wire up data",
|
| 45 |
+
"request": "Add a summary line below the header: “N articles · M total reads”. N is the number of articles in the current channel, M is the sum of their read counts, and it must change when the channel changes. The numbers must be exact."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.channels.five",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "Exactly 5 tabs in the channel bar, labelled in order All / Tech / Finance / Culture / Sports, with “All” in the selected state (visibly different from the other tabs)"
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.count.26",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "Under the All channel the total is 26 articles, paginated 8 per page for 4 pages (2 articles on page 4)"
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.first.reads",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "Default order is by read count descending: the 1st article has 9800, the 2nd 9500, the 3rd 9200"
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.last.reads",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.0,
|
| 75 |
+
"description": "On page 4, the last article (the 26th) has a read count of 2300"
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.chan.split",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "Switching to Tech shows 9 articles, Finance 6, Culture 5, Sports 6"
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.header.bm0",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "visual",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "A bookmark entry exists on the right of the header, and its initial text shows a count of 0"
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card.parts",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Every article card shows, at the same time, a title, its channel, a read count and a “Bookmark” button"
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.slogan",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The header shows the site name “Inkstone Express” and the tagline “Seven minutes a day to make the world a little lighter”"
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "skin.toggle.exists",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.5,
|
| 110 |
+
"description": "A clickable “Night mode” toggle exists on the right of the header"
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "skin.dark.applied",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "visual",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "With night mode on, the page background is clearly darker and the body text becomes light (distinguishable from day mode)"
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "skin.persist.page",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Turn night mode on, then go to page 2: it is still dark (not reverted to day mode)"
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "skin.persist.chan",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Turn night mode on, then switch to the Finance channel: it is still dark"
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "skin.text.contrast",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "visual",
|
| 137 |
"w": 1.0,
|
| 138 |
+
"description": "In night mode article titles remain clearly readable (no dark-on-dark text)"
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "int.bm.add",
|
| 142 |
"m": 3,
|
| 143 |
+
"dimension": "interaction",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "Click “Bookmark” on the 1st article: the button text becomes “Added” and the header count becomes 1"
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "int.bm.three",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "interaction",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "Bookmark the 2nd and 3rd articles too: the header count becomes 3 and all three buttons read “Added”"
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "int.bm.cancel",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "interaction",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "Click the 2nd article again: the button returns to “Bookmark” and the header count becomes 2"
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "int.bm.keep.page",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After bookmarking 3 articles, go to page 2 and back to page 1: the count is still 3 and those three still read “Added”"
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "int.bm.keep.chan",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "After bookmarking, switch to the Tech channel and back to All: the header count is unchanged"
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "int.bm.keep.skin",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "interaction",
|
| 179 |
"w": 1.5,
|
| 180 |
+
"description": "After bookmarking, turn on night mode: the header count and every button state are unchanged"
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "int.bm.no.dup",
|
| 184 |
"m": 3,
|
| 185 |
+
"dimension": "interaction",
|
| 186 |
"w": 1.0,
|
| 187 |
+
"description": "Clicking “Bookmark” twice in a row on the same article gives a net change of 0 (no double counting)"
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.sports.gone",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "coverage",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "The channel bar has only 4 tabs left; “Sports” no longer appears"
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.count.20",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.5,
|
| 201 |
+
"description": "Under the All channel the total is now 20 articles, paginated 8 per page for 3 pages (4 articles on page 3)"
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.no.empty",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "functional",
|
| 207 |
"w": 1.0,
|
| 208 |
+
"description": "No clickable empty page exists in the pagination control (page 4 does not exist or is unreachable)"
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sports.items",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "coverage",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "Browsing all 20 articles page by page, none is labelled with the Sports channel"
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.bm",
|
| 219 |
"m": 4,
|
| 220 |
+
"dimension": "interaction",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "Before removing Sports, bookmark 2 Tech articles; after removal the header count is still 2 and those 2 still read “Added”"
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "data.sum.all",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All the summary line shows “20 articles”, and the total reads is the exact sum of the read counts of these 20 articles"
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "data.sum.tech",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "functional",
|
| 235 |
"w": 1.5,
|
| 236 |
+
"description": "Switching to Tech, the summary count becomes 9 and the total reads equals the sum of these 9 read counts"
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "data.sum.exists",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "visual",
|
| 242 |
"w": 1.0,
|
| 243 |
+
"description": "The summary line sits below the header near the channel bar, worded like “N articles · M total reads”"
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "data.sum.switch",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "interaction",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "Switching back and forth between Tech and Culture twice, the summary count and total reads match the current channel every time"
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "data.sum.dark",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "visual",
|
| 256 |
"w": 1.0,
|
| 257 |
+
"description": "In night mode the summary line remains clearly readable"
|
| 258 |
}
|
| 259 |
],
|
| 260 |
"inject": null,
|
|
|
|
| 263 |
"hand_notes": {
|
| 264 |
"cross_requirement_items": 7,
|
| 265 |
"dim_counts": {
|
| 266 |
+
"visual": 9,
|
| 267 |
+
"functional": 8,
|
| 268 |
+
"interaction": 11,
|
| 269 |
+
"coverage": 2
|
| 270 |
}
|
| 271 |
}
|
| 272 |
}
|
tasks/c42/task.json
CHANGED
|
@@ -3,19 +3,19 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
@@ -23,239 +23,239 @@
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
-
"title": "
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
-
"operator": "
|
| 30 |
-
"request": "
|
| 31 |
},
|
| 32 |
{
|
| 33 |
-
"operator": "
|
| 34 |
-
"request": "
|
| 35 |
},
|
| 36 |
{
|
| 37 |
-
"operator": "
|
| 38 |
-
"request": "
|
| 39 |
},
|
| 40 |
{
|
| 41 |
-
"operator": "
|
| 42 |
-
"request": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
-
"operator": "
|
| 46 |
-
"request": "
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.cats.four",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.count.18",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.5,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.price.seq",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.5,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.price.last",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.0,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.cat.split",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card.parts",
|
| 87 |
"m": 1,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.cart.zero",
|
| 94 |
"m": 1,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.0,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "data.stock.first",
|
| 101 |
"m": 2,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.5,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "data.stock.only1",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "data.stock.visible",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.0,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "data.stock.range",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.0,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.cart.add",
|
| 129 |
"m": 3,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.5,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.cart.sum2",
|
| 136 |
"m": 3,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.5,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.cart.limit",
|
| 143 |
"m": 3,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.5,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "st.cart.sum.exact",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.5,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "st.cart.keep.cat",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.5,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "st.cart.display",
|
| 164 |
"m": 3,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.0,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "del.textile.gone",
|
| 171 |
"m": 4,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.5,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "del.count.13",
|
| 178 |
"m": 4,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.5,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.no.textile",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.0,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.stock.recalc",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.5,
|
| 195 |
-
"description": "
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.keep.cart",
|
| 199 |
"m": 4,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.5,
|
| 202 |
-
"description": "
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "int.stock.toggle",
|
| 206 |
"m": 5,
|
| 207 |
-
"dimension": "
|
| 208 |
"w": 1.5,
|
| 209 |
-
"description": "
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "int.stock.on",
|
| 213 |
"m": 5,
|
| 214 |
-
"dimension": "
|
| 215 |
"w": 1.5,
|
| 216 |
-
"description": "
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "int.stock.off",
|
| 220 |
"m": 5,
|
| 221 |
-
"dimension": "
|
| 222 |
"w": 1.0,
|
| 223 |
-
"description": "
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "int.stock.keep.cat",
|
| 227 |
"m": 5,
|
| 228 |
-
"dimension": "
|
| 229 |
"w": 1.5,
|
| 230 |
-
"description": "
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "int.cart.keep.filter",
|
| 234 |
"m": 5,
|
| 235 |
-
"dimension": "
|
| 236 |
"w": 1.5,
|
| 237 |
-
"description": "
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "int.combo.all",
|
| 241 |
"m": 5,
|
| 242 |
-
"dimension": "
|
| 243 |
"w": 1.5,
|
| 244 |
-
"description": "
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "int.layout.stable",
|
| 248 |
"m": 5,
|
| 249 |
-
"dimension": "
|
| 250 |
"w": 1.0,
|
| 251 |
-
"description": "
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "int.cat.select",
|
| 255 |
"m": 5,
|
| 256 |
-
"dimension": "
|
| 257 |
"w": 1.0,
|
| 258 |
-
"description": "
|
| 259 |
}
|
| 260 |
],
|
| 261 |
"inject": null,
|
|
@@ -264,10 +264,10 @@
|
|
| 264 |
"hand_notes": {
|
| 265 |
"cross_requirement_items": 5,
|
| 266 |
"dim_counts": {
|
| 267 |
-
"
|
| 268 |
-
"
|
| 269 |
-
"
|
| 270 |
-
"
|
| 271 |
}
|
| 272 |
}
|
| 273 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"wire up data",
|
| 8 |
+
"add state",
|
| 9 |
+
"remove section",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "e-commerce",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
+
"title": "Shiwuji: e-commerce list from build to inventory linkage and filter takedown",
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
+
"operator": "generate",
|
| 30 |
+
"request": "Build a niche-goods e-commerce list page called \"Shiwuji\". Put the shop name and a \"Cart (0)\" in the top bar. Below, a category bar: All / Objects / Study / Textiles, defaulting to \"All\".\n\nThere are 18 products in total: Objects 7, Study 6, Textiles 5. Each needs a name, category, price, and an \"Add to cart\" button. Prices start at 88 and each subsequent item adds 37 (88, 125, 162…), sorted by price low to high. The list fits on one page, no pagination."
|
| 31 |
},
|
| 32 |
{
|
| 33 |
+
"operator": "wire up data",
|
| 34 |
+
"request": "Add an inventory number behind each product. Inventory follows this rule: in the current display order, the n-th item's inventory = (n × 7) mod 5 plus 1, i.e. cycling between 1 and 5. Products with inventory 1 must be marked \"Only 1 left\"."
|
| 35 |
},
|
| 36 |
{
|
| 37 |
+
"operator": "add state",
|
| 38 |
+
"request": "The cart has to actually work. Clicking \"Add to cart\" increments the top-bar count by 1, and the same item can be added up to its inventory limit; once at the limit the button changes to \"Reached limit\" and can't be clicked. Also add a \"Total ¥X\" to the top bar, where X is the sum of added products' prices times quantities, and it must be accurate."
|
| 39 |
},
|
| 40 |
{
|
| 41 |
+
"operator": "remove section",
|
| 42 |
+
"request": "We're not doing the \"Textiles\" category any more — remove the category tab and those 5 products together. After removal, the product total and the inventory numbering rule are recomputed in the new order (i.e. the n-th item still computes inventory by its new position)."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
+
"operator": "make interactive",
|
| 46 |
+
"request": "Add an \"In stock only\" toggle to the category bar; when on, hide products with inventory 0 — there are none with 0 inventory right now, so the list doesn't change when it's on, but the toggle itself must be able to turn on and off, and the toggle state must persist after switching categories. Also, the cart count and total must not be lost after switching categories or toggling the filter."
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.cats.four",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "visual",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "The category bar has exactly 4 tabs: All / Objects / Study / Textiles, with \"All\" in the selected state and distinguishable from the others."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.count.18",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.5,
|
| 62 |
+
"description": "Under the All category there are exactly 18 products, all displayed on one page, with no pagination controls on the page."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.price.seq",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "functional",
|
| 68 |
"w": 1.5,
|
| 69 |
+
"description": "In price ascending order: item 1 is ¥88, item 2 is ¥125, item 3 is ¥162."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.price.last",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "functional",
|
| 75 |
"w": 1.0,
|
| 76 |
+
"description": "The last item (the 18th) has a price of ¥717."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.cat.split",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "functional",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "After switching category: Objects 7, Study 6, Textiles 5."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card.parts",
|
| 87 |
"m": 1,
|
| 88 |
+
"dimension": "visual",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "Each product card simultaneously shows name, category, price, and an \"Add to cart\" button."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.cart.zero",
|
| 94 |
"m": 1,
|
| 95 |
+
"dimension": "visual",
|
| 96 |
"w": 1.0,
|
| 97 |
+
"description": "The top bar shows the shop name \"Shiwuji\" and the cart entry, with an initial count of 0."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "data.stock.first",
|
| 101 |
"m": 2,
|
| 102 |
+
"dimension": "functional",
|
| 103 |
"w": 1.5,
|
| 104 |
+
"description": "Inventory is computed by position: item 1 inventory 3, item 2 inventory 5, item 3 inventory 2 (n×7 mod 5 + 1)."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "data.stock.only1",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "visual",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "The \"Only 1 left\" mark is visible on product cards whose inventory is 1, and that mark appears only on cards with inventory 1."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "data.stock.visible",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "visual",
|
| 117 |
"w": 1.0,
|
| 118 |
+
"description": "Every product card shows an inventory number."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "data.stock.range",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "functional",
|
| 124 |
"w": 1.0,
|
| 125 |
+
"description": "Checking item by item, all inventory values fall between 1 and 5, with no 0 or values greater than 5."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.cart.add",
|
| 129 |
"m": 3,
|
| 130 |
+
"dimension": "interaction",
|
| 131 |
"w": 1.5,
|
| 132 |
+
"description": "Clicking \"Add to cart\" on item 1 changes the top-bar count to 1 and the total to ¥88."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.cart.sum2",
|
| 136 |
"m": 3,
|
| 137 |
+
"dimension": "interaction",
|
| 138 |
"w": 1.5,
|
| 139 |
+
"description": "Adding item 2 changes the top-bar count to 2 and the total to ¥213 (88+125)."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.cart.limit",
|
| 143 |
"m": 3,
|
| 144 |
+
"dimension": "interaction",
|
| 145 |
"w": 1.5,
|
| 146 |
+
"description": "Clicking item 3 (inventory 2) three times in a row increases the count by only 2, and the button changes to \"Reached limit\" and can't be clicked."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "st.cart.sum.exact",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "functional",
|
| 152 |
"w": 1.5,
|
| 153 |
+
"description": "After adding 1 of item 1, 1 of item 2, and filling 2 of item 3, the total is exactly ¥537 (88+125+162×2)."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "st.cart.keep.cat",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "interaction",
|
| 159 |
"w": 1.5,
|
| 160 |
+
"description": "After adding, switching to Study and back to All leaves the top-bar count and total unchanged."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "st.cart.display",
|
| 164 |
"m": 3,
|
| 165 |
+
"dimension": "visual",
|
| 166 |
"w": 1.0,
|
| 167 |
+
"description": "The top bar simultaneously shows the cart count and the \"Total ¥X\"."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "del.textile.gone",
|
| 171 |
"m": 4,
|
| 172 |
+
"dimension": "coverage",
|
| 173 |
"w": 1.5,
|
| 174 |
+
"description": "The category bar has only 3 tabs left, and \"Textiles\" no longer appears."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "del.count.13",
|
| 178 |
"m": 4,
|
| 179 |
+
"dimension": "functional",
|
| 180 |
"w": 1.5,
|
| 181 |
+
"description": "Under the All category the products become 13."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.no.textile",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "coverage",
|
| 187 |
"w": 1.0,
|
| 188 |
+
"description": "Browsing all 13 items, none has the category Textiles."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.stock.recalc",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "functional",
|
| 194 |
"w": 1.5,
|
| 195 |
+
"description": "Inventory is recomputed by the new positions: after deletion item 1 has inventory 3, item 2 has inventory 5, item 3 has inventory 2."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.keep.cart",
|
| 199 |
"m": 4,
|
| 200 |
+
"dimension": "interaction",
|
| 201 |
"w": 1.5,
|
| 202 |
+
"description": "Add 2 Objects items before deletion; after deleting Textiles the top-bar count and total stay unchanged."
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "int.stock.toggle",
|
| 206 |
"m": 5,
|
| 207 |
+
"dimension": "visual",
|
| 208 |
"w": 1.5,
|
| 209 |
+
"description": "An \"In stock only\" toggle control exists near the category bar, is clickable, and has clear on/off states."
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "int.stock.on",
|
| 213 |
"m": 5,
|
| 214 |
+
"dimension": "interaction",
|
| 215 |
"w": 1.5,
|
| 216 |
+
"description": "After turning on \"In stock only\" the product count is still 13 (there are currently no zero-inventory products), and the list has not been emptied."
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "int.stock.off",
|
| 220 |
"m": 5,
|
| 221 |
+
"dimension": "interaction",
|
| 222 |
"w": 1.0,
|
| 223 |
+
"description": "After turning the toggle off it returns to the off state, and the product count is still 13."
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "int.stock.keep.cat",
|
| 227 |
"m": 5,
|
| 228 |
+
"dimension": "interaction",
|
| 229 |
"w": 1.5,
|
| 230 |
+
"description": "After turning on \"In stock only\" and switching to Study, the toggle is still on (not reset)."
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "int.cart.keep.filter",
|
| 234 |
"m": 5,
|
| 235 |
+
"dimension": "interaction",
|
| 236 |
"w": 1.5,
|
| 237 |
+
"description": "After adding 2 items, toggling \"In stock only\" twice leaves the top-bar count and total unchanged."
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "int.combo.all",
|
| 241 |
"m": 5,
|
| 242 |
+
"dimension": "interaction",
|
| 243 |
"w": 1.5,
|
| 244 |
+
"description": "Adding 2 items → switching to Study → turning on In stock only → switching back to All leaves the top-bar count, total, and toggle state all correct at the same time."
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "int.layout.stable",
|
| 248 |
"m": 5,
|
| 249 |
+
"dimension": "visual",
|
| 250 |
"w": 1.0,
|
| 251 |
+
"description": "After the toggle filter, each card's name/price/inventory information is still fully visible, with no misalignment or truncation."
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "int.cat.select",
|
| 255 |
"m": 5,
|
| 256 |
+
"dimension": "visual",
|
| 257 |
"w": 1.0,
|
| 258 |
+
"description": "After switching category the current category tab is in the selected state, and only one tab is selected."
|
| 259 |
}
|
| 260 |
],
|
| 261 |
"inject": null,
|
|
|
|
| 264 |
"hand_notes": {
|
| 265 |
"cross_requirement_items": 5,
|
| 266 |
"dim_counts": {
|
| 267 |
+
"visual": 9,
|
| 268 |
+
"functional": 9,
|
| 269 |
+
"interaction": 10,
|
| 270 |
+
"coverage": 2
|
| 271 |
}
|
| 272 |
}
|
| 273 |
+
}
|
tasks/c43/task.json
CHANGED
|
@@ -3,19 +3,19 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
@@ -23,260 +23,260 @@
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
-
"title": "
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
-
"operator": "
|
| 30 |
-
"request": "
|
| 31 |
},
|
| 32 |
{
|
| 33 |
-
"operator": "
|
| 34 |
-
"request": "
|
| 35 |
},
|
| 36 |
{
|
| 37 |
-
"operator": "
|
| 38 |
-
"request": "
|
| 39 |
},
|
| 40 |
{
|
| 41 |
-
"operator": "
|
| 42 |
-
"request": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
-
"operator": "
|
| 46 |
-
"request": "
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.areas.four",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.count.22",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.5,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.score.desc",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.5,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.price.rule",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.5,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.area.split",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card.parts",
|
| 87 |
"m": 1,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.fav.zero",
|
| 94 |
"m": 1,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.0,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "resp.narrow.single",
|
| 101 |
"m": 2,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.5,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "resp.narrow.areas",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "resp.wide.keep",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.0,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "resp.narrow.noclip",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.0,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.fav.add",
|
| 129 |
"m": 3,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.5,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.fav.three",
|
| 136 |
"m": 3,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.5,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.fav.cancel",
|
| 143 |
"m": 3,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.5,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "st.fav.keep.area",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.5,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "st.fav.keep.resp",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.5,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "ref.grid.three",
|
| 164 |
"m": 4,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.5,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "ref.order.same",
|
| 171 |
"m": 4,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.5,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "ref.price.same",
|
| 178 |
"m": 4,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.0,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "ref.fav.same",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.5,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "ref.grid.narrow",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.0,
|
| 195 |
-
"description": "
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.south.gone",
|
| 199 |
"m": 5,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.5,
|
| 202 |
-
"description": "
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "del.count.15",
|
| 206 |
"m": 5,
|
| 207 |
-
"dimension": "
|
| 208 |
"w": 1.5,
|
| 209 |
-
"description": "
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "del.no.south",
|
| 213 |
"m": 5,
|
| 214 |
-
"dimension": "
|
| 215 |
"w": 1.0,
|
| 216 |
-
"description": "
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.price.recalc",
|
| 220 |
"m": 5,
|
| 221 |
-
"dimension": "
|
| 222 |
"w": 1.5,
|
| 223 |
-
"description": "
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "del.keep.fav",
|
| 227 |
"m": 5,
|
| 228 |
-
"dimension": "
|
| 229 |
"w": 1.5,
|
| 230 |
-
"description": "
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "del.grid.reflow",
|
| 234 |
"m": 5,
|
| 235 |
-
"dimension": "
|
| 236 |
"w": 1.0,
|
| 237 |
-
"description": "
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "del.area.recheck",
|
| 241 |
"m": 5,
|
| 242 |
-
"dimension": "
|
| 243 |
"w": 1.0,
|
| 244 |
-
"description": "
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "del.combo",
|
| 248 |
"m": 5,
|
| 249 |
-
"dimension": "
|
| 250 |
"w": 1.5,
|
| 251 |
-
"description": "
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "c43a.sel.single",
|
| 255 |
"m": 1,
|
| 256 |
-
"dimension": "
|
| 257 |
"w": 1.0,
|
| 258 |
-
"description": "
|
| 259 |
},
|
| 260 |
{
|
| 261 |
"id": "c43a.info.intact",
|
| 262 |
"m": 1,
|
| 263 |
-
"dimension": "
|
| 264 |
"w": 1.0,
|
| 265 |
-
"description": "
|
| 266 |
},
|
| 267 |
{
|
| 268 |
"id": "c43b.sel.single",
|
| 269 |
"m": 5,
|
| 270 |
-
"dimension": "
|
| 271 |
"w": 1.0,
|
| 272 |
-
"description": "
|
| 273 |
},
|
| 274 |
{
|
| 275 |
"id": "c43b.info.intact",
|
| 276 |
"m": 5,
|
| 277 |
-
"dimension": "
|
| 278 |
"w": 1.0,
|
| 279 |
-
"description": "
|
| 280 |
}
|
| 281 |
],
|
| 282 |
"inject": null,
|
|
@@ -285,10 +285,10 @@
|
|
| 285 |
"hand_notes": {
|
| 286 |
"cross_requirement_items": 6,
|
| 287 |
"dim_counts": {
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
-
"
|
| 292 |
}
|
| 293 |
}
|
| 294 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make responsive",
|
| 8 |
+
"add state",
|
| 9 |
+
"restructure layout",
|
| 10 |
+
"remove section"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "local services",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
+
"title": "Xiangkou Life: local services site from build to narrow-screen collapse and section takedown",
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
+
"operator": "generate",
|
| 30 |
+
"request": "Build the homepage of \"Xiangkou Life\", a local services site. Put the site name and a \"My favorites (0)\" in the top bar. Below, an area bar: All city / East / West / South, defaulting to \"All city\".\n\nThe main body is a merchant list, 22 in total: East 8, West 7, South 7. Each needs a shop name, area, rating, per-person price, and a \"Favorite\" button. Ratings start at 4.9 and decrease by 0.1 per shop, and once they reach a minimum of 2.8 they cycle back to 4.9. Per-person price is computed by position: the n-th shop = 30 + n × 5. The list defaults to rating high to low."
|
| 31 |
},
|
| 32 |
{
|
| 33 |
+
"operator": "make responsive",
|
| 34 |
+
"request": "On narrow screens (browser width around 500px) it has to be viewable: the merchant list goes from multiple columns to a single vertical column; if the area bar doesn't fit, fold it into two rows or tuck it into a dropdown, but all four areas must still be selectable. At desktop width keep it as-is."
|
| 35 |
},
|
| 36 |
{
|
| 37 |
+
"operator": "add state",
|
| 38 |
+
"request": "Favorites have to actually work. Clicking \"Favorite\" changes it to \"Favorited\" and increments the top-bar count by 1; clicking again cancels it and decrements the count by 1. This state must not be lost after switching area or switching between narrow and wide screens."
|
| 39 |
},
|
| 40 |
{
|
| 41 |
+
"operator": "restructure layout",
|
| 42 |
+
"request": "Change the merchant list from a long vertical list to a grid: 3 shops per row at desktop width. After the change, the rating sort, per-person prices, and favorite states must be exactly the same as before."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
+
"operator": "remove section",
|
| 46 |
+
"request": "We're not doing the \"South\" area any more — remove the tab and those 7 merchants together. After removal, per-person prices are recomputed by the new positions (the n-th shop = 30 + n × 5)."
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.areas.four",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "visual",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "The area bar has exactly 4 tabs: All city / East / West / South, with \"All city\" in the selected state."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.count.22",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.5,
|
| 62 |
+
"description": "Under All city there are exactly 22 merchants."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.score.desc",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "functional",
|
| 68 |
"w": 1.5,
|
| 69 |
+
"description": "The default is rating descending: shop 1 is 4.9, shop 2 is 4.8, shop 3 is 4.7."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.price.rule",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "functional",
|
| 75 |
"w": 1.5,
|
| 76 |
+
"description": "Per-person price is computed by position: shop 1 is ¥35, shop 2 is ¥40, shop 10 is ¥80."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.area.split",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "functional",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "After switching area: East 8, West 7, South 7."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card.parts",
|
| 87 |
"m": 1,
|
| 88 |
+
"dimension": "visual",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "Each merchant card simultaneously shows shop name, area, rating, per-person price, and a \"Favorite\" button."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.fav.zero",
|
| 94 |
"m": 1,
|
| 95 |
+
"dimension": "visual",
|
| 96 |
"w": 1.0,
|
| 97 |
+
"description": "The top bar shows the site name \"Xiangkou Life\" and the favorites entry, with an initial count of 0."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "resp.narrow.single",
|
| 101 |
"m": 2,
|
| 102 |
+
"dimension": "visual",
|
| 103 |
"w": 1.5,
|
| 104 |
+
"description": "On narrow screens (about 500px wide) merchant cards are in a single vertical column, with no side-by-side two-column arrangement."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "resp.narrow.areas",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "interaction",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "On narrow screens the four area tabs can still each be clicked and take effect (possibly wrapped or tucked into a dropdown, but all selectable)."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "resp.wide.keep",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "visual",
|
| 117 |
"w": 1.0,
|
| 118 |
+
"description": "After returning to desktop width the layout returns to multiple columns, with no leftover single-column narrow-screen form."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "resp.narrow.noclip",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "visual",
|
| 124 |
"w": 1.0,
|
| 125 |
+
"description": "On narrow screens the shop name and per-person price are both fully visible, not clipped or overflowing the screen."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.fav.add",
|
| 129 |
"m": 3,
|
| 130 |
+
"dimension": "interaction",
|
| 131 |
"w": 1.5,
|
| 132 |
+
"description": "Clicking \"Favorite\" on shop 1 changes the button to \"Favorited\" and the top-bar count becomes 1."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.fav.three",
|
| 136 |
"m": 3,
|
| 137 |
+
"dimension": "interaction",
|
| 138 |
"w": 1.5,
|
| 139 |
+
"description": "Then favoriting shops 2 and 3 makes the top-bar count 3, with all three showing \"Favorited\"."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.fav.cancel",
|
| 143 |
"m": 3,
|
| 144 |
+
"dimension": "interaction",
|
| 145 |
"w": 1.5,
|
| 146 |
+
"description": "Clicking shop 2 again returns the button to \"Favorite\" and the count becomes 2."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "st.fav.keep.area",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "interaction",
|
| 152 |
"w": 1.5,
|
| 153 |
+
"description": "After favoriting 3 shops, switching to West and back to All city leaves the top-bar count at 3 and the original three shops still \"Favorited\"."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "st.fav.keep.resp",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "interaction",
|
| 159 |
"w": 1.5,
|
| 160 |
+
"description": "After favoriting 3 shops, switching to narrow screen and back to wide screen leaves the top-bar count and each shop's button state unchanged."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "ref.grid.three",
|
| 164 |
"m": 4,
|
| 165 |
+
"dimension": "visual",
|
| 166 |
"w": 1.5,
|
| 167 |
+
"description": "At desktop width merchant cards are arranged in a grid with exactly 3 per row."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "ref.order.same",
|
| 171 |
"m": 4,
|
| 172 |
+
"dimension": "functional",
|
| 173 |
"w": 1.5,
|
| 174 |
+
"description": "After the restructure the sort is still rating descending, with the first three ratings 4.9 / 4.8 / 4.7 in order."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "ref.price.same",
|
| 178 |
"m": 4,
|
| 179 |
+
"dimension": "functional",
|
| 180 |
"w": 1.0,
|
| 181 |
+
"description": "After the restructure shop 1's per-person price is still ¥35 and shop 10's still ¥80."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "ref.fav.same",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "interaction",
|
| 187 |
"w": 1.5,
|
| 188 |
+
"description": "Favorite 2 shops before the restructure; after restructuring into a grid the top-bar count is still 2 and those 2 shops are still \"Favorited\"."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "ref.grid.narrow",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "visual",
|
| 194 |
"w": 1.0,
|
| 195 |
+
"description": "The grid layout still degrades to a single column on narrow screens, with no horizontal scrollbar."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.south.gone",
|
| 199 |
"m": 5,
|
| 200 |
+
"dimension": "coverage",
|
| 201 |
"w": 1.5,
|
| 202 |
+
"description": "The area bar has only 3 tabs left, and \"South\" no longer appears."
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "del.count.15",
|
| 206 |
"m": 5,
|
| 207 |
+
"dimension": "functional",
|
| 208 |
"w": 1.5,
|
| 209 |
+
"description": "Under All city the merchants become 15."
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "del.no.south",
|
| 213 |
"m": 5,
|
| 214 |
+
"dimension": "coverage",
|
| 215 |
"w": 1.0,
|
| 216 |
+
"description": "Browsing all 15 shops, none belongs to the South area."
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.price.recalc",
|
| 220 |
"m": 5,
|
| 221 |
+
"dimension": "functional",
|
| 222 |
"w": 1.5,
|
| 223 |
+
"description": "Per-person prices are recomputed by the new positions: after deletion shop 1 is ¥35, shop 10 is ¥80, and the last shop (the 15th) is ¥105."
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "del.keep.fav",
|
| 227 |
"m": 5,
|
| 228 |
+
"dimension": "interaction",
|
| 229 |
"w": 1.5,
|
| 230 |
+
"description": "Favorite 2 East shops before deletion; after removing South the top-bar count is still 2 and those 2 shops are still \"Favorited\"."
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "del.grid.reflow",
|
| 234 |
"m": 5,
|
| 235 |
+
"dimension": "visual",
|
| 236 |
"w": 1.0,
|
| 237 |
+
"description": "After deletion the grid still has 3 per row, with the last row arranged by the remaining count and no empty placeholder cells."
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "del.area.recheck",
|
| 241 |
"m": 5,
|
| 242 |
+
"dimension": "interaction",
|
| 243 |
"w": 1.0,
|
| 244 |
+
"description": "After removing South, switching back and forth twice between East and West, each time the merchant counts are 8 and 7 respectively and the sort is still rating descending."
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "del.combo",
|
| 248 |
"m": 5,
|
| 249 |
+
"dimension": "interaction",
|
| 250 |
"w": 1.5,
|
| 251 |
+
"description": "Favorite 2 shops → switch to narrow screen → switch to West → return to wide screen, and the top-bar count and favorite states are still correct."
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "c43a.sel.single",
|
| 255 |
"m": 1,
|
| 256 |
+
"dimension": "visual",
|
| 257 |
"w": 1.0,
|
| 258 |
+
"description": "At any moment only one tab in the filter controls is in the selected state, and the selected state is distinguishable from the unselected state."
|
| 259 |
},
|
| 260 |
{
|
| 261 |
"id": "c43a.info.intact",
|
| 262 |
"m": 1,
|
| 263 |
+
"dimension": "visual",
|
| 264 |
"w": 1.0,
|
| 265 |
+
"description": "After switching views each card's information is still fully visible, with no text truncation or element overlap."
|
| 266 |
},
|
| 267 |
{
|
| 268 |
"id": "c43b.sel.single",
|
| 269 |
"m": 5,
|
| 270 |
+
"dimension": "visual",
|
| 271 |
"w": 1.0,
|
| 272 |
+
"description": "At any moment only one tab in the filter controls is in the selected state, and the selected state is distinguishable from the unselected state."
|
| 273 |
},
|
| 274 |
{
|
| 275 |
"id": "c43b.info.intact",
|
| 276 |
"m": 5,
|
| 277 |
+
"dimension": "visual",
|
| 278 |
"w": 1.0,
|
| 279 |
+
"description": "After switching views each card's information is still fully visible, with no text truncation or element overlap."
|
| 280 |
}
|
| 281 |
],
|
| 282 |
"inject": null,
|
|
|
|
| 285 |
"hand_notes": {
|
| 286 |
"cross_requirement_items": 6,
|
| 287 |
"dim_counts": {
|
| 288 |
+
"visual": 13,
|
| 289 |
+
"functional": 8,
|
| 290 |
+
"interaction": 10,
|
| 291 |
+
"coverage": 2
|
| 292 |
}
|
| 293 |
}
|
| 294 |
+
}
|
tasks/c44/task.json
CHANGED
|
@@ -3,19 +3,19 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
@@ -23,260 +23,260 @@
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
-
"title": "
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
-
"operator": "
|
| 30 |
-
"request": "
|
| 31 |
},
|
| 32 |
{
|
| 33 |
-
"operator": "
|
| 34 |
-
"request": "
|
| 35 |
},
|
| 36 |
{
|
| 37 |
-
"operator": "
|
| 38 |
-
"request": "
|
| 39 |
},
|
| 40 |
{
|
| 41 |
-
"operator": "
|
| 42 |
-
"request": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
-
"operator": "
|
| 46 |
-
"request": "
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.tabs",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.total",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.5,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.val.desc",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.5,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.extra.rule",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.5,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.split",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card",
|
| 87 |
"m": 1,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.header",
|
| 94 |
"m": 1,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.0,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "gen.sel.one",
|
| 101 |
"m": 1,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.0,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "st.add1",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "st.add3",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.5,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "st.cancel",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.5,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.keep.tab",
|
| 129 |
"m": 2,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.5,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.no.dup",
|
| 136 |
"m": 2,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.0,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.badge.visible",
|
| 143 |
"m": 2,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.0,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "data.sum.all",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.5,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "data.sum.tab",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.5,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "data.sum.pos",
|
| 164 |
"m": 3,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.0,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "data.sum.switch",
|
| 171 |
"m": 3,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.5,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "data.sum.keep.state",
|
| 178 |
"m": 3,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.5,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.tab.gone",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.5,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.total",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.5,
|
| 195 |
-
"description": "
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.none.left",
|
| 199 |
"m": 4,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.0,
|
| 202 |
-
"description": "
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "del.extra.recalc",
|
| 206 |
"m": 4,
|
| 207 |
-
"dimension": "
|
| 208 |
"w": 1.5,
|
| 209 |
-
"description": "
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "del.sum.update",
|
| 213 |
"m": 4,
|
| 214 |
-
"dimension": "
|
| 215 |
"w": 1.5,
|
| 216 |
-
"description": "
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.keep.state",
|
| 220 |
"m": 4,
|
| 221 |
-
"dimension": "
|
| 222 |
"w": 1.5,
|
| 223 |
-
"description": "
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "int.toggle.exists",
|
| 227 |
"m": 5,
|
| 228 |
-
"dimension": "
|
| 229 |
"w": 1.5,
|
| 230 |
-
"description": "
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "int.toggle.filter",
|
| 234 |
"m": 5,
|
| 235 |
-
"dimension": "
|
| 236 |
"w": 1.5,
|
| 237 |
-
"description": "
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "int.toggle.off",
|
| 241 |
"m": 5,
|
| 242 |
-
"dimension": "
|
| 243 |
"w": 1.0,
|
| 244 |
-
"description": "
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "int.toggle.keep.tab",
|
| 248 |
"m": 5,
|
| 249 |
-
"dimension": "
|
| 250 |
"w": 1.5,
|
| 251 |
-
"description": "
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "int.count.keep",
|
| 255 |
"m": 5,
|
| 256 |
-
"dimension": "
|
| 257 |
"w": 1.5,
|
| 258 |
-
"description": "
|
| 259 |
},
|
| 260 |
{
|
| 261 |
"id": "int.combo.all",
|
| 262 |
"m": 5,
|
| 263 |
-
"dimension": "
|
| 264 |
"w": 1.5,
|
| 265 |
-
"description": "
|
| 266 |
},
|
| 267 |
{
|
| 268 |
"id": "int.layout.ok",
|
| 269 |
"m": 5,
|
| 270 |
-
"dimension": "
|
| 271 |
"w": 1.0,
|
| 272 |
-
"description": "
|
| 273 |
},
|
| 274 |
{
|
| 275 |
"id": "int.sum.with.filter",
|
| 276 |
"m": 5,
|
| 277 |
-
"dimension": "
|
| 278 |
"w": 1.0,
|
| 279 |
-
"description": "
|
| 280 |
}
|
| 281 |
],
|
| 282 |
"inject": null,
|
|
@@ -285,10 +285,10 @@
|
|
| 285 |
"hand_notes": {
|
| 286 |
"cross_requirement_items": 7,
|
| 287 |
"dim_counts": {
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
-
"
|
| 292 |
}
|
| 293 |
}
|
| 294 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make responsive",
|
| 8 |
+
"add section",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "education courses",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
+
"title": "LevelUp Classroom: From Site Build to Lesson-Fee Recalculation and High-Rating Filtering",
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
+
"operator": "generate",
|
| 30 |
+
"request": "Build a site homepage called “LevelUp Classroom”, with the tagline “Every lesson, fully explained”. Put the site name and a “My Plan (0)” entry in the top bar.\n\nBelow that is a filter bar whose categories are fixed as All / Coding / Design / Languages, defaulting to “All”. The main body is a course list with 21 items in total, distributed as: Coding 8, Design 7, Languages 6.\n\nEach item must have a name, its category, a lesson fee, and an “Add to Plan” button. Lesson fees are assigned by position: item n = 120 + n × 30. Each item also has a rating; item 1 is 4.9, and each subsequent item is 0.1 lower than the previous one. The list is sorted by rating from high to low by default."
|
| 31 |
},
|
| 32 |
{
|
| 33 |
+
"operator": "add state",
|
| 34 |
+
"request": "“Add to Plan” must actually work. After clicking, the button changes to “Added” and the “My Plan” count in the top bar increases by 1; clicking again cancels it and the count decreases by 1. This count and each item's button state must not be lost after switching categories."
|
| 35 |
},
|
| 36 |
{
|
| 37 |
+
"operator": "wire up data",
|
| 38 |
+
"request": "Add a summary line below the filter bar: “N items · Total lesson fees M”. N is the number of items under the current category, and M is the sum of the lesson fees of those items; it must update when switching categories, and the numbers must be calculated accurately."
|
| 39 |
},
|
| 40 |
{
|
| 41 |
+
"operator": "remove section",
|
| 42 |
+
"request": "We're dropping the “Languages” category; remove the category together with those 6 items. After removal, lesson fees are recalculated by new position (item n = 120 + n × 30), and the summary line must update accordingly."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
+
"operator": "make interactive",
|
| 46 |
+
"request": "Add a “High ratings only” toggle to the filter bar; when on, only items with a rating of at least 4.6 are shown. The toggle state must persist after switching categories, and the top-bar count must not change before or after toggling the filter."
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.tabs",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "visual",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "The filter bar has exactly 4 categories, with the text, in order: All / Coding / Design / Languages; “All” is selected and distinguishable from the other categories."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.total",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.5,
|
| 62 |
+
"description": "Under the All category, the total number of courses is 21."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.val.desc",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "functional",
|
| 68 |
"w": 1.5,
|
| 69 |
+
"description": "By default sorted by rating in descending order: item 1 is 4.9, item 2 is 4.8, item 3 is 4.7."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.extra.rule",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "functional",
|
| 75 |
"w": 1.5,
|
| 76 |
+
"description": "Lesson fees are calculated by position: item 1 is 150, item 2 is 180, item 5 is 270."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.split",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "functional",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "After switching categories, the counts per category are: Coding 8, Design 7, Languages 6."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card",
|
| 87 |
"m": 1,
|
| 88 |
+
"dimension": "visual",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "Each card simultaneously shows the name, category, lesson fee, rating, and an “Add to Plan” button."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.header",
|
| 94 |
"m": 1,
|
| 95 |
+
"dimension": "visual",
|
| 96 |
"w": 1.0,
|
| 97 |
+
"description": "The top bar shows the site name “LevelUp Classroom”, the tagline “Every lesson, fully explained”, and the “My Plan” entry, with an initial count of 0."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "gen.sel.one",
|
| 101 |
"m": 1,
|
| 102 |
+
"dimension": "visual",
|
| 103 |
"w": 1.0,
|
| 104 |
+
"description": "At any given moment, exactly one category in the filter bar is selected."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "st.add1",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "interaction",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "Click “Add to Plan” on item 1; the button changes to “Added” and the top-bar count is 1."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "st.add3",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "interaction",
|
| 117 |
"w": 1.5,
|
| 118 |
+
"description": "Then do the same for items 2 and 3; the top-bar count is 3 and all three items show “Added”."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "st.cancel",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "interaction",
|
| 124 |
"w": 1.5,
|
| 125 |
+
"description": "Click item 2 again; the button returns to “Add to Plan” and the top-bar count is 2."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.keep.tab",
|
| 129 |
"m": 2,
|
| 130 |
+
"dimension": "interaction",
|
| 131 |
"w": 1.5,
|
| 132 |
+
"description": "After acting on 3 items, switch to “Coding” and back to All; the top-bar count is still 3 and the original three items still show “Added”."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.no.dup",
|
| 136 |
"m": 2,
|
| 137 |
+
"dimension": "interaction",
|
| 138 |
"w": 1.0,
|
| 139 |
+
"description": "Click the same item twice in a row; the net change in count is 0 (no duplicate counting)."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.badge.visible",
|
| 143 |
"m": 2,
|
| 144 |
+
"dimension": "visual",
|
| 145 |
"w": 1.0,
|
| 146 |
+
"description": "The top-bar count number updates visibly immediately after the action, without refreshing the page."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "data.sum.all",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "functional",
|
| 152 |
"w": 1.5,
|
| 153 |
+
"description": "Under All, the summary line shows “21 items”, and the total lesson fees equal the sum of the 21 items, with exact numbers."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "data.sum.tab",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "functional",
|
| 159 |
"w": 1.5,
|
| 160 |
+
"description": "Switch to “Coding”; the item count in the summary line becomes 8, and the total equals the sum of that category's items."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "data.sum.pos",
|
| 164 |
"m": 3,
|
| 165 |
+
"dimension": "visual",
|
| 166 |
"w": 1.0,
|
| 167 |
+
"description": "The summary line is located below the filter bar, with wording of the form “N items · Total lesson fees M”."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "data.sum.switch",
|
| 171 |
"m": 3,
|
| 172 |
+
"dimension": "interaction",
|
| 173 |
"w": 1.5,
|
| 174 |
+
"description": "Switch back and forth twice between two different categories; the item count and total in the summary line match the current category each time."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "data.sum.keep.state",
|
| 178 |
"m": 3,
|
| 179 |
+
"dimension": "interaction",
|
| 180 |
"w": 1.5,
|
| 181 |
+
"description": "Act on 2 items first, then switch categories; the summary line changes with the category while the top-bar count remains 2."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.tab.gone",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "coverage",
|
| 187 |
"w": 1.5,
|
| 188 |
+
"description": "The filter bar has only 3 categories left; “Languages” no longer appears."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.total",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "functional",
|
| 194 |
"w": 1.5,
|
| 195 |
+
"description": "Under All, the total becomes 15 items."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.none.left",
|
| 199 |
"m": 4,
|
| 200 |
+
"dimension": "coverage",
|
| 201 |
"w": 1.0,
|
| 202 |
+
"description": "Browse the 15 items one by one; no item's category is “Languages”."
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "del.extra.recalc",
|
| 206 |
"m": 4,
|
| 207 |
+
"dimension": "functional",
|
| 208 |
"w": 1.5,
|
| 209 |
+
"description": "Lesson fees are recalculated by new position: item 1 is 150, item 5 is 270, and the last item (item 15) is 570."
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "del.sum.update",
|
| 213 |
"m": 4,
|
| 214 |
+
"dimension": "functional",
|
| 215 |
"w": 1.5,
|
| 216 |
+
"description": "The summary line updates in sync to “15 items”, and the total equals the sum of the 15 recalculated items."
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.keep.state",
|
| 220 |
"m": 4,
|
| 221 |
+
"dimension": "interaction",
|
| 222 |
"w": 1.5,
|
| 223 |
+
"description": "Before deleting, act on 2 items in the retained categories; after deleting “Languages”, the top-bar count is still 2 and those 2 items still show “Added”."
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "int.toggle.exists",
|
| 227 |
"m": 5,
|
| 228 |
+
"dimension": "visual",
|
| 229 |
"w": 1.5,
|
| 230 |
+
"description": "A “High ratings only” toggle exists near the filter bar; it is clickable and has clearly distinct on/off states."
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "int.toggle.filter",
|
| 234 |
"m": 5,
|
| 235 |
+
"dimension": "interaction",
|
| 236 |
"w": 1.5,
|
| 237 |
+
"description": "After turning on “High ratings only”, every item in the list has a rating of at least 4.6; all items below that value are invisible."
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "int.toggle.off",
|
| 241 |
"m": 5,
|
| 242 |
+
"dimension": "interaction",
|
| 243 |
"w": 1.0,
|
| 244 |
+
"description": "After turning the toggle off, the list returns to 15 items."
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "int.toggle.keep.tab",
|
| 248 |
"m": 5,
|
| 249 |
+
"dimension": "interaction",
|
| 250 |
"w": 1.5,
|
| 251 |
+
"description": "After turning on “High ratings only”, switch categories; the toggle is still in the on state (not reset)."
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "int.count.keep",
|
| 255 |
"m": 5,
|
| 256 |
+
"dimension": "interaction",
|
| 257 |
"w": 1.5,
|
| 258 |
+
"description": "After acting on 2 items, toggle “High ratings only” on and off twice in a row; the top-bar count is always 2."
|
| 259 |
},
|
| 260 |
{
|
| 261 |
"id": "int.combo.all",
|
| 262 |
"m": 5,
|
| 263 |
+
"dimension": "interaction",
|
| 264 |
"w": 1.5,
|
| 265 |
+
"description": "Act on 2 items → switch to “Coding” → turn on High ratings only → switch back to All; the top-bar count, summary line, and toggle state are all correct at the same time."
|
| 266 |
},
|
| 267 |
{
|
| 268 |
"id": "int.layout.ok",
|
| 269 |
"m": 5,
|
| 270 |
+
"dimension": "visual",
|
| 271 |
"w": 1.0,
|
| 272 |
+
"description": "After toggling the filter, card information remains fully visible, with no text truncation or element overlap."
|
| 273 |
},
|
| 274 |
{
|
| 275 |
"id": "int.sum.with.filter",
|
| 276 |
"m": 5,
|
| 277 |
+
"dimension": "visual",
|
| 278 |
"w": 1.0,
|
| 279 |
+
"description": "After enabling the filter, the summary line is still visible and not empty."
|
| 280 |
}
|
| 281 |
],
|
| 282 |
"inject": null,
|
|
|
|
| 285 |
"hand_notes": {
|
| 286 |
"cross_requirement_items": 7,
|
| 287 |
"dim_counts": {
|
| 288 |
+
"visual": 9,
|
| 289 |
+
"functional": 9,
|
| 290 |
+
"interaction": 13,
|
| 291 |
+
"coverage": 2
|
| 292 |
}
|
| 293 |
}
|
| 294 |
+
}
|
tasks/c45/task.json
CHANGED
|
@@ -3,19 +3,19 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
@@ -23,260 +23,260 @@
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
-
"title": "
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
-
"operator": "
|
| 30 |
-
"request": "
|
| 31 |
},
|
| 32 |
{
|
| 33 |
-
"operator": "
|
| 34 |
-
"request": "
|
| 35 |
},
|
| 36 |
{
|
| 37 |
-
"operator": "
|
| 38 |
-
"request": "
|
| 39 |
},
|
| 40 |
{
|
| 41 |
-
"operator": "
|
| 42 |
-
"request": "
|
| 43 |
},
|
| 44 |
{
|
| 45 |
-
"operator": "
|
| 46 |
-
"request": "
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.tabs",
|
| 52 |
"m": 1,
|
| 53 |
-
"dimension": "
|
| 54 |
"w": 1.5,
|
| 55 |
-
"description": "
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.total",
|
| 59 |
"m": 1,
|
| 60 |
-
"dimension": "
|
| 61 |
"w": 1.5,
|
| 62 |
-
"description": "
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.val.desc",
|
| 66 |
"m": 1,
|
| 67 |
-
"dimension": "
|
| 68 |
"w": 1.5,
|
| 69 |
-
"description": "
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.extra.rule",
|
| 73 |
"m": 1,
|
| 74 |
-
"dimension": "
|
| 75 |
"w": 1.5,
|
| 76 |
-
"description": "
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.split",
|
| 80 |
"m": 1,
|
| 81 |
-
"dimension": "
|
| 82 |
"w": 1.0,
|
| 83 |
-
"description": "
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card",
|
| 87 |
"m": 1,
|
| 88 |
-
"dimension": "
|
| 89 |
"w": 1.0,
|
| 90 |
-
"description": "
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.header",
|
| 94 |
"m": 1,
|
| 95 |
-
"dimension": "
|
| 96 |
"w": 1.0,
|
| 97 |
-
"description": "
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "gen.sel.one",
|
| 101 |
"m": 1,
|
| 102 |
-
"dimension": "
|
| 103 |
"w": 1.0,
|
| 104 |
-
"description": "
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "st.add1",
|
| 108 |
"m": 2,
|
| 109 |
-
"dimension": "
|
| 110 |
"w": 1.5,
|
| 111 |
-
"description": "
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "st.add3",
|
| 115 |
"m": 2,
|
| 116 |
-
"dimension": "
|
| 117 |
"w": 1.5,
|
| 118 |
-
"description": "
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "st.cancel",
|
| 122 |
"m": 2,
|
| 123 |
-
"dimension": "
|
| 124 |
"w": 1.5,
|
| 125 |
-
"description": "
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.keep.tab",
|
| 129 |
"m": 2,
|
| 130 |
-
"dimension": "
|
| 131 |
"w": 1.5,
|
| 132 |
-
"description": "
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.no.dup",
|
| 136 |
"m": 2,
|
| 137 |
-
"dimension": "
|
| 138 |
"w": 1.0,
|
| 139 |
-
"description": "
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.badge.visible",
|
| 143 |
"m": 2,
|
| 144 |
-
"dimension": "
|
| 145 |
"w": 1.0,
|
| 146 |
-
"description": "
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "data.sum.all",
|
| 150 |
"m": 3,
|
| 151 |
-
"dimension": "
|
| 152 |
"w": 1.5,
|
| 153 |
-
"description": "
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "data.sum.tab",
|
| 157 |
"m": 3,
|
| 158 |
-
"dimension": "
|
| 159 |
"w": 1.5,
|
| 160 |
-
"description": "
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "data.sum.pos",
|
| 164 |
"m": 3,
|
| 165 |
-
"dimension": "
|
| 166 |
"w": 1.0,
|
| 167 |
-
"description": "
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "data.sum.switch",
|
| 171 |
"m": 3,
|
| 172 |
-
"dimension": "
|
| 173 |
"w": 1.5,
|
| 174 |
-
"description": "
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "data.sum.keep.state",
|
| 178 |
"m": 3,
|
| 179 |
-
"dimension": "
|
| 180 |
"w": 1.5,
|
| 181 |
-
"description": "
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.tab.gone",
|
| 185 |
"m": 4,
|
| 186 |
-
"dimension": "
|
| 187 |
"w": 1.5,
|
| 188 |
-
"description": "
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.total",
|
| 192 |
"m": 4,
|
| 193 |
-
"dimension": "
|
| 194 |
"w": 1.5,
|
| 195 |
-
"description": "
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.none.left",
|
| 199 |
"m": 4,
|
| 200 |
-
"dimension": "
|
| 201 |
"w": 1.0,
|
| 202 |
-
"description": "
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "del.extra.recalc",
|
| 206 |
"m": 4,
|
| 207 |
-
"dimension": "
|
| 208 |
"w": 1.5,
|
| 209 |
-
"description": "
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "del.sum.update",
|
| 213 |
"m": 4,
|
| 214 |
-
"dimension": "
|
| 215 |
"w": 1.5,
|
| 216 |
-
"description": "
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.keep.state",
|
| 220 |
"m": 4,
|
| 221 |
-
"dimension": "
|
| 222 |
"w": 1.5,
|
| 223 |
-
"description": "
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "int.toggle.exists",
|
| 227 |
"m": 5,
|
| 228 |
-
"dimension": "
|
| 229 |
"w": 1.5,
|
| 230 |
-
"description": "
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "int.toggle.filter",
|
| 234 |
"m": 5,
|
| 235 |
-
"dimension": "
|
| 236 |
"w": 1.5,
|
| 237 |
-
"description": "
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "int.toggle.off",
|
| 241 |
"m": 5,
|
| 242 |
-
"dimension": "
|
| 243 |
"w": 1.0,
|
| 244 |
-
"description": "
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "int.toggle.keep.tab",
|
| 248 |
"m": 5,
|
| 249 |
-
"dimension": "
|
| 250 |
"w": 1.5,
|
| 251 |
-
"description": "
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "int.count.keep",
|
| 255 |
"m": 5,
|
| 256 |
-
"dimension": "
|
| 257 |
"w": 1.5,
|
| 258 |
-
"description": "
|
| 259 |
},
|
| 260 |
{
|
| 261 |
"id": "int.combo.all",
|
| 262 |
"m": 5,
|
| 263 |
-
"dimension": "
|
| 264 |
"w": 1.5,
|
| 265 |
-
"description": "
|
| 266 |
},
|
| 267 |
{
|
| 268 |
"id": "int.layout.ok",
|
| 269 |
"m": 5,
|
| 270 |
-
"dimension": "
|
| 271 |
"w": 1.0,
|
| 272 |
-
"description": "
|
| 273 |
},
|
| 274 |
{
|
| 275 |
"id": "int.sum.with.filter",
|
| 276 |
"m": 5,
|
| 277 |
-
"dimension": "
|
| 278 |
"w": 1.0,
|
| 279 |
-
"description": "
|
| 280 |
}
|
| 281 |
],
|
| 282 |
"inject": null,
|
|
@@ -285,10 +285,10 @@
|
|
| 285 |
"hand_notes": {
|
| 286 |
"cross_requirement_items": 7,
|
| 287 |
"dim_counts": {
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
-
"
|
| 292 |
}
|
| 293 |
}
|
| 294 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make responsive",
|
| 8 |
+
"restyle",
|
| 9 |
+
"add state",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "community forms",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
|
|
|
| 23 |
"materials": "none",
|
| 24 |
"ref_image_src": "prototypes/reference.jpg"
|
| 25 |
},
|
| 26 |
+
"title": "Neighborhood Market: From Site Build to Stall-Fee Recalculation and High-Rating Filtering",
|
| 27 |
"milestones": [
|
| 28 |
{
|
| 29 |
+
"operator": "generate",
|
| 30 |
+
"request": "Build a site homepage called “Neighborhood Market”, with the tagline “All the bustle of the street, right here”. Put the site name and a “My Follows (0)” entry in the top bar.\n\nBelow that is a filter bar whose categories are fixed as All / Produce / Prepared Food / Handmade, defaulting to “All”. The main body is a stall list with 20 items in total, distributed as: Produce 9, Prepared Food 6, Handmade 5.\n\nEach item must have a name, its category, a stall fee, and a “Follow” button. Stall fees are assigned by position: item n = 20 + n × 8. Each item also has a rating; item 1 is 4.8, and each subsequent item is 0.1 lower than the previous one. The list is sorted by rating from high to low by default."
|
| 31 |
},
|
| 32 |
{
|
| 33 |
+
"operator": "add state",
|
| 34 |
+
"request": "“Follow” must actually work. After clicking, the button changes to “Following” and the “My Follows” count in the top bar increases by 1; clicking again cancels it and the count decreases by 1. This count and each item's button state must not be lost after switching categories."
|
| 35 |
},
|
| 36 |
{
|
| 37 |
+
"operator": "wire up data",
|
| 38 |
+
"request": "Add a summary line below the filter bar: “N items · Total stall fees M”. N is the number of items under the current category, and M is the sum of the stall fees of those items; it must update when switching categories, and the numbers must be calculated accurately."
|
| 39 |
},
|
| 40 |
{
|
| 41 |
+
"operator": "remove section",
|
| 42 |
+
"request": "We're dropping the “Handmade” category; remove the category together with those 5 items. After removal, stall fees are recalculated by new position (item n = 20 + n × 8), and the summary line must update accordingly."
|
| 43 |
},
|
| 44 |
{
|
| 45 |
+
"operator": "make interactive",
|
| 46 |
+
"request": "Add a “High ratings only” toggle to the filter bar; when on, only items with a rating of at least 4.5 are shown. The toggle state must persist after switching categories, and the top-bar count must not change before or after toggling the filter."
|
| 47 |
}
|
| 48 |
],
|
| 49 |
"checklist": [
|
| 50 |
{
|
| 51 |
"id": "gen.tabs",
|
| 52 |
"m": 1,
|
| 53 |
+
"dimension": "visual",
|
| 54 |
"w": 1.5,
|
| 55 |
+
"description": "The filter bar has exactly 4 categories, with the text, in order: All / Produce / Prepared Food / Handmade; “All” is selected and distinguishable from the other categories."
|
| 56 |
},
|
| 57 |
{
|
| 58 |
"id": "gen.total",
|
| 59 |
"m": 1,
|
| 60 |
+
"dimension": "functional",
|
| 61 |
"w": 1.5,
|
| 62 |
+
"description": "Under the All category, the total number of stalls is 20."
|
| 63 |
},
|
| 64 |
{
|
| 65 |
"id": "gen.val.desc",
|
| 66 |
"m": 1,
|
| 67 |
+
"dimension": "functional",
|
| 68 |
"w": 1.5,
|
| 69 |
+
"description": "By default sorted by rating in descending order: item 1 is 4.8, item 2 is 4.7, item 3 is 4.6."
|
| 70 |
},
|
| 71 |
{
|
| 72 |
"id": "gen.extra.rule",
|
| 73 |
"m": 1,
|
| 74 |
+
"dimension": "functional",
|
| 75 |
"w": 1.5,
|
| 76 |
+
"description": "Stall fees are calculated by position: item 1 is 28, item 2 is 36, item 5 is 60."
|
| 77 |
},
|
| 78 |
{
|
| 79 |
"id": "gen.split",
|
| 80 |
"m": 1,
|
| 81 |
+
"dimension": "functional",
|
| 82 |
"w": 1.0,
|
| 83 |
+
"description": "After switching categories, the counts per category are: Produce 9, Prepared Food 6, Handmade 5."
|
| 84 |
},
|
| 85 |
{
|
| 86 |
"id": "gen.card",
|
| 87 |
"m": 1,
|
| 88 |
+
"dimension": "visual",
|
| 89 |
"w": 1.0,
|
| 90 |
+
"description": "Each card simultaneously shows the name, category, stall fee, rating, and a “Follow” button."
|
| 91 |
},
|
| 92 |
{
|
| 93 |
"id": "gen.header",
|
| 94 |
"m": 1,
|
| 95 |
+
"dimension": "visual",
|
| 96 |
"w": 1.0,
|
| 97 |
+
"description": "The top bar shows the site name “Neighborhood Market”, the tagline “All the bustle of the street, right here”, and the “My Follows” entry, with an initial count of 0."
|
| 98 |
},
|
| 99 |
{
|
| 100 |
"id": "gen.sel.one",
|
| 101 |
"m": 1,
|
| 102 |
+
"dimension": "visual",
|
| 103 |
"w": 1.0,
|
| 104 |
+
"description": "At any given moment, exactly one category in the filter bar is selected."
|
| 105 |
},
|
| 106 |
{
|
| 107 |
"id": "st.add1",
|
| 108 |
"m": 2,
|
| 109 |
+
"dimension": "interaction",
|
| 110 |
"w": 1.5,
|
| 111 |
+
"description": "Click “Follow” on item 1; the button changes to “Following” and the top-bar count is 1."
|
| 112 |
},
|
| 113 |
{
|
| 114 |
"id": "st.add3",
|
| 115 |
"m": 2,
|
| 116 |
+
"dimension": "interaction",
|
| 117 |
"w": 1.5,
|
| 118 |
+
"description": "Then do the same for items 2 and 3; the top-bar count is 3 and all three items show “Following”."
|
| 119 |
},
|
| 120 |
{
|
| 121 |
"id": "st.cancel",
|
| 122 |
"m": 2,
|
| 123 |
+
"dimension": "interaction",
|
| 124 |
"w": 1.5,
|
| 125 |
+
"description": "Click item 2 again; the button returns to “Follow” and the top-bar count is 2."
|
| 126 |
},
|
| 127 |
{
|
| 128 |
"id": "st.keep.tab",
|
| 129 |
"m": 2,
|
| 130 |
+
"dimension": "interaction",
|
| 131 |
"w": 1.5,
|
| 132 |
+
"description": "After acting on 3 items, switch to “Produce” and back to All; the top-bar count is still 3 and the original three items still show “Following”."
|
| 133 |
},
|
| 134 |
{
|
| 135 |
"id": "st.no.dup",
|
| 136 |
"m": 2,
|
| 137 |
+
"dimension": "interaction",
|
| 138 |
"w": 1.0,
|
| 139 |
+
"description": "Click the same item twice in a row; the net change in count is 0 (no duplicate counting)."
|
| 140 |
},
|
| 141 |
{
|
| 142 |
"id": "st.badge.visible",
|
| 143 |
"m": 2,
|
| 144 |
+
"dimension": "visual",
|
| 145 |
"w": 1.0,
|
| 146 |
+
"description": "The top-bar count number updates visibly immediately after the action, without refreshing the page."
|
| 147 |
},
|
| 148 |
{
|
| 149 |
"id": "data.sum.all",
|
| 150 |
"m": 3,
|
| 151 |
+
"dimension": "functional",
|
| 152 |
"w": 1.5,
|
| 153 |
+
"description": "Under All, the summary line shows “20 items”, and the total stall fees equal the sum of the 20 items, with exact numbers."
|
| 154 |
},
|
| 155 |
{
|
| 156 |
"id": "data.sum.tab",
|
| 157 |
"m": 3,
|
| 158 |
+
"dimension": "functional",
|
| 159 |
"w": 1.5,
|
| 160 |
+
"description": "Switch to “Produce”; the item count in the summary line becomes 9, and the total equals the sum of that category's items."
|
| 161 |
},
|
| 162 |
{
|
| 163 |
"id": "data.sum.pos",
|
| 164 |
"m": 3,
|
| 165 |
+
"dimension": "visual",
|
| 166 |
"w": 1.0,
|
| 167 |
+
"description": "The summary line is located below the filter bar, with wording of the form “N items · Total stall fees M”."
|
| 168 |
},
|
| 169 |
{
|
| 170 |
"id": "data.sum.switch",
|
| 171 |
"m": 3,
|
| 172 |
+
"dimension": "interaction",
|
| 173 |
"w": 1.5,
|
| 174 |
+
"description": "Switch back and forth twice between two different categories; the item count and total in the summary line match the current category each time."
|
| 175 |
},
|
| 176 |
{
|
| 177 |
"id": "data.sum.keep.state",
|
| 178 |
"m": 3,
|
| 179 |
+
"dimension": "interaction",
|
| 180 |
"w": 1.5,
|
| 181 |
+
"description": "Act on 2 items first, then switch categories; the summary line changes with the category while the top-bar count remains 2."
|
| 182 |
},
|
| 183 |
{
|
| 184 |
"id": "del.tab.gone",
|
| 185 |
"m": 4,
|
| 186 |
+
"dimension": "coverage",
|
| 187 |
"w": 1.5,
|
| 188 |
+
"description": "The filter bar has only 3 categories left; “Handmade” no longer appears."
|
| 189 |
},
|
| 190 |
{
|
| 191 |
"id": "del.total",
|
| 192 |
"m": 4,
|
| 193 |
+
"dimension": "functional",
|
| 194 |
"w": 1.5,
|
| 195 |
+
"description": "Under All, the total becomes 15 items."
|
| 196 |
},
|
| 197 |
{
|
| 198 |
"id": "del.none.left",
|
| 199 |
"m": 4,
|
| 200 |
+
"dimension": "coverage",
|
| 201 |
"w": 1.0,
|
| 202 |
+
"description": "Browse the 15 items one by one; no item's category is “Handmade”."
|
| 203 |
},
|
| 204 |
{
|
| 205 |
"id": "del.extra.recalc",
|
| 206 |
"m": 4,
|
| 207 |
+
"dimension": "functional",
|
| 208 |
"w": 1.5,
|
| 209 |
+
"description": "Stall fees are recalculated by new position: item 1 is 28, item 5 is 60, and the last item (item 15) is 140."
|
| 210 |
},
|
| 211 |
{
|
| 212 |
"id": "del.sum.update",
|
| 213 |
"m": 4,
|
| 214 |
+
"dimension": "functional",
|
| 215 |
"w": 1.5,
|
| 216 |
+
"description": "The summary line updates in sync to “15 items”, and the total equals the sum of the 15 recalculated items."
|
| 217 |
},
|
| 218 |
{
|
| 219 |
"id": "del.keep.state",
|
| 220 |
"m": 4,
|
| 221 |
+
"dimension": "interaction",
|
| 222 |
"w": 1.5,
|
| 223 |
+
"description": "Before deleting, act on 2 items in the retained categories; after deleting “Handmade”, the top-bar count is still 2 and those 2 items still show “Following”."
|
| 224 |
},
|
| 225 |
{
|
| 226 |
"id": "int.toggle.exists",
|
| 227 |
"m": 5,
|
| 228 |
+
"dimension": "visual",
|
| 229 |
"w": 1.5,
|
| 230 |
+
"description": "A “High ratings only” toggle exists near the filter bar; it is clickable and has clearly distinct on/off states."
|
| 231 |
},
|
| 232 |
{
|
| 233 |
"id": "int.toggle.filter",
|
| 234 |
"m": 5,
|
| 235 |
+
"dimension": "interaction",
|
| 236 |
"w": 1.5,
|
| 237 |
+
"description": "After turning on “High ratings only”, every item in the list has a rating of at least 4.5; all items below that value are invisible."
|
| 238 |
},
|
| 239 |
{
|
| 240 |
"id": "int.toggle.off",
|
| 241 |
"m": 5,
|
| 242 |
+
"dimension": "interaction",
|
| 243 |
"w": 1.0,
|
| 244 |
+
"description": "After turning the toggle off, the list returns to 15 items."
|
| 245 |
},
|
| 246 |
{
|
| 247 |
"id": "int.toggle.keep.tab",
|
| 248 |
"m": 5,
|
| 249 |
+
"dimension": "interaction",
|
| 250 |
"w": 1.5,
|
| 251 |
+
"description": "After turning on “High ratings only”, switch categories; the toggle is still in the on state (not reset)."
|
| 252 |
},
|
| 253 |
{
|
| 254 |
"id": "int.count.keep",
|
| 255 |
"m": 5,
|
| 256 |
+
"dimension": "interaction",
|
| 257 |
"w": 1.5,
|
| 258 |
+
"description": "After acting on 2 items, toggle “High ratings only” on and off twice in a row; the top-bar count is always 2."
|
| 259 |
},
|
| 260 |
{
|
| 261 |
"id": "int.combo.all",
|
| 262 |
"m": 5,
|
| 263 |
+
"dimension": "interaction",
|
| 264 |
"w": 1.5,
|
| 265 |
+
"description": "Act on 2 items → switch to “Produce” → turn on High ratings only → switch back to All; the top-bar count, summary line, and toggle state are all correct at the same time."
|
| 266 |
},
|
| 267 |
{
|
| 268 |
"id": "int.layout.ok",
|
| 269 |
"m": 5,
|
| 270 |
+
"dimension": "visual",
|
| 271 |
"w": 1.0,
|
| 272 |
+
"description": "After toggling the filter, card information remains fully visible, with no text truncation or element overlap."
|
| 273 |
},
|
| 274 |
{
|
| 275 |
"id": "int.sum.with.filter",
|
| 276 |
"m": 5,
|
| 277 |
+
"dimension": "visual",
|
| 278 |
"w": 1.0,
|
| 279 |
+
"description": "After enabling the filter, the summary line is still visible and not empty."
|
| 280 |
}
|
| 281 |
],
|
| 282 |
"inject": null,
|
|
|
|
| 285 |
"hand_notes": {
|
| 286 |
"cross_requirement_items": 7,
|
| 287 |
"dim_counts": {
|
| 288 |
+
"visual": 9,
|
| 289 |
+
"functional": 9,
|
| 290 |
+
"interaction": 13,
|
| 291 |
+
"coverage": 2
|
| 292 |
}
|
| 293 |
}
|
| 294 |
+
}
|
tasks/c46/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.val.desc",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.extra.rule",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.split",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.card",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.header",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.sel.one",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "st.add1",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.5,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add3",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.cancel",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.keep.tab",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.no.dup",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.0,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.badge.visible",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.0,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "data.sum.all",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "data.sum.tab",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "data.sum.pos",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.0,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "data.sum.switch",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "data.sum.keep.state",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.5,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "del.tab.gone",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.total",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.none.left",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.extra.recalc",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sum.update",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.5,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.state",
|
| 219 |
"m": 4,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "int.toggle.exists",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "int.toggle.filter",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.5,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "int.toggle.off",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.0,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "int.toggle.keep.tab",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "int.count.keep",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "int.combo.all",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.5,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "int.layout.ok",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.0,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "int.sum.with.filter",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.0,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"remove section",
|
| 8 |
+
"add state",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "data display",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "DataGrid Insights: From Site Build to Sampling-Cost Recalculation and High-Rating Filtering",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “DataGrid Insights”, with the tagline “Every number has a source”. Put the site name and a “My Dashboard (0)” entry in the top bar.\n\nBelow that is a filter bar whose categories are fixed as All / Traffic / Conversion / Retention, defaulting to “All”. The main body is a metric list with 20 items in total, distributed as: Traffic 7, Conversion 7, Retention 6.\n\nEach item must have a name, its category, a sampling cost, and a “Track” button. Sampling costs are assigned by position: item n = 50 + n × 15. Each item also has a rating; item 1 is 4.9, and each subsequent item is 0.2 lower than the previous one. The list is sorted by rating from high to low by default."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Track” must actually work. After clicking, the button changes to “Tracking” and the “My Dashboard” count in the top bar increases by 1; clicking again cancels it and the count decreases by 1. This count and each item's button state must not be lost after switching categories."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "wire up data",
|
| 37 |
+
"request": "Add a summary line below the filter bar: “N items · Total sampling costs M”. N is the number of items under the current category, and M is the sum of the sampling costs of those items; it must update when switching categories, and the numbers must be calculated accurately."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "remove section",
|
| 41 |
+
"request": "We're dropping the “Retention” category; remove the category together with those 6 items. After removal, sampling costs are recalculated by new position (item n = 50 + n × 15), and the summary line must update accordingly."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "make interactive",
|
| 45 |
+
"request": "Add a “High ratings only” toggle to the filter bar; when on, only items with a rating of at least 4.3 are shown. The toggle state must persist after switching categories, and the top-bar count must not change before or after toggling the filter."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories, with the text, in order: All / Traffic / Conversion / Retention; “All” is selected and distinguishable from the other categories."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "Under the All category, the total number of metrics is 20."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.val.desc",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "By default sorted by rating in descending order: item 1 is 4.9, item 2 is 4.7, item 3 is 4.5."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.extra.rule",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "Sampling costs are calculated by position: item 1 is 65, item 2 is 80, item 5 is 125."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.split",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "After switching categories, the counts per category are: Traffic 7, Conversion 7, Retention 6."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.card",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "visual",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "Each card simultaneously shows the name, category, sampling cost, rating, and a “Track” button."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.header",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "The top bar shows the site name “DataGrid Insights”, the tagline “Every number has a source”, and the “My Dashboard” entry, with an initial count of 0."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.sel.one",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "At any given moment, exactly one category in the filter bar is selected."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "st.add1",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "interaction",
|
| 109 |
"w": 1.5,
|
| 110 |
+
"description": "Click “Track” on item 1; the button changes to “Tracking” and the top-bar count is 1."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add3",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Then do the same for items 2 and 3; the top-bar count is 3 and all three items show “Tracking”."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.cancel",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Click item 2 again; the button returns to “Track” and the top-bar count is 2."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.keep.tab",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "After acting on 3 items, switch to “Traffic” and back to All; the top-bar count is still 3 and the original three items still show “Tracking”."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.no.dup",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.0,
|
| 138 |
+
"description": "Click the same item twice in a row; the net change in count is 0 (no duplicate counting)."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.badge.visible",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "visual",
|
| 144 |
"w": 1.0,
|
| 145 |
+
"description": "The top-bar count number updates visibly immediately after the action, without refreshing the page."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "data.sum.all",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "functional",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "Under All, the summary line shows “20 items”, and the total sampling costs equal the sum of the 20 items, with exact numbers."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "data.sum.tab",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "functional",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "Switch to “Traffic”; the item count in the summary line becomes 7, and the total equals the sum of that category's items."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "data.sum.pos",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "visual",
|
| 165 |
"w": 1.0,
|
| 166 |
+
"description": "The summary line is located below the filter bar, with wording of the form “N items · Total sampling costs M”."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "data.sum.switch",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Switch back and forth twice between two different categories; the item count and total in the summary line match the current category each time."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "data.sum.keep.state",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "interaction",
|
| 179 |
"w": 1.5,
|
| 180 |
+
"description": "Act on 2 items first, then switch categories; the summary line changes with the category while the top-bar count remains 2."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "del.tab.gone",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "coverage",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "The filter bar has only 3 categories left; “Retention” no longer appears."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.total",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "Under All, the total becomes 14 items."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.none.left",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "coverage",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "Browse the 14 items one by one; no item's category is “Retention”."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.extra.recalc",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "functional",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Sampling costs are recalculated by new position: item 1 is 65, item 5 is 125, and the last item (item 14) is 260."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sum.update",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "functional",
|
| 214 |
"w": 1.5,
|
| 215 |
+
"description": "The summary line updates in sync to “14 items”, and the total equals the sum of the 14 recalculated items."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.state",
|
| 219 |
"m": 4,
|
| 220 |
+
"dimension": "interaction",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "Before deleting, act on 2 items in the retained categories; after deleting “Retention”, the top-bar count is still 2 and those 2 items still show “Tracking”."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "int.toggle.exists",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "visual",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "A “High ratings only” toggle exists near the filter bar; it is clickable and has clearly distinct on/off states."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "int.toggle.filter",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "interaction",
|
| 235 |
"w": 1.5,
|
| 236 |
+
"description": "After turning on “High ratings only”, every item in the list has a rating of at least 4.3; all items below that value are invisible."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "int.toggle.off",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "interaction",
|
| 242 |
"w": 1.0,
|
| 243 |
+
"description": "After turning the toggle off, the list returns to 14 items."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "int.toggle.keep.tab",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "interaction",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "After turning on “High ratings only”, switch categories; the toggle is still in the on state (not reset)."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "int.count.keep",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "After acting on 2 items, toggle “High ratings only” on and off twice in a row; the top-bar count is always 2."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "int.combo.all",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "interaction",
|
| 263 |
"w": 1.5,
|
| 264 |
+
"description": "Act on 2 items → switch to “Traffic” → turn on High ratings only → switch back to All; the top-bar count, summary line, and toggle state are all correct at the same time."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "int.layout.ok",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "visual",
|
| 270 |
"w": 1.0,
|
| 271 |
+
"description": "After toggling the filter, card information remains fully visible, with no text truncation or element overlap."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "int.sum.with.filter",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "visual",
|
| 277 |
"w": 1.0,
|
| 278 |
+
"description": "After enabling the filter, the summary line is still visible and not empty."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 9,
|
| 288 |
+
"functional": 9,
|
| 289 |
+
"interaction": 13,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c47/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.val.desc",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.extra.rule",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.split",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.card",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.header",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.sel.one",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "st.add1",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.5,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add3",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.cancel",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.keep.tab",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.no.dup",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.0,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.badge.visible",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.0,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "data.sum.all",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "data.sum.tab",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "data.sum.pos",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.0,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "data.sum.switch",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "data.sum.keep.state",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.5,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "del.tab.gone",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.total",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.none.left",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.extra.recalc",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sum.update",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.5,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.state",
|
| 219 |
"m": 4,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "int.toggle.exists",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "int.toggle.filter",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.5,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "int.toggle.off",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.0,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "int.toggle.keep.tab",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "int.count.keep",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "int.combo.all",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.5,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "int.layout.ok",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.0,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "int.sum.with.filter",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.0,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"add state",
|
| 8 |
+
"remove section",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"restructure layout"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "booking service",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Short Stay Lodging: From Site Build to Nightly-Price Recalculation and High-Rating Filtering",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Short Stay Lodging”, with the tagline “Stay one night, remember it for a long time”. Put the site name and a “My Saved (0)” entry in the top bar.\n\nBelow that is a filter bar whose categories are fixed as All / Homestay / Hotel / Campground, defaulting to “All”. The main body is a room type list with 20 items in total, distributed as: Homestay 8, Hotel 7, Campground 5.\n\nEach item must have a name, its category, a nightly price, and a “Save” button. Nightly prices are assigned by position: item n = 180 + n × 40. Each item also has a rating; item 1 is 4.9, and each subsequent item is 0.15 lower than the previous one. The list is sorted by rating from high to low by default."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Save” must actually work. After clicking, the button changes to “Saved” and the “My Saved” count in the top bar increases by 1; clicking again cancels it and the count decreases by 1. This count and each item's button state must not be lost after switching categories."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "wire up data",
|
| 37 |
+
"request": "Add a summary line below the filter bar: “N items · Total nightly prices M”. N is the number of items under the current category, and M is the sum of the nightly prices of those items; it must update when switching categories, and the numbers must be calculated accurately."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "remove section",
|
| 41 |
+
"request": "We're dropping the “Campground” category; remove the category together with those 5 items. After removal, nightly prices are recalculated by new position (item n = 180 + n × 40), and the summary line must update accordingly."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "make interactive",
|
| 45 |
+
"request": "Add a “High ratings only” toggle to the filter bar; when on, only items with a rating of at least 4.5 are shown. The toggle state must persist after switching categories, and the top-bar count must not change before or after toggling the filter."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories, with the text, in order: All / Homestay / Hotel / Campground; “All” is selected and distinguishable from the other categories."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "Under the All category, the total number of room types is 20."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.val.desc",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "By default sorted by rating in descending order: item 1 is 4.9, item 2 is 4.8, item 3 is 4.6."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.extra.rule",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "Nightly prices are calculated by position: item 1 is 220, item 2 is 260, item 5 is 380."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.split",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "After switching categories, the counts per category are: Homestay 8, Hotel 7, Campground 5."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.card",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "visual",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "Each card simultaneously shows the name, category, nightly price, rating, and a “Save” button."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.header",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "The top bar shows the site name “Short Stay Lodging”, the tagline “Stay one night, remember it for a long time”, and the “My Saved” entry, with an initial count of 0."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.sel.one",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "At any given moment, exactly one category in the filter bar is selected."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "st.add1",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "interaction",
|
| 109 |
"w": 1.5,
|
| 110 |
+
"description": "Click “Save” on item 1; the button changes to “Saved” and the top-bar count is 1."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add3",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Then do the same for items 2 and 3; the top-bar count is 3 and all three items show “Saved”."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.cancel",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Click item 2 again; the button returns to “Save” and the top-bar count is 2."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.keep.tab",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "After acting on 3 items, switch to “Homestay” and back to All; the top-bar count is still 3 and the original three items still show “Saved”."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.no.dup",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.0,
|
| 138 |
+
"description": "Click the same item twice in a row; the net change in count is 0 (no duplicate counting)."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.badge.visible",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "visual",
|
| 144 |
"w": 1.0,
|
| 145 |
+
"description": "The top-bar count number updates visibly immediately after the action, without refreshing the page."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "data.sum.all",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "functional",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "Under All, the summary line shows “20 items”, and the total nightly prices equal the sum of the 20 items, with exact numbers."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "data.sum.tab",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "functional",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "Switch to “Homestay”; the item count in the summary line becomes 8, and the total equals the sum of that category's items."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "data.sum.pos",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "visual",
|
| 165 |
"w": 1.0,
|
| 166 |
+
"description": "The summary line is located below the filter bar, with wording of the form “N items · Total nightly prices M”."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "data.sum.switch",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Switch back and forth twice between two different categories; the item count and total in the summary line match the current category each time."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "data.sum.keep.state",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "interaction",
|
| 179 |
"w": 1.5,
|
| 180 |
+
"description": "Act on 2 items first, then switch categories; the summary line changes with the category while the top-bar count remains 2."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "del.tab.gone",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "coverage",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "The filter bar has only 3 categories left; “Campground” no longer appears."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.total",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "Under All, the total becomes 15 items."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.none.left",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "coverage",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "Browse the 15 items one by one; no item's category is “Campground”."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.extra.recalc",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "functional",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Nightly prices are recalculated by new position: item 1 is 220, item 5 is 380, and the last item (item 15) is 780."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sum.update",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "functional",
|
| 214 |
"w": 1.5,
|
| 215 |
+
"description": "The summary line updates in sync to “15 items”, and the total equals the sum of the 15 recalculated items."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.state",
|
| 219 |
"m": 4,
|
| 220 |
+
"dimension": "interaction",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "Before deleting, act on 2 items in the retained categories; after deleting “Campground”, the top-bar count is still 2 and those 2 items still show “Saved”."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "int.toggle.exists",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "visual",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "A “High ratings only” toggle exists near the filter bar; it is clickable and has clearly distinct on/off states."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "int.toggle.filter",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "interaction",
|
| 235 |
"w": 1.5,
|
| 236 |
+
"description": "After turning on “High ratings only”, every item in the list has a rating of at least 4.5; all items below that value are invisible."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "int.toggle.off",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "interaction",
|
| 242 |
"w": 1.0,
|
| 243 |
+
"description": "After turning the toggle off, the list returns to 15 items."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "int.toggle.keep.tab",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "interaction",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "After turning on “High ratings only”, switch categories; the toggle is still in the on state (not reset)."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "int.count.keep",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "After acting on 2 items, toggle “High ratings only” on and off twice in a row; the top-bar count is always 2."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "int.combo.all",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "interaction",
|
| 263 |
"w": 1.5,
|
| 264 |
+
"description": "Act on 2 items → switch to “Homestay” → turn on High ratings only → switch back to All; the top-bar count, summary line, and toggle state are all correct at the same time."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "int.layout.ok",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "visual",
|
| 270 |
"w": 1.0,
|
| 271 |
+
"description": "After toggling the filter, card information remains fully visible, with no text truncation or element overlap."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "int.sum.with.filter",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "visual",
|
| 277 |
"w": 1.0,
|
| 278 |
+
"description": "After enabling the filter, the summary line is still visible and not empty."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 9,
|
| 288 |
+
"functional": 9,
|
| 289 |
+
"interaction": 13,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c48/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.val.desc",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.extra.rule",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.split",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.0,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.card",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.header",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.sel.one",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "st.add1",
|
| 107 |
"m": 2,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.5,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add3",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.cancel",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.keep.tab",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.no.dup",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.0,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.badge.visible",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.0,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "data.sum.all",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "data.sum.tab",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "data.sum.pos",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.0,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "data.sum.switch",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "data.sum.keep.state",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.5,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "del.tab.gone",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.total",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.none.left",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.extra.recalc",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sum.update",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.5,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.state",
|
| 219 |
"m": 4,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "int.toggle.exists",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "int.toggle.filter",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.5,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "int.toggle.off",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.0,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "int.toggle.keep.tab",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "int.count.keep",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "int.combo.all",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.5,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "int.layout.ok",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.0,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "int.sum.with.filter",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.0,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make responsive",
|
| 8 |
+
"add state",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "portfolio",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Craft Archive: From Site Build to Licensing-Price Recalculation and High-Rating Filtering",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Craft Archive”, with the tagline “The work speaks for the maker”. Put the site name and a “My List (0)” entry in the top bar.\n\nBelow that is a filter bar whose categories are fixed as All / Illustration / Photography / Installation, defaulting to “All”. The main body is a work list with 20 items in total, distributed as: Illustration 9, Photography 6, Installation 5.\n\nEach item must have a name, its category, a licensing price, and a “Want” button. Licensing prices are assigned by position: item n = 60 + n × 20. Each item also has a rating; item 1 is 4.9, and each subsequent item is 0.1 lower than the previous one. The list is sorted by rating from high to low by default."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Want” must actually work. After clicking, the button changes to “Wanted” and the “My List” count in the top bar increases by 1; clicking again cancels it and the count decreases by 1. This count and each item's button state must not be lost after switching categories."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "wire up data",
|
| 37 |
+
"request": "Add a summary line below the filter bar: “N items · Total licensing prices M”. N is the number of items under the current category, and M is the sum of the licensing prices of those items; it must update when switching categories, and the numbers must be calculated accurately."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "remove section",
|
| 41 |
+
"request": "We're dropping the “Installation” category; remove the category together with those 5 items. After removal, licensing prices are recalculated by new position (item n = 60 + n × 20), and the summary line must update accordingly."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "make interactive",
|
| 45 |
+
"request": "Add a “High ratings only” toggle to the filter bar; when on, only items with a rating of at least 4.6 are shown. The toggle state must persist after switching categories, and the top-bar count must not change before or after toggling the filter."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories, with the text, in order: All / Illustration / Photography / Installation; “All” is selected and distinguishable from the other categories."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "Under the All category, the total number of works is 20."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.val.desc",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "By default sorted by rating in descending order: item 1 is 4.9, item 2 is 4.8, item 3 is 4.7."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.extra.rule",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "Licensing prices are calculated by position: item 1 is 80, item 2 is 100, item 5 is 160."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.split",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.0,
|
| 82 |
+
"description": "After switching categories, the counts per category are: Illustration 9, Photography 6, Installation 5."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.card",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "visual",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "Each card simultaneously shows the name, category, licensing price, rating, and a “Want” button."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.header",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "The top bar shows the site name “Craft Archive”, the tagline “The work speaks for the maker”, and the “My List” entry, with an initial count of 0."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.sel.one",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "At any given moment, exactly one category in the filter bar is selected."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "st.add1",
|
| 107 |
"m": 2,
|
| 108 |
+
"dimension": "interaction",
|
| 109 |
"w": 1.5,
|
| 110 |
+
"description": "Click “Want” on item 1; the button changes to “Wanted” and the top-bar count is 1."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add3",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Then do the same for items 2 and 3; the top-bar count is 3 and all three items show “Wanted”."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.cancel",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Click item 2 again; the button returns to “Want” and the top-bar count is 2."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.keep.tab",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "After acting on 3 items, switch to “Illustration” and back to All; the top-bar count is still 3 and the original three items still show “Wanted”."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.no.dup",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.0,
|
| 138 |
+
"description": "Click the same item twice in a row; the net change in count is 0 (no duplicate counting)."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.badge.visible",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "visual",
|
| 144 |
"w": 1.0,
|
| 145 |
+
"description": "The top-bar count number updates visibly immediately after the action, without refreshing the page."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "data.sum.all",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "functional",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "Under All, the summary line shows “20 items”, and the total licensing prices equal the sum of the 20 items, with exact numbers."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "data.sum.tab",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "functional",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "Switch to “Illustration”; the item count in the summary line becomes 9, and the total equals the sum of that category's items."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "data.sum.pos",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "visual",
|
| 165 |
"w": 1.0,
|
| 166 |
+
"description": "The summary line is located below the filter bar, with wording of the form “N items · Total licensing prices M”."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "data.sum.switch",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Switch back and forth twice between two different categories; the item count and total in the summary line match the current category each time."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "data.sum.keep.state",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "interaction",
|
| 179 |
"w": 1.5,
|
| 180 |
+
"description": "Act on 2 items first, then switch categories; the summary line changes with the category while the top-bar count remains 2."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "del.tab.gone",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "coverage",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "The filter bar has only 3 categories left; “Installation” no longer appears."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "del.total",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "Under All, the total becomes 15 items."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "del.none.left",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "coverage",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "Browse the 15 items one by one; no item's category is “Installation”."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "del.extra.recalc",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "functional",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Licensing prices are recalculated by new position: item 1 is 80, item 5 is 160, and the last item (item 15) is 360."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "del.sum.update",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "functional",
|
| 214 |
"w": 1.5,
|
| 215 |
+
"description": "The summary line updates in sync to “15 items”, and the total equals the sum of the 15 recalculated items."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.keep.state",
|
| 219 |
"m": 4,
|
| 220 |
+
"dimension": "interaction",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "Before deleting, act on 2 items in the retained categories; after deleting “Installation”, the top-bar count is still 2 and those 2 items still show “Wanted”."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "int.toggle.exists",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "visual",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "A “High ratings only” toggle exists near the filter bar; it is clickable and has clearly distinct on/off states."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "int.toggle.filter",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "interaction",
|
| 235 |
"w": 1.5,
|
| 236 |
+
"description": "After turning on “High ratings only”, every item in the list has a rating of at least 4.6; all items below that value are invisible."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "int.toggle.off",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "interaction",
|
| 242 |
"w": 1.0,
|
| 243 |
+
"description": "After turning the toggle off, the list returns to 15 items."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "int.toggle.keep.tab",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "interaction",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "After turning on “High ratings only”, switch categories; the toggle is still in the on state (not reset)."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "int.count.keep",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "After acting on 2 items, toggle “High ratings only” on and off twice in a row; the top-bar count is always 2."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "int.combo.all",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "interaction",
|
| 263 |
"w": 1.5,
|
| 264 |
+
"description": "Act on 2 items → switch to “Illustration” → turn on High ratings only → switch back to All; the top-bar count, summary line, and toggle state are all correct at the same time."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "int.layout.ok",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "visual",
|
| 270 |
"w": 1.0,
|
| 271 |
+
"description": "After toggling the filter, card information remains fully visible, with no text truncation or element overlap."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "int.sum.with.filter",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "visual",
|
| 277 |
"w": 1.0,
|
| 278 |
+
"description": "After enabling the filter, the summary line is still visible and not empty."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 9,
|
| 288 |
+
"functional": 9,
|
| 289 |
+
"interaction": 13,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c50/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.5,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.0,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.5,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.5,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"restyle",
|
| 8 |
+
"add state",
|
| 9 |
+
"wire up data",
|
| 10 |
+
"restructure layout"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "tool dashboard",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Gateway Panel: From Site Build to Discounted-Price Recalculation",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Gateway Panel”, with the tagline “Leave the complexity to the backend”. Put the site name, an “Enabled Modules (0)” entry, and a “Total ¥0” in the top bar.\n\nThe filter bar categories are All / Monitoring / Alerts / Reports, defaulting to “All”. The module list has 19 items in total: Monitoring 7, Alerts 7, Reports 5. Each item has a name, its category, a list price, and an “Enable” button.\n\nList prices are calculated by position: item n = 80 + n × 40. There is also a rule: items with a list price of 300 or more get 20% off, rounded down, and the card must show both the original price and the discounted price."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Enable” must actually work: after clicking, the button changes to “Enabled”, the top-bar count increases by 1, and the top-bar “Total” adds this item's **discounted price**; clicking again cancels and both decrease back. The total must be calculated accurately using discounted prices."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "restyle",
|
| 37 |
+
"request": "Add a “Night mode” toggle to the top bar; turning it on switches the whole site to dark mode (darker background, lighter body text). The toggle state must persist after switching categories, and the top-bar count and total must not change because of the theme switch."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Change the module list into a grid, with 3 items per row at desktop width. After the change, the list price, discounted price, sorting, selected state, and total must all be identical to before."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "remove section",
|
| 45 |
+
"request": "We're dropping the “Reports” category; remove the category together with those 5 items. After removal, list prices are recalculated by new position (item n = 80 + n × 40), and the discount rule still applies as before."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories: All / Monitoring / Alerts / Reports; “All” is selected and distinguishable."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "There are 19 items in total under All."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "List prices are calculated by position: item 1 is ¥120, item 2 is ¥160, item 6 is ¥320."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "A 20% discount applies at a list price of 300 or above, rounded down: item 6's discounted price is ¥256 (if its list price has not reached the threshold, no discounted price is shown)."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.5,
|
| 82 |
+
"description": "Items with a list price below 300 do not show a discounted price; only the original price is shown."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "After switching categories, the counts per category are: Monitoring 7, Alerts 7, Reports 5."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Each card simultaneously shows the name, category, list price, and an “Enable” button."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The top bar shows the site name “Gateway Panel”, the “Enabled Modules” entry (initially 0), and “Total ¥0”."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "At any given moment, exactly one category is selected."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Click “Enable” on item 1; the button changes to “Enabled”, the count is 1, and the total becomes ¥120."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Then select item 6; the count is 2 and the total becomes ¥376 (accumulated using the discounted price)."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Cancel item 6; the count returns to 1 and the total returns to ¥120."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "After selecting 2 items, switch to “Monitoring” and back to All; both the count and total remain unchanged."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "The total uses discounted prices rather than original prices (for an item that has reached the discount threshold, the increment to the total equals its discounted price)."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "A “Night mode” toggle exists in the top bar; it is clickable and has two clearly distinct states."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "visual",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "After turning on Night mode, the background becomes clearly darker and the body text turns light, distinguishable from the daytime state."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After turning on Night mode, switch categories; it is still in the dark state."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Select 2 items first, then toggle Night mode twice; both the count and total remain unchanged."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "In the Night mode state, both the list price and the discounted price are clearly legible."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "At desktop width, the layout is a grid with exactly 3 items per row."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "After the restructure, list prices are unchanged: item 1 is ¥120, item 6 is ¥320."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "After the restructure, item 6's discounted price is still ¥256."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Select 2 items before the restructure; after the restructure, the count and total are unchanged and those 2 items are still in the selected state."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "After the restructure, the Night mode toggle is still usable and the dark state still takes effect."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "coverage",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "The filter bar has only 3 categories left; “Reports” no longer appears."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All it becomes 14 items."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "coverage",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Browse the 14 items one by one; none of them belongs to “Reports”."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "List prices are recalculated by new position: item 1 is ¥120, item 6 is ¥320, and the last item (item 14) is ¥640."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "functional",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "The discount rule still applies to the recalculated list prices: the last item (item 14) has a discounted price of ¥512."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "Before deleting, select 2 items in the retained categories; after deletion, the count and total remain unchanged."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "visual",
|
| 263 |
"w": 1.0,
|
| 264 |
+
"description": "After deletion, the grid still has 3 items per row; the last row is laid out according to the remaining count, with no empty placeholders."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "interaction",
|
| 270 |
"w": 1.5,
|
| 271 |
+
"description": "Select 2 items → turn on Night mode → switch to “Monitoring” → back to All; the count, total, and theme state are all correct at the same time."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "interaction",
|
| 277 |
"w": 1.5,
|
| 278 |
+
"description": "After deletion, reselect item 1; the increment to the total equals its recalculated discounted price."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 10,
|
| 288 |
+
"functional": 11,
|
| 289 |
+
"interaction": 10,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c51/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.5,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.0,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.5,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.5,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"add section",
|
| 8 |
+
"make responsive",
|
| 9 |
+
"restyle",
|
| 10 |
+
"add state"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "content & news",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Morning Read Bookstore: From Site Build to Discounted-Price Recalculation",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Morning Read Bookstore”, with the tagline “A day begins with a page”. Put the site name, a “My Shelf (0)” entry, and a “Total ¥0” in the top bar.\n\nThe filter bar categories are All / Literature / Social Science / Popular Science, defaulting to “All”. The book list has 20 items in total: Literature 9, Social Science 6, Popular Science 5. Each item has a name, its category, a list price, and an “Add to Shelf” button.\n\nList prices are calculated by position: item n = 30 + n × 25. There is also a rule: items with a list price of 200 or more get 10% off, rounded down, and the card must show both the original price and the discounted price."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Add to Shelf” must actually work: after clicking, the button changes to “Added”, the top-bar count increases by 1, and the top-bar “Total” adds this item's **discounted price**; clicking again cancels and both decrease back. The total must be calculated accurately using discounted prices."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "restyle",
|
| 37 |
+
"request": "Add a “Night mode” toggle to the top bar; turning it on switches the whole site to dark mode (darker background, lighter body text). The toggle state must persist after switching categories, and the top-bar count and total must not change because of the theme switch."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Change the book list into a grid, with 3 items per row at desktop width. After the change, the list price, discounted price, sorting, selected state, and total must all be identical to before."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "remove section",
|
| 45 |
+
"request": "We're dropping the “Popular Science” category; remove the category together with those 5 items. After removal, list prices are recalculated by new position (item n = 30 + n × 25), and the discount rule still applies as before."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories: All / Literature / Social Science / Popular Science; “All” is selected and distinguishable."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "There are 20 items in total under All."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "List prices are calculated by position: item 1 is ¥55, item 2 is ¥80, item 6 is ¥180."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "A 10% discount applies at a list price of 200 or above, rounded down: item 6's discounted price is ¥180 (if its list price has not reached the threshold, no discounted price is shown)."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.5,
|
| 82 |
+
"description": "Items with a list price below 200 do not show a discounted price; only the original price is shown."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "After switching categories, the counts per category are: Literature 9, Social Science 6, Popular Science 5."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Each card simultaneously shows the name, category, list price, and an “Add to Shelf” button."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The top bar shows the site name “Morning Read Bookstore”, the “My Shelf” entry (initially 0), and “Total ¥0”."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "At any given moment, exactly one category is selected."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Click “Add to Shelf” on item 1; the button changes to “Added”, the count is 1, and the total becomes ¥55."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Then select item 6; the count is 2 and the total becomes ¥235 (accumulated using the discounted price)."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Cancel item 6; the count returns to 1 and the total returns to ¥55."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "After selecting 2 items, switch to “Literature” and back to All; both the count and total remain unchanged."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "The total uses discounted prices rather than original prices (for an item that has reached the discount threshold, the increment to the total equals its discounted price)."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "A “Night mode” toggle exists in the top bar; it is clickable and has two clearly distinct states."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "visual",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "After turning on Night mode, the background becomes clearly darker and the body text turns light, distinguishable from the daytime state."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After turning on Night mode, switch categories; it is still in the dark state."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Select 2 items first, then toggle Night mode twice; both the count and total remain unchanged."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "In the Night mode state, both the list price and the discounted price are clearly legible."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "At desktop width, the layout is a grid with exactly 3 items per row."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "After the restructure, list prices are unchanged: item 1 is ¥55, item 6 is ¥180."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "After the restructure, item 6's discounted price is still ¥180."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Select 2 items before the restructure; after the restructure, the count and total are unchanged and those 2 items are still in the selected state."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "After the restructure, the Night mode toggle is still usable and the dark state still takes effect."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "coverage",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "The filter bar has only 3 categories left; “Popular Science” no longer appears."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All it becomes 15 items."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "coverage",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Browse the 15 items one by one; none of them belongs to “Popular Science”."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "List prices are recalculated by new position: item 1 is ¥55, item 6 is ¥180, and the last item (item 15) is ¥405."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "functional",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "The discount rule still applies to the recalculated list prices: the last item (item 15) has a discounted price of ¥364."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "Before deleting, select 2 items in the retained categories; after deletion, the count and total remain unchanged."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "visual",
|
| 263 |
"w": 1.0,
|
| 264 |
+
"description": "After deletion, the grid still has 3 items per row; the last row is laid out according to the remaining count, with no empty placeholders."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "interaction",
|
| 270 |
"w": 1.5,
|
| 271 |
+
"description": "Select 2 items → turn on Night mode → switch to “Literature” → back to All; the count, total, and theme state are all correct at the same time."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "interaction",
|
| 277 |
"w": 1.5,
|
| 278 |
+
"description": "After deletion, reselect item 1; the increment to the total equals its recalculated discounted price."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 10,
|
| 288 |
+
"functional": 11,
|
| 289 |
+
"interaction": 10,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c52/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.5,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.0,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.5,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.5,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"remove section",
|
| 8 |
+
"restructure layout",
|
| 9 |
+
"restyle",
|
| 10 |
+
"add section"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "e-commerce",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Pack Light: From Site Build to Discounted-Price Recalculation",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Pack Light”, with the tagline “A little less, a little better”. Put the site name, a “My Picks (0)” entry, and a “Total ¥0” in the top bar.\n\nThe filter bar categories are All / Outdoor / Commute / Home, defaulting to “All”. The gear list has 20 items in total: Outdoor 8, Commute 7, Home 5. Each item has a name, its category, a list price, and a “Select” button.\n\nList prices are calculated by position: item n = 150 + n × 60. There is also a rule: items with a list price of 500 or more get 25% off, rounded down, and the card must show both the original price and the discounted price."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Select” must actually work: after clicking, the button changes to “Selected”, the top-bar count increases by 1, and the top-bar “Total” adds this item's **discounted price**; clicking again cancels and both decrease back. The total must be calculated accurately using discounted prices."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "restyle",
|
| 37 |
+
"request": "Add a “Night mode” toggle to the top bar; turning it on switches the whole site to dark mode (darker background, lighter body text). The toggle state must persist after switching categories, and the top-bar count and total must not change because of the theme switch."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Change the gear list into a grid, with 3 items per row at desktop width. After the change, the list price, discounted price, sorting, selected state, and total must all be identical to before."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "remove section",
|
| 45 |
+
"request": "We're dropping the “Home” category; remove the category together with those 5 items. After removal, list prices are recalculated by new position (item n = 150 + n × 60), and the discount rule still applies as before."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories: All / Outdoor / Commute / Home; “All” is selected and distinguishable."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "There are 20 items in total under All."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "List prices are calculated by position: item 1 is ¥210, item 2 is ¥270, item 6 is ¥510."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "A 25% discount applies at a list price of 500 or above, rounded down: item 6's discounted price is ¥382 (if its list price has not reached the threshold, no discounted price is shown)."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.5,
|
| 82 |
+
"description": "Items with a list price below 500 do not show a discounted price; only the original price is shown."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "After switching categories, the counts per category are: Outdoor 8, Commute 7, Home 5."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Each card simultaneously shows the name, category, list price, and a “Select” button."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The top bar shows the site name “Pack Light”, the “My Picks” entry (initially 0), and “Total ¥0”."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "At any given moment, exactly one category is selected."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Click “Select” on item 1; the button changes to “Selected”, the count is 1, and the total becomes ¥210."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Then select item 6; the count is 2 and the total becomes ¥592 (accumulated using the discounted price)."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Cancel item 6; the count returns to 1 and the total returns to ¥210."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "After selecting 2 items, switch to “Outdoor” and back to All; both the count and total remain unchanged."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "The total uses discounted prices rather than original prices (for an item that has reached the discount threshold, the increment to the total equals its discounted price)."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "A “Night mode” toggle exists in the top bar; it is clickable and has two clearly distinct states."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "visual",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "After turning on Night mode, the background becomes clearly darker and the body text turns light, distinguishable from the daytime state."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After turning on Night mode, switch categories; it is still in the dark state."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Select 2 items first, then toggle Night mode twice; both the count and total remain unchanged."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "In the Night mode state, both the list price and the discounted price are clearly legible."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "At desktop width, the layout is a grid with exactly 3 items per row."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "After the restructure, list prices are unchanged: item 1 is ¥210, item 6 is ¥510."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "After the restructure, item 6's discounted price is still ¥382."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Select 2 items before the restructure; after the restructure, the count and total are unchanged and those 2 items are still in the selected state."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "After the restructure, the Night mode toggle is still usable and the dark state still takes effect."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "coverage",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "The filter bar has only 3 categories left; “Home” no longer appears."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All it becomes 15 items."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "coverage",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Browse the 15 items one by one; none of them belongs to “Home”."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "List prices are recalculated by new position: item 1 is ¥210, item 6 is ¥510, and the last item (item 15) is ¥1050."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "functional",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "The discount rule still applies to the recalculated list prices: the last item (item 15) has a discounted price of ¥787."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "Before deleting, select 2 items in the retained categories; after deletion, the count and total remain unchanged."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "visual",
|
| 263 |
"w": 1.0,
|
| 264 |
+
"description": "After deletion, the grid still has 3 items per row; the last row is laid out according to the remaining count, with no empty placeholders."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "interaction",
|
| 270 |
"w": 1.5,
|
| 271 |
+
"description": "Select 2 items → turn on Night mode → switch to “Outdoor” → back to All; the count, total, and theme state are all correct at the same time."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "interaction",
|
| 277 |
"w": 1.5,
|
| 278 |
+
"description": "After deletion, reselect item 1; the increment to the total equals its recalculated discounted price."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 10,
|
| 288 |
+
"functional": 11,
|
| 289 |
+
"interaction": 10,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c53/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.5,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.0,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.5,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.5,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make interactive",
|
| 8 |
+
"wire up data",
|
| 9 |
+
"restyle",
|
| 10 |
+
"add state"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "local services",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Seaside Eatery: From Site Build to Discounted-Price Recalculation",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Seaside Eatery”, with the tagline “The freshness only the coast can offer”. Put the site name, a “My Order List (0)” entry, and a “Total ¥0” in the top bar.\n\nThe filter bar categories are All / Seafood / Grilled / Desserts, defaulting to “All”. The dish list has 20 items in total: Seafood 9, Grilled 6, Desserts 5. Each item has a name, its category, a list price, and an “Order” button.\n\nList prices are calculated by position: item n = 40 + n × 35. There is also a rule: items with a list price of 250 or more get 12% off, rounded down, and the card must show both the original price and the discounted price."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Order” must actually work: after clicking, the button changes to “Ordered”, the top-bar count increases by 1, and the top-bar “Total” adds this item's **discounted price**; clicking again cancels and both decrease back. The total must be calculated accurately using discounted prices."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "restyle",
|
| 37 |
+
"request": "Add a “Night mode” toggle to the top bar; turning it on switches the whole site to dark mode (darker background, lighter body text). The toggle state must persist after switching categories, and the top-bar count and total must not change because of the theme switch."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Change the dish list into a grid, with 3 items per row at desktop width. After the change, the list price, discounted price, sorting, selected state, and total must all be identical to before."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "remove section",
|
| 45 |
+
"request": "We're dropping the “Desserts” category; remove the category together with those 5 items. After removal, list prices are recalculated by new position (item n = 40 + n × 35), and the discount rule still applies as before."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories: All / Seafood / Grilled / Desserts; “All” is selected and distinguishable."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "There are 20 items in total under All."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "List prices are calculated by position: item 1 is ¥75, item 2 is ¥110, item 6 is ¥250."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "A 12% discount applies at a list price of 250 or above, rounded down: item 6's discounted price is ¥220 (if its list price has not reached the threshold, no discounted price is shown)."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.5,
|
| 82 |
+
"description": "Items with a list price below 250 do not show a discounted price; only the original price is shown."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "After switching categories, the counts per category are: Seafood 9, Grilled 6, Desserts 5."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Each card simultaneously shows the name, category, list price, and an “Order” button."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The top bar shows the site name “Seaside Eatery”, the “My Order List” entry (initially 0), and “Total ¥0”."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "At any given moment, exactly one category is selected."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Click “Order” on item 1; the button changes to “Ordered”, the count is 1, and the total becomes ¥75."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Then select item 6; the count is 2 and the total becomes ¥295 (accumulated using the discounted price)."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Cancel item 6; the count returns to 1 and the total returns to ¥75."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "After selecting 2 items, switch to “Seafood” and back to All; both the count and total remain unchanged."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "The total uses discounted prices rather than original prices (for an item that has reached the discount threshold, the increment to the total equals its discounted price)."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "A “Night mode” toggle exists in the top bar; it is clickable and has two clearly distinct states."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "visual",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "After turning on Night mode, the background becomes clearly darker and the body text turns light, distinguishable from the daytime state."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After turning on Night mode, switch categories; it is still in the dark state."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Select 2 items first, then toggle Night mode twice; both the count and total remain unchanged."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "In the Night mode state, both the list price and the discounted price are clearly legible."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "At desktop width, the layout is a grid with exactly 3 items per row."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "After the restructure, list prices are unchanged: item 1 is ¥75, item 6 is ¥250."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "After the restructure, item 6's discounted price is still ¥220."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Select 2 items before the restructure; after the restructure, the count and total are unchanged and those 2 items are still in the selected state."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "After the restructure, the Night mode toggle is still usable and the dark state still takes effect."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "coverage",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "The filter bar has only 3 categories left; “Desserts” no longer appears."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All it becomes 15 items."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "coverage",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Browse the 15 items one by one; none of them belongs to “Desserts”."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "List prices are recalculated by new position: item 1 is ¥75, item 6 is ¥250, and the last item (item 15) is ¥565."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "functional",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "The discount rule still applies to the recalculated list prices: the last item (item 15) has a discounted price of ¥497."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "Before deleting, select 2 items in the retained categories; after deletion, the count and total remain unchanged."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "visual",
|
| 263 |
"w": 1.0,
|
| 264 |
+
"description": "After deletion, the grid still has 3 items per row; the last row is laid out according to the remaining count, with no empty placeholders."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "interaction",
|
| 270 |
"w": 1.5,
|
| 271 |
+
"description": "Select 2 items → turn on Night mode → switch to “Seafood” → back to All; the count, total, and theme state are all correct at the same time."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "interaction",
|
| 277 |
"w": 1.5,
|
| 278 |
+
"description": "After deletion, reselect item 1; the increment to the total equals its recalculated discounted price."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 10,
|
| 288 |
+
"functional": 11,
|
| 289 |
+
"interaction": 10,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c55/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.5,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.0,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.5,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.5,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"add state",
|
| 8 |
+
"wire up data",
|
| 9 |
+
"remove section",
|
| 10 |
+
"make interactive"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "community forms",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Trace Fitness: From Site Build to Discounted-Price Recalculation",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Trace Fitness”, with the tagline “Make progress visible”. Put the site name, a “My Class Packs (0)” entry, and a “Total ¥0” in the top bar.\n\nThe filter bar categories are All / Strength / Cardio / Rehab, defaulting to “All”. The class pack list has 20 items in total: Strength 8, Cardio 7, Rehab 5. Each item has a name, its category, a list price, and an “Enroll” button.\n\nList prices are calculated by position: item n = 90 + n × 55. There is also a rule: items with a list price of 450 or more get 20% off, rounded down, and the card must show both the original price and the discounted price."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Enroll” must actually work: after clicking, the button changes to “Enrolled”, the top-bar count increases by 1, and the top-bar “Total” adds this item's **discounted price**; clicking again cancels and both decrease back. The total must be calculated accurately using discounted prices."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "restyle",
|
| 37 |
+
"request": "Add a “Night mode” toggle to the top bar; turning it on switches the whole site to dark mode (darker background, lighter body text). The toggle state must persist after switching categories, and the top-bar count and total must not change because of the theme switch."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Change the class pack list into a grid, with 3 items per row at desktop width. After the change, the list price, discounted price, sorting, selected state, and total must all be identical to before."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "remove section",
|
| 45 |
+
"request": "We're dropping the “Rehab” category; remove the category together with those 5 items. After removal, list prices are recalculated by new position (item n = 90 + n × 55), and the discount rule still applies as before."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories: All / Strength / Cardio / Rehab; “All” is selected and distinguishable."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "There are 20 items in total under All."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "List prices are calculated by position: item 1 is ¥145, item 2 is ¥200, item 6 is ¥420."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "A 20% discount applies at a list price of 450 or above, rounded down: item 6's discounted price is ¥420 (if its list price has not reached the threshold, no discounted price is shown)."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.5,
|
| 82 |
+
"description": "Items with a list price below 450 do not show a discounted price; only the original price is shown."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "After switching categories, the counts per category are: Strength 8, Cardio 7, Rehab 5."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Each card simultaneously shows the name, category, list price, and an “Enroll” button."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The top bar shows the site name “Trace Fitness”, the “My Class Packs” entry (initially 0), and “Total ¥0”."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "At any given moment, exactly one category is selected."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Click “Enroll” on item 1; the button changes to “Enrolled”, the count is 1, and the total becomes ¥145."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Then select item 6; the count is 2 and the total becomes ¥565 (accumulated using the discounted price)."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Cancel item 6; the count returns to 1 and the total returns to ¥145."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "After selecting 2 items, switch to “Strength” and back to All; both the count and total remain unchanged."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "The total uses discounted prices rather than original prices (for an item that has reached the discount threshold, the increment to the total equals its discounted price)."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "A “Night mode” toggle exists in the top bar; it is clickable and has two clearly distinct states."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "visual",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "After turning on Night mode, the background becomes clearly darker and the body text turns light, distinguishable from the daytime state."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After turning on Night mode, switch categories; it is still in the dark state."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Select 2 items first, then toggle Night mode twice; both the count and total remain unchanged."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "In the Night mode state, both the list price and the discounted price are clearly legible."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "At desktop width, the layout is a grid with exactly 3 items per row."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "After the restructure, list prices are unchanged: item 1 is ¥145, item 6 is ¥420."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "After the restructure, item 6's discounted price is still ¥420."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Select 2 items before the restructure; after the restructure, the count and total are unchanged and those 2 items are still in the selected state."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "After the restructure, the Night mode toggle is still usable and the dark state still takes effect."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "coverage",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "The filter bar has only 3 categories left; “Rehab” no longer appears."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All it becomes 15 items."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "coverage",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Browse the 15 items one by one; none of them belongs to “Rehab”."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "List prices are recalculated by new position: item 1 is ¥145, item 6 is ¥420, and the last item (item 15) is ¥915."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "functional",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "The discount rule still applies to the recalculated list prices: the last item (item 15) has a discounted price of ¥732."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "Before deleting, select 2 items in the retained categories; after deletion, the count and total remain unchanged."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "visual",
|
| 263 |
"w": 1.0,
|
| 264 |
+
"description": "After deletion, the grid still has 3 items per row; the last row is laid out according to the remaining count, with no empty placeholders."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "interaction",
|
| 270 |
"w": 1.5,
|
| 271 |
+
"description": "Select 2 items → turn on Night mode → switch to “Strength” → back to All; the count, total, and theme state are all correct at the same time."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "interaction",
|
| 277 |
"w": 1.5,
|
| 278 |
+
"description": "After deletion, reselect item 1; the increment to the total equals its recalculated discounted price."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 10,
|
| 288 |
+
"functional": 11,
|
| 289 |
+
"interaction": 10,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|
tasks/c56/task.json
CHANGED
|
@@ -3,279 +3,279 @@
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
-
"
|
| 7 |
-
"
|
| 8 |
-
"
|
| 9 |
-
"
|
| 10 |
-
"
|
| 11 |
],
|
| 12 |
-
"difficulty": "
|
| 13 |
"levers": [
|
| 14 |
-
"
|
| 15 |
-
"
|
| 16 |
-
"
|
| 17 |
],
|
| 18 |
-
"domain": "
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
-
"title": "
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
-
"operator": "
|
| 29 |
-
"request": "
|
| 30 |
},
|
| 31 |
{
|
| 32 |
-
"operator": "
|
| 33 |
-
"request": "
|
| 34 |
},
|
| 35 |
{
|
| 36 |
-
"operator": "
|
| 37 |
-
"request": "
|
| 38 |
},
|
| 39 |
{
|
| 40 |
-
"operator": "
|
| 41 |
-
"request": "
|
| 42 |
},
|
| 43 |
{
|
| 44 |
-
"operator": "
|
| 45 |
-
"request": "
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
-
"dimension": "
|
| 53 |
"w": 1.5,
|
| 54 |
-
"description": "
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
-
"dimension": "
|
| 60 |
"w": 1.5,
|
| 61 |
-
"description": "
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
-
"dimension": "
|
| 67 |
"w": 1.5,
|
| 68 |
-
"description": "
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
-
"dimension": "
|
| 74 |
"w": 1.5,
|
| 75 |
-
"description": "
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
-
"dimension": "
|
| 81 |
"w": 1.5,
|
| 82 |
-
"description": "
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
-
"dimension": "
|
| 88 |
"w": 1.0,
|
| 89 |
-
"description": "
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
-
"dimension": "
|
| 95 |
"w": 1.0,
|
| 96 |
-
"description": "
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
-
"dimension": "
|
| 102 |
"w": 1.0,
|
| 103 |
-
"description": "
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
-
"dimension": "
|
| 109 |
"w": 1.0,
|
| 110 |
-
"description": "
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
-
"dimension": "
|
| 116 |
"w": 1.5,
|
| 117 |
-
"description": "
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
-
"dimension": "
|
| 123 |
"w": 1.5,
|
| 124 |
-
"description": "
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
-
"dimension": "
|
| 130 |
"w": 1.5,
|
| 131 |
-
"description": "
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
-
"dimension": "
|
| 137 |
"w": 1.5,
|
| 138 |
-
"description": "
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
-
"dimension": "
|
| 144 |
"w": 1.5,
|
| 145 |
-
"description": "
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
-
"dimension": "
|
| 151 |
"w": 1.5,
|
| 152 |
-
"description": "
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
-
"dimension": "
|
| 158 |
"w": 1.5,
|
| 159 |
-
"description": "
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
-
"dimension": "
|
| 165 |
"w": 1.5,
|
| 166 |
-
"description": "
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
-
"dimension": "
|
| 172 |
"w": 1.5,
|
| 173 |
-
"description": "
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
-
"dimension": "
|
| 179 |
"w": 1.0,
|
| 180 |
-
"description": "
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
-
"dimension": "
|
| 186 |
"w": 1.5,
|
| 187 |
-
"description": "
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
-
"dimension": "
|
| 193 |
"w": 1.5,
|
| 194 |
-
"description": "
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
-
"dimension": "
|
| 200 |
"w": 1.0,
|
| 201 |
-
"description": "
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
-
"dimension": "
|
| 207 |
"w": 1.5,
|
| 208 |
-
"description": "
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
-
"dimension": "
|
| 214 |
"w": 1.0,
|
| 215 |
-
"description": "
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
-
"dimension": "
|
| 221 |
"w": 1.5,
|
| 222 |
-
"description": "
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
-
"dimension": "
|
| 228 |
"w": 1.5,
|
| 229 |
-
"description": "
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
-
"dimension": "
|
| 235 |
"w": 1.0,
|
| 236 |
-
"description": "
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
-
"dimension": "
|
| 242 |
"w": 1.5,
|
| 243 |
-
"description": "
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
-
"dimension": "
|
| 249 |
"w": 1.5,
|
| 250 |
-
"description": "
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
-
"dimension": "
|
| 256 |
"w": 1.5,
|
| 257 |
-
"description": "
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
-
"dimension": "
|
| 263 |
"w": 1.0,
|
| 264 |
-
"description": "
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
-
"dimension": "
|
| 270 |
"w": 1.5,
|
| 271 |
-
"description": "
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
-
"dimension": "
|
| 277 |
"w": 1.5,
|
| 278 |
-
"description": "
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
@@ -284,10 +284,10 @@
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
-
"
|
| 288 |
-
"
|
| 289 |
-
"
|
| 290 |
-
"
|
| 291 |
}
|
| 292 |
}
|
| 293 |
-
}
|
|
|
|
| 3 |
"layer": "composite",
|
| 4 |
"seed_type": "prd",
|
| 5 |
"operators": [
|
| 6 |
+
"generate",
|
| 7 |
+
"make interactive",
|
| 8 |
+
"add state",
|
| 9 |
+
"make responsive",
|
| 10 |
+
"restyle"
|
| 11 |
],
|
| 12 |
+
"difficulty": "challenging",
|
| 13 |
"levers": [
|
| 14 |
+
"state coupling",
|
| 15 |
+
"cross-requirement combined state",
|
| 16 |
+
"exact numeric assertions"
|
| 17 |
],
|
| 18 |
+
"domain": "data display",
|
| 19 |
"repair": false,
|
| 20 |
"inject_type": null,
|
| 21 |
"seed_meta": {
|
| 22 |
"authored_by": "hand",
|
| 23 |
"materials": "none"
|
| 24 |
},
|
| 25 |
+
"title": "Inquiry Lab: From Site Build to Discounted-Price Recalculation",
|
| 26 |
"milestones": [
|
| 27 |
{
|
| 28 |
+
"operator": "generate",
|
| 29 |
+
"request": "Build a site homepage called “Inquiry Lab”, with the tagline “Measure first, then draw conclusions”. Put the site name, a “My Borrowings (0)” entry, and a “Total ¥0” in the top bar.\n\nThe filter bar categories are All / Optics / Electronics / Mechanics, defaulting to “All”. The equipment list has 20 items in total: Optics 7, Electronics 7, Mechanics 6. Each item has a name, its category, a list price, and a “Borrow” button.\n\nList prices are calculated by position: item n = 200 + n × 70. There is also a rule: items with a list price of 600 or more get 22% off, rounded down, and the card must show both the original price and the discounted price."
|
| 30 |
},
|
| 31 |
{
|
| 32 |
+
"operator": "add state",
|
| 33 |
+
"request": "“Borrow” must actually work: after clicking, the button changes to “Borrowed”, the top-bar count increases by 1, and the top-bar “Total” adds this item's **discounted price**; clicking again cancels and both decrease back. The total must be calculated accurately using discounted prices."
|
| 34 |
},
|
| 35 |
{
|
| 36 |
+
"operator": "restyle",
|
| 37 |
+
"request": "Add a “Night mode” toggle to the top bar; turning it on switches the whole site to dark mode (darker background, lighter body text). The toggle state must persist after switching categories, and the top-bar count and total must not change because of the theme switch."
|
| 38 |
},
|
| 39 |
{
|
| 40 |
+
"operator": "restructure layout",
|
| 41 |
+
"request": "Change the equipment list into a grid, with 3 items per row at desktop width. After the change, the list price, discounted price, sorting, selected state, and total must all be identical to before."
|
| 42 |
},
|
| 43 |
{
|
| 44 |
+
"operator": "remove section",
|
| 45 |
+
"request": "We're dropping the “Mechanics” category; remove the category together with those 6 items. After removal, list prices are recalculated by new position (item n = 200 + n × 70), and the discount rule still applies as before."
|
| 46 |
}
|
| 47 |
],
|
| 48 |
"checklist": [
|
| 49 |
{
|
| 50 |
"id": "gen.tabs",
|
| 51 |
"m": 1,
|
| 52 |
+
"dimension": "visual",
|
| 53 |
"w": 1.5,
|
| 54 |
+
"description": "The filter bar has exactly 4 categories: All / Optics / Electronics / Mechanics; “All” is selected and distinguishable."
|
| 55 |
},
|
| 56 |
{
|
| 57 |
"id": "gen.total",
|
| 58 |
"m": 1,
|
| 59 |
+
"dimension": "functional",
|
| 60 |
"w": 1.5,
|
| 61 |
+
"description": "There are 20 items in total under All."
|
| 62 |
},
|
| 63 |
{
|
| 64 |
"id": "gen.price",
|
| 65 |
"m": 1,
|
| 66 |
+
"dimension": "functional",
|
| 67 |
"w": 1.5,
|
| 68 |
+
"description": "List prices are calculated by position: item 1 is ¥270, item 2 is ¥340, item 6 is ¥620."
|
| 69 |
},
|
| 70 |
{
|
| 71 |
"id": "gen.disc.exact",
|
| 72 |
"m": 1,
|
| 73 |
+
"dimension": "functional",
|
| 74 |
"w": 1.5,
|
| 75 |
+
"description": "A 22% discount applies at a list price of 600 or above, rounded down: item 6's discounted price is ¥483 (if its list price has not reached the threshold, no discounted price is shown)."
|
| 76 |
},
|
| 77 |
{
|
| 78 |
"id": "gen.disc.boundary",
|
| 79 |
"m": 1,
|
| 80 |
+
"dimension": "functional",
|
| 81 |
"w": 1.5,
|
| 82 |
+
"description": "Items with a list price below 600 do not show a discounted price; only the original price is shown."
|
| 83 |
},
|
| 84 |
{
|
| 85 |
"id": "gen.split",
|
| 86 |
"m": 1,
|
| 87 |
+
"dimension": "functional",
|
| 88 |
"w": 1.0,
|
| 89 |
+
"description": "After switching categories, the counts per category are: Optics 7, Electronics 7, Mechanics 6."
|
| 90 |
},
|
| 91 |
{
|
| 92 |
"id": "gen.card",
|
| 93 |
"m": 1,
|
| 94 |
+
"dimension": "visual",
|
| 95 |
"w": 1.0,
|
| 96 |
+
"description": "Each card simultaneously shows the name, category, list price, and a “Borrow” button."
|
| 97 |
},
|
| 98 |
{
|
| 99 |
"id": "gen.header",
|
| 100 |
"m": 1,
|
| 101 |
+
"dimension": "visual",
|
| 102 |
"w": 1.0,
|
| 103 |
+
"description": "The top bar shows the site name “Inquiry Lab”, the “My Borrowings” entry (initially 0), and “Total ¥0”."
|
| 104 |
},
|
| 105 |
{
|
| 106 |
"id": "gen.sel.one",
|
| 107 |
"m": 1,
|
| 108 |
+
"dimension": "visual",
|
| 109 |
"w": 1.0,
|
| 110 |
+
"description": "At any given moment, exactly one category is selected."
|
| 111 |
},
|
| 112 |
{
|
| 113 |
"id": "st.add1",
|
| 114 |
"m": 2,
|
| 115 |
+
"dimension": "interaction",
|
| 116 |
"w": 1.5,
|
| 117 |
+
"description": "Click “Borrow” on item 1; the button changes to “Borrowed”, the count is 1, and the total becomes ¥270."
|
| 118 |
},
|
| 119 |
{
|
| 120 |
"id": "st.add2",
|
| 121 |
"m": 2,
|
| 122 |
+
"dimension": "interaction",
|
| 123 |
"w": 1.5,
|
| 124 |
+
"description": "Then select item 6; the count is 2 and the total becomes ¥753 (accumulated using the discounted price)."
|
| 125 |
},
|
| 126 |
{
|
| 127 |
"id": "st.cancel",
|
| 128 |
"m": 2,
|
| 129 |
+
"dimension": "interaction",
|
| 130 |
"w": 1.5,
|
| 131 |
+
"description": "Cancel item 6; the count returns to 1 and the total returns to ¥270."
|
| 132 |
},
|
| 133 |
{
|
| 134 |
"id": "st.keep.tab",
|
| 135 |
"m": 2,
|
| 136 |
+
"dimension": "interaction",
|
| 137 |
"w": 1.5,
|
| 138 |
+
"description": "After selecting 2 items, switch to “Optics” and back to All; both the count and total remain unchanged."
|
| 139 |
},
|
| 140 |
{
|
| 141 |
"id": "st.sum.uses.disc",
|
| 142 |
"m": 2,
|
| 143 |
+
"dimension": "functional",
|
| 144 |
"w": 1.5,
|
| 145 |
+
"description": "The total uses discounted prices rather than original prices (for an item that has reached the discount threshold, the increment to the total equals its discounted price)."
|
| 146 |
},
|
| 147 |
{
|
| 148 |
"id": "skin.toggle",
|
| 149 |
"m": 3,
|
| 150 |
+
"dimension": "visual",
|
| 151 |
"w": 1.5,
|
| 152 |
+
"description": "A “Night mode” toggle exists in the top bar; it is clickable and has two clearly distinct states."
|
| 153 |
},
|
| 154 |
{
|
| 155 |
"id": "skin.dark",
|
| 156 |
"m": 3,
|
| 157 |
+
"dimension": "visual",
|
| 158 |
"w": 1.5,
|
| 159 |
+
"description": "After turning on Night mode, the background becomes clearly darker and the body text turns light, distinguishable from the daytime state."
|
| 160 |
},
|
| 161 |
{
|
| 162 |
"id": "skin.keep.tab",
|
| 163 |
"m": 3,
|
| 164 |
+
"dimension": "interaction",
|
| 165 |
"w": 1.5,
|
| 166 |
+
"description": "After turning on Night mode, switch categories; it is still in the dark state."
|
| 167 |
},
|
| 168 |
{
|
| 169 |
"id": "skin.keep.sum",
|
| 170 |
"m": 3,
|
| 171 |
+
"dimension": "interaction",
|
| 172 |
"w": 1.5,
|
| 173 |
+
"description": "Select 2 items first, then toggle Night mode twice; both the count and total remain unchanged."
|
| 174 |
},
|
| 175 |
{
|
| 176 |
"id": "skin.readable",
|
| 177 |
"m": 3,
|
| 178 |
+
"dimension": "visual",
|
| 179 |
"w": 1.0,
|
| 180 |
+
"description": "In the Night mode state, both the list price and the discounted price are clearly legible."
|
| 181 |
},
|
| 182 |
{
|
| 183 |
"id": "ref.grid3",
|
| 184 |
"m": 4,
|
| 185 |
+
"dimension": "visual",
|
| 186 |
"w": 1.5,
|
| 187 |
+
"description": "At desktop width, the layout is a grid with exactly 3 items per row."
|
| 188 |
},
|
| 189 |
{
|
| 190 |
"id": "ref.price.same",
|
| 191 |
"m": 4,
|
| 192 |
+
"dimension": "functional",
|
| 193 |
"w": 1.5,
|
| 194 |
+
"description": "After the restructure, list prices are unchanged: item 1 is ¥270, item 6 is ¥620."
|
| 195 |
},
|
| 196 |
{
|
| 197 |
"id": "ref.disc.same",
|
| 198 |
"m": 4,
|
| 199 |
+
"dimension": "functional",
|
| 200 |
"w": 1.0,
|
| 201 |
+
"description": "After the restructure, item 6's discounted price is still ¥483."
|
| 202 |
},
|
| 203 |
{
|
| 204 |
"id": "ref.state.same",
|
| 205 |
"m": 4,
|
| 206 |
+
"dimension": "interaction",
|
| 207 |
"w": 1.5,
|
| 208 |
+
"description": "Select 2 items before the restructure; after the restructure, the count and total are unchanged and those 2 items are still in the selected state."
|
| 209 |
},
|
| 210 |
{
|
| 211 |
"id": "ref.skin.same",
|
| 212 |
"m": 4,
|
| 213 |
+
"dimension": "visual",
|
| 214 |
"w": 1.0,
|
| 215 |
+
"description": "After the restructure, the Night mode toggle is still usable and the dark state still takes effect."
|
| 216 |
},
|
| 217 |
{
|
| 218 |
"id": "del.gone",
|
| 219 |
"m": 5,
|
| 220 |
+
"dimension": "coverage",
|
| 221 |
"w": 1.5,
|
| 222 |
+
"description": "The filter bar has only 3 categories left; “Mechanics” no longer appears."
|
| 223 |
},
|
| 224 |
{
|
| 225 |
"id": "del.total",
|
| 226 |
"m": 5,
|
| 227 |
+
"dimension": "functional",
|
| 228 |
"w": 1.5,
|
| 229 |
+
"description": "Under All it becomes 14 items."
|
| 230 |
},
|
| 231 |
{
|
| 232 |
"id": "del.none",
|
| 233 |
"m": 5,
|
| 234 |
+
"dimension": "coverage",
|
| 235 |
"w": 1.0,
|
| 236 |
+
"description": "Browse the 14 items one by one; none of them belongs to “Mechanics”."
|
| 237 |
},
|
| 238 |
{
|
| 239 |
"id": "del.price.recalc",
|
| 240 |
"m": 5,
|
| 241 |
+
"dimension": "functional",
|
| 242 |
"w": 1.5,
|
| 243 |
+
"description": "List prices are recalculated by new position: item 1 is ¥270, item 6 is ¥620, and the last item (item 14) is ¥1180."
|
| 244 |
},
|
| 245 |
{
|
| 246 |
"id": "del.disc.recalc",
|
| 247 |
"m": 5,
|
| 248 |
+
"dimension": "functional",
|
| 249 |
"w": 1.5,
|
| 250 |
+
"description": "The discount rule still applies to the recalculated list prices: the last item (item 14) has a discounted price of ¥920."
|
| 251 |
},
|
| 252 |
{
|
| 253 |
"id": "del.keep.state",
|
| 254 |
"m": 5,
|
| 255 |
+
"dimension": "interaction",
|
| 256 |
"w": 1.5,
|
| 257 |
+
"description": "Before deleting, select 2 items in the retained categories; after deletion, the count and total remain unchanged."
|
| 258 |
},
|
| 259 |
{
|
| 260 |
"id": "del.grid.reflow",
|
| 261 |
"m": 5,
|
| 262 |
+
"dimension": "visual",
|
| 263 |
"w": 1.0,
|
| 264 |
+
"description": "After deletion, the grid still has 3 items per row; the last row is laid out according to the remaining count, with no empty placeholders."
|
| 265 |
},
|
| 266 |
{
|
| 267 |
"id": "del.combo",
|
| 268 |
"m": 5,
|
| 269 |
+
"dimension": "interaction",
|
| 270 |
"w": 1.5,
|
| 271 |
+
"description": "Select 2 items → turn on Night mode → switch to “Optics” → back to All; the count, total, and theme state are all correct at the same time."
|
| 272 |
},
|
| 273 |
{
|
| 274 |
"id": "del.sum.recalc",
|
| 275 |
"m": 5,
|
| 276 |
+
"dimension": "interaction",
|
| 277 |
"w": 1.5,
|
| 278 |
+
"description": "After deletion, reselect item 1; the increment to the total equals its recalculated discounted price."
|
| 279 |
}
|
| 280 |
],
|
| 281 |
"inject": null,
|
|
|
|
| 284 |
"hand_notes": {
|
| 285 |
"cross_requirement_items": 7,
|
| 286 |
"dim_counts": {
|
| 287 |
+
"visual": 10,
|
| 288 |
+
"functional": 11,
|
| 289 |
+
"interaction": 10,
|
| 290 |
+
"coverage": 2
|
| 291 |
}
|
| 292 |
}
|
| 293 |
+
}
|