Roy-DOU commited on
Commit
c14c78f
·
verified ·
1 Parent(s): 29e0386

Translate all 40 tasks to English

Browse files

Requirements, checklist items, dimensions, operators, difficulty, domains and levers are now English. Structural ids, item indices, weights and reference-image paths are unchanged.

README.md CHANGED
@@ -1,7 +1,7 @@
1
  ---
2
  license: mit
3
  language:
4
- - zh
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": "挑战", // 挑战 (challenging) | 常规 (regular)
38
- "domain": "内容资讯",
39
  "milestones": [ // requirements injected in order, one per round
40
- {"operator": "生成", "request": "...natural-language request, in Chinese..."}
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
- `milestones[].request` and `checklist[].description` are written in Chinese, which is the
55
- language the benchmark was authored and run in.
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": "首页中间那块浅蓝底的大卡片(白卡片里左边照片、右边一段带蓝色链接的文字,右下角还有三个小圆点、左右各挂一个大箭头的那个「翻书」块)我们已经下架了,整块拿掉,别留半截。注意两点:一是那条通栏的浅蓝色背景也一起消失,页面上不要再看见那条蓝带;二是上面那段介绍文字和那本小书插画要原样留着,删完之后招生截止日期/Quick Facts 那块得自然往上接住,中间别空出一大片没东西的白。顺手说一句,别把别的地方的风格和功能改乱了,顶部大图和底部那条三张照片的横幅该怎么用还怎么用。"
30
  },
31
  {
32
- "operator": "数据化",
33
- "request": "School News 现在一次只给人看一条,太憋屈,我们要把它换成一整页能一眼扫过去的稿件清单。后台稿子整理好了,一共 42 篇:编号 1 到 42 就是我们的发布顺序,1 号最新,日期落在 2025 年 4 月 30 日,往后每一篇比前一篇早一天,一路排到 42 号。栏目按「校园动态、学术、体育、艺术」这个次序轮着来——1 号校园动态、2 号学术、3 号体育、4 号艺术,5 号又轮回校园动态,依此类推,四个栏目一个都不能少。标题你按栏目拟得像那么回事就行,但每条标题里必须能看见它的编号(比如末尾挂个 #7),我们对稿方便。另外每条要标一个预计阅读时长,算法简单粗暴:拿编号除以 5 取余,再加 3,单位分钟。卡片上栏目、日期、标题、阅读时长都得露出来,日期别再写 Apr 30 那种洋写法了,统一写成 2025-04-30 这种。区块顶上要有一行统计,告诉我现在列表里有多少篇。配图就从现有那几张照片里轮着用,不用新素材。"
34
  },
35
  {
36
- "operator": "交互化",
37
- "request": "清单太长了,得让它能挑着看。顶上��一排栏目开关:全部、校园动态、学术、体育、艺术,点哪个就只留哪个栏目的稿子,一个都不许串台,顶上那行统计也要跟着变,告诉我当前筛出来几篇。再给个新旧顺序的切换,默认新的在前,切一下变成老的在前。列表分页,一页就摆 9 篇,页脚要有能用的「上一页」「下一页」,外加一排页码按钮,点哪个页码就直接去哪页、并且那个页码得看得出来是当前页;换栏目或者换顺序之后请老老实实回到第 1 页,别停在一个根本不存在的页码上。另外每张卡片右上角放一个「稍后读」的开关,点亮就是收进去了,再点一下取消;区块标题旁边挂一个小计数,告诉我一共收了几篇。计数只管收了多少,别被筛选或翻页影响——我筛到体育栏目的时候,之前在学术栏目收的那几篇照样算数,只是列表里看不见而已;当然看不见的稿子也不该被点到。"
38
  },
39
  {
40
- "operator": "新增区块",
41
- "request": "在页脚上方加一块「我的稍后读」。把收进去的稿子严格按我点收藏的先后顺序列出来(先收的排在上面,跟编号大小没关系),每条看得见栏目、标题(带编号)、日期和预计阅读时长,每条后面给个移除按钮。面板抬头要有一行汇总:收了几篇,以及这些篇加起来大概要看多久(把各篇的预计时长加一块儿就行)。一篇都没收的时候别留个空框框在那儿,就显示这句提示,一字不差:还没有收藏的稿子,先去上面挑几篇吧。面板里移除了一条,上面列表里那条的「稍后读」开关要跟着灭掉,标题旁的计数也要跟着减,两边永远对得上;全部移完就回到那句空态提示。"
42
  },
43
  {
44
- "operator": "修复",
45
- "request": "还有个老毛病顺手治一下:最上面那张大图下面深蓝条里的左右箭头,慢慢点没毛病,可一旦手快连点两三下,大标题和条里那句手写体标语最后停的那一屏总跟我点的次数对不上,有时候看着还像倒退了一屏,再点一下才勉强追回来。我们一共就 3 屏,连点 3 次理应正好绕回出发那屏,连点 2 次就该到第 3 屏,而且标题和下面那句标语、那行小字必须是同一屏的内容,不能各说各的。修的时候别碰新闻清单那边的筛选、排序和收藏,那块刚调好。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "del.block.gone",
51
  "m": 1,
52
- "dimension": "覆盖",
53
  "w": 1.5,
54
- "description": "页面上不再存在「左照片右文字 + 右下三个小圆点 + 两侧大箭头」的白色卡片区块,滚动全页也找不到该卡片的任何残留内容(如标题“Honoring the story of childhood”)。"
55
  },
56
  {
57
  "id": "del.skyband.gone",
58
  "m": 1,
59
- "dimension": "视觉",
60
  "w": 1.0,
61
- "description": "页面上不再出现该区块原有的整幅浅蓝色(#b0dae8 一类)通栏背景带;介绍段落之后直到招生区之间的背景保持为白色。"
62
  },
63
  {
64
  "id": "del.neighbors.kept",
65
  "m": 1,
66
- "dimension": "覆盖",
67
  "w": 1.0,
68
- "description": "介绍段落(At Charlotte Prep… 那段带蓝色链接的文字)与其下方的打开书本插画仍然完整存在,且其后紧接的就是 Admissions Deadlines / Quick Facts 区。"
69
  },
70
  {
71
  "id": "del.nogap",
72
  "m": 1,
73
- "dimension": "视觉",
74
  "w": 1.0,
75
- "description": "介绍段落区与 Admissions Deadlines 区之间不存在残留的空容器或空白色块:两区之间的纯空白垂直间距不超过 300px。"
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": "默认(未筛选)状态下,区块顶部统计行显示的稿件总数为 42。"
97
  },
98
  {
99
  "id": "data.first.item",
100
  "m": 2,
101
- "dimension": "功能",
102
  "w": 1.5,
103
- "description": "默认新在前时,第一条稿件显示:栏目「校园动态」、日期「2025-04-30」、标题中可见编号 1(如 #1)、预计阅读时长 4 分钟。"
104
  },
105
  {
106
  "id": "data.art.item",
107
  "m": 2,
108
- "dimension": "功能",
109
  "w": 1.5,
110
- "description": "编号 4 的稿件显示:栏目「艺术」、日期「2025-04-27」、预计阅读时长 7 分钟;四个栏目名(校园动态、学术、体育、艺术)在默认第 1 页的 9 条卡片中均至少出现一次。"
111
  },
112
  {
113
  "id": "data.last.item",
114
  "m": 2,
115
- "dimension": "功能",
116
  "w": 1.5,
117
- "description": "编号 42 的稿件显示:栏目「学术」、日期「2025-03-20」、预计阅读时长 5 分钟。"
118
  },
119
  {
120
  "id": "data.date.format",
121
  "m": 2,
122
- "dimension": "视觉",
123
  "w": 1.0,
124
- "description": "所有稿件日期均为 2025-04-21 这类 YYYY-MM-DD 形式,页面上不再出现 “Apr 30”“Apr 22” 这类旧写法。"
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": "默认「全部 + 新在前」时列表每页恰好 9 条、共 5 页,且第 5 页只有 6 条。"
139
  },
140
  {
141
  "id": "inter.page2.first",
142
  "m": 3,
143
- "dimension": "功能",
144
  "w": 1.5,
145
- "description": "默认「全部 + 新在前」翻到第 2 页时,该页第一条为编号 10 的稿件:栏目「学术」、日期「2025-04-21」、预计阅读时长 3 分钟。"
146
  },
147
  {
148
  "id": "inter.pager.controls",
149
  "m": 3,
150
- "dimension": "交互",
151
  "w": 1.5,
152
- "description": "默认状态下点击页脚「下一页」进入第 2 页且首条为编号 10;再点「上一页」回到第 1 页且首条为编号 1;随后直接点击页码按钮「4」跳到第 4 页,该页首条为编号 28(栏目「艺术」、日期「2025-04-03」、阅读时长 6 分钟)且页码 4 呈当前页高亮态。"
153
  },
154
  {
155
  "id": "inter.filter.each",
156
  "m": 3,
157
- "dimension": "功能",
158
  "w": 1.5,
159
- "description": "点「校园动态」统计行显示 11 篇且默认排序下首条为编号 1;点「学术」显示 11 篇且首条为编号 2;点「艺术」显示 10 篇且列表中不出现任何「体育」栏目的卡片。"
160
  },
161
  {
162
  "id": "inter.filter.sports",
163
  "m": 3,
164
- "dimension": "功能",
165
  "w": 1.5,
166
- "description": "点选「体育」后统计行显示 10 篇,共分 2 页且第 2 页只有 1 条;列表中不出现任何非体育栏目的卡片。"
167
  },
168
  {
169
  "id": "inter.sort.oldest",
170
  "m": 3,
171
- "dimension": "交互",
172
  "w": 1.0,
173
- "description": "在「体育」筛选下把顺序切成老的在前,第 1 页第一条为编号 39 的稿件,日期显示「2025-03-23」。"
174
  },
175
  {
176
  "id": "inter.reset.page",
177
  "m": 3,
178
- "dimension": "交互",
179
  "w": 1.0,
180
- "description": "先翻到第 3 页,再切换栏目或切换新旧顺序,列表立即回到第 1 页(页码高亮为 1,且展示的是该组合下的最前 9 条或全部)。"
181
  },
182
  {
183
  "id": "inter.badge.decoupled",
184
  "m": 3,
185
- "dimension": "交互",
186
  "w": 1.5,
187
- "description": "在「全部」下收藏编号 1 与编号 5 两篇后计数显示 2;切到「体育」栏目(两篇均被隐藏)时计数仍为 2,列表中不存在这两篇的任何可点元素;切回「全部」后这两篇仍处于已收藏点亮态。"
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": "不做筛选,先收藏编号 5、再收藏编号 1 时,面板汇总行显示 2 篇、合计 7 分钟;接着再收藏编号 3 后变为 3 篇、合计 13 分钟。"
209
  },
210
  {
211
  "id": "panel.order.fields",
212
  "m": 4,
213
- "dimension": "功能",
214
  "w": 1.5,
215
- "description": "承接上一步的收藏顺序(依次收藏 #5、#1、#3),面板内条目自上而下依次为编号 5、编号 1、编号 3(不是按编号升序),且每条可见栏目、含编号的标题、日期与该篇预计阅读时长。"
216
  },
217
  {
218
  "id": "panel.remove.sync",
219
  "m": 4,
220
- "dimension": "交互",
221
  "w": 1.5,
222
- "description": "在面板中移除某条后:该条从面板消失、汇总篇数与合计分钟数按其时长同步减少,且上方清单中对应卡片的稍后读开关变回未点亮态、标题旁计数同步减 1。"
223
  },
224
  {
225
  "id": "panel.empty.state",
226
  "m": 4,
227
- "dimension": "交互",
228
  "w": 1.0,
229
- "description": "把收藏全部移除后,面板显示文案「还没有收藏的稿子,先去上面挑几篇吧」,不残留空的条目框;此时标题旁计数为 0。"
230
  },
231
  {
232
  "id": "fix.triple.click",
233
  "m": 5,
234
- "dimension": "功能",
235
  "w": 1.5,
236
- "description": "在顶部深蓝条上以约每次 80ms 的速度连点「下一张」3 次,最终大标题回到「Early chapters that shape a child’s whole life」,手写体标语为「writing our own story」。"
237
  },
238
  {
239
  "id": "fix.double.click",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "从初始屏快速连点「下一张」2 次,最终显示第 3 屏:标题「Leaders a little sooner, children a little longer」,手写体「go anywhere from here」。"
244
  },
245
  {
246
  "id": "fix.prev.direction",
247
  "m": 5,
248
- "dimension": "交互",
249
  "w": 1.0,
250
- "description": "从初始屏快速连点「上一张」1 次显示第 3 屏、连点 2 次显示第 2 屏(标题「Curious minds and open hearts, truly known」),方向不发生错乱或回跳。"
251
  },
252
  {
253
  "id": "fix.same.slide",
254
  "m": 5,
255
- "dimension": "功能",
256
  "w": 1.0,
257
- "description": "任何连点结束后,大标题、手写体标语、右侧那行小字三者始终同属同一屏(例如标语为「adventures every day」时小字必为「Montessori Beginnings Through Confident Graduates」)。"
258
  },
259
  {
260
  "id": "fix.no.regression",
261
  "m": 5,
262
- "dimension": "交互",
263
  "w": 1.5,
264
- "description": "在新闻清单上先选中某栏目、切到第 2 页并收藏 2 篇,然后快速连点顶部箭头若干次:清单的栏目选中态、页码与稍后读计数(仍为 2)以及「我的稍后读」面板内容均保持不变。"
265
  }
266
  ],
267
  "inject": {
268
- "type": "异步竞态",
269
- "saboteur_prompt": "在 src/components/Hero.jsx 的轮播切换逻辑里植入一个陈旧闭包式的异步竞态,使其看起来像是为了做切换过渡而加的延迟:把点击箭头后的状态提交推迟到一个 setTimeout(约 180ms)里执行,并在点击时就用当前渲染闭包里的 index 变量算出目标屏(形如 const next = (index + dir + SLIDES.length) % SLIDES.length; setTimeout(() => setIndex(next), 180)),不要使用函数式更新,也不要清理或取消上一次的定时器。效果必须是:单次点击行为完全正常(仅有轻微延迟感),而在 180ms 内连点 2~3 次时,多次点击基于同一个旧的 index 计算,最终只前进/后退一屏或方向看起来错乱。硬性要求:不得产生任何控制台报错或 React 警告;不要修改任何 CSS、类名、DOM 结构、文案或 SLIDES 数据;不要触碰 GalleryStrip、NewsCarousel、Header、Footer 等其它组件;不留注释、TODO 或 console 输出;命名与缩进风格与现有代码保持一致。"
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 案例站:案例墙重构、导航高亮修复、40 条项目数据化与日/夜双色皮肤",
25
  "milestones": [
26
  {
27
- "operator": "重构布局",
28
- "request": "在现有的 kolossal 官网仓库上改。先动 Referenzen(案例)这一块。现在它是左右两栏错开的摆法,左栏还整体往下沉了一截,滚到一半右边先见底,看着像没排完的样子,客户也抱怨过。请把它改成规规矩矩的三列网格:所有卡片顶边对齐、一样高(按 480px 来),列与列、行与行的空隙还是保持现在的 30px,卡片圆角别动,还是 40 的大圆角。六个案例原有的标题、那句德语描述和 “Case ansehen / Website ansehen” 的链接文案一个都不能丢。另外案例以后会越来越多,请在这一块的最上面加一条工具条,滚动经过案例区时它要贴在视口顶上不跟着跑掉,条子高度给 64px,左边先写清楚现在一共几个案例(现在是 6 个,德语写法 “6 Projekte” 就行),右边先空着,下一步要往里塞筛选器。窗口窄下来的时候别让卡片挤扁:大概一千像素左右自动变成两列,手机宽度就一列,横着不许出滚动条。"
29
  },
30
  {
31
- "operator": "修复",
32
- "request": "还有个毛病现在必须一起收拾:页面底部那个悬浮的胶囊导航,以前我点谁谁就是亮黄色的药丸底配深色字,现在三个词长得一模一样,完全看不出自己在哪一段,同事以为导航坏了。麻烦恢复成原来的样子——当前所在那一项是黄底深字的胶囊,其它项还是浅色文字,鼠标移上去会变黄。别顺手把刚做好的案例网格和吸顶工具条弄乱。"
33
  },
34
  {
35
- "operator": "数据化",
36
- "request": "案例现在要全量上线,运营把清单甩过来了,一共四十个项目,按行业分堆,每个项目后面三个数依次是上线年份、工期(周)、预算(单位 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。配图就先不要了,四十张统一做成信息卡:项目名、带颜色的行业标签、年份、工期、预算都要在卡面上看得见;没图之后卡片矮一点,统一 260 高,列数和 30 的间距照旧。特别说一句:原来那六个老案例(Bautz Festival、ehex、curenect、David&Goliath、Mark-E Direkt、Zentrum für Klimaforschung Niedersachsen Wissensportal)的德语副标题和 “Case ansehen / Website ansehen” 链接文案是签过字的对外文案,改版后要继续留在它们各自的卡上,新来的三十四个项目没有这两样没关系。行业颜色照设计给的走:Kultur #EE8442,Gesundheit #2BBE7A,Energie #EE7A3B,Handel #54809B,Bildung #A9D2D4,Industrie #979797。上一步空着的工具条右半边现在填上:一个行业筛选(含“全部”)、一个年份筛选(含“全部”,年份是 2018 到 2025)、一个排序(默认就按上面清单给的顺序,另外可选预算从高到低、预算从低到高、工期从短到长),左半边那行统计要跟着筛选实时变:筛出来多少个项目、这些项目预算加起来多少 k€、平均工期多少周(除不尽的零头直接抹掉)。卡片一页放 9 个,下面给上一页/下一页和当前页码,换了筛选条件就回到第一页。要是某个组合一个项目都筛不出来,别给我一片空白,写句德语提示告诉用户没有结果,统计那行也要如实显示 0,翻页按钮这时候也别让人点。清单里有个项目名特别长,注意别让它把卡片撑破。"
37
  },
38
  {
39
- "operator": "换肤",
40
- "request": "最后是品牌那边新出的“日间版”色卡,要求站点能在夜间版和日间版之间切换,开关就放在底部那个胶囊导航里(跟三个导航词并排),默认还是现在的夜间版。日间版:整页底色换成纸白 #FDFBF4,标题和正文一律墨蓝 #14212C,黄色 #FFD401 只保留给按钮和“当前选中”这类高亮态。夜间版必须原封不动,还是深蓝底 #192C3A 配黄字。切换要整站生效,包括案例卡、工具条和统计那一行。两点强调一下:行业的那六个颜色是行业识别色,跟皮肤没关系,两种模式下都得是一个样;另外别把前面做好的东西改乱了——换个皮肤而已,正在看的筛选条件、排序、第几页和那几个统计数字都不该变,导航上“我在哪”也得照样一眼看得出来。用户刷新页面后应该还停在他刚选的那套皮肤上。"
41
  }
42
  ],
43
  "checklist": [
44
  {
45
  "id": "layout.grid.three",
46
  "m": 1,
47
- "dimension": "视觉",
48
  "w": 1.5,
49
- "description": "在 1440px 宽视口下,案例区所有卡片排成每行 3 张的等宽网格,六张卡片顶边在同一水平线上(不再有左栏整体下沉的错落效果)。"
50
  },
51
  {
52
  "id": "layout.gap.card",
53
  "m": 1,
54
- "dimension": "视觉",
55
  "w": 1.0,
56
- "description": "相邻两张卡片之间的水平间距与垂直间距均为 30px(±2px),卡片高度统一为 480px(±4px),圆角保持 40px。"
57
  },
58
  {
59
  "id": "layout.toolbar.sticky",
60
  "m": 1,
61
- "dimension": "功能",
62
  "w": 1.5,
63
- "description": "案例区顶部存在一条高度 64px(±4px)的工具条;页面向下滚动经过案例区时该工具条固定吸附在视口顶部不随内容滚走,其左侧可见文案含“6 Projekte”。"
64
  },
65
  {
66
  "id": "layout.content.kept",
67
  "m": 1,
68
- "dimension": "覆盖",
69
  "w": 1.0,
70
- "description": "最终交付的页面上,六个老案例的标题(Bautz Festival、ehex、curenect、David&Goliath、Mark-E Direkt、Zentrum für Klimaforschung Niedersachsen Wissensportal)、它们各自的德语副标题与 “Case ansehen”/“Website ansehen” 链接文案仍在其对应卡片上可见(必要时通过筛选定位到该卡片查看)。"
71
  },
72
  {
73
  "id": "layout.responsive",
74
  "m": 1,
75
- "dimension": "交互",
76
  "w": 1.0,
77
- "description": "视口宽 900px 时案例卡片每行 2 张;视口宽 375px 时每行 1 张;两种宽度下页面均无横向滚动条。"
78
  },
79
  {
80
  "id": "fix.nav.active",
81
  "m": 2,
82
- "dimension": "视觉",
83
  "w": 1.5,
84
- "description": "底部悬浮导航中“当前项”呈黄色胶囊底(背景计算值 rgb(255, 212, 1))配深色文字,与另外两项(透明底、浅色文字)明显不同。"
85
  },
86
  {
87
  "id": "fix.nav.exclusive",
88
  "m": 2,
89
- "dimension": "交互",
90
  "w": 1.0,
91
- "description": "依次点击 Home / Referenzen / Manifest,任一时刻有且仅有被点击的那一项是黄底深字,其余两项恢复为无底色状态。"
92
  },
93
  {
94
  "id": "fix.nav.hover",
95
  "m": 2,
96
- "dimension": "交互",
97
  "w": 1.0,
98
- "description": "鼠标悬停在非当前项上时其文字变为黄色(rgb(255,212,1))且仍无实心胶囊底;悬停在当前项上时仍保持黄底深字,不出现文字与底色同色而看不见的情况。"
99
  },
100
  {
101
  "id": "fix.noregression",
102
  "m": 2,
103
- "dimension": "功能",
104
  "w": 1.0,
105
- "description": "修复后案例区仍为每行 3 张的等高网格且工具条仍能吸顶,浏览器控制台无报错。"
106
  },
107
  {
108
  "id": "data.pagination",
109
  "m": 3,
110
- "dimension": "功能",
111
  "w": 1.5,
112
- "description": "默认状态(行业=全部、年份=全部、默认排序)下案例共 40 条,每页显示 9 张卡片,共 5 页;翻到第 5 页时只显示 4 张卡片,且“下一页”不可再前进。"
113
  },
114
  {
115
  "id": "data.stats.default",
116
  "m": 3,
117
- "dimension": "功能",
118
  "w": 1.5,
119
- "description": "默认状态下统计行同时显示 40(项目数)、1805(预算合计 k€)与 14(平均工期周数,575÷40 抹零头)这三个数字。"
120
  },
121
  {
122
  "id": "data.card.fields",
123
  "m": 3,
124
- "dimension": "覆盖",
125
  "w": 1.5,
126
- "description": "抽验 Netzampel 卡片:同一张卡上同时可见项目名 Netzampel、Energie 行业标签(标签色 rgb(238, 122, 59))、年份 2025、工期 30(周)、预算 120(k€),四个数值与清单一致;同页其它卡片也各自显示自己的行业标签、年份、工期、预算四项。"
127
  },
128
  {
129
  "id": "data.sort.desc",
130
  "m": 3,
131
- "dimension": "功能",
132
  "w": 1.5,
133
- "description": "行业=全部、年份=全部、排序=预算从高到低时,预算降序的前十名依次是 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;据此第 1 页 9 张卡按此顺序为前九名(首张 Netzampel 120、第 9 张 Instandhaltung Mobil 62),翻到第 2 页第 1 张为 Mark-E Direkt(60);随后把行业切换到 Handel,列表自动回到第 1 页且共 8 条。"
134
  },
135
  {
136
  "id": "data.sort.asc.weeks",
137
  "m": 3,
138
- "dimension": "功能",
139
  "w": 1.0,
140
- "description": "排序下拉中“预算从低到高”与“工期从短到长”两项均可选:行业=Bildung、排序=预算从低到高时,6 张卡首张为 Mensa Now(12 k€)、末张为 Alumni Hub(56 k€);行业=Energie、排序=工期从短到长时,6 张卡首张为 Speicherplaner(9 周)、末张为 Netzampel(30 周)。"
141
  },
142
  {
143
  "id": "data.filter.stats",
144
  "m": 3,
145
- "dimension": "功能",
146
  "w": 1.5,
147
- "description": "行业=Energie、年份=全部时共 6 条一页显示完,统计行显示 6、380、18;年份=2024、行业=全部时共 6 条(Festivalfunk RMP、Klinikfinder NRW、Windpark Cockpit、IMS Ersatzteile、Mensa Now、Werksführung VR),统计行显示 6、277、14。"
148
  },
149
  {
150
  "id": "data.empty",
151
  "m": 3,
152
- "dimension": "交互",
153
  "w": 1.5,
154
- "description": "行业=Handel、年份=2024 时只剩 1 条(IMS Ersatzteile),统计行显示 1、58、19;把年份改为 2018(行业仍 Handel)时卡片区显示一句德语无结果提示而非空白,统计行三个数字均为 0,页码显示第 1 页且上一页/下一页均不可点;再把年份改回“全部”后 8 条 Handel 项目重新出现并回到第 1 页。"
155
  },
156
  {
157
  "id": "data.coupling.grid",
158
  "m": 3,
159
- "dimension": "视觉",
160
  "w": 1.0,
161
- "description": "数据化后卡片仍为每行 3 张、间距 30px,卡片高度统一为 260px(±4px),工具条仍吸顶;名称最长的 “Zentrum für Klimaforschung Niedersachsen Wissensportal” 所在卡片文字不溢出卡片边界、不与相邻卡片重叠,同行卡片仍等高。"
162
  },
163
  {
164
  "id": "skin.light.palette",
165
  "m": 4,
166
- "dimension": "视觉",
167
  "w": 1.5,
168
- "description": "切到日间版后页面底色为 rgb(253, 251, 244),主标题与正文文字为 rgb(20, 33, 44);页面上不再出现大面积深蓝 rgb(25, 44, 58) 背景。"
169
  },
170
  {
171
  "id": "skin.toggle.in.nav",
172
  "m": 4,
173
- "dimension": "交互",
174
  "w": 1.0,
175
- "description": "换肤开关控件位于底部悬浮胶囊导航容器内部(与 Home/Referenzen/Manifest 同一个胶囊里),点击它即可在日间版与夜间版之间来回切换;首次加载默认为夜间版,页面底色 rgb(25, 44, 58)、主标题文字 rgb(255, 212, 1)。"
176
  },
177
  {
178
  "id": "skin.dark.restore",
179
  "m": 4,
180
- "dimension": "视觉",
181
  "w": 1.0,
182
- "description": "切到日间版后再切回夜间版,页面底色恢复 rgb(25, 44, 58)、主标题文字恢复 rgb(255, 212, 1),案例卡与工具条外观与切换前一致。"
183
  },
184
  {
185
  "id": "skin.branche.colors",
186
  "m": 4,
187
- "dimension": "功能",
188
  "w": 1.5,
189
- "description": "行业识别色在两种皮肤下一致:Energie 项目的行业标签色为 rgb(238, 122, 59),Gesundheit 为 rgb(43, 190, 122),切换皮肤前后取值不变。"
190
  },
191
  {
192
  "id": "skin.nav.active",
193
  "m": 4,
194
- "dimension": "交互",
195
  "w": 1.5,
196
- "description": "日间版下底部导航的当前项仍为黄底 rgb(255, 212, 1) 配深色文字,与其余两项可清晰区分(第 2 条修复的效果未被换肤破坏)。"
197
  },
198
  {
199
  "id": "skin.state.keep",
200
  "m": 4,
201
- "dimension": "功能",
202
  "w": 1.5,
203
- "description": "先选行业 Energie、排序预算从高到低,再切换皮肤:筛选项、排序项保持不变,首卡仍是 Netzampel,统计行仍显示 6、380、18;在行业=全部的第 3 页切换皮肤后仍停留在第 3 页且卡片内容不变。"
204
  },
205
  {
206
  "id": "skin.persist",
207
  "m": 4,
208
- "dimension": "交互",
209
  "w": 1.0,
210
- "description": "切到日间版后刷新页面,页面仍以日间版呈现(底色 rgb(253,251,244));切回夜间版并刷新则仍为夜间版。"
211
  }
212
  ],
213
  "inject": {
214
- "type": "样式覆盖",
215
- "saboteur_prompt": "在 src/index.css 中靠文件后部(例如 .cta 相关规则之后)追加一条优先级高于既有 .nav-item.is-active 的样式规则,选择器写成 .floating-nav .nav-item.is-active,把背景设为 transparent、文字色设为 #eef2f4、左右内边距设回 12px,使底部悬浮导航中的“当前项”失去黄色胶囊高亮,看起来与其它两项完全相同。同时追加 .floating-nav .nav-item.is-active:hover { background: transparent; color: #ffd401; },使悬停行为也不暴露原高亮。不得修改 App.jsx 中 is-active 类名的添加逻辑(该类仍需正确附加到当前项),不得改动导航以外的任何元素样式、布局或功能,不得留下任何注释或 TODO 字样,运行时控制台不得出现任何报错或警告。"
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 落地页复刻与 GOLDVAULT 目录改造",
21
  "milestones": [
22
  {
23
- "operator": "复刻",
24
- "request": "先把品牌方现有的这版首页原样做出来,以参考图可见的部分为准,图片可以先用占位块顶着,但版式、文案和气质要对得上。从上往下说:最顶上一条通栏细导航,左边依次是 BOUTIQUE、VERLOBUNG & EHE、GOLDVAULT 2.0,正中间是拉开字距的大写品牌名 VIERI(下面一行很小的副标),右边是币种 EUR €、语言 Deutsch,再加搜索、账户、购物袋三个小图标。往下是几乎占满第一屏的通栏主视觉图,图片底部居中压着一句大写宽字距的标语 NOT YOUR AVERAGE GOLD.,颜色是很淡的灰蓝,别用纯黑。再往下左上角一行小号大写标题 ICONIC CLOUD COLLECTION,下面横排三张图,中间那张比左右两张更高、上下都探出去一截,中间图上叠一个细描边的浅色按钮,写 Cloud Collection。接着是一整块通栏的拼贴大图。然后是居中的理念段落:标题 DAS VIERI KONZEPT,下面一段引号包着的德语引文,署名 Guya Merkle, Gründerin VIERI,再下面一个 About us 文字链接。再往下是创始人那屏,左边文字右边人像照片,左边标题 VERANTWORTUNG BEGINNT AM URSPRUNG,下面两三行说明文字,底下一个带下划线的链接 MEHR ÜBER UNSEREN IMPACT ERFAHREN。页脚上方再来一条通栏拼贴图,页脚本身分五组:最左是一段大写的使命文字加三个社交小图标,然后是 VIERI(About、Verantwortung、Earthbeat Foundation、Facts & Jewels、Blog)、SERVICES(AGB、Datenschutz、Widerrufsrecht、Rücksendungen、Impressum)、KONTAKT(FAQ、Kontakt & Presseanfragen、Zahlungsmethoden)、SOCIALS(Instagram、Facebook、Pinterest),最右是订阅区,一句邀请文案加一个输入框和写着 BEITRETEN 的按钮,最底下一行 © VIERI Fine Jewellery。整体背景是近白的浅灰,区块标题都是很细的大写小字,别出现厚重的黑色标题块。"
25
  },
26
  {
27
- "operator": "新增区块",
28
- "request": "营销那边把 GOLDVAULT 系列的清单甩过来了,让我们在拼贴大图和理念段落之间插一整块商品陈列,区块标题就叫 GOLDVAULT KOLLEKTION,标题附近写清楚总共多少件。清单是这样的:一共 42 件,编号 VG-001 一路排到 VG-042,中间不断号。价格他们懒得一个个列,说规则简单——底价 380 欧,编号每往后一号加 35 欧,所以第一件 415 欧、最后一件 1850 欧,都是整数欧元不带小数,展示时带上 € 号。品类按编号循环:编号除以 4 余 1 的是 Ringe,余 2 是 Ohrringe,余 3 是 Ketten,整除的是 Armbänder。材质另走一套循环:除以 3 余 1 是 18K Recyclinggold,余 2 是 Fairmined Silber,整除的是 Platin。VG-036 往后(含 036)这几件是本季新品,卡片上挂个 NEU 小标。仓库那边说编号能被 7 整除的那几件已经卖光,卡片上打 Ausverkauft,这些件价格照常显示但不能被收藏。每张卡片要能看到编号、名称(就用编号加品类德文词)、品类、材质、价格这五样。这块的调性别跟上面几屏打架。"
29
  },
30
  {
31
- "operator": "交互化",
32
- "request": "42 件一口气铺开太长了,给这块加上挑选功能:品类可以按 Alle / Ringe / Ohrringe / Ketten / Armbänder 切;材质可以按 Alle / 18K Recyclinggold / Fairmined Silber / Platin 切;价格给三档加一个不限——unter 500 €、500–1000 €(含两头)、über 1000 €;再来一个「只看现货」的开关,打开后售罄的就不出现在列表里。排序要能按价格从低到高、从高到低,还有默认的编号顺序。列表每页放 12 件,底下给翻页控件,页码要能看出当前在第几页,任何一次筛选或排序变化都要跳回第一页,页码数量也得跟着当前结果重新算。每张卡片右上角加一个收藏心形,点一下加入愿望清单、再点一下取消,顶部导航里购物袋图标旁边显示愿望清单的件数,同一件反复点不能把数字越加越多;售罄的那几件点心形应该没反应,数字不许变。要是筛出来一件都没有,别给我一片空白,要有一句「Keine Treffer」之类的提示,翻页控件这时也别留着。另外无论怎么筛,标题旁边那个件数说明要跟当前实际结果对得上。"
33
  },
34
  {
35
- "operator": "换肤",
36
- "request": "品牌方要在圣诞档搞一版夜间主题:顶部导航右侧加一个明暗切换,切到夜间后整页换成深色底、浅色字,图片区域保持原样照常显示。这里有个矛盾要你自己拿捏——市场部希望促销标记(NEU、愿望清单件数)足够醒目,而品牌总监坚持 VIERI 的极简克制不能丢;所以强调色只允许存在一套、用在固定的少数位置,两种主题下的用法要一致,别一个主题用金色另一个主题冒出三种颜色。切换主题只是换皮,用户当前筛到哪、排序成什么样、翻到第几页、收藏了几件都不能被清掉。夜间主题下 NEU 和 Ausverkauft 两种标记仍然要一眼看得见,售罄卡片仍然点不动。反复来回切也不能出问题,切回浅色要和一开始长得一样。"
37
  },
38
  {
39
- "operator": "重构布局",
40
- "request": "商品这块在宽屏上一路往下滚太累,重排一下:宽屏(1024px 以上)把 GOLDVAULT KOLLEKTION 做成左右两栏,左边是一列筛选面板(品类、材质、价格、只看现货、排序都收在里面),跟着页面滚动时保持可见,右边是三列的商品网格;窄屏(640px 以下)左边这列收起来,改成一个可以展开/收起的筛选按钮,商品单列排。顺便把页脚也精简成三列,把订阅那块提到页脚最上面通栏放,原来五组链接的内容一条都不能少,BEITRETEN 按钮和最底下的版权行照旧。改版归改版,上面几屏(顶部导航、主视觉和那句标语、中间探出来带 Cloud Collection 按钮的三图区)的观感不要被带歪,筛选排序分页收藏那一套规则也得原封不动地继续正确,夜间主题在新布局下同样要覆盖到左侧筛选面板,别留下浅色的方块。"
41
  }
42
  ],
43
  "checklist": [
44
  {
45
  "id": "nav.structure",
46
  "m": 1,
47
- "dimension": "视觉",
48
  "w": 1.5,
49
- "description": "顶部导航一行三段式:左侧依次是 BOUTIQUE、VERLOBUNG & EHE、GOLDVAULT 2.0 三个链接且顺序一致,中间是水平居中、字母间距明显拉开的大写 VIERI 品牌名且其正下方有一行字号明显更小的副标文字,右侧同时出现 EUR €、Deutsch 两个文字项加三个小图标(搜索/账户/购物袋)。"
50
  },
51
  {
52
  "id": "hero.tagline",
53
  "m": 1,
54
- "dimension": "视觉",
55
  "w": 1.5,
56
- "description": "首屏为通栏主视觉,其底部居中显示大写宽字距标语「NOT YOUR AVERAGE GOLD.」(含句点),文字为低对比的灰/灰蓝色而非纯黑,且该标语压在主视觉区域之内而非另起白色区块。"
57
  },
58
  {
59
  "id": "cloud.middlecard",
60
  "m": 1,
61
- "dimension": "视觉",
62
  "w": 1.0,
63
- "description": "ICONIC CLOUD COLLECTION 小号大写标题左对齐于区块左上;其下三张图横排,中间一张的高度大于左右两张并在上下方向探出,且只有中间那张图上叠一个细描边浅色按钮,文案为「Cloud Collection」。"
64
  },
65
  {
66
  "id": "concept.quote",
67
  "m": 1,
68
- "dimension": "覆盖",
69
  "w": 1.0,
70
- "description": "理念区居中显示标题 DAS VIERI KONZEPT、一段引号包裹的引文、署名「Guya Merkle, Gründerin VIERI」和其下的 About us 链接;再下一屏为左文右图两栏,左侧依次为标题 VERANTWORTUNG BEGINNT AM URSPRUNG、其下两至三行说明性正文文字、再其下带下划线的链接 MEHR ÜBER UNSEREN IMPACT ERFAHREN;页脚正上方另有一条贯穿整幅宽度的图片带(可为占位图)。"
71
  },
72
  {
73
  "id": "footer.fivecols",
74
  "m": 1,
75
- "dimension": "覆盖",
76
  "w": 1.0,
77
- "description": "页脚含五组内容:最左为大写使命文字加三个社交小图标;VIERI 组含 Earthbeat Foundation 与 Facts & Jewels;SERVICES 组含 AGB、Datenschutz、Widerrufsrecht、Rücksendungen、Impressum 五条;KONTAKT 组含 Zahlungsmethoden;SOCIALS 组含 Pinterest;订阅区同时有一句邀请文案、一个可输入的输入框和文案为 BEITRETEN 的按钮,最底行为 © VIERI Fine Jewellery。"
78
  },
79
  {
80
  "id": "tone.light",
81
  "m": 1,
82
- "dimension": "视觉",
83
  "w": 1.0,
84
- "description": "初始(浅色)状态下整页背景为近白/浅灰,且区块级标题(指 ICONIC CLOUD COLLECTION、DAS VIERI KONZEPT、VERANTWORTUNG BEGINNT AM URSPRUNG,不含主视觉标语与导航中的 VIERI 字标)均为大写细字重文字、不带深色填充的标题条,页面中不出现黑底大标题块。"
85
  },
86
  {
87
  "id": "grid.count42",
88
  "m": 2,
89
- "dimension": "功能",
90
  "w": 1.5,
91
- "description": "GOLDVAULT KOLLEKTION 区块位于通栏拼贴大图与 DAS VIERI KONZEPT 之间,未做任何筛选时其件数说明显示 42,编号从 VG-001 连续排到 VG-042 无缺号无重复。"
92
  },
93
  {
94
  "id": "grid.price",
95
  "m": 2,
96
- "dimension": "功能",
97
  "w": 1.5,
98
- "description": "价格严格为 380+35×编号 的整数欧元:VG-001 显示 415 €,VG-017 显示 975 €,VG-042 显示 1850 €,且价格文本不带小数位。"
99
  },
100
  {
101
  "id": "grid.attrs",
102
  "m": 2,
103
- "dimension": "功能",
104
  "w": 1.0,
105
- "description": "卡片五项字段齐全且取值正确:VG-006 卡片上同时可见编号 VG-006、名称(含编号与品类德文词,如「VG-006 Ohrringe」)、品类 Ohrringe、材质 Platin、价格 590 €;另 VG-005 为 Ringe/Fairmined Silber,VG-007 为 Ketten,VG-008 为 Armbänder,VG-004 为 18K Recyclinggold。"
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": "带 NEU 标记的商品恰好 7 件且正好是 VG-036 至 VG-042,VG-035 上不出现 NEU。"
120
  },
121
  {
122
  "id": "grid.soldout",
123
  "m": 2,
124
- "dimension": "功能",
125
  "w": 1.0,
126
- "description": "标注 Ausverkauft 的商品恰好 6 件,为 VG-007、VG-014、VG-021、VG-028、VG-035、VG-042,这些卡片仍显示各自价格(如 VG-014 为 870 €)但收藏操作不可用。"
127
  },
128
  {
129
  "id": "filter.combo",
130
  "m": 3,
131
- "dimension": "功能",
132
  "w": 1.5,
133
- "description": "品类选 Ringe、材质选 Platin 时结果恰为 3 件(VG-009、VG-021、VG-033,件数说明显示 3);再打开「只看现货」后变为 2 件(VG-009 695 €、VG-033 1535 €),VG-021 从列表消失。"
134
  },
135
  {
136
  "id": "filter.priceband",
137
  "m": 3,
138
- "dimension": "功能",
139
  "w": 1.0,
140
- "description": "价格档筛选边界正确:选 unter 500 € 时恰 3 件(VG-001/002/003);选 500–1000 € 时恰 14 件且含 VG-004(520 €) 与 VG-017(975 €)、不含 VG-018;选 über 1000 € 时恰 25 件。"
141
  },
142
  {
143
  "id": "page.four",
144
  "m": 3,
145
- "dimension": "交互",
146
  "w": 1.0,
147
- "description": "无筛选时每页 12 件、共 4 页且第 4 页只有 6 件(VG-037…VG-042);无筛选下把排序切为价格从低到高时列表首件为 VG-001(415 €);切换到第 3 页后改变任一筛选或排序,都会自动回到第 1 页且页码总数按新结果重算。"
148
  },
149
  {
150
  "id": "chain.multi",
151
  "m": 3,
152
- "dimension": "交互",
153
  "w": 1.5,
154
- "description": "完成链路:选 Ringe → 加选 Platin → 打开只看现货 → 排序改为价格从高到低,此时列表首件为 VG-033(1535 €)、共 2 件;点其心形后愿望件数显示 1;再把所有筛选清空,列表回到 42 件第 1 页且愿望件数仍为 1。"
155
  },
156
  {
157
  "id": "wish.idempotent",
158
  "m": 3,
159
- "dimension": "交互",
160
  "w": 1.0,
161
- "description": "每张商品卡片右上角均有收藏心形按钮,愿望清单件数徽标出现在顶部导航的购物袋图标旁;对同一件商品连点心形 3 次后该徽标数值相对初始为 +1(加入→取消→加入),不会累加成 3;点击售罄件(如 VG-028)的心形,该徽标数值保持不变。"
162
  },
163
  {
164
  "id": "filter.empty",
165
  "m": 3,
166
- "dimension": "交互",
167
  "w": 1.0,
168
- "description": "选 Armbänder + unter 500 € 时列表区显示无结果提示文案(如 Keine Treffer),件数说明显示 0,且此时页面上不再出现翻页控件。"
169
  },
170
  {
171
  "id": "theme.persist",
172
  "m": 4,
173
- "dimension": "交互",
174
  "w": 1.5,
175
- "description": "在「Ohrringe + über 1000 € + 只看现货」(结果恰 6 件:VG-018/022/026/030/034/038)并已收藏 2 件的状态下切换到夜间主题,切换后仍为同样 6 件、同一页、愿望件数仍为 2,筛选与排序控件的选中态不被重置。"
176
  },
177
  {
178
  "id": "theme.dark",
179
  "m": 4,
180
- "dimension": "视觉",
181
  "w": 1.0,
182
- "description": "夜间主题下页面主背景变为深色且正文文字变为浅色,导航左侧三个链接文案与顺序不变、VIERI 仍水平居中,主视觉标语 NOT YOUR AVERAGE GOLD. 仍可读,主视觉图与拼贴图等图片区域仍照常显示(不消失、不被整体压暗成灰块)。"
183
  },
184
  {
185
  "id": "theme.badge",
186
  "m": 4,
187
- "dimension": "视觉",
188
  "w": 1.0,
189
- "description": "夜间主题下 NEU 与 Ausverkauft 标记仍与深色背景形成明显对比可清晰辨认,售罄卡片(如 VG-042)的收藏操作在深色下依然不可用。"
190
  },
191
  {
192
  "id": "theme.accent",
193
  "m": 4,
194
- "dimension": "视觉",
195
  "w": 1.0,
196
- "description": "强调色策略前后一致:全站只有一套强调色,且只用在固定的少数位置(NEU 标记与愿望件数一类),浅色与夜间两种主题下用色位置相同,页面中不出现三种及以上互不相干的高饱和强调色。"
197
  },
198
  {
199
  "id": "theme.toggle",
200
  "m": 4,
201
- "dimension": "交互",
202
  "w": 1.0,
203
- "description": "明暗切换控件位于顶部导航右侧区域;连续点击 6 次后回到浅色主题,页面背景、文字色与初始加载时一致,不残留深色区块,且此过程中愿望件数与当前筛选结果件数均不变。"
204
  },
205
  {
206
  "id": "layout.twocol",
207
  "m": 5,
208
- "dimension": "视觉",
209
  "w": 1.5,
210
- "description": "视口宽度 ≥1024px 时 GOLDVAULT KOLLEKTION 呈左右两栏:左侧为集中放置品类/材质/价格/只看现货/排序的筛选面板并在向下滚动时保持可见,右侧商品网格为每行 3 列;视口宽度 <640px 时筛选收为一个可展开/收起的按钮面板,商品变为单列。"
211
  },
212
  {
213
  "id": "layout.regression",
214
  "m": 5,
215
- "dimension": "功能",
216
  "w": 1.5,
217
- "description": "重构后筛选逻辑未被破坏:在新布局中选 Ringe + Platin + 只看现货仍恰得 2 件(VG-009、VG-033),每页 12 件、无筛选时仍为 4 页,愿望件数仍随收藏正确增减。"
218
  },
219
  {
220
  "id": "layout.footer3",
221
  "m": 5,
222
- "dimension": "覆盖",
223
  "w": 1.0,
224
- "description": "页脚变为三列排布且订阅区通栏置于页脚顶部,但原五组链接内容一条不少(SERVICES 仍含 Impressum、KONTAKT 仍含 Zahlungsmethoden、VIERI 仍含 Earthbeat Foundation),BEITRETEN 按钮与 © VIERI Fine Jewellery 版权行仍在。"
225
  },
226
  {
227
  "id": "layout.keeptop",
228
  "m": 5,
229
- "dimension": "视觉",
230
  "w": 1.0,
231
- "description": "重构后首屏与三图区保持原样:顶部导航仍为左链接(BOUTIQUE/VERLOBUNG & EHE/GOLDVAULT 2.0)、中居中 VIERI、右 EUR €/Deutsch 与三个图标的三段式结构;主视觉底部仍居中显示 NOT YOUR AVERAGE GOLD.;三图区中间那张仍高于左右两张并叠着 Cloud Collection 描边按钮。"
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": "我们要上线一个社区本地生活的服务站点,就叫『巷口生活』,城市先固定写『临江』放在品牌名旁边显示。首屏就是找师傅:上面一条品牌栏带搜索框(按师傅名字包含匹配就行,输入片段也要能搜到),下面是分类筛选(全部/保洁/维修/跑腿/照护)、片区筛选(全部/城东/城西/老城/江北),还有一个排序下拉:默认『综合』按接单数从多到少排,另外两个是『价格从低到高』和『评分从高到低』;评分打平的把接单多的往前放,价格打平的把评分高的往前放。列表每页放 9 位师傅,下面给页码,能点着翻。列表上方要有一句结果计数,写成『共 X 位师傅』,筛完要跟着变。每位师傅一张卡片,名字、分类、片区、起步价(前面带个¥)、评分、接单数都要露出来,另外还得让人一眼看出这位今天能不能约。要是筛到一个都不剩,就别留空白,给句『没有符合条件的师傅,换个筛选试试』。\n\n运营那边给过来的名单有点乱,我照着抄一下,一共四十来位,别漏:\n保洁的有——李姐家政(城东,起步89,4.8分,1203单,今天能约);洁净之家(城西,99,4.6,876单,能约);阿珍钟点工(老城,68,4.9,1544单,今天约不了);蓝天保洁(江北,119,4.5,402单,能约);万家净(城东,79,4.7,991单,今天约不了);小林擦窗(城西,59,4.4,318单,能约);晴川家政(老城,129,4.9,1330单,能约);邻里帮保洁(江北,88,4.3,245单,能约);清爽日常(城东,109,4.6,655单,今天约不了);王阿姨深度清洁(老城,159,4.8,720单,能约);乐活除螨(江北,139,4.2,180单,能约)。\n维修的有——老张电器维修(老城,49,4.7,2100单,能约);阿斌空调(城东,129,4.8,1460单,能约);水电快修队(城西,79,4.5,980单,能约);江北管道通(江北,69,4.4,610单,今天约不了);明亮换锁(城东,99,4.6,530单,能约);小陈手机上门(城西,39,4.3,1720单,能约);恒温热水器(老城,149,4.9,460单,能约);全能家修(江北,89,4.5,1180单,能约);灯具安装老周(城东,59,4.2,275单,今天约不了);洗衣机医生(城西,109,4.7,840单,能约);门窗修补王(老城,119,4.1,150单,能约)。\n跑腿的有——闪送小哥阿俊(城东,15,4.6,3200单,能约);老城快跑(老城,18,4.5,2450单,能约);江北代买(江北,22,4.3,890单,能约);城西急送(城西,25,4.7,1560单,今天约不了);排队小能手(城东,35,4.4,470单,能约);夜间跑腿队(老城,45,4.8,320单,能约);药品代取(城西,28,4.9,1090单,能约);文件速递(江北,32,4.2,640单,能约);生鲜代提(城东,19,4.5,1875单,今天约不了);宠物接送跑腿(老城,55,4.6,260单,能约)。\n照护的有——暖阳陪护(城西,199,4.9,540单,能约);育儿嫂张姐(城东,259,4.8,410单,今天约不了);老年助浴(老城,169,4.7,230单,能约);夜间陪床(江北,229,4.6,310单,能约);康复按摩上门(城西,189,4.5,620单,能约);月子护理(城东,299,4.9,175单,能约);宠物喂养上门(老城,79,4.4,980单,能约);遛狗管家(江北,49,4.3,1420单,能约);术后照料(城西,209,4.2,140单,今天约不了);陪诊挂号(城东,149,4.8,760单,能约)。\n先别做下单流程,这一版把找师傅这件事做顺就行。整体风格干净一点,浅色底,别太花。"
22
  },
23
  {
24
- "operator": "重构布局",
25
- "request": "用户反馈筛选条堆在头上太挤,手机端还好,电脑上一屏看不了几位师傅。改一下版面:宽屏时把搜索框、分类、片区、排序这四组控件统统收进左边一条固定的筛选栏里(搜索框也一起搬过去,品牌栏上不再留搜索),右边留给结果列表;品牌栏改成往下滚也一直贴在顶上的那种,让人随时看得到品牌和所在城市。另外用户老是搞不清自己筛了什么,所以在结果区上方把当前生效的条件一条条列出来(当前搜索关键词也要算一条),每条都能单独点掉,点掉关键词那条就等于把搜索清空、其它条件不受影响;旁边再来个『清空全部』——说明一下,这个『清空全部』只负责把筛选条件和搜索关键词清干净,排序方式保持用户当前选的那个,别顺手给人重置了。还有个老毛病:翻到第三页再改筛选,页码还停在第三页,看着像没结果——改完筛选就回第一页。这次是挪版面,上一版的那套数字和规则别给我改乱了:计数、排序规则、每页 9 位、翻页都得跟原来一模一样。"
26
  },
27
  {
28
- "operator": "新增区块",
29
- "request": "该接单了。卡片上的『预约』点下去,弹出一个三步走的预约流程:第一步挑上门时段,就上午、下午、晚上三个,必须选一个才能往下走;第二步填服务时长,只能在 1 到 4 小时之间,超出这个范围不许填/不许选,同时决定要不要『今日加急上门』;第三步是确认页,把师傅名字、选的时段、几小时、费用是怎么算出来的(起步价×小时数、加急加了多少、减了多少)以及最终要付的钱都写清楚,底下一个『确认预约』。钱怎么算跟财务对过:起步价乘以小时数,要加急的再加 20 块,最后算出来到 200 及以上的立减 30,零头不用管、都是整数。今天约不了的师傅,卡片上的预约入口就别让点,自然也谈不上加急。下完单,那位师傅的卡片上要留个『已约』的标记,顶部再挂个『我的预约』的数字,每完成一单加一;『已约』只是个标记,预约入口还留着,同一位师傅想再约一次也行,再约一次数字就再加一。用户换筛选、翻页再回来,标记和数字都得还在。用户手抖是常事,确认页上连点几次『确认预约』只能算一单。预约按钮和『已约』这个标记要够跳,让人一眼看得到自己约过谁。"
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": "首屏未做任何筛选时结果计数显示『共 42 位师傅』,列表一页恰好 9 张卡片,页码共 5 页,切到第 5 页时恰好剩 6 张卡片。"
43
  },
44
  {
45
  "id": "sort.default.top3",
46
  "m": 1,
47
- "dimension": "功能",
48
  "w": 1.5,
49
- "description": "默认『综合』排序下第一页前三张卡片依次是 闪送小哥阿俊(3200单)、老城快跑(2450单)、老张电器维修(2100单)。"
50
  },
51
  {
52
  "id": "sort.price.rating.tie",
53
  "m": 1,
54
- "dimension": "功能",
55
  "w": 1.5,
56
- "description": "切到『价格从低到高』时第 1 页前三张依次为 闪送小哥阿俊¥15、老城快跑¥18、生鲜代提¥19,第 2 页首张为 夜间跑腿队¥45,且同为¥49的 老张电器维修(4.7) 排在 遛狗管家(4.3) 之前;切到『评分从高到低』时首张为 阿珍钟点工(4.9分、1544单)而非其它 4.9 分师傅。"
57
  },
58
  {
59
  "id": "filter.combo.3",
60
  "m": 1,
61
- "dimension": "功能",
62
  "w": 1.5,
63
- "description": "同时选分类『跑腿』与片区『城东』后,列表只剩 3 张卡片(闪送小哥阿俊、排队小能手、生鲜代提),计数显示『共 3 位师傅』,页码只剩 1 页。"
64
  },
65
  {
66
  "id": "search.substring.empty",
67
  "m": 1,
68
- "dimension": "功能",
69
  "w": 1.0,
70
- "description": "搜索框输入『阿姨』后只命中 王阿姨深度清洁 一张卡片、计数显示『共 1 位师傅』(证明按名字片段包含匹配而非全名精确匹配);改输入 zzz 后无任何卡片、计数为 0 且出现文案『没有符合条件的师傅,换个筛选试试』。"
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": "先搜索『修』再选分类『维修』+片区『城西』,结果区上方出现 3 个条件标签(其中一条对应关键词『修』),列表为 2 位(水电快修队、小陈手机上门);单独点掉关键词那条标签后,搜索框被清空、剩 2 个标签,列表变为 3 位(水电快修队、小陈手机上门、洗衣机医生)。"
92
  },
93
  {
94
  "id": "chips.remove.filter",
95
  "m": 2,
96
- "dimension": "交互",
97
  "w": 1.0,
98
- "description": "在仅选『维修』+『城西』(无关键词)状态下点掉『城西』标签,剩 1 个标签,列表变为维修全部 11 位、计数显示『共 11 位师傅』。"
99
  },
100
  {
101
  "id": "chips.clearall",
102
  "m": 2,
103
- "dimension": "功能",
104
  "w": 1.5,
105
- "description": "在已选筛选且搜索框有关键词的状态下点『清空全部』,条件标签全部消失、搜索框清空、计数回到『共 42 位师傅』,而当前排序不被重置(若此前选的是价格从低到高,首张仍是 闪送小哥阿俊¥15)。"
106
  },
107
  {
108
  "id": "page.reset",
109
  "m": 2,
110
- "dimension": "交互",
111
  "w": 1.0,
112
- "description": "翻到第 3 页后改动任意一个筛选条件,列表立即回到第 1 页且页码高亮停在 1,不出现空白结果页。"
113
  },
114
  {
115
  "id": "layout.regress",
116
  "m": 2,
117
- "dimension": "功能",
118
  "w": 1.5,
119
- "description": "改版后每页 9 位的规则与计数仍成立:只选分类『保洁』时计数为『共 11 位师傅』、共 2 页且第 2 页恰 2 张卡片。"
120
  },
121
  {
122
  "id": "wizard.steps.bounds",
123
  "m": 3,
124
- "dimension": "交互",
125
  "w": 1.5,
126
- "description": "点可约师傅的『预约』后出现三步流程并标示当前为第 1 步,第 1 步可见上午/下午/晚上三个时段选项;未选时段时无法进入第 2 步(下一步不可用或点击无反应);第 2 步的服务时长只能取 1 至 4 小时,无法设为 0 或 5。"
127
  },
128
  {
129
  "id": "price.calc.257",
130
  "m": 3,
131
- "dimension": "功能",
132
  "w": 1.5,
133
- "description": "对『李姐家政』(¥89) 选 2 小时且不加急,确认页应付为 178;改为 3 小时并勾选今日加急后,确认页可见师傅名字『李姐家政』、所选时段、3 小时以及费用明细(89×3=267、加急+20、满200减30),最终应付为 257。"
134
  },
135
  {
136
  "id": "price.calc.35",
137
  "m": 3,
138
- "dimension": "功能",
139
  "w": 1.0,
140
- "description": "对『闪送小哥阿俊』(¥15) 选 1 小时并勾选加急,确认页应付为 35,不触发满 200 减 30。"
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": "完成一单后该师傅卡片出现『已约』标记且顶部『我的预约』为 1,再约另一位后变为 2;切换分类筛选或翻页再回来,两处『已约』标记与数字 2 仍在;此时对已标记『已约』的 李姐家政 再点预约,仍能正常打开三步流程并完成下单,数字变为 3。"
155
  },
156
  {
157
  "id": "confirm.idempotent",
158
  "m": 3,
159
- "dimension": "交互",
160
  "w": 1.0,
161
- "description": "在确认页连点『确认预约』3 次,『我的预约』只增加 1(不会变成 +3)。"
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": "切到夜间皮肤后左右分栏与吸顶品牌栏依旧,条件标签仍可单个点掉与清空;此时选『跑腿』+『城东』结果仍为 3 张卡片、计数『共 3 位师傅』。"
183
  },
184
  {
185
  "id": "theme.keep.state",
186
  "m": 4,
187
- "dimension": "功能",
188
  "w": 1.5,
189
- "description": "换肤前已约 2 位,切换皮肤后『我的预约』仍为 2 且两张卡片的『已约』标记未丢失;此时再对 李姐家政 走 3 小时+加急,确认页应付仍是 257。"
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": "我们官网现在只有一个案例轮播和三张卡片,销售同事天天被客户追问「你们到底做过多少活儿」。我想在「A few of our friends」那段客户名单和最后「Should we work together?」那块之间,插进一个能翻我们项目档案的面板。每一条项目要能看到:客户名、做的是哪类活儿、哪一年、干了几周、预算多少(单位万美元)、现在什么状态。面板顶上给我一行总览,写清楚现在列表里有多少个项目、这些项目预算加起来多少万美元——注意是按当前列表实时算出来的,别把数字写死。默认顺序按年份从新到旧,同一年里预算大的排前面。风格上跟站里现有的深色调保持一致,别另起炉灶搞个白底大方块出来;但这块是我们最有说服力的东西,得让人滚到这儿一眼就注意到。\n\n清单是我从飞书里导出来的,有点乱,你照着录,别漏别改数:\n品牌策略这块一共十二个——3M(2019,12周,88万,已交付)、Allina(2020,8周,54万,已交付)、Aveda(2021,16周,120万,进行中)、Chipotle(2018,10周,66万,已交付)、General Mills(2022,14周,95万,进行中)、Hilton(2019,9周,47万,暂停)、Kohler(2023,18周,132万,进行中)、Medtronic(2020,11周,73万,已交付)、Nike(2024,20周,160万,进行中)、Target(2018,7周,39万,已交付)、UnitedHealthcare(2022,13周,86万,已交付)、Nestlé(2021,6周,31万,暂停)。\n产品设计十个:Plantable(2019,15周,102万,已交付)、Askov Finlayson(2021,5周,28万,暂停)、Code42(2020,12周,78万,已交付)、Facebook(2018,22周,175万,已交付)、Fidelity(2023,10周,64万,进行中)、Marvin Windows(2022,8周,45万,已交付)、Minnesota Twins(2019,9周,52万,已交付)、Blaze Pizza(2024,4周,22万,进行中)、Athena Jones(2023,17周,118万,进行中)、Nostos(2020,6周,33万,暂停)。\n内容制作是九个:Minnesota United FC(2018,6周,30万,已交付)、Sliver Studio(2021,3周,15万,已交付)、Aveda Retail(2022,7周,41万,已交付)、Target Circle(2019,5周,26万,已交付)、Hilton Grand(2023,11周,70万,进行中)、3M Futures(2024,9周,58万,进行中)、Chipotle Real(2020,4周,21万,暂停)、Kohler Bold(2018,8周,44万,已交付)、Nike Grind(2022,12周,81万,已交付)。\n用户研究七个:Allina Health Lab(2021,6周,34万,已交付)、Medtronic Care(2023,10周,62万,进行中)、Fidelity Wealth(2019,5周,25万,已交付)、General Mills Kitchen(2020,7周,38万,已交付)、Facebook Inclusive(2022,9周,55万,暂停)、Marvin Light(2024,3周,18万,进行中)、Plantable Clinic(2018,4周,20万,已交付)。\n市场活动也是七个:Askov North(2022,5周,29万,已交付)、Nestlé Bloom(2019,6周,36万,已交付)、Minnesota Twins Opening(2023,4周,24万,进行中)、Code42 Secure(2021,8周,49万,已交付)、Blaze Fire(2018,3周,17万,暂停)、UnitedHealthcare Move(2024,7周,43万,进行中)、Athena Rise(2020,10周,68万,已交付)。"
30
  },
31
  {
32
- "operator": "数据化",
33
- "request": "档案面板一口气铺四十几条太长了,客户根本找不到自己关心的。给这块加上真正能用的筛法:按类型能一键切(要有个「全部」)、按状态也能切(已交付/进行中/暂停,同样要有「全部」)、还要个搜客户名的输入框,大小写别较真。排序至少给三种:默认的年份新到旧、预算从高到低、周期从短到长。列表别一泻千里,每页放 8 条,翻页控件放列表下面。有几个细节别忘:只要动了筛选、动了搜索框、或者换了排序,页码都要退回第一页,不然客户翻到后面再一搜就看到空白页;顶上那行总览必须跟着当前筛出来的结果走,个数和预算合计都要重算;一个都没筛到的时候要有明确的空状态提示,别只剩一片黑;另外给个一键清空,把筛选、搜索、排序全部还原成刚进页面的样子。"
34
  },
35
  {
36
- "operator": "修复",
37
- "request": "还有个老毛病顺手治一下:上面「What we're working on」那个轮播,我一直点右边的 Next,第六条文案(讲 new rituals for sport 那条)永远出��来——点到第五条之后就又跳回第一条了,右上角那个计数也从来没显示过 6。客户抽查内容的时候这条一直露不出来很尴尬。修的时候别把现在那个淡出淡入的切换手感弄没了,也别动旁边那个白色胶囊按钮。"
38
  },
39
  {
40
- "operator": "响应式",
41
- "request": "老板在手机上打开我们官网,页面得横着拖才能看全,页头的导航直接跑到屏幕外面去了,新加的档案面板在小屏上更是挤成一团。把整站在手机宽度(按 375 宽算)上收拾干净:不能出现横向滚动条,页头 logo 和导航要在一屏内摆好,首屏那段大标题要缩到能完整读完,档案面板的项目改成一条一行的单列,筛选和排序控件要么换行要么能横向滑,反正每一个都得点得到、字不能被切掉。桌面端(1280 以上)原来的排版一点都不要变样——logo 在左、导航在右的两端布局、首屏大标题的字号、卡片区横排,这些都要保持原样(后面那条需求里要往页头加的那个主题开关是例外,允许它出现在页头)。"
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": "新增的项目档案面板位于「A few of our friends」客户名单段落之后、「Should we work together?」CTA 之前,且未做任何筛选时列表共 6 页、第 1 页恰好渲染 8 条项目。"
55
  },
56
  {
57
  "id": "panel.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "未做任何筛选时,面板顶部总览行显示的项目数为 45、预算合计为 2612(万美元),两个数字精确一致。"
62
  },
63
  {
64
  "id": "panel.sort.default",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "默认顺序(年份新到旧、同年预算大的在前)下,前三条依次为 Nike(2024,160 万)、3M Futures(2024,58 万)、UnitedHealthcare Move(2024,43 万)。"
69
  },
70
  {
71
  "id": "panel.fields",
72
  "m": 1,
73
- "dimension": "视觉",
74
  "w": 1.0,
75
- "description": "任取 Kohler 这一条,客户名、类型「品牌策略」、年份 2023、周期 18 周、预算 132 万、状态「进行中」六个字段在同一条目内均可见且数值与清单一致。"
76
  },
77
  {
78
  "id": "panel.skin.match",
79
  "m": 1,
80
- "dimension": "视觉",
81
  "w": 1.0,
82
- "description": "面板沿用站点深色调(背景与 #1a1a1a 同系、正文为白或浅灰),未出现大面积白底色块;相邻的 friends 段与 CTA 段原有配色与文案未被改动。"
83
  },
84
  {
85
  "id": "filter.industry",
86
  "m": 2,
87
- "dimension": "功能",
88
  "w": 1.5,
89
- "description": "点选类型「产品设计」后,总览显示 10 个项目、合计 717 万,列表分为 2 页,第 2 页恰好 2 条。"
90
  },
91
  {
92
  "id": "filter.chain",
93
  "m": 2,
94
- "dimension": "交互",
95
  "w": 1.5,
96
- "description": "完整链路:选「产品设计」后翻到第 2 页,再选状态「进行中」,此时页码自动回到第 1 页,结果恰为 3 条且依次为 Blaze Pizza、Athena Jones、Fidelity,总览显示 3 个项目、合计 204 万,且不存在第 2 页。"
97
  },
98
  {
99
  "id": "page.default",
100
  "m": 2,
101
- "dimension": "功能",
102
  "w": 1.0,
103
- "description": "无任何筛选时每页 8 条、共 6 页、第 6 页 5 条;第 1 页最后一条(第 8 条)为 Hilton Grand(2023,70 万);翻页控件位于列表下方(而非列表上方或侧边)。"
104
  },
105
  {
106
  "id": "sort.switch",
107
  "m": 2,
108
- "dimension": "功能",
109
  "w": 1.0,
110
- "description": "无筛选下切到「预算高到低」首条为 Facebook(175 万);切到「周期短到长」第 1 页前三条周期均为 3 周;每次切换排序后页码回到第 1 页。"
111
  },
112
  {
113
  "id": "search.resetpage",
114
  "m": 2,
115
- "dimension": "交互",
116
  "w": 1.5,
117
- "description": "无筛选下先翻到第 2 页,再在搜索框输入小写 min:页码自动回到第 1 页,列表恰为 3 条且客户名均含 Minnesota,总览同步显示 3 个项目。"
118
  },
119
  {
120
  "id": "search.empty",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.0,
124
- "description": "把搜索词改为 zzz 后显示明确的空状态提示文案,总览变为 0 个项目、合计 0 万美元,且不再出现可点击的页码。"
125
  },
126
  {
127
  "id": "reset.idem",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.0,
131
- "description": "在空态下点一键清空后,搜索框清空、类型与状态回到「全部」、排序回到默认,列表恢复为共 6 页且第 1 页首条为 Nike;再连点清空两次结果完全不变。"
132
  },
133
  {
134
  "id": "fix.cycle",
135
  "m": 3,
136
- "dimension": "功能",
137
  "w": 1.5,
138
- "description": "连续点击 Next(每次等切换完成)能出现计数「6 of 6」并显示第六条文案 Creating new rituals for how the next generation experiences sport.,再点一次回到「1 of 6」。"
139
  },
140
  {
141
  "id": "fix.noskip",
142
  "m": 3,
143
- "dimension": "功能",
144
  "w": 1.0,
145
- "description": "从「1 of 6」起连点 5 次,计数严格依次为 2、3、4、5、6 of 6,第 5 条之后是第 6 条而非跳回第 1 条,6 条文案各出现一次且无重复。"
146
  },
147
  {
148
  "id": "fix.regress.fade",
149
  "m": 3,
150
- "dimension": "视觉",
151
  "w": 1.0,
152
- "description": "回归:点击 Next 后文案仍为淡出再淡入(约 0.3 秒过渡)而非瞬间替换,左侧「How'd you do that?」白底黑字胶囊按钮的位置与样式与修复前一致。"
153
  },
154
  {
155
  "id": "fix.regress.rapid",
156
  "m": 3,
157
- "dimension": "交互",
158
  "w": 1.0,
159
- "description": "回归:在过渡未结束时快速连点 Next 三次,计数只前进一格(如 3 of 6 变为 4 of 6),不出现跳两格、不出现「7 of 6」、不出现空白文案。"
160
  },
161
  {
162
  "id": "fix.isolation",
163
  "m": 3,
164
- "dimension": "功能",
165
  "w": 1.5,
166
- "description": "跨区块:先在档案面板筛「进行中」并翻到第 2 页(该页 5 条、总览 13 个项目 986 万),再点轮播 Next 若干次,面板仍停在第 2 页且条数与总览数字完全不变。"
167
  },
168
  {
169
  "id": "rwd.noscroll",
170
  "m": 4,
171
- "dimension": "视觉",
172
  "w": 1.5,
173
- "description": "375×812 视口下页面无横向滚动(可滚动宽度不超过视口宽),页头 logo 与三个导航项全部在屏内可见且互不重叠。"
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 宽下首屏大标题整段完整可读、不超出视口右边界,字号明显小于桌面端的 78px。"
188
  },
189
  {
190
  "id": "rwd.state",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "跨需求:375 宽下执行「选类型内容制作 + 状态已交付」,结果为 6 条、总览 6 个项目 237 万,与 1280 宽下同样操作得到的条数与合计数字完全一致。"
195
  },
196
  {
197
  "id": "rwd.desktop",
198
  "m": 4,
199
- "dimension": "视觉",
200
  "w": 1.0,
201
- "description": "1280 宽以上时首屏标题仍为 78px 级别的大字、页头保持 logo 在左导航在右的两端布局、卡片区仍横向排列,均与改造前一致(允许页头多出需求5 的主题开关,除此之外不得因移动端适配或换肤而变形)。"
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": "跨需求:先筛类型「品牌策略」+ 排序「预算高到低」并翻到第 2 页(该页共 4 条),同时把轮播点到「5 of 6」,再切换主题;切换后面板仍停在第 2 页、筛选与排序未变、该页首条仍为 Allina(54 万),轮播仍显示「5 of 6」。"
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": "在 src/components/WorkCarousel.jsx 的 next 函数中植入一个 off-by-one 的条件边界缺陷:把索引推进逻辑改成在到达倒数第二项时就回绕,例如将 setIndex((i) => (i + 1) % SLIDES.length) 改为 setIndex((i) => (i + 1 >= SLIDES.length - 1 ? 0 : i + 1)),使第 6 条(索引 5)永远无法被展示、计数最高只到 5 of 6。要求:不改动 SLIDES 数组内容与条数、不改动 FADE_MS 与淡入淡出过渡逻辑、不改动 leaving 防连点判断、不改动按钮与任何 CSS、不产生控制台报错或警告、不留下任何注释或可疑变量名,改动看起来像一处正常的边界判断写法。"
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": "先处理一个老毛病。运营同事反馈:作品集里每个项目标题行右侧那三个排版密度小图标,点了之后下面的图片排列确实立刻变了,但被点亮的那个图标还停在上一次选的位置上;再去点别的图标,高亮才慢半拍地跟过来,看着像选中了两个东西。页面刚打开时是对的,一点就开始错位。麻烦修成点哪个就亮哪个,高亮和实际列数任何时刻都指向同一个值。顺手确认一下别把周边弄坏:同一个图标连点多次不能乱跳,改一个项目的密度不能影响别的项目,窄屏下(浏览器窗口拖窄到 1100 像素以内)这排小图标还是不出现、网格还是两列,桌面下原来那种上下错落的排布和斜纹占位块也要保持原样。"
30
  },
31
  {
32
- "operator": "数据化",
33
- "request": "我们要把这个个人站往「能接活」的方向推一步:在开头那段自我介绍下面、作品项目开始之前,加一整块「档期与预订」。内容是接下来两周三个棚的放租情况——黑棚 Studio N、白棚 Studio W、还有露台的外景台 Deck;日期从 2026 年 3 月 4 日(周三)一直排到 3 月 17 日(周二),每天每个棚算一条整天档,所以一共就是这么多条,页面上放出来的条数得对得上。价格上,黑棚平日 1800 一天,白棚 1500,外景台 1200;碰上周六周日按平日价上浮两成。已经卖掉的部分我这边是这么记的:黑棚 3 月 5 号、6 号、12 号被 Bentley 那条片子占了;白棚 7 号有个客户包了,13 号和 14 号也别放出来;外景台 4 号和 15 号有人订了;另外 9 号那天全馆检修,三个棚都不能约。每条档期上要能看到棚名、日期(带周几)和当天的价格,已经占掉的要明确标出来不能预订。这块的顶上给我一行统计:一共放出多少条、还能约多少、已经占掉多少,三个数字要跟下面列表里实际的情况完全对得上。原来的顶部导航和页脚那段「Lets work together」加四个链接别动。"
34
  },
35
  {
36
- "operator": "交互化",
37
- "request": "档期列表得能挑、能选、能下单。挑的部分:一个棚位筛选(全部/黑棚/白棚/外景台)、一个「只看可约」的开关、一个排序(默认按日期先后,另外能按价格从低到高、从高到低这两种,三个排序选项都要能用),条目多所以每页最多放 12 条,上一页下一页都要能点、来回翻结果都得对,筛选或排序变了就回到第一页。选和下单的部分:可约的条目能加进右边的预订单,已占的不给加;同一条重复点不要重复计数;预订单里能单条移除,也要有个「清空」的入口一键全清,清空到没有条目时给个空状态提示。算钱这样算:把选中档期的价钱加起来,一单里选够 3 天(含 3 天)就给整体打八八折,算出来带小数直接把零头抹掉,省了多少钱也要让人看见;折扣只作用在档期费上,另外每单固定 200 元布景服务费,是在折后再加的,预订单空着的时候这 200 也别显示,合计就是 0。下单走三步:先选档期,再填联系人(姓名 + 手机,缺一个就不让往下走并提示清楚),最后确认提交,提交完给出预订成功和一个订单号,预订单清空,同时刚订走的那几条档期在列表里要立刻变成已占,上面那行统计的数字也得跟着变。预订相关的主按钮要显眼,别让人找。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "现在档期这块从上到下堆着太长了,重新排一下版:窗口宽到 1100 像素及以上时做成左右两栏,左边是筛选、排序和档期列表,右边是预订摘要——已选条数、档期费、折扣、服务费、应付,底下带个「去下单」的入口,点了就能开始填联系人;往下翻列表的时候右边这块摘要要一直看得见,不能跟着滚没了。760 到 1100 像素之间随你处理,两栏或者过渡形态都行;窄到 760 像素及以下就必须回到单栏,把摘要收成底部常驻的一条,至少显示已选条数和应付金额,数字必须跟桌面那栏一模一样。重排过程中已有的东西都不能受影响:筛选、排序、当前第几页、预订单里的内容在窗口拉宽拉窄之间不能被重置;下面的作品项目区照旧一段段排在档期区后面,那三个密度小图标还是点哪个亮哪个、列数同步;页脚也不能被摘要挡住。"
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": "在任一项目的密度切换器上点击「2 列」图标后,立刻只有该图标处于高亮/选中态,另外两个不高亮;接着点「3 列」再点「4 列」,每次点击后高亮的都是刚点的那一个,不存在滞后一次的现象。"
55
  },
56
  {
57
  "id": "fix.cols.match",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.0,
61
- "description": "点「2 列」后该项目网格实际渲染 2 列,点「3 列」为 3 列,点「4 列」为 4 列;任何时刻高亮图标所代表的列数与实际列数一致。"
62
  },
63
  {
64
  "id": "fix.idempotent",
65
  "m": 1,
66
- "dimension": "交互",
67
  "w": 1.0,
68
- "description": "对同一个密度图标连续点击 5 次,列数与高亮状态保持不变,不出现闪烁或跳到别的列数。"
69
  },
70
  {
71
  "id": "fix.section.isolated",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.0,
75
- "description": "把第一个项目切到 2 列后,其余项目区块仍各自保持自己的列数与高亮(默认 4 列),互不影响。"
76
  },
77
  {
78
  "id": "fix.responsive.regression",
79
  "m": 1,
80
- "dimension": "视觉",
81
  "w": 1.0,
82
- "description": "回归:视口宽度 ≤1100px 时密度切换器不可见,项目网格固定为 2 列,且单元格不再带错落的顶部偏移。"
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": "档期区共 42 条档期(3 个棚 × 3/4–3/17 共 14 天),顶部统计行显示总数 42、可约 31、已占 11,三个数字与列表实际条目状态完全吻合。"
97
  },
98
  {
99
  "id": "data.price.exact",
100
  "m": 2,
101
- "dimension": "功能",
102
  "w": 1.5,
103
- "description": "价格精确:平日黑棚 1800、白棚 1500、外景台 1200;周末(3/7、3/8、3/14、3/15)上浮两成,即黑棚 2160、白棚 1800、外景台 1440,页面上这些具体日期的价格可逐条核对。"
104
  },
105
  {
106
  "id": "data.occupied.set",
107
  "m": 2,
108
- "dimension": "功能",
109
  "w": 1.0,
110
- "description": "已占集合精确:3/9 当天三个棚全部已占;黑棚 3/5、3/6、3/12,白棚 3/7、3/13、3/14,外景台 3/4、3/15 也为已占,其余 31 条均显示为可约。"
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": "档期区位于自我介绍段落之下、第一个作品项目(polestar)之上;顶部导航仍是右侧那五个链接、页脚仍为「Lets work together」加四个社交链接,文案未被改动。"
125
  },
126
  {
127
  "id": "flow.combo.diagonal",
128
  "m": 3,
129
- "dimension": "功能",
130
  "w": 1.5,
131
- "description": "组合抽验与双向翻页:开启「只看可约」并按价格从高到低排序时共 3 页,第 3 页恰好 7 条且每条都是 1200 元的外景台平日档;在第 3 页点「上一页」回到第 2 页时该页恢复为 12 条、页码指示为 2,再点「下一页」又回到与之前完全相同的第 3 页 7 条;关闭筛选、按日期默认排序时共 4 页,末页 6 条。"
132
  },
133
  {
134
  "id": "flow.sort.asc",
135
  "m": 3,
136
- "dimension": "功能",
137
  "w": 1.0,
138
- "description": "按价格从低到高排序(不加筛选)时,第 1 页首条为 1200 元的外景台平日档,同页从上到下价格非递减;切到最后一页,末条价格为 2160 元的黑棚周末档。"
139
  },
140
  {
141
  "id": "flow.filter.studio",
142
  "m": 3,
143
- "dimension": "功能",
144
  "w": 1.0,
145
- "description": "棚位筛选选「白棚」时列表共 14 条(其中 4 条已占);再叠加「只看可约」后剩 10 条并在一页内显示完,且页码自动回到第 1 页。"
146
  },
147
  {
148
  "id": "cart.total.exact",
149
  "m": 3,
150
- "dimension": "功能",
151
  "w": 1.5,
152
- "description": "金额与折扣精确:加入黑棚 3/4(1800)与白棚 3/5(1500)后摘要显示 2 条、档期费 3300、折扣为 0(或折扣行不显示)、服务费 200、应付 3500;再加入外景台 3/7(1440)后满 3 条触发八八折,摘要同时显示折扣信息(省 569 元或「八八折」标识)、折后档期费 4171、服务费 200、应付 4371。"
153
  },
154
  {
155
  "id": "cart.add.rules",
156
  "m": 3,
157
- "dimension": "交互",
158
  "w": 1.0,
159
- "description": "同一条可约档期重复点击加入不会重复计数(该条入口变为已加入/可移除态);已占档期没有可用的加入入口或入口禁用,反复点击后预订单条数与应付金额均不变;逐条移除到 0 条时显示空态提示,档期费与应付为 0 且不出现 200 元服务费。"
160
  },
161
  {
162
  "id": "cart.clear.all",
163
  "m": 3,
164
- "dimension": "交互",
165
  "w": 1.0,
166
- "description": "预订单内有 3 条时点击「清空」入口,摘要立刻变为 0 条并显示空态提示,档期费、折扣、应付均为 0 且不显示 200 元服务费;同时这 3 条档期在列表中恢复为可加入状态,统计行的可约数不变。"
167
  },
168
  {
169
  "id": "chain.submit.updates",
170
  "m": 3,
171
- "dimension": "交互",
172
  "w": 1.5,
173
- "description": "三步链:选 2 条可约档期→填联系人→提交。姓名或手机为空时提交被拦截并有明确提示;填全后提交显示成功信息与订单号,预订单回到空态,这 2 条档期在列表中变为已占,统计行同步变为总数 42、可约 29、已占 13。"
174
  },
175
  {
176
  "id": "layout.two.col",
177
  "m": 4,
178
- "dimension": "视觉",
179
  "w": 1.5,
180
- "description": "视口宽度 ≥1100px 时档期区为左右两栏:左列表右摘要,右栏含可点击的「去下单」按钮且点击后进入联系人填写步骤;向下滚动列表时摘要块保持在视口内可见(吸附),不随列表一起滚出屏幕。"
181
  },
182
  {
183
  "id": "layout.narrow.bar",
184
  "m": 4,
185
- "dimension": "视觉",
186
  "w": 1.0,
187
- "description": "视口 ≤760px 时档期区变单栏,摘要以底部常驻条呈现,显示的已选条数与应付金额与桌面右栏完全一致(如 2 条 / 3500)。"
188
  },
189
  {
190
  "id": "layout.state.preserved",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "在「只看可约+价格从高到低+第 3 页+预订单 2 条」的状态下把窗口从 1280px 缩到 700px 再放大回来,筛选、排序、页码与预订单内容均保持不变,未被重置到首页或清空。"
195
  },
196
  {
197
  "id": "layout.legacy.intact",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.5,
201
- "description": "重排后作品项目区仍依次排在档期区下方,密度切换器在新布局中依旧点哪个亮哪个且列数同步(第 1 条需求的修复结果未被破坏)。"
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": "只修改 src/components/ProjectSection.jsx,制造一个「高亮状态滞后一次」的状态更新遗漏缺陷,且不得产生任何控制台报错或警告。具体做法:在组件内除现有的 cols 状态外,再引入一个专门驱动按钮选中态的状态(例如 const [pressedCols, setPressedCols] = useState(4)),把 view-btn 的 active 类名与 aria-pressed 改为依据这个新状态判断(className={`view-btn${pressedCols === view.cols ? ' active' : ''}`}、aria-pressed={pressedCols === view.cols}),而网格列数仍由 cols 驱动;在点击处理里先 setCols(view.cols),随后把选中态更新成点击前的旧值(setPressedCols(cols)),从而使高亮永远慢一拍。初始渲染时两者都是 4,看起来正常。不要添加任何注释,不要改动 CSS、数据、其它组件、响应式行为、错落偏移与图片渲染,也不要改变 DOM 结构与 aria-label 文案。"
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": "运营那边一直用表格管工位,太土了。麻烦在首页两张门店大图(Nos lieux)下面、黑色 Studio 介绍上面,插一块「工位资源」面板出来,把我们两个点位的工位都摆进去。\n\n清单我口述一下,你照着录:Gros Horloge 这边,底楼(RDC)是开放工位,编号 GH-R01 一路到 GH-R08;二楼(1er)是固定工位,GH-A01 到 GH-A07;三楼(2e)是私人办公室,GH-B01 到 GH-B05。Vieux Marché 那边规模大一点:开放工位 VM-R01 到 VM-R09,固定工位 VM-A01 到 VM-A08,私人办公室 VM-B01 到 VM-B07。价格方面 Gros Horloge 是开放 18 欧一天、固定 26 欧、私人办公室 45 欧;Vieux Marché 因为装修新,每一种都比 Gros Horloge 贵 4 欧。还有,凡是编号里那个数字能被 3 整除的(03、06、09 这些),现在都被长租客占着了,要标成「占用」,其余是「空闲」。\n\n面板上要能按门店筛(全部/Gros Horloge/Vieux Marché)、按类型筛(全部/开放工位/固定工位/私人办公室),另外给个「只看空闲」的开关,再给个按编号搜的输入框。排序要有三种:价格从低到高、价格从高到低、编号 A→Z,默认就用编号 A→Z、不带任何筛选、停在第 1 页。每页放 8 个,下面做翻页。面板顶上要实时显示当前筛出来多少个工位。用户不管改了哪个筛选、搜索还是排序,页码都要跳回第 1 页,别停在翻到一半的位置。要是筛得一个都不剩,别给我一片空白,写句人话提示用户放宽条件。整体配色和现在站点的调性保持一致,别自己发明新风格。"
28
  },
29
  {
30
- "operator": "状态化",
31
- "request": "光看不够,客户得能「挑」。每个工位卡片上加一个预选的动作,挑中的工位要有明显的选中样子。挑了多少个,希望在页面顶部那条 header 上就能看见——放在「Essai gratuit!」按钮旁边做个「我的预选」计数,滚到哪儿都能看见(跟着 header 走就行),要一眼能注意到。\n\n几个规矩:占用中的工位不能被挑,用户怎么点都不该有反应,计数也不能动;一次最多挑 6 个,挑满之后其他没被挑的工位那个预选控件就该变灰点不动,并且给一句「最多 6 个」的提示;已经挑中的工位就算因为筛选条件或翻页看不见了,也依然算数,计数不许掉;再给个「清空预选」,但一个都没挑的时候这个动作不该能用,同时面板里要有一句「还没挑工位」之类的空提示。清空只清预选,用户当前的筛选条件、排序和页码不要跟着被重置。"
32
  },
33
  {
34
- "operator": "交互化",
35
- "request": "接下来把预选变成真正的预订。点顶部「我的预选」计数,或者点面板里的「去预订」,都要能打开同一个三步走的预订流程:\n\n第一步选天数和人数——天数默认 1 天,只能在 1 到 30 天之间,能加能减,到头了就加不动也减不动;第二步填联系邮箱和公司名,公司名可填可不填,但邮箱没填就不让往下走;第三步给一张明细:先把已预选工位的日价加起来,这是「每天合计」,再乘上天数就是总价;另外,我们老规矩是租满 5 天(含 5 天)整单打 85 折,但这次活动不按 85 折,改成按 9 折算,算出来带零头的一律把小数抹掉、只显示整欧元,并且要在明细里写明已经打折了。确认之后给用户一个订单号和成功提示,同时预选全部清空、顶部计数归零,流程退回第一步、天数也回到默认。一个工位都没预选时,不管从哪个入口都不该能进这个流程,给句提示就行。\n\n还有个小体贴:页面下面那块「Prenez place !」的留邮箱区域,如果用户已经在那里填了邮箱,第二步的邮箱就自动帮他带上,别让人填两遍。"
36
  },
37
  {
38
- "operator": "删除区块",
39
- "request": "页脚现在那个 Instagram 缩略图栏我们不要了——账号已经停更,四张图和旁边的「voir」链接整栏撤掉,页脚剩三栏,别留个空位在那儿尴尬着,其他几栏的标题、链接文字、电话、版权行一个字都别改。\n\n顺便把页脚「Nos lieux」下面那两个店名利用起来:点「Gros Horloge」就直接带用户到上面的工位面板,并且把门店筛选切成 Gros Horloge、页码回到第 1 页,计数要对得上(Gros Horloge 20 个、Vieux Marché 24 个)。切换的时候注意别把用户已经挑好的预选给弄丢了。"
40
  },
41
  {
42
- "operator": "换肤",
43
- "request": "最后一件事,品牌升级:主色从现在的橙色换成深青绿,主色用 #0f7a72,鼠标悬停用更深一档的 #0a5c56。全站原来是橙色的地方统统换掉——header 的试用按钮、Mission 那个「En savoir plus」、底部表单的提交按钮,还有你这次新做的面板里的预选按钮、向导里的按钮、顶部那个预选计数,一个都别漏;「Nouveau」那个浅橙底的小徽章也要换成同色系的浅底,底色 #e2f1ef、文字 #0f7a72。\n\n黑色的 Studio 介绍区和证言那块保持原样别动,字号、间距、排版结构一律不要改。整体调性要克制,全站就这一种强调色,别再冒出第二种亮色来抢戏。换完之后所有功能得照常能用。"
44
  }
45
  ],
46
  "checklist": [
47
  {
48
  "id": "panel.total.count",
49
  "m": 1,
50
- "dimension": "功能",
51
  "w": 1.5,
52
- "description": "首次加载时工位面板位于两张门店卡片之后、黑色 Studio 区块之前,且不加任何筛选时计数显示 44 个工位,分页共 6 页,第 6 页只有 4 个工位卡片。"
53
  },
54
  {
55
  "id": "panel.default.order",
56
  "m": 1,
57
- "dimension": "功能",
58
  "w": 1.0,
59
- "description": "默认排序为编号 A→Z 且停在第 1 页:第 1 页的 8 个工位依次为 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": "覆盖",
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 个标为占用,其余标为空闲;打开「只看空闲」后计数变为 32。"
67
  },
68
  {
69
  "id": "panel.price.and.desc",
70
  "m": 1,
71
- "dimension": "功能",
72
  "w": 1.5,
73
- "description": "卡片显示日价:GH-R01=18、GH-A01=26、GH-B01=45、VM-R01=22、VM-A01=30、VM-B01=49 欧/天;不加任何筛选先翻到第 3 页,再切排序为「价格从高到低」,视图立即回到第 1 页,且该页 8 张卡片中前 7 张日价均为 49 欧、第 8 张为 45 欧。"
74
  },
75
  {
76
  "id": "panel.type.filter",
77
  "m": 1,
78
- "dimension": "功能",
79
  "w": 1.5,
80
- "description": "门店=全部、类型=私人办公室时计数显示 12、共 2 页,且按默认编号 A→Z 排序第 1 页首张卡片为 GH-B01;再把门店切到 Gros Horloge 后计数变为 5、只剩 1 页、共 5 张卡片。"
81
  },
82
  {
83
  "id": "panel.combo.diagonal",
84
  "m": 1,
85
- "dimension": "功能",
86
  "w": 1.5,
87
- "description": "先在默认状态下翻到第 4 页,再同时选门店=Gros Horloge、打开「只看空闲」、排序=价格从低到高:视图回到第 1 页,计数为 15、共 2 页,第 1 页首个工位日价为 18 欧,第 2 页恰有 7 个工位。"
88
  },
89
  {
90
  "id": "panel.empty.state",
91
  "m": 1,
92
- "dimension": "交互",
93
  "w": 1.0,
94
- "description": "先翻到第 2 页,再在搜索框输入一个不存在的编号(如 ZZZ):计数显示 0、没有任何工位卡片、出现放宽条件的空态文案;清空搜索后计数恢复 44 且停在第 1 页(不是退回第 2 页)。"
95
  },
96
  {
97
  "id": "sel.badge.increment",
98
  "m": 2,
99
- "dimension": "功能",
100
  "w": 1.0,
101
- "description": "header 中「Essai gratuit!」按钮旁的「我的预选」计数初始为 0;预选 GH-A01 与 GH-B02 后计数变为 2 且这两张卡片呈现与未选卡片可区分的选中样式;页面滚动到页脚位置时该计数仍随顶部 header 可见并显示 2。"
102
  },
103
  {
104
  "id": "sel.hidden.persist",
105
  "m": 2,
106
- "dimension": "功能",
107
  "w": 1.5,
108
- "description": "在已预选 GH-A01、GH-B02 的情况下把门店筛选切到 Vieux Marché(两者被隐藏),计数仍为 2;切回 Gros Horloge 后这两张卡片依旧保持选中态。"
109
  },
110
  {
111
  "id": "sel.occupied.blocked",
112
  "m": 2,
113
- "dimension": "交互",
114
  "w": 1.5,
115
- "description": "占用工位(如 GH-A03)的预选控件不可用,连续点击 5 次后计数保持不变(从 0 起仍为 0),且不产生任何选中样式。"
116
  },
117
  {
118
  "id": "sel.limit.six",
119
  "m": 2,
120
- "dimension": "交互",
121
  "w": 1.0,
122
- "description": "预选 6 个空闲工位后,计数停在 6,页面出现「最多 6 个」之类的上限提示,此时其余未选工位的预选控件变灰且点击无效,计数不会变成 7。"
123
  },
124
  {
125
  "id": "sel.clear.isolated",
126
  "m": 2,
127
- "dimension": "功能",
128
  "w": 1.5,
129
- "description": "先设门店=Vieux Marché、排序=价格从高到低并翻到第 2 页(此时第 2 页首张卡片日价为 30 欧,证明降序生效)、预选其中 2 个空闲工位,点「清空预选」后计数归 0 并出现未挑选的空提示,而门店筛选、价格降序与第 2 页页码三者均保持不变;预选为 0 时清空动作不可用。"
130
  },
131
  {
132
  "id": "wiz.gate.empty",
133
  "m": 3,
134
- "dimension": "交互",
135
  "w": 1.0,
136
- "description": "一个工位都没预选时,点面板「去预订」和点 header「我的预选」计数这两个入口都不会进入第一步表单,而是各自给出需要先挑选工位的提示。"
137
  },
138
  {
139
  "id": "wiz.chain.total",
140
  "m": 3,
141
- "dimension": "功能",
142
  "w": 1.5,
143
- "description": "预选 GH-R01、GH-A01、VM-B01 后,从 header 计数与面板「去预订」两个入口均能打开同一流程:第一步天数默认 1,连续加到 30 后再点加仍显示 30,减回 2 再减为 1 后无法减到 0;把天数设为 4 并在第二步填入邮箱后,第三步明细显示每天合计 93 欧、总价 372 欧。"
144
  },
145
  {
146
  "id": "wiz.discount.floor",
147
  "m": 3,
148
- "dimension": "功能",
149
  "w": 1.5,
150
- "description": "同样三个工位、天数改为 5 时,第三步总价显示 418 欧(465×0.9=418.5 抹去零头),并明确标示已享受折扣;天数为 4 时总价 372 欧且不出现折扣标示。"
151
  },
152
  {
153
  "id": "wiz.step2.fields",
154
  "m": 3,
155
- "dimension": "交互",
156
  "w": 1.0,
157
- "description": "第二步同时呈现邮箱与公司名两个输入框:邮箱为空时无法前进到第三步(继续动作不可用或被阻止并提示);公司名留空不影响前进,填入「Studio SARL」后同样能进入第三步且价格明细数值不受影响。"
158
  },
159
  {
160
  "id": "wiz.email.prefill",
161
  "m": 3,
162
- "dimension": "功能",
163
  "w": 1.5,
164
- "description": "先在页面底部「Prenez place !」的邮箱输入框里输入 marie@studio.fr,再打开预订向导走到第二步,邮箱字段已默认填好 marie@studio.fr。"
165
  },
166
  {
167
  "id": "wiz.confirm.reset",
168
  "m": 3,
169
- "dimension": "交互",
170
  "w": 1.0,
171
- "description": "第三步确认后显示带订单号的成功提示,同时 header 预选计数归 0、所有卡片回到未选态;再次预选并打开向导时停在第一步且天数回到默认 1。"
172
  },
173
  {
174
  "id": "footer.insta.removed",
175
  "m": 4,
176
- "dimension": "视觉",
177
  "w": 1.5,
178
- "description": "页脚不再出现 Instagram 标题、四张缩略图和「voir」链接,页面任何位置都不再显示 insta 系列图片,页脚为并排三栏(Découvrir / Nos lieux / Contact)且没有留下空缺的第四栏占位。"
179
  },
180
  {
181
  "id": "footer.link.filter",
182
  "m": 4,
183
- "dimension": "功能",
184
  "w": 1.5,
185
- "description": "点击页脚「Nos lieux」中的 Vieux Marché,页面定位到工位面板且门店筛选变为 Vieux Marché、计数显示 24、页码为第 1 页。"
186
  },
187
  {
188
  "id": "footer.link.keepsel",
189
  "m": 4,
190
- "dimension": "功能",
191
  "w": 1.5,
192
- "description": "先翻到面板第 3 页并预选 2 个工位,再点页脚的 Gros Horloge:计数显示 20、回到第 1 页,而 header 的预选计数���为 2(预选未被清空)。"
193
  },
194
  {
195
  "id": "footer.rest.intact",
196
  "m": 4,
197
- "dimension": "覆盖",
198
  "w": 1.0,
199
- "description": "保留的三栏文案逐字原样:Découvrir 下为 Accueil 与 Notre Mission,Nos lieux 下仍为 Gros Horloge 与 Vieux Marché 两条,Contact 下仍显示 06 22 25 78 97 与 Nous contacter,底部行仍为「Le Studio Entreprise」与「© copyright 2020」。"
200
  },
201
  {
202
  "id": "skin.no.orange",
203
  "m": 5,
204
- "dimension": "视觉",
205
  "w": 1.5,
206
- "description": "header 的「Essai gratuit!」按钮、Mission 的「En savoir plus」、底部表单提交按钮背景均为 #0f7a72,悬停变为 #0a5c56;页面上不再出现原橙色 #ed743d / #d95f28。"
207
  },
208
  {
209
  "id": "skin.badge.tint",
210
  "m": 5,
211
- "dimension": "视觉",
212
  "w": 1.0,
213
- "description": "Gros Horloge 卡片上的「Nouveau」徽章底色为 #e2f1ef、文字为 #0f7a72,位置与大小与改版前一致。"
214
  },
215
  {
216
  "id": "skin.accent.consistent",
217
  "m": 5,
218
- "dimension": "视觉",
219
  "w": 1.5,
220
- "description": "header 的预选计数、面板中卡片的选中态、向导中的主按钮统一使用 #0f7a72 同一强调色系(深浅可不同),全站未出现红/橙/黄等第二种亮色强调;计数仍与周围元素有可辨对比而非与背景同色。"
221
  },
222
  {
223
  "id": "skin.dark.intact",
224
  "m": 5,
225
- "dimension": "视觉",
226
  "w": 1.5,
227
- "description": "黑色 Studio 区块背景仍为 #10151b,三张服务卡仍为横向一排且标题为衬线字体,两条证言仍一左图一右图(第二条左右反向),排版与间距未被改动。"
228
  },
229
  {
230
  "id": "skin.regression",
231
  "m": 5,
232
- "dimension": "功能",
233
  "w": 1.5,
234
- "description": "换肤后功能无退化:门店=Gros Horloge 且「只看空闲」时计数仍为 15,预选两个空闲工位后计数仍能从 0 变到 2,点击页脚 Vieux Marché 仍能把计数切到 24。"
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": "我们要把手写信营销平台 Simply Noted 的官网首页按参考图做出来(图片素材还没到位,图位先用灰底占位块顶着,比例照参考图)。从上往下说:\n\n顶栏是白底的,左边是手写体的 Simplynoted 标志,中间四个菜单 Business、Integrations、Pricing、About,最右边先是一个朴素的 Login 文字链,紧挨着一枚醒目的红色实心按钮 REQUEST A SAMPLE。\n\n首屏背景是很淡的粉白渐变。左半边从上到下是:一枚圆角小徽章写 The #1 Smart Handwritten Mail Platform;下面三行大标题 “Real Handwritten Notes, Cards & Letters at Scale”,最后那个 Scale 要用红色和前面拉开;接一行加粗小标题 “Real pens. Real stamps. Triggered from your stack.”;再一段正文:“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.”;然后并排两个按钮,红色实心的 MAIL ME A FREE SAMPLE 和白底描边的 BOOK A DEMO;按钮下面一行三个灰色小字,Free sample mailed、No credit card、100% guarantee;再下面一行是两组评分,一组是 4.7 配 57 Google reviews,一组是 4.5 配 90 G2 reviews;最后是一行浅色的流程文字:You Trigger / Upload → We Write → We Stamp → We Mail → Track / Automate Follow Up。右半边是一张宽幅图片占位。\n\n首屏底下压着一条深藏青的数据条,里面五组数字用竖细线隔开,横着平铺:99%(Open rate)、300%(Higher response vs. print)、10,000+(Businesses served)、8(yrs In business)、220+(Handwriting robots)。\n\n再往下是产品区,居中小徽章 Two Products. One Platform.,标题 “Two Types of Automated Handwritten Cards”,Cards 用红色;标题下一句说明 “Both are written with real ballpoint pens by 220+ handwriting robots and trigger from your CRM, API, or Zapier workflows. No minimums, no contracts.”。并排两张白卡:左卡顶部图位,标题 Handwritten Postcards,右上角红色 $0.69 加一行小字 per card,简介 “A full-color branded front with a real ballpoint handwritten message on the back. High-impact, low cost, impossible to ignore.”,四条勾选点:Full-color front — your artwork or ours / Real ballpoint handwritten back / Postal delivery tracking included / Trackable QR code on every mailer,底部一行灰色小标签 E-COMMERCE · REAL ESTATE · RETAIL · LEAD GEN,再一个红色按钮 REQUEST FREE SAMPLES。右卡同结构,顶部也有图位:Handwritten Note Cards,红色 $0.89 per card,简介 “Folded cards with a real pen-written message inside — indistinguishable from hand-written. The premium personal touch.”,四条勾选点:Folded card format — premium feel / Handwritten envelope addressing / Real stamp, stuffed and mailed for you / Custom cover image or blank card,小标签 B2B SALES · INSURANCE · PROFESSIONAL SERVICES,同样的红色按钮。\n\n接着是六个功能板块,参考图里是一左一右交替摆的,每块都有一枚小徽章、一个末尾单词标红的标题、一段说明、三到四条勾选点和一张图位,徽章和标题要一一对上: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.。说明和勾选点你按标题意思写得专业些就行。\n\n再下面是一块视频区,居中徽章 See It In Action、标题 “Watch Real Pens Write Your Mail”(Mail 标红)、一句说明,下面并排两个深灰视频占位框,再下面一个红色小按钮 See More on YouTube。\n\n最后一大块是活动模板区,标题 “Automate Campaigns Like These”(These 标红),下面是卡片网格,每张卡片是一个模板:卡名、Trigger 一行、Message 一行(写一句像样的手写文案就行)、Goal 一行,卡底一个 “Build this campaign →” 链接。运营那边发来的清单比较乱,我原样贴过来,一共 42 个,都得上:\n电商这块有十个——Abandoned Cart Nudge(购物车超 24 小时未结算 / 找回订单)、Post-Purchase Thank-You(订单发货 / 提升复购)、First Order Welcome(首单完成 / 建立好感)、VIP Buyer Gift(年消费破万 / 维系大客)、Subscription Renewal Nudge(订阅到期前 14 天 / 续订)、Review Request(签收后 7 天 / 拿评价)、Win-Back Campaign(90 天未购 / 唤醒沉睡客)、Holiday Gift Card Drop(节前批量 / 拉动节日单)、Back-in-Stock Alert(缺货商品补货 / 转化等待名单)、Loyalty Tier Upgrade(会员升级 / 强化忠诚)。\n销售九个——After-Demo Sales Follow-Up(演示结束 / 提高回复与成单)、Trade Show Follow-Up(展会扫码留资 / 把线索接住)、Webinar Attendee Follow-Up(直播看完 / 转成商机)、Cold Prospect Opener(进入目标名单 / 破冰)、Closed-Won Thank-You(合同签署 / 开个好头)、Closed-Lost Re-Engage(输单 60 天后 / 二次机会)、Proposal Sent Nudge(报价发出 5 天无回 / 推进)、Referral Request(成交满意客户 / 拿转介绍)、Enterprise Account Opener(大客户列入 ABM / 打进决策层)。\n客户成功八个——New Customer Thank-You(首次开通 / 提升留存)、Onboarding Kickoff(启动会排定 / 顺利上手)、Quarterly Check-In(每季度首日 / 保持关系)、NPS Promoter Thank-You(打了 9-10 分 / 变成推荐人)、NPS Detractor Save(打了 0-6 分 / 挽回)、Renewal Reminder(到期前 30 天 / 提高续约率)、Churn Save Offer(提交退订 / 留住客户)、Support Hero Apology(重大故障后 / 修复信任)。\n房产七个——Real Estate Seller Outreach(新房源挂牌 / 拿委托)、Just Listed Neighborhood Drop(周边新挂牌 / 拓展社区)、Open House Thank-You(看房登记 / 促成出价)、Closing Day Congrats(过户完成 / 口碑)、Home Anniversary(购房满一年 / 长期关系)、Expired Listing Outreach(房源过期下架 / 重新签约)、Buyer Referral Thank-You(买家转介绍 / 鼓励再介绍)。\n生命周期这组八个——Birthday & Anniversary(生日或纪念日 / 忠诚度)、Work Anniversary(入职周年 / 员工关怀)、Donor Thank-You(捐赠到账 / 提高复捐)、New Baby Congrats(客户报喜 / 情感连接)、Holiday Greeting(年末节日 / 年度触达)、Welcome to the Community(注册社区 / 激活)、Milestone Reached(使用里程碑 / 正反馈)、Re-Activation Anniversary(回归一周年 / 稳固)。\n\n页面最底下还要有一条始终贴在视口底部的深藏青长条,左边写 “Real handwritten mail at scale — try it free.”,右边两个按钮 BOOK A DEMO(描边)和 MAIL ME A FREE SAMPLE(红色实心),滚到哪儿它都在。"
24
  },
25
  {
26
- "operator": "重构布局",
27
- "request": "上线内测反馈来了,模板那块 42 张卡一路铺下去,用户根本找不到自己行业的那几张。重新排一下:模板区改成左右两栏,左边一条分类栏,最上面是 All,下面依次是 E-commerce、Sales、Customer Success、Real Estate、Lifecycle;右边是卡片网格,宽屏时每行放三张。分类栏每一项名字后面都要挂上该分类的条数,All 挂总数——这个数字是给销售看的,必须和实际卡片对得上,别手写死一个糊弄事。这一步先不做点击效果,把版式和数字摆对就行,卡片内容和顺序一张都不能少、不能乱。\n\n另外六个功能板块左一块右一块交替着看久了眼晕,统一成同一种排法(比如都图在左、文字在右),间距节奏保持一致;但上一版那个小徽章和标题末尾单词标红的调性是我们的品牌资产,别给我改没了。\n\n顶部菜单里再加一个 Campaigns 入口,点一下页面能滑到模板区。其余地方(首屏、数据条、两张产品卡、视频区、底部常驻条)保持上一版的样子别动。"
28
  },
29
  {
30
- "operator": "删除区块",
31
- "request": "法务和市场那边各砍一刀:\n\n一、“Watch Real Pens Write Your Mail” 那整块视频区拿掉,徽章、标题、两个视频框、See More on YouTube 按钮,一个都不留。\n\n二、深藏青数据条里的 “8 / yrs In business” 这一组要删——投资人觉得写年份反而显得我们太年轻。删完剩下的四组要重新把整条撑满、间距均匀,不许留一块空当或者挤到一边去。\n\n三、首屏的评分那行只保留 Google 那一组(4.7 / 57 Google reviews),G2 的授权到期了,4.5 和 90 G2 reviews 都得下掉,首屏其他东西一个都别碰。\n\n删干净就行,别留指向已经不存在的视频区的入口或锚点,也别把刚重构好的模板区和底部那条常驻条弄坏了。"
32
  },
33
  {
34
- "operator": "交互化",
35
- "request": "最后一步,把两个地方做活。\n\n模板区:左边分类点一下就只显示该分类的卡片,默认选中 All;分类栏上方加一个搜索框,按模板名字模糊匹配、不分大小写;卡片网格改成翻页,每页最多 9 张,下面给页码,翻页的时候只有卡片换,页面别跳来跳去、其他区块也别跟着位移。切分类或者改搜索词以后,一律回到第一页——别让用户停在一个空白的第 N 页上。什么都没匹配上的时候给一句 “没有匹配的模板” 的空态提示,这时候页码控件就别显示了。\n\n每张卡片底部加一个 “加入我的方案” 的按钮,点了变成已加入的样子,再点一次就取消;顶部菜单右边挂一个“我的方案”的计数,加了几张就是几,重复点同一张不会重复计数。已经加入的卡片就算被筛选、搜索或者翻页暂时藏起来,它的已加入状态和顶栏那个计数都要照样留着;藏起来这段时间这些卡片当然不会出现在页面上,也就没法被再点一次。计数要让人一眼看见,不过顶栏整体还是上一版那个干净调性,别为了显眼另起一套新颜色。\n\n两张产品卡:各加一个下单数量输入框,默认 100 张,旁边实时显示这一单的估价。单价还是明信片 $0.69、折卡 $0.89,一单满 500 张我们给整单打 85 折,算出来的零头抹到分(多出来的分直接抹掉,不要四舍五入)。数量改一下价格就跟着变,不用点任何确认按钮。"
36
  }
37
  ],
38
  "checklist": [
39
  {
40
  "id": "shell.chrome",
41
  "m": 1,
42
- "dimension": "视觉",
43
  "w": 1.0,
44
- "description": "顶栏白底,左侧手写体 Simplynoted 标志,中部按 Business、Integrations、Pricing、About 顺序排四个菜单项,最右依次是朴素的 Login 文字链与红色实心 REQUEST A SAMPLE 按钮;同时把页面滚到中部和底部,视口底部始终可见深藏青长条,左侧文案为 Real handwritten mail at scale — try it free.,右侧含描边 BOOK A DEMO 与红色实心 MAIL ME A FREE SAMPLE 两个按钮。"
45
  },
46
  {
47
  "id": "hero.left",
48
  "m": 1,
49
- "dimension": "视觉",
50
  "w": 1.5,
51
- "description": "首屏左栏自上而下依次为:徽章 The #1 Smart Handwritten Mail Platform、分三行的大标题 Real Handwritten Notes, Cards & Letters at Scale(Scale 为红色且与前文深色明显不同)、加粗小标题 Real pens. Real stamps. Triggered from your stack.、正文段、并排的红色实心 MAIL ME A FREE SAMPLE 与白底描边 BOOK A DEMO、一行三个灰色小字 Free sample mailed / No credit card / 100% guarantee、评分行同时存在 4.7 配 57 Google reviews 与 4.5 配 90 G2 reviews 两组、流程行五步 You Trigger / Upload → We Write → We Stamp → We Mail → Track / Automate Follow Up;右栏为宽幅图片占位。"
52
  },
53
  {
54
  "id": "hero.stats5",
55
  "m": 1,
56
- "dimension": "视觉",
57
  "w": 1.0,
58
- "description": "首屏下方深藏青数据条横向一行显示恰好 5 组数据,数字依次为 99%、300%、10,000+、8、220+,对应说明为 Open rate、Higher response vs. print、Businesses served、yrs In business、Handwriting robots,组间有竖向分隔线。"
59
  },
60
  {
61
  "id": "product.section",
62
  "m": 1,
63
- "dimension": "功能",
64
  "w": 1.5,
65
- "description": "产品区顶部居中徽章为 Two Products. One Platform.,区块标题为 Two Types of Automated Handwritten Cards 且其中 Cards 为红色,标题下方存在含 “220+ handwriting robots” 与 “No minimums, no contracts.” 的说明句;其下并排两张白卡,标题与价格精确为 Handwritten Postcards / $0.69 与 Handwritten Note Cards / $0.89,价格为红色并带 per card 小字,两卡顶部各有一块灰底图片占位,每卡各含 4 条勾选特性、一行灰色行业小标签与一枚红色 REQUEST FREE SAMPLES 按钮。"
66
  },
67
  {
68
  "id": "features.six",
69
  "m": 1,
70
- "dimension": "覆盖",
71
  "w": 1.5,
72
- "description": "功能区恰有 6 个板块,标题与徽章一一对应: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.;每块均含说明文字、3 或 4 条勾选点与一张图片占位,标题末尾单词为红色。"
73
  },
74
  {
75
  "id": "video.campaign42",
76
  "m": 1,
77
- "dimension": "覆盖",
78
  "w": 1.5,
79
- "description": "页面末段先出现视频区:居中徽章 See It In Action、标题 Watch Real Pens Write Your Mail(末词 Mail 红色)、并排两个深灰视频占位框、红色小按钮 See More on YouTube;其下为活动模板区,标题 Automate Campaigns Like These(These 标红),渲染的模板卡片总数恰为 42 张,每张含 Trigger、Message、Goal 三行与 Build this campaign 链接,且能找到 Win-Back Campaign、After-Demo Sales Follow-Up、Home Anniversary 这三张卡。"
80
  },
81
  {
82
  "id": "layout.twocol",
83
  "m": 2,
84
- "dimension": "视觉",
85
  "w": 1.5,
86
- "description": "模板区变为左右两栏:左栏为竖排分类栏,自上而下为 All、E-commerce、Sales、Customer Success、Real Estate、Lifecycle 六项;右栏为卡片网格,浏览器宽度 ≥1200px 时每行显示 3 张卡片。"
87
  },
88
  {
89
  "id": "layout.counts",
90
  "m": 2,
91
- "dimension": "功能",
92
  "w": 1.5,
93
- "description": "分类栏每项名称后显示条数,精确为 All 42、E-commerce 10、Sales 9、Customer Success 8、Real Estate 7、Lifecycle 8,且五个分类数字之和与右栏实际卡片总数 42 一致。"
94
  },
95
  {
96
  "id": "layout.features",
97
  "m": 2,
98
- "dimension": "视觉",
99
  "w": 1.0,
100
- "description": "六个功能板块不再左右交替,全部采用同一种图文方位(统一图左文右或统一图右文左),块间间距一致;六块的徽章文案与标题末词标红特征全部保留(Intelligent Mail® Barcode、Attribution on every card、Built in minutes、Built for your stack、Always-on lifecycle mail、No list? No problem. 六枚徽章仍可见)。"
101
  },
102
  {
103
  "id": "layout.anchor",
104
  "m": 2,
105
- "dimension": "交互",
106
  "w": 1.0,
107
- "description": "顶部菜单新增 Campaigns 项,点击后页面滚动使 Automate Campaigns Like These 标题进入视口,且滚动后顶栏与底部常驻条仍正常显示。"
108
  },
109
  {
110
  "id": "layout.regression",
111
  "m": 2,
112
- "dimension": "功能",
113
  "w": 1.0,
114
- "description": "重构后首屏三行大标题与两个 CTA、两组评分、深藏青五组数据(含 8 / yrs In business)、产品区徽章与 $0.69/$0.89 两卡、视频区四个元素、底部常驻条文案与按钮均与需求1一致,42 张模板卡的文案与相对顺序未改变。"
115
  },
116
  {
117
  "id": "del.video",
118
  "m": 3,
119
- "dimension": "覆盖",
120
  "w": 1.0,
121
- "description": "全页任意滚动位置都找不到 See It In Action 徽章、Watch Real Pens Write Your Mail 标题、两个视频占位框与 See More on YouTube 按钮,且原视频区位置未留下大段空白断层,上下相邻区块自然衔接。"
122
  },
123
  {
124
  "id": "del.stats4",
125
  "m": 3,
126
- "dimension": "视觉",
127
  "w": 1.5,
128
- "description": "深藏青数据条内恰剩 4 组,数字依次为 99%、300%、10,000+、220+,条内不再存在 8 与 yrs In business 这一组,全页也不再出现 yrs In business 文本;4 组在条内等间距撑满原有宽度,右侧不留空缺、内容不偏��一侧。"
129
  },
130
  {
131
  "id": "del.rating",
132
  "m": 3,
133
- "dimension": "功能",
134
  "w": 1.0,
135
- "description": "首屏评分行只剩一组 4.7 / 57 Google reviews,4.5 与 90 G2 reviews 均已消失;同时首屏徽章、三行大标题(Scale 仍标红)、两个 CTA 按钮、三条灰色小字与流程行五步文字全部原样保留。"
136
  },
137
  {
138
  "id": "del.nolink",
139
  "m": 3,
140
- "dimension": "交互",
141
  "w": 1.0,
142
- "description": "页面中不存在指向已删视频区的任何入口、链接或锚点(顶部菜单、正文、底部条均无);点击 Campaigns 仍能滚动到模板区,点击其余菜单项不产生控制台报错、不跳到空白页。"
143
  },
144
  {
145
  "id": "del.gridintact",
146
  "m": 3,
147
- "dimension": "功能",
148
  "w": 1.0,
149
- "description": "删除操作后模板区仍为左右两栏、卡片总数仍为 42、分类计数仍为 All 42 与 10/9/8/7/8,底部常驻条依旧固定在视口底部且按钮文案不变。"
150
  },
151
  {
152
  "id": "act.filterpage",
153
  "m": 4,
154
- "dimension": "功能",
155
  "w": 1.5,
156
- "description": "搜索框位于分类栏上方;默认选中 All 时第一页显示 9 张卡、页码共 5 页(末页 6 张);点击 E-commerce 后第 1 页 9 张、第 2 页 1 张、共 2 页;点击 Customer Success 后显示 8 张且页码只有 1 页;点击页码换页时页面滚动位置不变,模板区以外的区块(顶栏、首屏、产品卡、底部条)无位移。"
157
  },
158
  {
159
  "id": "act.search",
160
  "m": 4,
161
- "dimension": "功能",
162
  "w": 1.5,
163
- "description": "在 All 下搜索框输入 thank(大小写任意)后结果恰为 7 张卡片、只有 1 页;把搜索词改为 zzz 时显示“没有匹配的模板”空态且页码控件不再显示;清空搜索框后恢复 42 张与 5 页。"
164
  },
165
  {
166
  "id": "act.reset",
167
  "m": 4,
168
- "dimension": "交互",
169
  "w": 1.0,
170
- "description": "先选 E-commerce 并翻到第 2 页,再点击 Sales,列表自动回到第 1 页并显示 9 张 Sales 卡片(不停留在第 2 页、不出现空白页);随后在搜索框输入 referral 同样自动回到第 1 页。"
171
  },
172
  {
173
  "id": "act.badge",
174
  "m": 4,
175
- "dimension": "交互",
176
  "w": 1.5,
177
- "description": "点击某张卡片的“加入我的方案”,该按钮切换为已加入的样式且顶栏“我的方案”计数由 0 变 1;对同一张卡连点 3 次以上计数不超过 1;再点一次已加入按钮取消,计数回到 0。该计数沿用页面既有的红/藏青配色体系,未引入第三种新的强调色。"
178
  },
179
  {
180
  "id": "act.crossstate",
181
  "m": 4,
182
- "dimension": "功能",
183
  "w": 1.5,
184
- "description": "在 E-commerce 下加入 3 张卡片(计数显示 3),依次切到 Real Estate、搜索 zzz 触发空态、再清空搜索并切回 E-commerce:全过程顶栏计数始终为 3;被隐藏期间这 3 张卡片不出现在页面上、无法被再次点击加入;切回后它们仍显示为已加入态。"
185
  },
186
  {
187
  "id": "act.quote",
188
  "m": 4,
189
- "dimension": "功能",
190
  "w": 1.5,
191
- "description": "产品卡数量框默认 100:明信片显示 $69.00;改为 499 显示 $344.31(不打折);改为 500 显示 $293.25;改为 505 显示 $296.18(零头抹掉而非四舍五入);折卡数量改为 800 显示 $605.20。数值随输入即时更新,无需点击任何确认按钮。"
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": "我们要上线一个社区到店团购的站点,名字叫「巷口生活」,先把首页整出来。\n\n顶上是品牌栏,左边写品牌名「巷口生活」,旁边跟一句标语「下楼就能用的好价」。品牌栏下面来一条商圈概览,把我们覆盖的四个商圈——城南、湖滨、老街、高新——一个个列出来,每个商圈后面跟上该商圈现在有多少个套餐(数字你自己按底下的清单数,别拍脑袋写)。\n\n主体是套餐卡片墙,一张卡片一个团购套餐,卡片上要能看见:套餐名、门店名、所属商圈、分类标签、被划掉的原价、显眼的现价、一个折扣标签、已售份数、评分。折扣标签的算法很土:现价除以原价再乘十,留一位小数四舍五入,比如原价 60 卖 25 就是「4.2折」,原价 30 卖 15 就是「5.0折」。页脚写一行「巷口生活 · 社区到店团购 | 客服 400-800-1234」。\n\n下面是运营同事甩过来的清单,先照着做,卡片墙里的先后顺序就按这个来,别自作主张重排:\n老街的阿婆手工烧饼铺,美食,套餐叫「双人烧饼豆浆套餐」,原价28卖19,卖了312份,评分4.7;老街陈记牛杂面,美食,「招牌牛杂面2碗」,原价46卖29,588份,4.5分;城南柒号咖啡,美食,「手冲咖啡+可颂」,原价68卖39,176份,4.8分;城南好剪手快剪,美发,「洗剪吹单人券」,原价60卖25,903份,4.3分;湖滨造型家Hair Salon,美发,「染发+护理」,原价880卖499,64份,4.6分;湖滨松涛足道,按摩,「足疗60分钟」,原价158卖88,421份,4.4分;高新沐时SPA,按摩,「全身推拿90分钟」,原价398卖268,87份,4.9分;高新小恐龙亲子乐园,亲子,「儿童畅玩2小时」,原价120卖59,655份,4.2分;城南童画美术,亲子,「少儿绘画体验课」,原价200卖99,130份,4.6分;湖滨铁馆健身,健身,「月卡体验」,原价399卖199,241份,4.1分;高新燃点私教,健身,「私教3节」,原价900卖599,38份,4.8分;老街巷子口理发店,美发,「老师傅剃头券」,原价30卖15,1024份,4.9分。\n\n除了上面这十二个,还有一批标品套餐,运营懒得起名,就叫「邻里优选套餐 A01」这样一路排到「邻里优选套餐 A32」,门店名统一写「邻里优选自营店」,它们的信息按编号推:商圈从 A01 开始按 城南、湖滨、老街、高新 循环着分;分类从 A01 开始按 美食、美发、按摩、亲子、健身 循环着分;原价就是编号数字乘十再加五十块;现价按七折算(刚好都是整数,不用纠结零头);已售就是编号数字乘七;评分看编号个位数,个位是几就是 4.几,个位是 0 的算 4.0。这批统一排在前面十二个的后面,A01 到 A32 按编号顺序来。"
23
  },
24
  {
25
- "operator": "状态化",
26
- "request": "光铺一墙卡片用户根本找不着东西,得能挑。\n\n卡片墙上方给一排分类按钮:全部、美食、美发、按摩、亲子、健身;再给一排商圈按钮:全部、城南、湖滨、老街、高新;两排能同时生效。旁边再放一个排序选择,选项是「综合」(就是清单原来的顺序,默认用它)、「销量从高到低」、「现价从低到高」、「最划算优先」(折扣越低排越前)。另外加一个「只看 4.5 分及以上」的开关。\n\n筛选区旁边要有一行计数,实时告诉用户现在「共 N 个套餐」,数字必须跟下面真实展示的条数对得上。\n\n卡片墙每页只放 12 张,下面给个翻页,能看到当前第几页、总共几页;结果不够一页的时候翻页器里就别冒出第 2 页来。注意一点:用户改了任何筛选条件或者换了排序方式之后,都得从第一页重新看,别把人晾在一个空页面上。\n\n要是某个条件组合下一个套餐都没有,别留一片空白,给句人话「这个组合下暂时没有套餐,换个条件试试」,再配个「清空筛选」的按钮,点了之后所有条件、排序、开关都回到最初的样子,套餐全都回来。"
27
  },
28
  {
29
- "operator": "新增区块",
30
- "request": "接下来要能真下单了。\n\n每张卡片上加个「抢购」按钮,点了就把这份套餐放进购物车。顶部品牌栏右边放个购物车入口,上面挂个角标显示购物车里一共几份(是份数总和,不是几种)。点购物车入口能把购物车面板拉出来看。\n\n购物车面板里每行显示套餐名、现价、份数,份数能加能减。有两条规矩:同一个套餐每单最多买 3 份,到顶之后不管是卡片上的抢购按钮还是面板里的加号,都不能再往上加,并且都得给用户一句「每单同款限购 3 份」;份数减到 0 这行就直接从购物车里拿掉。购物车空了的时候面板里写「购物车还是空的,先去逛逛吧」。\n\n金额这块要算清楚:先给一个小计(每行现价乘份数再加起来);然后是平台券,满 200 减 30、满 500 减 80、满 1000 减 150,只享受够得着的最高那一档;实付就是小计减掉券;最后再来一行「已为你省下 X 元」,X 是这些套餐的原价合计减掉实付。\n\n结算走三步:购物车面板里点「去结算」进到确认环节,这一步要让用户填手机号、选到店时间,两样都得摆在那儿;手机号必须是 11 位数字,不合格「提交订单」就按不了;提交成功后给一个下单成功的结果,把订单号和实付金额显示出来,同时购物车清空、角标归零。\n\n还有,购物车是跟着人走的,用户在上面怎么筛怎么翻页,都不该影响购物车里已经放进去的东西。已经加过的套餐,卡片上要能看出来已经选了几份。"
31
  },
32
  {
33
- "operator": "交互化",
34
- "request": "两个补充,都是用户催的。\n\n第一,晚上刷着刺眼,品牌栏里加个夜间模式开关,打开之后整站都得跟着暗下来——筛选区、卡片墙、翻页、购物车面板、结算确认和下单成功这些浮层,一个都不能漏,别出现一块白板卡在暗色里。关掉浏览器再回来,还得记得用户上次选的是哪种模式。设计那边有话:夜间别搞得花里胡哨,整体还是要克制;但产品这边也有话:抢购按钮和优惠金额必须一眼就看到。你自己拿捏个平衡,但两种模式下的风格得是一套东西,不能白天一个样夜里一个样。\n\n第二,加收藏。每张卡片角上放个心形,点一下收藏、再点一下取消。品牌栏里显示「收藏 (n)」,点它就切到「只看收藏」,这时候分类和商圈的筛选还得照样能叠加着用,计数也要跟着变;这个开关只管收藏,不会顺手把分类商圈条件给清了。收藏一个都没有的时候,在只看收藏下面写「还没有收藏任何套餐」。收藏归收藏,购物车归购物车,别互相串。"
35
  }
36
  ],
37
  "checklist": [
38
  {
39
  "id": "gen.brand.header",
40
  "m": 1,
41
- "dimension": "视觉",
42
  "w": 1.0,
43
- "description": "首屏顶部品牌栏同时出现品牌名「巷口生活」与标语「下楼就能用的好价」,页面底部出现「巷口生活 · 社区到店团购 | 客服 400-800-1234」这一整行文案。"
44
  },
45
  {
46
  "id": "gen.area.counts",
47
  "m": 1,
48
- "dimension": "功能",
49
  "w": 1.5,
50
- "description": "商圈概览条列出城南、湖滨、老街、高新四个商圈,且每个商圈后面显示的套餐数量均为 11(四者合计 44)。"
51
  },
52
  {
53
  "id": "gen.card.fields",
54
  "m": 1,
55
- "dimension": "视觉",
56
  "w": 1.0,
57
- "description": "「老师傅剃头券」卡片上同时可见门店名「巷子口理发店」、商圈「老街」、分类「美发」、带删除线的原价 30、现价 15、折扣标签「5.0折」、已售 1024、评分 4.9。"
58
  },
59
  {
60
  "id": "gen.rule.a32",
61
  "m": 1,
62
- "dimension": "功能",
63
  "w": 1.5,
64
- "description": "「邻里优选套餐 A32」卡片显示门店名「邻里优选自营店」、商圈高新、分类美发、原价 370、现价 259、折扣标签「7.0折」、已售 224、评分 4.2。"
65
  },
66
  {
67
  "id": "gen.rule.a13",
68
  "m": 1,
69
- "dimension": "功能",
70
  "w": 1.0,
71
- "description": "「邻里优选套餐 A13」卡片显示门店名「邻里优选自营店」、商圈城南、分类按摩、原价 180、现价 126、已售 91、评分 4.3。"
72
  },
73
  {
74
  "id": "gen.grid.layout",
75
  "m": 1,
76
- "dimension": "视觉",
77
  "w": 1.0,
78
- "description": "在 1280px 宽度下卡片以网格排列,每行至少 3 张且同行卡片高度对齐,原价为灰色删除线、现价为对比明显的强调色,页面无横向滚动条。"
79
  },
80
  {
81
  "id": "filter.default.paging",
82
  "m": 2,
83
- "dimension": "功能",
84
  "w": 1.5,
85
- "description": "初始进入(分类/商圈均为全部、排序为综合)时计数行显示「共 44 个套餐」,当前页恰好渲染 12 张卡片:第 1 张是「双人烧饼豆浆套餐」、第 12 张是「老师傅剃头券」;翻到第 2 页第 1 张是「邻里优选套餐 A01」;翻到第 4 页(末页)时恰好渲染 8 张卡片。"
86
  },
87
  {
88
  "id": "filter.combo.hair.gaoxin",
89
  "m": 2,
90
- "dimension": "功能",
91
  "w": 1.5,
92
- "description": "点击分类「美发」后计数变为 10;再点商圈「高新」后计数变为 2,且展示的两张卡片正是「邻里优选套餐 A12」与「邻里优选套餐 A32」。"
93
  },
94
  {
95
  "id": "filter.sort.price",
96
  "m": 2,
97
- "dimension": "功能",
98
  "w": 1.0,
99
- "description": "分类与商圈均为「全部」时把排序切到「现价从低到高」,第 1 页前三张依次是「老师傅剃头券」(15)、「双人烧饼豆浆套餐」(19)、「洗剪吹单人券」(25),计数仍为「共 44 个套餐」。"
100
  },
101
  {
102
  "id": "filter.sort.sales.discount",
103
  "m": 2,
104
- "dimension": "交互",
105
  "w": 1.0,
106
- "description": "分类选「美发」且排序为「销量从高到低」时前三张依次是「老师傅剃头券」(1024)、「洗剪吹单人券」(903)、「邻里优选套餐 A32」(224);保持分类「美发」把排序改为「最划算优先」后,前三张依次变为「洗剪吹单人券」(4.2折)、「老师傅剃头券」(5.0折)、「染发+护理」(5.7折)。"
107
  },
108
  {
109
  "id": "filter.page.reset",
110
  "m": 2,
111
- "dimension": "交互",
112
  "w": 1.5,
113
- "description": "先在默认条件下翻到第 3 页,点击分类「亲子」后列表立即回到第 1 页,计数为 8 且翻页器只有 1 页(不出现第 2 页);随后把分类切回「全部」并翻到第 2 页,仅把排序改为「现价从低到高」,列表立即回到第 1 页——两次操作都不会停留在超出范围的空页上。"
114
  },
115
  {
116
  "id": "filter.rating.empty.reset",
117
  "m": 2,
118
- "dimension": "功能",
119
  "w": 1.0,
120
- "description": "分类选「美食」并打开「只看 4.5 分及以上」后计数为 6 且列表中不出现任何 4.1 分套餐;保持开关开启,把条件改为分类「按摩」+商圈「城南」后计数为 0 并出现「这个组合下暂时没有套餐,换个条件试试」;点「清空筛选」后计数回到 44、分类与商圈均回到「全部」、评分开关关闭、排序回到「综合」。"
121
  },
122
  {
123
  "id": "cart.limit.badge",
124
  "m": 3,
125
- "dimension": "功能",
126
  "w": 1.5,
127
- "description": "对「老师傅剃头券」卡片连点抢购 4 次,购物车角标最终停在 3(不是 4),购物车面板中该行份数为 3、面板内加号处于不可用状态,且页面上出现「每单同款限购 3 份」的提示文案。"
128
  },
129
  {
130
  "id": "cart.card.qty",
131
  "m": 3,
132
- "dimension": "交互",
133
  "w": 1.0,
134
- "description": "对「老师傅剃头券」加购 2 份后,其卡片上出现表明已选 2 份的标识;切换分类到「美食」再切回、或翻到第 2 页再回第 1 页后,该卡片上的标识仍在且数字仍为 2。"
135
  },
136
  {
137
  "id": "cart.amount.tiers",
138
  "m": 3,
139
- "dimension": "功能",
140
  "w": 1.5,
141
- "description": "购物车为「老师傅剃头券」×3 +「足疗60分钟」×1 时显示小计 133、无券优惠、实付 133、已为你省下 115;再加入「全身推拿90分钟」×1 后为小计 401、优惠 30、实付 371、已省 275、角标 5;再加入「染发+护理」×1 后为小计 900、优惠 80(不是 30 也不是 150)、实付 820、已省 706、角标 6。"
142
  },
143
  {
144
  "id": "cart.remove.row",
145
  "m": 3,
146
- "dimension": "交互",
147
  "w": 1.0,
148
- "description": "在剃头券×3+足疗×1+全身推拿×1(实付 371)的状态下把「足疗60分钟」份数从 1 减到 0,该行从购物车消失,小计变为 313、优惠 30、实付 283、已省 205,角标变为 4。"
149
  },
150
  {
151
  "id": "cart.checkout.chain",
152
  "m": 3,
153
- "dimension": "交互",
154
  "w": 1.5,
155
- "description": "独立场景:先构建购物车为「老师傅剃头券」×3 +「足疗60分钟」×1 +「全身推拿90分钟」×1(角标 5、实付 371),点「去结算」后确认环节同时可见手机号输入项与到店时间选择项;手机号只填 10 位数字时「提交订单」不可点击,补满 11 位数字后可提交,结果页显示订单号与实付金额 371,随后购物车角标归 0、再次打开购物车显示「购物车还是空的,先去逛逛吧」。"
156
  },
157
  {
158
  "id": "cart.filter.isolation",
159
  "m": 3,
160
- "dimension": "功能",
161
  "w": 1.5,
162
- "description": "独立场景:重新构建购物车为「老师傅剃头券」×3 +「足疗60分钟」×1 +「全身推拿90分钟」×1(三行共 5 份、实付 371),把分类切到「亲子」(计数 8、仅 1 页)使已加购套餐全部被筛掉时,角标仍为 5、购物车仍是这三行且实付仍为 371;再把分类切回「全部」并翻到第 2 页,角标与购物车内容依旧不变。"
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": "依次收藏 3 张卡片后品牌栏显示「收藏 (3)」而购物车角标数字不变;再次点击其中一张的心形后显示「收藏 (2)」,该卡片心形回到未收藏样式,购物车内容与角标仍不变。"
184
  },
185
  {
186
  "id": "fav.filter.combo",
187
  "m": 4,
188
- "dimension": "交互",
189
  "w": 1.5,
190
- "description": "收藏「老师傅剃头券」「足疗60分钟」「邻里优选套餐 A32」后开启「只看收藏」,计数显示 3;再点分类「美发」,计数变为 2 且仅剩剃头券与 A32 两张卡片。"
191
  },
192
  {
193
  "id": "fav.empty.state",
194
  "m": 4,
195
- "dimension": "功能",
196
  "w": 1.0,
197
- "description": "独立场景:分类与商圈均为「全部」时先收藏任意 2 张卡片,开启「只看收藏」后逐一取消这 2 个收藏,页面出现「还没有收藏任何套餐」且计数为 0;关闭「只看收藏」(分类仍保持「全部」)后计数恢复「共 44 个套餐」。"
198
  },
199
  {
200
  "id": "theme.state.preserve",
201
  "m": 4,
202
- "dimension": "功能",
203
  "w": 1.0,
204
- "description": "在已筛选商圈「湖滨」(计数 11)且购物车有 2 份的状态下切换夜间模式,计数仍为 11、当前页卡片集合不变、购物车角标仍为 2;切换后分类按钮与翻页仍可正常点击并立即生效。"
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": "咱们这版首页要往「行动学院」方向挪一挪:首页中间那块红底的 RECENTE ACTIES(四张行动卡)整体改成秋季课表目录,红底、大写粗标题这套糙劲儿别丢。数据是运营甩过来的,乱,我口述一下:一共 42 门课,编号 AF-01 一路排到 AF-42,中间不空号不跳号。方向就六个,顺序是 行动法律、非暴力沟通、影像纪录、组织动员、气候科普、数字安全,每个方向连着占 7 门(AF-01~AF-07 是行动法律,往后依次类推)。每个方向内部这 7 门难度是死套路:头两门入门、中间三门进阶、最后两门大师。价钱按难度一口价:入门 45 欧、进阶 75 欧、大师 120 欧;课时也是固定的:入门 6 小时、进阶 12 小时、大师 20 小时。名额的事每张卡上都得写清楚:原则上每门 12 个名额,没招满的就在卡上标出「剩 12」这种剩余名额数字;但每个方向排在最后的那一门(AF-07、AF-14 那种)已经招满了,剩 0,卡上要明明白白写「已满」。课名你按方向自己起,能看出是第几期就行,比如「行动法律工作坊 · 第 1 期」。目录上面再加一条小统计,把一共多少门、加起来多少课时、还能报几门写清楚,数字得跟下面的卡对得上。首页其它部分这一步先别动。"
29
  },
30
  {
31
- "operator": "删除区块",
32
- "request": "首页太长了,砍三块:那张世界地图连同它下面「ondersteunt acties over de hele wereld」的大标题整块去掉;十二宫格的主题图墙也去掉,课表里已经有方向了,重复;页面底部那个红黑撞色的捐款大横幅也拿掉。删干净点,别留半截空壳或者那种描边的幽灵大字。顺带把顶部导航里原来指向主题墙的那个入口改成指向课表目录,点了要能滚到课表那儿,别留死链;导航其它入口和右上角那颗 DONEER NU 按钮保持原样。删完上下要顺畅接上,别留一大片莫名的空白。"
33
  },
34
  {
35
- "operator": "状态化",
36
- "request": "课表得能挑课了。左边给方向筛选(六个方向外加一个「全部」),再给一组级别筛选(入门 / 进阶 / 大师 / 全部),再给个排序(默认按编号,另外要有价格从低到高、价格从高到低、课时从多到少)。卡太多,一页就放 12 门,剩下的翻页;换了任何筛选或排序都从第一页重新看起,别让人停在一个空页上。每张卡上加「加入学习清单」:已满的课不能加,点也没反应;同一门课重复点只能算一门,别让数字翻倍。目录上方显示一行学习清单状态:已选几门、合计多少欧。顶上那条总统计说的是整个课表的家底,不管怎么筛怎么翻都不该变。"
37
  },
38
  {
39
- "operator": "修复",
40
- "request": "客服转来一个吐槽:在页脚那个邮件订阅框里,有人先填了一个邮箱点了订阅,马上发现写错了,改成新邮箱又点了一次;结果等了一会儿,屏幕上那句确认里显示的还是他第一次写错的旧邮箱(中间好像还闪过一下新的)。多试几次都一样,最后总是停在最早那次填的地址上。这个太丢人了,麻烦查一下修好,改完要保证只点一次订阅的正常情况没被搞坏,页脚和「Blijf op de hoogte」那两处表单也别互相串。"
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": "课表目录区包含 42 门课程卡,编号从 AF-01 到 AF-42 连续、无重复、无缺号(允许通过翻页或筛选逐页完整核对全部 42 张,不要求同屏可见)。"
54
  },
55
  {
56
  "id": "catalog.stats.exact",
57
  "m": 1,
58
- "dimension": "功能",
59
  "w": 1.5,
60
- "description": "目录上方的统计行精确显示:课程 42 门、总课时 528 小时、可报名 36 门(三个数字均能在页面文字中读到)。"
61
  },
62
  {
63
  "id": "catalog.level.price.map",
64
  "m": 1,
65
- "dimension": "功能",
66
  "w": 1.0,
67
- "description": "级别/价格/课时严格对应:抽验 AF-03 显示进阶、75 欧、12 小时;AF-14 显示大师、120 欧、20 小时;AF-36 显示入门、45 欧、6 小时。"
68
  },
69
  {
70
  "id": "catalog.full.six",
71
  "m": 1,
72
- "dimension": "功能",
73
  "w": 1.0,
74
- "description": "名额标注精确:恰好 AF-07、AF-14、AF-21、AF-28、AF-35、AF-42 这 6 张卡标注「已满」(或剩 0),其余 36 张卡均标出剩余名额 12。"
75
  },
76
  {
77
  "id": "catalog.style.keep",
78
  "m": 1,
79
- "dimension": "视觉",
80
  "w": 1.0,
81
- "description": "目录区仍为原红色背景(与 #fe3c3c 同色系)配大写粗体标题,且 Hero、Updates、页脚的原有文案与排版未被改动(页脚仍是 logo 加两列链接加订阅表单的四栏结构)。"
82
  },
83
  {
84
  "id": "trim.three.blocks.gone",
85
  "m": 2,
86
- "dimension": "覆盖",
87
  "w": 1.5,
88
- "description": "整页滚动后找不到世界地图图片及其大标题、12 宫格主题图墙、底部红黑捐款横幅中的任何一项,它们各自的描边幽灵大字也不再出现。"
89
  },
90
  {
91
  "id": "trim.nav.rewire",
92
  "m": 2,
93
- "dimension": "功能",
94
  "w": 1.5,
95
- "description": "头部仍保留原有的 5 个导航链接、EN 语言按钮与 DONEER NU 按钮;点击原指向主题墙的 wat we steunen 后页面滚动到课表目录(目录进入视口),不跳空锚点、无控制台报错。"
96
  },
97
  {
98
  "id": "trim.no.gap",
99
  "m": 2,
100
- "dimension": "视觉",
101
  "w": 1.0,
102
- "description": "删除后相邻区块直接衔接:课表目录与 Updates 区之间不存在高度超过 200px 的空白带,页面在 1280px 宽下无横向滚动条。"
103
  },
104
  {
105
  "id": "trim.keep.stats",
106
  "m": 2,
107
- "dimension": "功能",
108
  "w": 1.0,
109
- "description": "删除操作未波及课表:统计行仍为 42 门、528 小时、36 门可报名,课程卡总数仍为 42。"
110
  },
111
  {
112
  "id": "state.paging.exact",
113
  "m": 3,
114
- "dimension": "功能",
115
  "w": 1.5,
116
- "description": "默认视图每页 12 张,第 1 页恰为 AF-01 至 AF-12,总页数为 4,第 4 页只有 6 张(AF-37 至 AF-42)。"
117
  },
118
  {
119
  "id": "state.combo.diagonal",
120
  "m": 3,
121
- "dimension": "功能",
122
  "w": 1.5,
123
- "description": "方向选「影像纪录」且级别选「进阶」时列表恰好 3 门(AF-17、AF-18、AF-19),三张卡标价均为 75 欧;把级别切回「全部」后该方向恰好 7 门。"
124
  },
125
  {
126
  "id": "state.sort.all.four",
127
  "m": 3,
128
- "dimension": "功能",
129
  "w": 1.0,
130
- "description": "筛选为全部时四种排序均正确:「价格从高到低」第 1 页 12 张恰为全部大师课(AF-06、07、13、14、20、21、27、28、34、35、41、42,顺序不限)且第 2 页首张为 75 欧;「价格从低到高」第 1 页 12 张全部为 45 欧入门课;「课时从多到少」第 1 页 12 张课时均为 20 小时;默认排序第 1 页首张为 AF-01。"
131
  },
132
  {
133
  "id": "state.filter.reset.page",
134
  "m": 3,
135
- "dimension": "交互",
136
  "w": 1.0,
137
- "description": "先翻到第 3 页,再切换方向、级别或排序中的任意一项,列表立即回到第 1 页(页码指示为 1 且首张为该筛选下的第一门课)。"
138
  },
139
  {
140
  "id": "state.cart.exact.idempotent",
141
  "m": 3,
142
- "dimension": "交互",
143
  "w": 1.5,
144
- "description": "依次加入 AF-01、AF-17、AF-06 后,学习清单状态显示 3 门、合计 240 欧;随后连点 AF-01 的加入按钮 5 次,仍为 3 门、240 欧。"
145
  },
146
  {
147
  "id": "state.full.and.stats.coupling",
148
  "m": 3,
149
- "dimension": "功能",
150
  "w": 1.0,
151
- "description": "6 门已满课程的加入按钮不可用,点击后清单门数与合计金额分文不变;且无论怎样筛选、排序、翻页,顶部统计行始终为 42 门、528 小时、36 门可报名。"
152
  },
153
  {
154
  "id": "fix.single.submit",
155
  "m": 4,
156
- "dimension": "功能",
157
  "w": 1.5,
158
- "description": "在页脚订阅框输入 een@test.nl 并提交,1.5 秒内出现一条确认提示且提示文字中包含 een@test.nl,页面未发生刷新或跳转。"
159
  },
160
  {
161
  "id": "fix.race.latest.wins",
162
  "m": 4,
163
- "dimension": "功能",
164
  "w": 1.5,
165
- "description": "输入 oud@test.nl 提交后 0.3 秒内改为 nieuw@test.nl 再次提交,等待 3 秒后确认提示稳定显示 nieuw@test.nl,且此后不会再变回 oud@test.nl。"
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": "回归:在页脚表单提交后,Blijf op de hoogte 区那份订阅表单不出现确认提示,两处表单的邮箱输入框内容与勾选状态互不影响。"
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 宽下课表为左侧竖向筛选栏加右侧卡片网格的两栏结构,筛选与排序控件均位于左栏,右栏第 1 页 12 张排成每行 3 张共 4 行。"
194
  },
195
  {
196
  "id": "layout.cart.chain",
197
  "m": 5,
198
- "dimension": "交互",
199
  "w": 1.5,
200
- "description": "常驻清单入口显示当前数量;执行链路:筛选数字安全方向,加入 AF-36 与 AF-38,打开清单面板显示 2 条、每条都带课程名且单价分别为 45 欧(AF-36)与 75 欧(AF-38)、合计 120 欧;移除 AF-36 后剩 1 条、75 欧;一键清空后数量显示 0 并出现空态提示;关闭面板后目录仍停留在数字安全方向的 7 门。"
201
  },
202
  {
203
  "id": "layout.keep.state",
204
  "m": 5,
205
- "dimension": "功能",
206
  "w": 1.0,
207
- "description": "重构后分页仍为 4 页且第 4 页 6 张,统计行仍为 42 门、528 小时、36 门可报名,已满的 6 门仍不可加入。"
208
  },
209
  {
210
  "id": "layout.keep.deleted.header",
211
  "m": 5,
212
- "dimension": "功能",
213
  "w": 1.0,
214
- "description": "重构后地图块、主题图墙、捐款横幅仍不存在;头部仍保留原有的 5 个导航链接、EN 语言按钮与 DONEER NU 按钮,且 DONEER NU 仍是白底、约 3px 黑色直角边框加硬投影的原样式。"
215
  },
216
  {
217
  "id": "layout.style.consistency",
218
  "m": 5,
219
- "dimension": "视觉",
220
  "w": 1.0,
221
- "description": "清单入口在页面滚动到中部(课表区)与底部(页脚区)时均保持可见(固定或悬浮均可)并显示正确数量;该入口与展开面板采用与 DONEER NU、WORD OOK DONATEUR 一致的黑色粗描边、硬投影、直角、无渐变处理,全站按钮的圆角与描边处理保持同一套,不出现圆角渐变按钮。"
222
  },
223
  {
224
  "id": "layout.narrow.single",
225
  "m": 5,
226
- "dimension": "视觉",
227
  "w": 1.0,
228
- "description": "390px 窄屏下课表变为单栏:筛选区位于卡片上方、卡片每行 1 张,页面无横向滚动条,且常驻清单入口仍可见并显示正确数量。"
229
  }
230
  ],
231
  "inject": {
232
- "type": "异步竞态",
233
- "saboteur_prompt": "在 src/components/NewsletterForm.jsx 中把提交改造成带模拟网络延迟的异步流程,并植入一个「先发先覆盖」的竞态缺陷:handleSubmit 时把当前 email 存入一个局部变量,然后 setTimeout 模拟请求返回后再 setSent/setConfirmedEmail;关键在于让延迟时长与提交次序负相关(例如首次提交使用 1200ms,之后每次提交延迟递减到 400ms 左右,或对早提交的请求使用更长延迟),使得先发出的旧请求最后返回并覆盖新请求的结果——用户看到确认里先短暂出现新邮箱、最终稳定显示第一次输入的旧邮箱。不得使用请求序号/时间戳/AbortController 等任何竞态防护。要求:无控制台报错与警告;只改这一个组件文件;不改动其它组件、样式类名与页面结构;提交后仍正常阻止表单默认行为;不留任何注释或提示性变量名(避免出现 race/bug/stale 等词)。"
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": "我们内部要一个叫 PixelForge 的素材批处理工作台,先把壳子和数据摆出来。页面从上到下:最上面一条工具栏,左边写产品名「PixelForge 批处理工作台」,右边留出放操作按钮的位置;中间主区左右分开,左边是素材队列列表(文件名、格式、体积、分辨率都要看得见),右边是一块详情面板,没选东西时显示引导文案(像「从左边挑一个素材看看详情」),点中某一条就显示它的文件名、格式、体积、分辨率;最底下钉一条常驻状态条,一眼能看到队列里一共多少个、合计多少 MB、现在选中几个、选中的加起来多少 MB,MB 一律保留一位小数,初始状态是一个都没选。\n\n数据别乱编,运营那边给的规则是这样的:队列里一共 48 个素材,文件名从 asset_001 一路排到 asset_048(三位数补零)。格式是按 PNG、JPG、WEBP、GIF 的顺序轮着来的——第 1 个 PNG、第 2 个 JPG、第 3 个 WEBP、第 4 个 GIF,然后接着从 PNG 再轮,一直排完 48 个。体积用序号乘 0.7 再加 1.2 得出来的 MB 数,保留一位小数,所以第一个是 1.9 MB。分辨率分三档:序号能被 3 整除的是 3840×2160,除 3 余 1 的是 1920×1080,余 2 的是 1280×720。还有运营标了加急的——序号是 7 的倍数的那几个,条目上得能一眼看出来是加急,别的条目上不要有这个标记。"
22
  },
23
  {
24
- "operator": "状态化",
25
- "request": "光看不够用,得能挑。队列上方加一排格式筛选,PNG、JPG、WEBP、GIF 四个各自能开关、可以多选,一个都不选就是全都要;旁边再来个「只看加急」的开关,和格式筛选是叠加关系;还要个搜文件名的输入框,输进去的片段能对上名字就留下。筛选区里还得随时挂一个当前筛选结果的小结,告诉我这会儿筛出来几条、这几条加起来多少 MB(像「筛选结果 12 条 / 224.4 MB」这样,MB 还是一位小数),筛选条件一改它就得立刻跟着走。排序要支持按序号和按体积两种,升序降序都得有。列表一页放 10 条,底下能翻页,当前在第几页要看得见。\n\n选择这块:每条前面有勾选框,表头那个勾选框一按,就是把当前筛选出来的全部条目都选上(不是只选这一页)。有个坑别踩:筛选条件一变,原来选中的东西要是被筛没了,就不该再算在底下的统计里,也别偷偷记着——切回去也不要自动帮我恢复选中。筛选或搜索一改,页码回到第一页。要是筛得一条都不剩,列表区得给个明明白白的空态提示,别留个白板。"
26
  },
27
  {
28
- "operator": "状态化",
29
- "request": "工具栏右边那个导出按钮要真能用了,但一个都没选的时候它就该是灰的、点不动。选了东西点进去是个三步的导出向导,走到第几步要有指示。\n\n第一步挑导出格式和质量:格式就三个选项——保持原格式、统一 PNG、统一 JPG,这个选择只是记一笔、最后在确认页摘要里露个面,不参与任何体积和耗时的估算;质量给 100%、80%、60% 三档。第二步定尺寸(原尺寸 / 缩到一半)和要不要加水印,水印也只影响确认页摘要的呈现,不改估算数。第三步是确认页,把前两步选的都摆出来,再给我两个预估数:预估体积就拿选中素材的原始合计体积算,质量选多少就乘多少(80% 就乘 0.8);尺寸要是缩到一半,长宽都减半,那就再乘 0.25,最后保留一位小数。预估耗时按每个文件 1.5 秒打底,凡是 4K 的那几个每个再多加 2 秒,总秒数向上取整。\n\n向导里上一步下一步来回走,之前选的(格式、质量、尺寸、水印)一个都不能丢。点确认导出之后弹窗关掉,这批素材要打上「已导出」标记,选中状态清空、底下选中的数字归零,但队列总数和合计体积不能变;另外在明显的位置告诉我一共导出了多少个(像「已导出 12/48」这样),同一批再导一次这个数也不该重复往上涨。中途取消关掉向导的,就当没发生过,已导出标记不能出现,原来选的还得在。"
30
  },
31
  {
32
- "operator": "换肤",
33
- "request": "这工具白天用久了刺眼,工具栏上给个白天/夜间的切换,切到夜间就是一整套深色紧凑版:背景、面板、列表、输入框、按钮,连导出向导那个弹窗都得是深色系的,别出现一块白底突兀地戳在那儿,文字对比度得能看清;切回白天要能完全还原。行高再收一收,一屏多看几条,但每页还是 10 条不变,页数也不能因为换皮肤变了。\n\n有个分寸你自己拿捏:加急那个标记白天是要醒目的,但夜间深色下满屏高饱和色块很烧眼,我要的是克制、耐看——你怎么处理都行,但两种模式下加急的表达得是同一套逻辑,不能白天一个样夜间换成另一个东西,而且夜间也必须一眼能把加急的挑出来。换皮肤纯粹是外观的事:我筛的条件、选中的条目、翻到第几页、筛选结果小结和底下那些数字,一个都不许变。"
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": "队列共 48 条,文件名从 asset_001 连续排到 asset_048(三位补零);首条 asset_001 显示体积 1.9 MB,翻到最后可见 asset_048 显示 34.8 MB。"
47
  },
48
  {
49
  "id": "gen.format.cycle",
50
  "m": 1,
51
- "dimension": "功能",
52
  "w": 1.0,
53
- "description": "格式按 PNG/JPG/WEBP/GIF 循环:asset_001 为 PNG、asset_002 为 JPG、asset_003 为 WEBP、asset_004 为 GIF、asset_005 又为 PNG;全队列四种格式各 12 条。"
54
  },
55
  {
56
  "id": "gen.resolution.rule",
57
  "m": 1,
58
- "dimension": "功能",
59
  "w": 1.0,
60
- "description": "分辨率按序号除 3 的余数分档:asset_003 与 asset_012 显示 3840×2160,asset_004 显示 1920×1080,asset_005 显示 1280×720。"
61
  },
62
  {
63
  "id": "gen.statusbar.sum",
64
  "m": 1,
65
- "dimension": "覆盖",
66
  "w": 1.5,
67
- "description": "底部常驻状态条初始显示队列总数 48 与合计体积 880.8 MB,且已选数量为 0、已选体积为 0.0 MB。"
68
  },
69
  {
70
  "id": "gen.layout.urgent",
71
  "m": 1,
72
- "dimension": "视觉",
73
  "w": 1.0,
74
- "description": "页面呈顶部工具栏 + 左侧队列 + 右侧详情面板 + 底部状态条的四区布局,工具栏左侧显示文字「PixelForge 批处理工作台」;加急标记恰好只出现在 asset_007、asset_014、asset_021、asset_028、asset_035、asset_042 这 6 条上,其余条目无该标记。"
75
  },
76
  {
77
  "id": "gen.detail.bind",
78
  "m": 1,
79
- "dimension": "交互",
80
  "w": 1.0,
81
- "description": "未选中条目时右侧面板显示引导文案;点击 asset_012 后右侧同时显示文件名 asset_012、格式 GIF、体积 9.6 MB、分辨率 3840×2160 四项。"
82
  },
83
  {
84
  "id": "state.page.split",
85
  "m": 2,
86
- "dimension": "功能",
87
  "w": 1.5,
88
- "description": "无筛选时每页 10 条共 5 页,第 5 页只有 8 条且最后一条是 asset_048;页码指示与实际展示一致。"
89
  },
90
  {
91
  "id": "state.sort.both",
92
  "m": 2,
93
- "dimension": "功能",
94
  "w": 1.5,
95
- "description": "排序同时支持按序号与按体积且两个方向都可用:无筛选按序号升序时第 1 页首条为 asset_001,改为按序号降序时第 1 页首条为 asset_048、末条为 asset_039;只勾选 WEBP(结果 12 条)按体积升序时第 1 页首条为 asset_003(3.3 MB),改为体积降序后第 2 页恰好显示 asset_007、asset_003 两条且顺序如此。"
96
  },
97
  {
98
  "id": "state.search.combo",
99
  "m": 2,
100
- "dimension": "功能",
101
  "w": 1.0,
102
- "description": "搜索框输入「_01」后结果为 asset_010 至 asset_019 共 10 条;此时再叠加 WEBP 筛选,只剩 asset_011、asset_015、asset_019 共 3 条。"
103
  },
104
  {
105
  "id": "state.select.cross",
106
  "m": 2,
107
- "dimension": "交互",
108
  "w": 1.5,
109
- "description": "筛选 WEBP 后点表头全选,选中数为 12(跨页全选)、已选体积显示 224.4 MB;随后把筛选改成只勾 GIF,状态条已选数量回到 0、已选体积 0.0 MB,再切回 WEBP 也不会自动恢复选中。"
110
  },
111
  {
112
  "id": "state.filter.summary",
113
  "m": 2,
114
- "dimension": "覆盖",
115
  "w": 1.0,
116
- "description": "筛选区常驻展示当前筛选结果的条数与合计体积:无筛选时为 48 条 / 880.8 MB,只勾 WEBP 时变为 12 条 / 224.4 MB,只看加急打开时为 6 条 / 110.1 MB,二者叠加时为 2 条 / 31.8 MB(对应 asset_007、asset_035)。"
117
  },
118
  {
119
  "id": "state.empty.reset",
120
  "m": 2,
121
- "dimension": "交互",
122
  "w": 1.0,
123
- "description": "改动任一筛选或搜索后页码回到第 1 页;搜索一个匹配不到的词(如 zzz)时列表区出现空态提示而非空白,筛选结果小结显示 0 条 / 0.0 MB。"
124
  },
125
  {
126
  "id": "wiz.gate.disabled",
127
  "m": 3,
128
- "dimension": "交互",
129
  "w": 1.5,
130
- "description": "未选中任何素材时导出按钮为禁用态且点击无弹窗;选中至少 1 条后可进入向导,向导内有第 1/2/3 步的步骤指示。"
131
  },
132
  {
133
  "id": "wiz.estimate.exact",
134
  "m": 3,
135
- "dimension": "功能",
136
  "w": 1.5,
137
- "description": "选中 WEBP 全部 12 条(224.4 MB)后进入向导,质量选 80%、尺寸选缩到一半,第三步确认页预估体积显示 44.9 MB、预估耗时显示 26 秒。"
138
  },
139
  {
140
  "id": "wiz.options.summary",
141
  "m": 3,
142
- "dimension": "功能",
143
  "w": 1.0,
144
- "description": "第一步格式恰有「保持原格式 / 统一 PNG / 统一 JPG」三个可选项,第二步有可切换的水印开关;在上一条同样的 12 条 + 80% + 缩到一半基础上选「统一 JPG」并勾选水印,第三步摘要同时体现这两项选择,而预估体积仍为 44.9 MB、耗时仍为 26 秒。"
145
  },
146
  {
147
  "id": "wiz.step.keep",
148
  "m": 3,
149
- "dimension": "功能",
150
  "w": 1.0,
151
- "description": "同一批 12 条在第二步改为原尺寸后,第三步预估体积变为 179.5 MB 且耗时仍为 26 秒;从第三步连续退回到第一步,再逐步前进回第三步,格式、质量、尺寸、水印四项选择与上述两个预估数字均保持不变。"
152
  },
153
  {
154
  "id": "wiz.confirm.writeback",
155
  "m": 3,
156
- "dimension": "交互",
157
  "w": 1.5,
158
- "description": "点确认导出后向导关闭,那 12 条带上「已导出」标记,状态条已选数量归零而队列总数仍为 48、合计仍为 880.8 MB,并显示已导出 12/48;对同一批再走一次向导并确认,该计数仍为 12/48 不会累加成 24。"
159
  },
160
  {
161
  "id": "wiz.cancel.noop",
162
  "m": 3,
163
- "dimension": "交互",
164
  "w": 1.0,
165
- "description": "选中 12 条后进入向导再取消关闭,没有任何条目出现「已导出」标记,状态条仍为已选 12 个 / 224.4 MB。"
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": "在「WEBP 筛选 + 体积降序 + 第 2 页 + 全选 12 条」的状态下切换皮肤,切换后仍停在第 2 页并显示 asset_007、asset_003,筛选结果小结仍为 12 条 / 224.4 MB,状态条仍为已选 12 个 / 224.4 MB。"
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": "夜间紧凑版的列表行高明显小于白天版,但无筛选时每页仍为 10 条、总页数仍为 5 页。"
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": "筛选 WEBP 全选 12 条后执行移出队列,筛选区小结立刻变为 0 条 / 0.0 MB,状态条队列总数变为 36、合计体积变为 656.4 MB;清空筛选后分页变为 4 页且末页 6 条,被移除的条目不再出现。"
208
  },
209
  {
210
  "id": "bulk.undo.idem",
211
  "m": 5,
212
- "dimension": "交互",
213
  "w": 1.5,
214
- "description": "执行撤回后队列恢复为 48 条 / 880.8 MB;连续点击撤回两次不会出现重复条目,总数仍为 48 条。"
215
  },
216
  {
217
  "id": "bulk.urgent.toggle",
218
  "m": 5,
219
- "dimension": "功能",
220
  "w": 1.0,
221
- "description": "在详情面板把 asset_001 标为加急后,打开「只看加急」时筛选区小结显示 7 条 / 112.0 MB 且列表含 asset_001;再把它切回非加急,该小结恢复为 6 条 / 110.1 MB。"
222
  },
223
  {
224
  "id": "bulk.exported.recount",
225
  "m": 5,
226
- "dimension": "功能",
227
  "w": 1.0,
228
- "description": "先导出 WEBP 那 12 条(计数显示 12/48),再把这 12 条移出队列,已导出计数变为 0/36,不会出现分子大于队列总数的数字。"
229
  },
230
  {
231
  "id": "bulk.empty.state",
232
  "m": 5,
233
- "dimension": "交互",
234
  "w": 1.0,
235
- "description": "把全部素材移出后列表显示空态提示,状态条总数与体积均为 0(0 个 / 0.0 MB),导出按钮与表头全选均为禁用态;此时点撤回可把队列恢复回来。"
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": "上周版本上线后收到反馈:导航条上的 PRIMER 点了完全没反应,首屏左侧那个 PRIMER 按钮也一样,连 Learn 下拉里的 Why SEDA 点了页面都纹丝不动;但同一排的 Developers、Validators、Community 和 LITEPAPER 点了都能顺滑滑到各自的位置。请把 PRIMER 这三个入口都恢复成和其它入口一样的行为——平滑滚动并停在那块白色圆角卡片区(Secure / Fast / Permissionless)的顶部。顺带确认 Learn 菜单本身没被牵连:点一下能展开三条,点页面别处能收起来,反复开合不出毛病。别的地方不要动。另外先说明一下,我们后面所有验收都在 1440×900 的桌面窗口、100% 缩放下看,你调尺寸时以这个为准。"
29
  },
30
  {
31
- "operator": "删除区块",
32
- "request": "两块内容要下线。第一,首屏底部那排投资方展示整块撤掉——'Backed by:' 这行字和下面四个机构标(Uncorrelated、Distributed Global、coinbase、Reciprocal Ventures)全部不要了,法务不让再挂,相关的图形和文字一并清干净。第二,数字条里的 '+$22M / Raised' 这一项也一并去掉。撤完之后首屏不能留一大块黑洞:在 1440×900 的窗口下,首屏整体往上收紧,从现在的 1085px 收到 900px 以内,但也别压得比 780px 还矮,数字条顺势往上提。剩下的数字重新把整行均分,不要留下原来四格排版的空位。标题那三行、两个按钮和右边那段说明文字的相互关系保持原样,不要错位或被裁掉。"
33
  },
34
  {
35
- "operator": "重构布局",
36
- "request": "'为什么是 SEDA' 那五段(现在是一段配一张大图、上下交错铺了老长一截)太占地方了,用户滚半天都到不了下面。请把这块重排得紧凑些:五段排成两行,上面一行放 3 项、下面一行放 2 项,一屏左右就能扫完。1 到 5 的序号要留着并且跟各自的文案在一起,五段英文原文一个字都不许改,五张配图也都得保留、各用一次。在 1440×900 的窗口下,整块区域的总高度控制在 1400px 以内。风格还是那套黑底质感,别改得像换了个网站。"
37
  },
38
  {
39
- "operator": "数据化",
40
- "request": "首页要加一个资讯栏目,位置放在 'Our expanding network of ecosystems' 那块之前。内容组把这两年发过的稿子盘了一下,比较零散地给你:协议更新类最多,12 篇;生态合作 9 篇;研究报告 8 篇,都是长文;社区活动 11 篇;再加版本发布 8 篇。加起来 48 篇,别多也别少。标题和日期你按这个量自己排:日期统一落在 2024 年 1 月 8 号往后(含当天),一天最多一篇不要撞日期,标题也别重名;每篇标一个阅读时长,在 3 到 12 分钟之间。栏目顶部放一排分类按钮:全部,加上面那五类,每个按钮上要把该类的篇数标出来。旁边给两个排序方式:最新在前(默认)和阅读时长从长到短。列表一页放 9 条,下面要有上一页/下一页,还要让人看得出当前是第几页、一共几页(文案语言和写法你定),第一页时上一页不该还能用;换分类的时候别把用户丢在一个空页上。每篇卡片上再给个'稍后读'的标记入口,标记过的要一眼看得出来,栏目标题旁边显示已标记的篇数;一篇都没标的时候那儿要有句友好的提示文案,而不是空着。同一篇反复点应该是来回切换,不能越点越多。选中的分类和标记态要够醒目,但整体还是那套黑底质感,别整成花花绿绿的另一套风格。"
41
  },
42
  {
43
- "operator": "重构布局",
44
- "request": "最后把新栏目跟站里其它地方接起来。导航左边那组(Developers / Validators 旁边)加一个 Newsroom 入口,样式跟旁边两个保持一致,点了要像别的入口一样平滑滑到资讯区;顺手把资讯区恢复成初始状态——分类回到'全部'、回到第一页;但用户已经标记的稍后读不能被清掉,标记过的那几篇还是标记态。另外数字条那三格里,'Networks we support' 这一格换成我们内容库的规模,数字得跟资讯库里实际的篇数对得上,别写死一个不相干的数。之前撤掉的融资数字和投资方标不许借机复活,数字条还是三格。"
45
  }
46
  ],
47
  "checklist": [
48
  {
49
  "id": "repair.primer.nav",
50
  "m": 1,
51
- "dimension": "功能",
52
  "w": 1.5,
53
- "description": "点击导航条上的 PRIMER 后页面发生滚动,最终白色圆角卡片区(含 Secure / Fast / Permissionless 三段)进入视口,且该区块顶部与视口顶部的距离小于 120px。"
54
  },
55
  {
56
  "id": "repair.primer.hero",
57
  "m": 1,
58
- "dimension": "功能",
59
  "w": 1.5,
60
- "description": "首屏左侧的 PRIMER 按钮点击后滚动到的落点与导航 PRIMER 的落点一致(同一白卡区块顶部,两者滚动结束后的页面 scrollY 差值不超过 40px)。"
61
  },
62
  {
63
  "id": "repair.learn.whyseda",
64
  "m": 1,
65
- "dimension": "交互",
66
  "w": 1.0,
67
- "description": "展开 Learn 菜单点击 'Why SEDA' 后,菜单收起且页面滚动到同一白卡区块(该区块进入视口),而不是停留原地。"
68
  },
69
  {
70
  "id": "repair.regression.anchors",
71
  "m": 1,
72
- "dimension": "功能",
73
  "w": 1.0,
74
- "description": "回归:Developers、Validators、Community、LITEPAPER 四个入口分别点击后,各自对应的目标区块(网络介绍区、受众区、生态区、页脚)进入视口,行为未被修复动作破坏。"
75
  },
76
  {
77
  "id": "repair.regression.learn.toggle",
78
  "m": 1,
79
- "dimension": "交互",
80
  "w": 1.0,
81
- "description": "回归:点击 Learn 展开后菜单内恰好显示 3 条链接;点击页面空白处菜单消失;再次点击 Learn 能重新展开,连续三次开合后不出现菜单常驻或无法展开。"
82
  },
83
  {
84
  "id": "delete.backers.gone",
85
  "m": 2,
86
- "dimension": "覆盖",
87
  "w": 1.5,
88
- "description": "以删除前首屏底部的投资方展示区域('Backed by:' 及其下方一排机构标所在带状区域)为参照:该区域内不再渲染任何机构 logo 类图形(svg/img/品牌背景图);且以不区分大小写方式检索整站页面文本,均不再出现 'backed by'、'uncorrelated'、'distributed global'、'coinbase'、'reciprocal ventures'。"
89
  },
90
  {
91
  "id": "delete.raised.gone",
92
  "m": 2,
93
- "dimension": "覆盖",
94
  "w": 1.0,
95
- "description": "数字条区块内不存在 '+$22M' 与 'Raised'(不区分大小写)两处文本。"
96
  },
97
  {
98
  "id": "delete.stats.three",
99
  "m": 2,
100
- "dimension": "视觉",
101
  "w": 1.5,
102
- "description": "在 1440×900 视口下:数字条恰好剩 3 个数字项(首两项仍为 +$152B / Total value enabled 与 +12M / Data-feed updates),三项两两宽度差不超过 2px,且最左项左边缘到最右项右边缘的跨度不小于容器宽度的 90%(没有留下第四格的空位)。"
103
  },
104
  {
105
  "id": "delete.hero.height",
106
  "m": 2,
107
- "dimension": "视觉",
108
  "w": 1.5,
109
- "description": "在 1440×900 视口、100% 缩放下,首屏区块的渲染高度在 780px 到 900px 之间(含边界),且数字条第一个数字的顶部在页面中的绝对位置不超过 960px。"
110
  },
111
  {
112
  "id": "delete.hero.keep",
113
  "m": 2,
114
- "dimension": "视觉",
115
  "w": 1.0,
116
- "description": "首屏仍完整可见三行标题 'A Foundation / for Data in / web3',LITEPAPER 与 PRIMER 两个按钮纵向排列于标题下方,说明段落 'SEDA creates a standard for…' 位于按钮右侧,三者均未被裁切或重叠。"
117
  },
118
  {
119
  "id": "layout.five.texts",
120
  "m": 3,
121
- "dimension": "覆盖",
122
  "w": 1.5,
123
- "description": "重构后的区块仍逐字保留原五段英文文案(含 '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' 等原句),一段不少、无改写。"
124
  },
125
  {
126
  "id": "layout.numbers",
127
  "m": 3,
128
- "dimension": "视觉",
129
  "w": 1.0,
130
- "description": "序号 1、2、3、4、5 依次可见,且每个序号与其对应的那段文案位于同一项内(视觉上成组,不错位到别的段落)。"
131
  },
132
  {
133
  "id": "layout.grid",
134
  "m": 3,
135
- "dimension": "视觉",
136
  "w": 1.5,
137
- "description": "在 1440×900 视口下五项排成两行(顶部 y 坐标相差小于 20px 视为同一行):第一行 3 项、第二行 2 项,不存在任一行超过 3 项的情况。"
138
  },
139
  {
140
  "id": "layout.height",
141
  "m": 3,
142
- "dimension": "功能",
143
  "w": 1.5,
144
- "description": "在 1440×900 视口下,该五段区块的整体渲染高度不超过 1400px(原为 3338px 量级)。"
145
  },
146
  {
147
  "id": "layout.images",
148
  "m": 3,
149
- "dimension": "覆盖",
150
  "w": 1.0,
151
- "description": "五张原配图全部保留且互不重复:区块内恰好出现 5 个不同来源的图片元素,无缺失、无同一张图重复使用。"
152
  },
153
  {
154
  "id": "layout.style",
155
  "m": 3,
156
- "dimension": "视觉",
157
  "w": 1.0,
158
- "description": "该区块延续黑底浅字风格:区块背景仍为接近纯黑的深色(亮度不高于 #202028 级别),正文文字为白/近白色,未引入大面积浅色底导致与首屏割裂。"
159
  },
160
  {
161
  "id": "data.placement",
162
  "m": 4,
163
- "dimension": "覆盖",
164
  "w": 1.5,
165
- "description": "资讯栏目区块与 'Our expanding network of ecosystems' 区块同时存在,且资讯栏目在 DOM 顺序与页面纵向位置上都排在后者之前(资讯区顶部 y 坐标小于生态区顶部 y 坐标);默认状态下列表显示 9 条,页码提示同时呈现当前页 1 与总页数 6(文案语言与写法不限,如 'Page 1 of 6'、'1 / 6'、'第 1 页 / 共 6 页')。"
166
  },
167
  {
168
  "id": "data.category.counts",
169
  "m": 4,
170
- "dimension": "功能",
171
  "w": 1.5,
172
- "description": "分类按钮上标注的篇数分别为:协议更新 12、生态合作 9、研究报告 8、社区活动 11、版本发布 8,全部为 48,且与各分类实际可翻阅到的条目总数一致;从'全部'翻到第 4 页后切换到'研究报告',列表非空并显示 8 条、页码提示回到当前页 1。"
173
  },
174
  {
175
  "id": "data.content.constraints",
176
  "m": 4,
177
- "dimension": "功能",
178
  "w": 1.0,
179
- "description": "遍历全部 48 篇(可通过各分类翻页取得):每篇日期均不早于 2024-01-08 且 48 个日期两两不同,48 个标题两两不同,每篇标注的阅读时长均为 3 到 12 分钟之间(含 3 与 12)。"
180
  },
181
  {
182
  "id": "data.paging.nav",
183
  "m": 4,
184
- "dimension": "交互",
185
  "w": 1.0,
186
- "description": "'全部'分类下:第 1 页时上一页不可用(点击后列表与页码均不变);点到第 2 页后点上一页能回到第 1 页并正确渲染 9 条;连续翻到第 6 页时只显示 3 条,且再点下一页列表与页码不再变化。"
187
  },
188
  {
189
  "id": "data.sort.combo",
190
  "m": 4,
191
- "dimension": "交互",
192
  "w": 1.5,
193
- "description": "组合抽验:社区活动 + 阅读时长从长到短时共 2 页且第 2 页显示 2 条,第 2 页首条的阅读时长不大于第 1 页最后一条的阅读时长;切回'最新在前'后第 1 页首条的日期是该分类 11 篇中最新的一个。"
194
  },
195
  {
196
  "id": "data.favorite.idempotent",
197
  "m": 4,
198
- "dimension": "交互",
199
  "w": 1.0,
200
- "description": "对同一篇连点两次'稍后读',已标记篇数依次变为 1 再回到 0,且回到 0 时栏目标题旁显示提示文案(如'还没有稍后读的文章'一类)而非空白;该卡片的标记态也同步回到未标记外观。"
201
  },
202
  {
203
  "id": "integrate.nav.newsroom",
204
  "m": 5,
205
- "dimension": "交互",
206
  "w": 1.5,
207
- "description": "导航左侧组在 Developers / Validators 之后新增 Newsroom 项(字号、大写与字距与相邻两项一致),点击后资讯栏目顶部进入视口且距视口顶部小于 120px。"
208
  },
209
  {
210
  "id": "integrate.chain.reset",
211
  "m": 5,
212
- "dimension": "交互",
213
  "w": 1.5,
214
- "description": "多步链验证:先选'研究报告'并切到'阅读时长从长到短',标记其中 2 篇为稍后读,再切到'全部'翻到第 3 页,然后点击导航 Newsroom——此时分类回到'全部'、页码回到第 1 页、列表显示 9 条,而已标记篇数仍为 2,且那两篇文章在列表中被找到时仍呈已标记外观。"
215
  },
216
  {
217
  "id": "integrate.stats.linked",
218
  "m": 5,
219
- "dimension": "功能",
220
  "w": 1.5,
221
- "description": "数字条第三格的数字为 48(与资讯库实际总篇数一致),其标签指向内容库(包含 article / 资讯 / 内容 / 篇 等字样之一),前两格仍是 +$152B 与 +12M。"
222
  },
223
  {
224
  "id": "integrate.no.revival",
225
  "m": 5,
226
- "dimension": "覆盖",
227
  "w": 1.0,
228
- "description": "数字条仍恰好 3 格;在数字条区块与首屏原投资方展示区域范围内检索,不存在 '+$22M'、'Raised'(不区分大小写)文本,也不存在任何机构 logo 图形(回归此前的下线要求)。"
229
  },
230
  {
231
  "id": "integrate.style.consistency",
232
  "m": 5,
233
- "dimension": "视觉",
234
  "w": 1.0,
235
- "description": "取舍一致性:资讯区选中分类与未选中分类在背景/边框/文字色中至少一项有明显差异(可一眼分辨),同时资讯区的按钮与 Newsroom 导航项沿用站内既有按钮语言(圆角与大写小字距风格一致),全站不出现两套明显割裂的按钮样式。"
236
  }
237
  ],
238
  "inject": {
239
- "type": "选择器漂移",
240
- "saboteur_prompt": "在 src/App.jsx 中找到被 scrollToId('pillars') 指向的那个区块(渲染 Secure / Fast / Permissionless 白色圆角卡片的 section,当前 id 为 \"pillars\"),把它的 id 属性值改成略有差异的 \"pillars-cards\"。不要修改导航、首屏按钮或 Learn 菜单里任何 scrollToId('pillars') 的调用,也不要修改 scrollToId 函数本身。如果 src/index.css 中存在 #pillars 之类的 id 选择器,请同步改名以保证视觉呈现完全不变。最终效果:导航 PRIMER、首屏 PRIMER 按钮、Learn 菜单中的 Why SEDA 点击后页面不滚动,其它所有锚点入口照常工作;控制台无任何报错或警告;不改动任何无关功能与样式;不要留下注释或 TODO 等痕迹。"
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": "我们要上线一个科技资讯站,叫「知源快讯」,先把首页做出来能看能用。\n\n顶上放站名「知源快讯」和一句副标题「每天 10 分钟,读懂科技圈」。下面是频道导航,六个,按这个顺序排:全部、AI前沿、芯片、开源、安全、创投,默认停在「全部」,选中哪个要一眼看得出来。导航旁边给个排序切换,两个选项「最新」和「最热」,默认「最新」。\n\n文章一共 45 篇,列表每页显示 12 篇,下面配翻页(上一页 / 下一页 + 当前页码,格式像「第 1 / 4 页」)。每篇卡片上要有:标题、频道名、作者、发布日期、阅读数;我标了「精选」的那几篇,要挂一个精选徽标。\n\n前 10 篇是编辑手写的,我按想到的顺序列一下,别弄错:\n1 号《国产大模型开放平台一次性下调八成调用价》,AI前沿,林砚写的,阅读 5120,这篇算精选;\n2 号《3纳米产能再爆抢货潮,明年订单已排满》,芯片,周夏,3980;\n3 号《开源基金会换帅,新掌门要砍掉一半项目》,开源,何知远,2760,精选;\n4 号《一个被忽略的固件漏洞,影响两千万台路由器》,安全,阿澜,4310;\n5 号《早期基金开始投 AI 陪伴方向,估值涨得离谱》,创投,沈苗,1890;\n6 号《端侧推理芯片的能效竞赛进入下半场》,芯片,周夏,2240;\n7 号《我们试用了 12 款 AI 写作工具,结论有点意外》,AI前沿,林砚,6480,精选;\n8 号《开源协议之争:这次轮到数据集了》,开源,何知远,1530;\n9 号《零信任落地三年,企业踩过的五个坑》,安全,阿澜,990;\n10 号《消费机器人融资额首次超过工业机器人》,创投,沈苗,2050,精选。\n\n剩下的 35 篇是存稿,我不一条条写了,你按规律补齐到 45:标题就叫「知源观察第 011 号」一直到「知源观察第 045 号」(编号补成三位),作者都写「编辑部」;频道从 11 号开始按 AI前沿、芯片、开源、安全、创投 的顺序一圈圈轮着标(11 号是 AI前沿);阅读数省事点,就按编号乘 37 来填;这 35 篇都不是精选。\n\n日期是按每天一篇往前排的:1 号最新,是 2026-04-14,编号每往后一位就早一天,一路排到 45 号正好是 2026-03-01。默认的「最新」排序就是从 1 号到 45 号这个顺序;点「最热」就按阅读数从多到少重排。整体风格清爽一点,白底、一种蓝作为强调色就够了。"
22
  },
23
  {
24
- "operator": "新增区块",
25
- "request": "首页光有列表还是太平,运营那边要两个东西。\n\n第一,加一个「今日热榜」区块,先放在文章列表的正上方,占一整条,五个位置横着并排,标出第 1 到第 5 名,每个位置显示文章标题和阅读数。规则是:热榜跟着当前看到的结果走——选了哪个频道、搜了什么词,热榜就只从那批文章里挑阅读数最高的 5 篇,不受翻页影响(第 2 页看到的热榜和第 1 页一样)。这块是运营的门面,要够抢眼。如果当前一篇都没有,热榜位置得给句「暂无热榜」之类的提示,不能留空白框。\n\n第二,导航那一行加个搜索框,输入词就按标题里是否包含这个词来过滤,和频道筛选是叠加生效的(两个条件同时成立才留下),搜完自动回到第 1 页。搜不到东西的时候列表区要有明确的空态文案,翻页控件别还显示着第 2 页。\n\n还有个读者需求:点文章标题就把这篇标成「已读」,已读的卡片要变淡并带个「已读」字样;站名旁边显示「已读 N 篇」,一开始是 0。注意同一篇反复点,计数不能往上涨,也不能把它从已读变回未读。已读状态要跟着文章走,换频道、翻页、搜完再清空搜索,之前标过的那篇还得是已读。"
26
  },
27
  {
28
- "operator": "重构布局",
29
- "request": "首页信息太散了,改一版布局。\n\n宽屏下改成左右两栏:左边(主区)是文章列表和翻页,右边是一个窄栏,把「今日热榜」从列表上方挪进这个右栏里,竖着排 1 到 5 名;右栏跟着页面滚动时要一直看得见热榜。频道导航和搜索框合成一条吸顶栏,往下滚的时候这条一直贴在顶部,随时能切频道。\n\n屏幕窄的时候(手机上)别硬挤两栏,改回上下单列,热榜整块挪到文章列表下面,内容一条不能少,翻页照样能用。\n\n改版是改版,之前那些东西一个都不能弄丢:频道筛选、搜索、排序、翻页、精选徽标、已读变淡和「已读 N 篇」计数,还有热榜跟着筛选和搜索走这件事,行为跟改版前完全一致。翻页控件放在主区列表底部,在第一页的时候「上一页」要处于不可点的状态,最后一页「��一页」同理。"
30
  },
31
  {
32
- "operator": "换肤",
33
- "request": "最后做主题。页面顶部放一个主题开关,能在「浅色 / 深色」之间切,开关上要能看出当前是哪个模式。\n\n深色模式下整站的底色和文字都要反过来,读起来不刺眼。但别只是把背景刷黑就完事——之前建立起来的那几套视觉信号,在深色下也得一样成立:精选徽标要认得出来,已读的卡片要明显比未读的弱,热榜前三名和后两名的名次要能区分开。\n\n另外强调色统一一下:频道选中态、当前页码、热榜名次、精选徽标用同一套强调色,两个模式各自一套,别出现上一版残留的旧蓝色块夹在深色里。整体调性我要的是克制、干净,不要满屏高饱和度乱撞色——但热榜该是页面焦点这件事不能变,你自己把握好这个度,全站保持一致的取舍。\n\n切主题的时候当前的状态不许被冲掉:选的频道、搜的词、排序、在第几页、已读了哪几篇和已读计数,切过去切回来都得原样在那儿。"
34
  }
35
  ],
36
  "checklist": [
37
  {
38
  "id": "brand.baseline",
39
  "m": 1,
40
- "dimension": "视觉",
41
  "w": 1.0,
42
- "description": "页头同时出现站名「知源快讯」与副标题「每天 10 分钟,读懂科技圈」;频道按 全部 / AI前沿 / 芯片 / 开源 / 安全 / 创投 六项且顺序一致,初始「全部」处于可见的选中态(与其余五项有明显视觉差异);页面为白底,强调色只有一种蓝色。"
43
  },
44
  {
45
  "id": "list.count.pages",
46
  "m": 1,
47
- "dimension": "功能",
48
  "w": 1.5,
49
- "description": "默认进入「全部」频道时列表共 45 篇、每页 12 篇、页码显示为「第 1 / 4 页」;翻到第 4 页时该页恰好显示 9 篇文章。"
50
  },
51
  {
52
  "id": "list.data.rule",
53
  "m": 1,
54
- "dimension": "功能",
55
  "w": 1.5,
56
- "description": "默认「最新��排序下第 1 页首条为《国产大模型开放平台一次性下调八成调用价》且日期为 2026-04-14;第 2 页第一条为《知源观察第 013 号》,频道「开源」、阅读数 481;第 4 页最后一条为《知源观察第 045 号》,频道「创投」、作者「编辑部」、日期 2026-03-01、阅读数 1665。"
57
  },
58
  {
59
  "id": "list.channel.filter",
60
  "m": 1,
61
- "dimension": "功能",
62
  "w": 1.0,
63
- "description": "点「芯片」后列表只剩 9 篇且页码变为「第 1 / 1 页」,其中同时包含《3纳米产能再爆抢货潮,明年订单已排满》与《知源观察第 042 号》;切回「全部」恢复 45 篇 4 页。"
64
  },
65
  {
66
  "id": "list.sort.hot",
67
  "m": 1,
68
- "dimension": "功能",
69
  "w": 1.5,
70
- "description": "「全部」频道下切到「最热」后,第 1 页第 1 条是《我们试用了 12 款 AI 写作工具,结论有点意外》(6480),第 2 条是《国产大模型开放平台一次性下调八成调用价》(5120),第 9 条是《知源观察第 045 号》(1665)。"
71
  },
72
  {
73
  "id": "list.featured.badge",
74
  "m": 1,
75
- "dimension": "视觉",
76
  "w": 1.0,
77
- "description": "全站仅 4 篇带精选徽标:1 号、3 号、7 号、10 号这四篇手写稿;任何一篇「知源观察第 0NN 号」都不带精选徽标。"
78
  },
79
  {
80
  "id": "hot.all.top5",
81
  "m": 2,
82
- "dimension": "功能",
83
  "w": 1.5,
84
- "description": "热榜呈现为文章列表正上方的一整条、5 个名次横向并列;「全部」频道未搜索时依次为 6480 的《我们试用了 12 款 AI 写作工具…》、5120、4310 的《一个被忽略的固件漏洞…》、3980、2760 的《开源基金会换帅…》并标出 1–5 名次;翻到第 3 页时热榜内容与第 1 页完全相同。"
85
  },
86
  {
87
  "id": "hot.filter.sync",
88
  "m": 2,
89
- "dimension": "交互",
90
  "w": 1.5,
91
- "description": "切到「创投」频道后热榜第 1 名变为《消费机器人融资额首次超过工业机器人》(2050),第 2 名 1890,第 3 名《知源观察第 045 号》(1665),且热榜只剩创投频道文章。"
92
  },
93
  {
94
  "id": "search.combo.reset",
95
  "m": 2,
96
- "dimension": "交互",
97
  "w": 1.5,
98
- "description": "先翻到第 2 页再输入「知源观察」,页码自动回到「第 1 / 3 页」共 35 条;此时再点「芯片」,列表叠加过滤后只剩 7 条(012/017/022/027/032/037/042 号)、页码「第 1 / 1 页」,热榜前 3 名依次为《知源观察第 042 号》1554、第 037 号 1369、第 032 号 1184;清空搜索框后「芯片」恢复 9 条。"
99
  },
100
  {
101
  "id": "read.state.core",
102
  "m": 2,
103
- "dimension": "交互",
104
  "w": 1.5,
105
- "description": "初始时站名旁显示「已读 0 篇」;点击某篇标题后该卡片变淡并出现「已读」字样、站名旁同一位置更新为「已读 1 篇」;对同一篇连点 3 次计数保持 1 且不被取消已读;随后切到「芯片」再切回「全部」、并翻到第 2 页再翻回第 1 页,该篇仍呈已读态、计数仍为「已读 1 篇」。"
106
  },
107
  {
108
  "id": "search.chain.persist",
109
  "m": 2,
110
- "dimension": "交互",
111
  "w": 1.5,
112
- "description": "搜索「知源观察」得 35 条、页码「第 1 / 3 页」;翻到第 2 页其首条为《知源观察第 023 号》,点击将其标为已读后清空搜索框回到「全部」并翻到第 2 页,该篇仍呈已读态且计数未变。"
113
  },
114
  {
115
  "id": "search.empty",
116
  "m": 2,
117
- "dimension": "功能",
118
  "w": 1.0,
119
- "description": "搜索「量子」时列表区出现明确的无结果提示、热榜区显示无数据提示而非空框,且不出现第 2 页(页码显示为 0 页或 1 页且两侧翻页按钮均不可用,或翻页控件整体不渲染)。"
120
  },
121
  {
122
  "id": "layout.two.column",
123
  "m": 3,
124
- "dimension": "视觉",
125
  "w": 1.5,
126
- "description": "宽屏下页面呈左右两栏:文章列表在左侧主区、今日热榜移到右侧窄栏并竖排 1–5 名;列表上方不再保留原来的横条热榜。"
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": "改版后行为不退化:选「芯片」仍为 9 篇 1 页、精选徽标仍只在那 4 篇上、已读卡片仍变淡且「已读 N 篇」计数与改版前一致、「最热」排序首条仍是 6480 那篇;搜索「知源观察」仍得 35 条「第 1 / 3 页」,且右栏热榜随该搜索结果更新为 045(1665)/044(1628)/043(1591) 开头的名次。"
141
  },
142
  {
143
  "id": "layout.pager.edge",
144
  "m": 3,
145
- "dimension": "交互",
146
  "w": 1.0,
147
- "description": "翻页控件位于左侧主区列表底部;在第 1 页时「上一页」处于不可点状态,翻到第 4 页时「下一页」不可点,且点击不可点的按钮页码不发生变化。"
148
  },
149
  {
150
  "id": "layout.narrow",
151
  "m": 3,
152
- "dimension": "视觉",
153
  "w": 1.0,
154
- "description": "窄屏(约 375–768px 宽)下变为上下单列,热榜整块位于文章列表下方且 5 条名次一条不少,翻页控件仍可正常翻到第 2 页。"
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": "深色模式下精选徽标仍清晰可辨、已读卡片明显弱于同屏未读卡片、热榜前三名的名次标记与第 4/5 名有可见区分。"
169
  },
170
  {
171
  "id": "theme.state.keep",
172
  "m": 4,
173
- "dimension": "功能",
174
  "w": 1.5,
175
- "description": "在「全部」频道 + 搜索词「知源观察」+「最热」排序 + 停在第 2 页 + 已标 2 篇已读的状态下,切到深色再切回浅色:搜索框内仍是「知源观察」、仍为 35 条「第 2 / 3 页」、该页首条仍是《知源观察第 033 号》(1221)、排序仍是最热、那 2 篇仍变淡且计数仍为「已读 2 篇」。"
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": "我们要把 Castello Monaci 这个婚礼庄园的官网首页原样做出来,参考图就是现在线上的样子,按可见区域一比一还原,所有照片用占位图就行,但文字、颜色、排布要对得上。\n\n从上往下说:最顶上是一条白色的细窄横条,左边是三道杠加 MENU 字样,正中间是庄园的徽标(细线城堡图形 + CASTELLO MONACI 字样),右边先是一颗橄榄绿的实心圆角按钮写 RICHIEDI PREVENTIVO,再往右是 EN、一面小旗子、一个放大镜,这一整行东西都在同一水平线上。\n\n紧接着是一张大幅的婚宴现场大图,图上偏左下压着两行白色大写标题「LA MAGIA DI UN CASTELLO SOTTO UNA CASCATA DI FIORI」,标题底下是一颗白色细描边的小按钮 SCOPRI DI PIÙ。\n\n往下是白底的欢迎段,居中的小标题 BENVENUTI A CASTELLO MONACI,下面四行居中的细斜体介绍文字(大意是:这里能把历史的魅力和高水准的组织能力结合起来,给你一场符合个性的魔法般的婚礼;我们在普利亚大区萨伦托的中心,靠海又被乡野绿意包围,橄榄树和葡萄园之间)。\n\n再往下是庄园服务的九个栏目,分三行三列。第一行三个: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。前两行的六个栏目每个上面配一张横幅小图,第三行的三个只有标题和文字没有图。每个栏目都是「大写小标题 + 三到四行灰色小字说明」。九个栏目下面居中一颗橄榄绿实心按钮 SCOPRI DI PIÙ。\n\n再往下是一块浅灰色背景的区域,居中大写标题 VISITA CASTELLO MONACI CON UN TOUR VIRTUALE,下面一张航拍视频占位图,正中间叠一个白色圆圈里带三角形的播放按钮。\n\n接着是一整条通栏的橄榄绿色块,里面的文字偏右居中排列:标题 MATRIMONIO CON RITO CIVILE,两行白色小字(我们的庄园被 Salice Salentino 市政府授权作为民事婚礼仪式举办地),下面一颗白色细描边按钮 SCOPRI DI PIÙ。\n\n再下面是白底的回顾区:左边一列是小标题 RIVIVI UN EVENTO SVOLTO A CASTELLO MONACI 加两段小字;中间一张婚礼纪实占位图;右边一张深色卡片写 VIDEO TRAILERS,卡片左下角有个浅色小按钮 SCOPRI DI PIÙ。\n\n再往下留白一段,然后是 Instagram 区:一行小字「INSTAGRAM」带相机图标,下面一行很大的浅色标题 #misposoacastellomonaci,再下面两行斜体小字(邀请大家把在庄园拍的照片带上官方话题发布)。\n\n然后是 NEWSLETTER 区块(浅米色底):小标题 NEWSLETTER,两行小字说明,一个很宽的邮箱输入框(占位提示「Inserisci la tua email」),下面一颗小按钮 ISCRIVITI。\n\n再往下是 CONTATTACI 联系区:一段小字写明电话咨询方式,下面是表单——左边一列从上到下三个单行输入框(姓名、邮箱、电话,各有意大利语占位提示),再下面一行小字「Richiesta di contatto per:」和一个下拉框,默认显示「-- Seleziona un'opzione --」,可选项有 Preventivo matrimonio、Visita alla location、Camere per ospiti、Altro;右边是一个高的多行留言框。表单下方两行小勾选框:ACCETTO I TERMINI DELLA PRIVACY、RICHIEDO ISCRIZIONE ALLA NEWSLETTER。最后是居中的 INVIA 按钮。\n\n最底下先有一条独立的细窄浅色横条,居中一行小字以 #ZEROSPRECHI 开头(讲庄园参与 Caritas 反食物浪费项目),然后才是页脚。页脚分四列:第一列是城堡线稿图标和 Copyright © 2019;第二列 CASTELLO MONACI SERVICE SRL 的地址和多个电话号码;第三列 APERTO TUTTI I GIORNI、9:30 - 19:30,以及 SEGUICI 下的三个社交链接(Facebook / Instagram / Pinterest);第四列 RICONOSCIMENTI,下面一枚方形的 WEDDING AWARDS 2019 徽章。\n\n另外,页面右下角一直浮着一张 Cookie 提示卡片:标题 Cookie Banner,右上角一个 x,中间几行灰色小字的 cookie 说明,底部两颗按钮,左边浅灰的 Settings,右边橄榄绿的 I accept。\n\n主色调就是参考图里的橄榄绿���大约 #7C8D6F),大面积留白配浅灰浅米底,正文小字是灰色,标题一律大写并带字距。"
24
  },
25
  {
26
- "operator": "交互化",
27
- "request": "现在这个页面只是好看,一点都不能用。销售那边天天接电话,我们希望联系表单真的能收咨询,Cookie 卡片也别老是赖在屏幕上关不掉。\n\n表单这块:姓名、邮箱、电话、咨询类型下拉、留言,这五项都得填,隐私条款那个勾也必须勾上,缺一个就不能提交,缺哪个就在哪个下面提示一行红字告诉用户缺什么。邮箱要长得像邮箱(比如「abc@」这种明显不完整的要拦下来),电话只收数字,位数在 8 到 15 位之间,太短太长都不行;用户改对之后提示要自己消失,别一直挂着。留言框最多写 300 个字,旁边要实时显示还能写多少字,一开始就显示 300,写了 10 个字就变成 290,写满了就再也打不进去。\n\n提交成功之后:表单要清空回到最初的样子(下拉回到「-- Seleziona un'opzione --」,两个勾也都取消),页面上给一行成功提示,并且在表单下方新增一个「最近咨询」的小列表,把这次提交的人名和咨询类型记上去,最新的排在最前面,最多只留 5 条,多了就把最老的挤掉;同时旁边有个计数,写清楚一共收到了多少条咨询(标签文字你自己拟,看得懂就行)。注意别被用户连点坑了——提交完表单已经空了,再点一次提交不能白白多记一条。\n\n还有个小联动:如果用户在表单里勾了「RICHIEDO ISCRIZIONE ALLA NEWSLETTER」并提交成功,上面那个 NEWSLETTER 区块要变成已订阅的样子,把用户刚填的邮箱显示出来;没勾就一切照旧。\n\nCookie 卡片:点 I accept 就关掉,而且以后再打开网站也别再弹了,得记住;点右上角的 x 只是这次不看,本次浏览里不要再冒出来。"
28
  },
29
  {
30
- "operator": "换肤",
31
- "request": "品牌方要改视觉方向了:橄榄绿显得太素,明年主推的是「酒红 + 暖砂」的路线。请把全站的绿色系统一换成深酒红 #7A2E3C,原来的浅灰/米白底统一换成暖砂色 #F4EFE7,正文字色保持深色系,保证在暖砂底上读得清楚。\n\n有两点我先说在前面,别搞砸:第一,客户要求主要的行动按钮(顶部那颗询价、大图上的 SCOPRI DI PIÙ、九宫格底下那颗、通栏区块里那颗、ISCRIVITI、INVIA、Cookie 的 I accept)要比现在更跳出来一点,别让人找不到;但第二,老板同时反复强调庄园的调性是克制、极简、留白多,不许弄得花里胡哨。你自己拿捏这个分寸,只要全站是同一套做法、前后统一就行,不要这里一个花样那里一个花样。\n\n另外,换皮肤归换皮肤,页面的结构、文案、九个栏目的顺序一个字都不许动,上���版做的表单校验、字数统计、咨询列表、Cookie 记忆也一个都不许坏。顺便留意一下错误提示——现在是红字,新主题主色也是红系,别让两个红撞在一起看不出哪是报错。"
32
  },
33
  {
34
- "operator": "新增区块",
35
- "request": "咨询电话里问得最多的就是「大概多少钱」和「某天还空着吗」,我们想在首页直接给个自助的预算速算,放在虚拟游览那块和通栏的民事婚礼色块中间,样式当然要跟新的酒红暖砂主题一致。\n\n这块区域要让客人做三件事:选套餐、拉宾客人数、挑日子。套餐三档:Classico 人均 80 欧、Prestige 人均 110 欧、Reale 人均 150 欧,默认选 Classico。宾客人数用一个可拖的滑块,从 50 人到 300 人,每次动 10 人,默认 120 人,当前人数要一直显示着。\n\n算法运营那边是这么跟客人讲的:先是固定的场地基础费 4500 欧,加上人均餐标乘以宾客数;如果办在周六,整个金额再往上加一成半;人数到 150 位及以上的,享受团体价,在前面算完的基础上再减 8%(这时候旁边要挂个「团体折扣 8%」的标识,没到 150 人就不显示);最后不管算出多少零头一律抹掉、只留整数欧元(不是四舍五入,是往下抹),显示成带千位逗号的样子,比如 €14,100。\n\n日子从我们 2026 年开放的档期里挑,运营给的名单是这些(周六的日子价格要加成,别搞错):四月 11 日周六、17 日周五、18 日周六、24 日周五、25 日周六、30 日周四;五月 2 日周六、8 日周五、9 日周六、16 日周六、21 日周四、23 日周六;六月 5 日周五、6 日周六、13 日周六、19 日周五、20 日周六、27 日周六;七月 3 日周五、4 日周六、10 日周五、11 日周六、18 日周六、25 日周六;八月 1 日周六、7 日周五、8 日周六、14 日周五、15 日周六、22 日周六;九月 4 日周五、5 日周六、11 日周五、12 日周六、19 日周六、26 日周六;十月 2 日周五、3 日周六、9 日周五、10 日周六、17 日周六、24 日周六。日期清单上每一天统一按「2026-04-11(周六)」这种写法显示(年月日加星期),每个日子都要能选,选中的那天得一眼看出来是哪天。\n\n金额随便改哪个条件都要当场变,别让客人还得点一下「计算」。最后这块底下放一颗按钮「INVIA QUESTO PREVENTIVO」(把这份预算发给我们),点了之后直接带客人到下面的联系表单那儿,把咨询类型自动选成 Preventivo matrimonio,并且把刚才选的日期、套餐、人数和算出来的金额自动写进留言框里——日期就照清单上那种写法原样抄过去,金额也原样照抄,别自己改数;留言的剩余字数当然也得跟着更新。客人只要补上姓名邮箱电话、勾个隐私条款就能直接发出来,发出来之后跟普通咨询一样进最近咨询列表。"
36
  }
37
  ],
38
  "checklist": [
39
  {
40
  "id": "repl.section.order",
41
  "m": 1,
42
- "dimension": "覆盖",
43
  "w": 1.5,
44
- "description": "首页自上而下共 12 个区块,顺序完全一致:顶部导航条 → 带标题的大图 → BENVENUTI 欢迎段 → 九栏目服务区 → VISITA…TOUR VIRTUALE 浅色区 → 通栏 MATRIMONIO CON RITO CIVILE 色块 → RIVIVI UN EVENTO 回顾区 → #misposoacastellomonaci 区 → NEWSLETTER 区 → CONTATTACI 表单区 → #ZEROSPRECHI 细窄横条 → 页脚;中间不得插入参考图之外的额外区块。"
45
  },
46
  {
47
  "id": "repl.top.header.hero",
48
  "m": 1,
49
- "dimension": "视觉",
50
  "w": 1.0,
51
- "description": "顶部白色窄条内自左至右为:三道杠+MENU 文字、居中的 CASTELLO MONACI 徽标、右侧橄榄绿实心(绿底白字)按钮 RICHIEDI PREVENTIVO 及其后的 EN、小旗、放大镜共 3 个元素,全部在同一水平行;其下大图左下区域(非居中)压着分两行的白色大写标题「LA MAGIA DI UN CASTELLO SOTTO UNA CASCATA DI FIORI」,标题正下方是一颗白色细描边(非实心)的 SCOPRI DI PIÙ 按钮。"
52
  },
53
  {
54
  "id": "repl.grid.nine",
55
  "m": 1,
56
- "dimension": "视觉",
57
  "w": 1.5,
58
- "description": "服务区恰好 9 个栏目、三行三列,标题依次为 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;前两行 6 个各带一张配图,第三行 3 个无图只有标题与说明文字。"
59
  },
60
  {
61
  "id": "repl.form.fields",
62
  "m": 1,
63
- "dimension": "功能",
64
  "w": 1.0,
65
- "description": "CONTATTACI 区表单包含且仅包含:3 个单行输入框(姓名/邮箱/电话)、1 个默认显示「-- Seleziona un'opzione --」且含 4 个可选项的下拉、1 个多行留言框、2 个勾选框(隐私条款、订阅 newsletter)、1 颗居中的 INVIA 按钮。"
66
  },
67
  {
68
  "id": "repl.footer.strip",
69
  "m": 1,
70
- "dimension": "视觉",
71
  "w": 1.0,
72
- "description": "页脚上方存在一条独立细窄浅色横条,其中一行居中小字以「#ZEROSPRECHI」开头;页脚本身分为 4 列,第二列含 CASTELLO MONACI SERVICE SRL 字样与电话号码,第三列含 APERTO TUTTI I GIORNI 与「9:30 - 19:30」以及 Facebook/Instagram/Pinterest 三个社交链接,第四列含方形 WEDDING AWARDS 2019 徽章。"
73
  },
74
  {
75
  "id": "repl.cookie.card",
76
  "m": 1,
77
- "dimension": "视觉",
78
  "w": 1.0,
79
- "description": "页面右下角固定浮着 Cookie 卡片,标题为 Cookie Banner、右上角有 x,底部并排两颗按钮:左侧浅灰 Settings、右侧橄榄绿 I accept;滚动页面时该卡片位置不随内容滚走。"
80
  },
81
  {
82
  "id": "inter.required.six",
83
  "m": 2,
84
- "dimension": "功能",
85
  "w": 1.5,
86
- "description": "在完全空白状态下点击 INVIA:页面不提交,姓名、邮箱、电话、咨询类型、留言、隐私勾选 6 处同时各出现一条错误提示,且咨询计数仍显示 0、最近咨询列表不产生任何条目。"
87
  },
88
  {
89
  "id": "inter.validate.format",
90
  "m": 2,
91
- "dimension": "功能",
92
  "w": 1.0,
93
- "description": "邮箱填「abc@」提交被拦并报错,改为合法邮箱后该错误消失;电话填 7 位数字或 16 位数字均被拦并报错,填入 10 位纯数字后错误消失;含字母的电话同样被拦。"
94
  },
95
  {
96
  "id": "inter.counter.300",
97
  "m": 2,
98
- "dimension": "功能",
99
  "w": 1.5,
100
- "description": "留言框旁的剩余字数在空白时精确显示 300,输入 10 个字符后精确显示 290;达到 300 字后无法再输入第 301 个字符(计数不为负、文字不再增加)。"
101
  },
102
  {
103
  "id": "inter.submit.list5",
104
  "m": 2,
105
- "dimension": "功能",
106
  "w": 1.5,
107
- "description": "填齐合法内容并勾选隐私后提交:表单全部清空(下拉回到「-- Seleziona un'opzione --」、两个勾选均���消)、出现成功提示、咨询计数由 0 变 1,最近咨询列表首条显示本次姓名与咨询类型;连续提交 6 次后计数显示 6,而列表仅保留最新的 5 条且最新的在最上方。"
108
  },
109
  {
110
  "id": "inter.idempotent",
111
  "m": 2,
112
- "dimension": "交互",
113
  "w": 1.0,
114
- "description": "一次成功提交之后(表单已清空)立即再次连点 INVIA 2 次,咨询计数保持不变、最近咨询列表条数不变,且重新出现必填错误提示。"
115
  },
116
  {
117
  "id": "inter.newsletter.link",
118
  "m": 2,
119
- "dimension": "交互",
120
  "w": 1.0,
121
- "description": "勾选「RICHIEDO ISCRIZIONE ALLA NEWSLETTER」并成功提交后,上方 NEWSLETTER 区块切换为已订阅状态并显示刚提交的那个邮箱地址(与表单中所填一字不差);若不勾选该项提交,NEWSLETTER 区块保持原始输入框与 ISCRIVITI 按钮不变。"
122
  },
123
  {
124
  "id": "inter.cookie.memory",
125
  "m": 2,
126
- "dimension": "交互",
127
  "w": 1.0,
128
- "description": "点击 I accept 后 Cookie 卡片消失,刷新页面后不再出现;清除站点本地存储(或以全新会话/隐私窗口打开)使卡片恢复出现后,点击右上角 x:卡片消失,且在本次会话内滚动页面或操作表单均不再出现。"
129
  },
130
  {
131
  "id": "skin.primary.hex",
132
  "m": 3,
133
- "dimension": "视觉",
134
  "w": 1.5,
135
- "description": "顶部 RICHIEDI PREVENTIVO 按钮、通栏 MATRIMONIO CON RITO CIVILE 区块背景、Cookie 的 I accept 按钮三处均为深酒红 #7A2E3C(同一色值),全站不再出现原橄榄绿 #7C8D6F 或其近似绿色。"
136
  },
137
  {
138
  "id": "skin.bg.sand",
139
  "m": 3,
140
- "dimension": "视觉",
141
  "w": 1.0,
142
- "description": "原浅灰的虚拟游览区与原米白的 NEWSLETTER 区底色均变为暖砂 #F4EFE7,其上的正文与标题仍为深色系、清晰可读(不出现浅色字压浅底导致看不清的情况)。"
143
  },
144
  {
145
  "id": "skin.content.intact",
146
  "m": 3,
147
- "dimension": "覆盖",
148
  "w": 1.5,
149
- "description": "换肤后 12 个区块的顺序、大图两行标题文案、九个服务栏目的标题与排列顺序、#ZEROSPRECHI 横条文案与页脚四列内容均与需求1 完全一致,未增删或改写任何文案。"
150
  },
151
  {
152
  "id": "skin.regression",
153
  "m": 3,
154
- "dimension": "功能",
155
  "w": 1.5,
156
- "description": "换肤后需求2 的行为全部保持:空白提交仍出 6 条错误提示、留言计数仍是 300→输入 10 字变 290、成功提交后计数 +1 且列表最多 5 条、I accept 后刷新不再弹出 Cookie 卡片。"
157
  },
158
  {
159
  "id": "skin.tradeoff",
160
  "m": 3,
161
- "dimension": "视觉",
162
  "w": 1.0,
163
- "description": "全站主行动按钮(顶部询价、大图 SCOPRI DI PIÙ、九宫格下方按钮、通栏区块按钮、ISCRIVITI、INVIA、I accept)采用同一套强调处理方式(同色/同形状语言),不存在其中某颗明显另搞一套的情况;同时表单错误提示的颜色与主色 #7A2E3C 明显区分,错误状态一眼可辨。"
164
  },
165
  {
166
  "id": "calc.place.dates",
167
  "m": 4,
168
- "dimension": "覆盖",
169
  "w": 1.0,
170
- "description": "预算速算区位于虚拟游览区与通栏 MATRIMONIO CON RITO CIVILE 之间,内含三档套餐选择(Classico/Prestige/Reale)、宾客人数滑块与当前人数显示,以及可选日期清单;清单恰好 42 个日期、按「2026-04-11(周六)」写法显示年月日与星期,其中标注为周六的恰好 27 个,且被选中的日期项呈现与未选中项可区分的可见选中样式。"
171
  },
172
  {
173
  "id": "calc.default.exact",
174
  "m": 4,
175
- "dimension": "功能",
176
  "w": 1.5,
177
- "description": "默认状态为 Classico + 120 人,选中任一非周六日期(如 2026-04-17 周五)时金额精确显示 €14,100;切换为 Prestige、人数拖到 200、日期选 2026-08-15(周六)后金额精确变为 €28,037,且无需额外点击「计算」即时更新。"
178
  },
179
  {
180
  "id": "calc.discount.edge",
181
  "m": 4,
182
- "dimension": "功能",
183
  "w": 1.5,
184
- "description": "Reale + 150 人 + 2026-06-06(周六)金额精确为 €28,566;Classico + 50 人 + 2026-10-03(周六)精确为 €9,775;Prestige + 2026-09-04(周五)下把人数从 140 拖到 150,金额由 €19,900 变为 €19,320 并同时出现「团体折扣 8%」标识(140 人时该标识不显示)。"
185
  },
186
  {
187
  "id": "calc.floor.cents",
188
  "m": 4,
189
- "dimension": "功能",
190
  "w": 1.5,
191
- "description": "零头一律向下抹去而非四舍五入:Classico + 170 人 + 2026-07-18(周六)金额精确显示 €19,149(不是 €19,150);Prestige + 170 人 + 2026-05-09(周六)精确显示 €24,545(不是 €24,546);Reale + 190 人 + 2026-05-09(周六)精确显示 €34,914。"
192
  },
193
  {
194
  "id": "calc.range.bound",
195
  "m": 4,
196
- "dimension": "功能",
197
  "w": 1.0,
198
- "description": "人数滑块可达两端极值且步进为 10:最小 50、最大 300,无法拖到 50 以下或 300 以上;Reale + 300 人 + 2026-08-01(周六)金额精确为 €52,371。"
199
  },
200
  {
201
  "id": "calc.chain.prefill",
202
  "m": 4,
203
- "dimension": "交互",
204
  "w": 1.5,
205
- "description": "在 Prestige/200 人/2026-08-15(周六)状态下点击「INVIA QUESTO PREVENTIVO」:页面定位到 CONTATTACI 表单,咨询类型自动变为 Preventivo matrimonio,留言框中出现的预填文本包含与日期清单中一致写法的所选日期(2026-08-15(周六))、Prestige、200 与 28,037,剩余字数由 300 同步变为 300 减去预填字符数;随后补填合法姓名/邮箱/电话并勾选隐私提交成功后,咨询计数 +1 且最近咨询列表首条的咨询类型为 Preventivo matrimonio。"
206
  },
207
  {
208
  "id": "calc.skin.consistent",
209
  "m": 4,
210
- "dimension": "视觉",
211
  "w": 1.0,
212
- "description": "预算速算区采用与需求3 一致的主题:CTA 按钮为 #7A2E3C、区域底色属于暖砂/白系,区内不出现任何橄榄绿元素,且按钮的强调处理与其他主 CTA 保持同一套做法。"
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": "知行学堂 · 在线课程目录站(从 PRD 到侧栏改版)",
18
  "milestones": [
19
  {
20
- "operator": "生成",
21
- "request": "我们要做一个叫「知行学堂」的在线课程目录站,先把完整的一屏站点搭出来,桌面端优先,手机上别错位就行。\n\n页面从上到下是这么几块:最上面一条导航,左边是站点名「知行学堂」,右边依次是「课程」「师资」「企业培训」「帮助中心」四个菜单,再靠右一个「登录 / 注册」的主色按钮。导航下面是主视觉横幅,大标题写「找到适合你的那门课」,副标题写「40 门精选课程,随时开课,学完不满意 7 天内可退」。横幅下面紧跟一条数据统计带,一共四项:在售课程 40 门、累计学员 128,000+、签约讲师 86 位、本周直播 3 场。\n\n再往下是筛选条,横着一排放在课程列表上方,分三组:分类(全部 / 编程开发 / 设计创意 / 职场技能 / 语言学习 / 考试提分)、难度(不限 / 初级 / 中级 / 高级)、价格(不限 / ¥200 以下 / ¥200–¥499 / ¥500 及以上),右侧留一个搜索框(占位提示写「搜课程名」)和一个排序下拉,下拉里依次是 综合推荐 / 价格从低到高 / 报名人数从高到低 / 评分从高到低。这一版筛选条先做成静态的样子,点不点得动不重要,样子要对。\n\n筛选条下面就是课程卡片网格,这一版先把全部 40 门课一次性铺出来,桌面宽屏一行 3 张。每张卡片上要有:一张 16:9 的占位封面图、课程名、分类和难度两个小标签、讲师名、评分、课时数、报名人数、价格(带 ¥),外加一个「加入清单」按钮。\n\n课程数据是运营同学发过来的,有点乱,格式是 课程名 / 分类 / 难度 / 价格 / 课时 / 评分 / 报名人数 / 讲师,你照着录进去,一门都不能少:\nPython 入门与数据处理 / 编程开发 / 初级 / 299 / 12 / 4.8 / 1240 / 陈明;JavaScript 从零到实战 / 编程开发 / 初级 / 259 / 16 / 4.7 / 980 / 陈明;React 组件化开发进阶 / 编程开发 / 中级 / 459 / 20 / 4.9 / 760 / 周予;Vue 3 全家桶实战 / 编程开发 / 中级 / 429 / 18 / 4.6 / 640 / 周予;Java 后端工程师训练营 / 编程开发 / 中级 / 899 / 36 / 4.5 / 1520 / 赵岩;算法与数据结构精讲 / 编程开发 / 高级 / 699 / 28 / 4.9 / 430 / 赵岩;Go 语言微服务实践 / 编程开发 / 高级 / 759 / 24 / 4.4 / 210 / 何川;SQL 数据库查询入门 / 编程开发 / 初级 / 149 / 10 / 4.6 / 2100 / 何川;Linux 服务器运维基础 / 编程开发 / 初级 / 199 / 14 / 4.3 / 870 / 何川;前端性能优化实战 / 编程开发 / 高级 / 549 / 15 / 4.8 / 320 / 周予;Python 爬虫与数据采集 / 编程开发 / 中级 / 359 / 14 / 4.5 / 1130 / 陈明;微信小程序开发速成 / 编程开发 / 初级 / 229 / 12 / 4.2 / 560 / 陈明。\n设计这边:Photoshop 商业修图 / 设计创意 / 初级 / 189 / 20 / 4.7 / 1890 / 林岚;UI 界面设计系统课 / 设计创意 / 中级 / 499 / 24 / 4.8 / 720 / 林岚;Figma 团队协作设计 / 设计创意 / 初级 / 159 / 8 / 4.6 / 1340 / 苏黎;品牌视觉识别设计 / 设计创意 / 高级 / 689 / 18 / 4.5 / 260 / 苏黎;短视频剪辑与调色 / 设计创意 / 初级 / 219 / 16 / 4.4 / 2450 / 郑野;三维建模 Blender 入门 / 设计创意 / 中级 / 399 / 22 / 4.3 / 480 / 郑野;插画手绘基础 / 设计创意 / 初级 / 129 / 12 / 4.9 / 3020 / 苏黎;动效设计 AE 实战 / 设计创意 / 中级 / 459 / 20 / 4.6 / 540 / 郑野。\n职场这边:Excel 数据透视实战 / 职场技能 / 初级 / 129 / 10 / 4.8 / 4120 / 王琦;PPT 商务演示设计 / 职场技能 / 初级 / 149 / 12 / 4.7 / 3260 / 王琦;项目管理 PMP 备考 / 职场技能 / 高级 / 899 / 40 / 4.5 / 610 / 马骏;高效沟通与向上管理 / 职场技能 / 中级 / 259 / 8 / 4.4 / 980 / 马骏;财务报表分析入门 / 职场技能 / 初级 / 269 / 14 / 4.3 / 730 / 许静;数据分析师职业路径 / 职场技能 / 中级 / 599 / 26 / 4.6 / 1080 / 许静;时间管理与精力管理 / 职场技能 / 初级 / 99 / 6 / 4.2 / 5210 / 马骏;商务谈判实战心法 / 职场技能 / 高级 / 559 / 12 / 4.5 / 340 / 马骏;简历打磨与面试通关 / 职场技能 / 初级 / 79 / 5 / 4.1 / 6100 / 王琦。\n语言这边:雅思写作 7 分突破 / 语言学习 / 高级 / 799 / 30 / 4.7 / 890 / Emily Wang;零基础英语口语 / 语言学习 / 初级 / 199 / 24 / 4.5 / 3400 / Emily Wang;商务英语邮件写作 / 语言学习 / 中级 / 329 / 12 / 4.4 / 620 / Emily Wang;日语五十音到 N4 / 语言学习 / 初级 / 249 / 28 / 4.6 / 1560 / 佐藤遥;韩语入门发音课 / 语言学习 / 初级 / 179 / 16 / 4.2 / 740 / 金智恩;法语 A1 基础通关 / 语言学习 / 中级 / 389 / 26 / 4.3 / 310 / Claire。\n考试这边:考研数学强化冲刺 / 考试提分 / 高级 / 999 / 48 / 4.8 / 2300 / 李维;教师资格证笔试全程 / 考试提分 / 中级 / 399 / 32 / 4.4 / 1720 / 许静;公务员行测技巧课 / 考试提分 / 中级 / 459 / 30 / 4.3 / 1980 / 李维;高中物理满分攻略 / 考试提分 / 高级 / 699 / 36 / 4.6 / 560 / 李维;会计初级职称精讲 / 考试提分 / 中级 / 549 / 44 / 4.5 / 1440 / 许静。\n\n课程网格下面再加一块「本周直播预告」,三场公开课横排:周三 20:00《AI 时代的前端工程师》陈明、周五 19:30《作品集怎么做才加分》林岚、周日 10:00《雅思口语急救包》Emily Wang,每场卡片右下角一个「预约」按钮。\n\n最后是页脚,三列:关于我们(品牌故事 / 加入我们)、学习支持(常见问题 / 退款政策)、联系我们(合作邮箱 hi@zhixing.edu / 客服电话 400-800-1234),底部一行小字「京ICP备2021000000号 · 知行学堂」。\n\n视觉调子要克制干净:主色用靛蓝 #1F4ED8(按钮、强调文字、选中态都用它),页面底色浅灰 #F5F6F8,卡片白底、圆角、淡阴影,正文深灰。别搞花里胡哨的渐变。"
22
  },
23
  {
24
- "operator": "交互化",
25
- "request": "静态页看完了,现在把它变成真能用的。\n\n第一,筛选条要真的生效:分类、难度、价格三组各自单选,和右边的搜索框(按课程名模糊匹配,不区分大小写)叠加起来一起过滤,排序下拉四个模式也都要真排(价格从低到高、报名人数从高到低、评分从高到低,综合推荐就是运营清单里的原始顺序)。四个条件是叠加关系,不是互相覆盖。\n\n第二,课程列表改成分页,一页 9 门,底部给上一页/下一页和页码。注意一点:任何一个筛选条件或搜索词一变,页码要回到第 1 页,不能出现「第 4 页但只有 2 门课所以一片空白」这种事。要是筛出来一门都没有,就别硬撑空网格,给一句「没有找到符合条件的课程,换个条件试试」,旁边放个「清空筛选」,点一下所有条件复位、列表回到完整的 40 门第 1 页。\n\n第三,「加入清单」要能用。右上角挂一个选课清单入口,带数字角标,数字就是清单里的课程门数。同一门课已经在清单里了,按钮要变成已加入的样子,再点也不能让角标涨第二次。点开清单能看到已选课程的名字和各自价格,每条可以单独移除;全部移掉之后清单里显示「还没有选课,去挑一门吧」,底下的「去报名」按钮变成不可点的状态。\n\n价格这块财务给了规则:清单里选两门及以上,整单按九折算;选到五门及以上,整单按八折算;算出来有小数的,零头直接抹掉只留整数。清单底部要同时显示原价合计和折后应付。\n\n第四,「去报名」点下去走一个三步的流程(可以在弹层里走):第一步确认清单(列出课程、原价合计、折后应付);第二步填学员信息,要姓名和手机号,手机号必须是 11 位数字,不合规就当场给红字提示并且卡住不让进下一步,两步之间能返回上一步且填过的内容不丢;第三步是成功页,写清「已报名 X 门课程,实付 ¥Y」,这里的 X 和 Y 必须跟第一步看到的完全一致。"
26
  },
27
  {
28
- "operator": "删除区块",
29
- "request": "直播业务这个季度不做了,官网上跟直播有关的东西全部撤掉:课程网格下面那块「本周直播预告」整块拿掉,三场公开课的信息一条都不要留;顶部那条数据统计带里的「本周直播 3 场」也一起去掉,统计带就剩三项,其余三项的数字一个都别动。\n\n拿掉之后页面要顺下来,课程列表和页脚之间不能留一段莫名其妙的空白或者孤零零的分割线。另外提醒一句:这次只是删直播,上一版做的筛选、分页、选课清单和报名流程一个都不能受影响,删完我会照着老样子再点一遍。"
30
  },
31
  {
32
- "operator": "重构布局",
33
- "request": "用户反馈横着一排的筛选条太挤、条件多了看不过来,改版一下:把筛选整体挪到页面左侧做成一条竖向的侧栏,分类、难度、价格分组竖着排下来,搜索框也放进侧栏顶部;右边是结果区,结果区最上面一行放当前结果数量和排序下拉(排序别再留在侧栏里了),这一行下面是课程网格,宽屏下一行还是 3 张卡片,中等屏 2 张。侧栏和结果区顶部对齐,原来那条横向筛选条不要再留了。\n\n手机和窄屏上侧栏别硬塞,收成一个「筛选」按钮,点开是个抽屉或者面板,在里面选条件,关掉之后右边结果立刻是筛好的,卡片单列铺满。\n\n还有个分寸问题:侧栏要让人一眼看出自己当前选中了哪些条件,但整站还是要维持第一版那种干净克制的感觉,品牌强调色就沿用我们原来那一套,别再冒出第二种彩色来抢戏(表单报错那种红字提示不算,该红还是红)。\n\n最后老规矩,这是搬家不是重做:筛选组合、排序、每页 9 门的分页、选课清单的角标和折扣、报名的三步流程,改完之后都得跟改之前一模一样地好使,直播那块也别趁乱又冒出来。"
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": "首屏统计带呈现四项且数值精确:在售课程 40 门、累计学员 128,000+、签约讲师 86 位、本周直播 3 场;主视觉大标题为「找到适合你的那门课」,副标题含「7 天内可退」字样。"
50
  },
51
  {
52
  "id": "grid.all40",
53
  "m": 1,
54
- "dimension": "覆盖",
55
  "w": 1.5,
56
- "description": "课程网格一次性铺出 40 张卡片(可数),且任取一张卡片同时含封面图、课程名、分类标签、难度标签、讲师、评分、课时、报名人数、价格与「加入清单」按钮;例如 Python 入门与数据处理 卡片显示 编程开发、初级、陈明、4.8、12 课时、1240、¥299。"
57
  },
58
  {
59
  "id": "filterbar.static",
60
  "m": 1,
61
- "dimension": "覆盖",
62
  "w": 1.0,
63
- "description": "课程网格上方存在横向筛选条,分类组恰为 全部/编程开发/设计创意/职场技能/语言学习/考试提分 共 6 项、难度组 4 项、价格组 4 项(含 ¥200 以下、¥200–¥499、¥500 及以上);右侧搜索框占位提示精确为「搜课程名」,排序下拉选项依次为 综合推荐、价格从低到高、报名人数从高到低、评分从高到低 共 4 项。"
64
  },
65
  {
66
  "id": "live.block",
67
  "m": 1,
68
- "dimension": "覆盖",
69
  "w": 1.0,
70
- "description": "课程网格下方的「本周直播预告」区块列出 3 场,文案精确为 周三 20:00 AI 时代的前端工程师 陈明、周五 19:30 作品集怎么做才加分 林岚、周日 10:00 雅思口语急救包 Emily Wang,每场带「预约」按钮。"
71
  },
72
  {
73
  "id": "visual.tone",
74
  "m": 1,
75
- "dimension": "视觉",
76
  "w": 1.0,
77
- "description": "「登录 / 注册」按钮与强调元素使用靛蓝 #1F4ED8,页面底色为浅灰 #F5F6F8 一档,卡片为白底圆角带淡阴影;桌面宽屏下课程网格每行 3 张卡片对齐排列。"
78
  },
79
  {
80
  "id": "footer.icp",
81
  "m": 1,
82
- "dimension": "覆盖",
83
  "w": 1.0,
84
- "description": "页脚为三列结构(关于我们 / 学习支持 / 联系我们),含 hi@zhixing.edu 与 400-800-1234,底部小字精确为 京ICP备2021000000号 · 知行学堂。"
85
  },
86
  {
87
  "id": "page.nine",
88
  "m": 2,
89
- "dimension": "功能",
90
  "w": 1.5,
91
- "description": "无筛选时列表分页每页 9 门、共 5 页,翻到第 5 页恰好显示 4 张卡片;第 1 页第 1 张为运营清单原始顺序的 Python 入门与数据处理。"
92
  },
93
  {
94
  "id": "combo.diagonal",
95
  "m": 2,
96
- "dimension": "功能",
97
  "w": 1.5,
98
- "description": "同时选中 分类=编程开发、价格=¥500 及以上,并把排序切到「价格从低到高」,结果恰为 4 门且顺序为:前端性能优化实战 ¥549、算法与数据结构精讲 ¥699、Go 语言微服务实践 ¥759、Java 后端工程师训练营 ¥899,且不出现第 2 页。"
99
  },
100
  {
101
  "id": "sort.rating",
102
  "m": 2,
103
- "dimension": "功能",
104
  "w": 1.0,
105
- "description": "选 分类=职场技能 并把排序切到「评分从高到低」,结果恰为 9 门且只有 1 页(恰好占满一页无第 2 页),第 1 张为 Excel 数据透视实战(4.8)、第 2 张为 PPT 商务演示设计(4.7)。"
106
  },
107
  {
108
  "id": "combo.reset.empty",
109
  "m": 2,
110
- "dimension": "功能",
111
  "w": 1.5,
112
- "description": "先在未加任何筛选(共 5 页)时翻到第 3 页,再点选 分类=编程开发,页码自动回到第 1 页且网格无空白占位;在此基础上再选 难度=初级,结果恰为 5 门且只有 1 页;随后在搜索框输入 量子,显示「没有找到符合条件的课程,换个条件试试」与「清空筛选」,点击后恢复为 40 门第 1 页且分类/难度/价格三组均复位;另:搜索框输入小写 python 能匹配到 2 门。"
113
  },
114
  {
115
  "id": "cart.idem.empty",
116
  "m": 2,
117
- "dimension": "交互",
118
  "w": 1.5,
119
- "description": "点击某课程「加入清单」后角标由 0 变 1 且该按钮变为已加入态,连点 3 次角标仍为 1;打开清单可见每条目的课程名与各自价格(如 Python 入门与数据处理 ¥299);逐条移除到 0 时显示「还没有选课,去挑一门吧」,「去报名」按钮处于不可点击状态。"
120
  },
121
  {
122
  "id": "cart.discount",
123
  "m": 2,
124
- "dimension": "功能",
125
  "w": 1.5,
126
- "description": "清单含 Python 入门与数据处理 ¥299 与 Excel 数据透视实战 ¥129 时,原价合计显示 428、折后应付显示 385(428×0.9 抹零头);再加入 插画手绘基础 ¥129、时间管理与精力管理 ¥99、简历打磨与面试通关 ¥79 共 5 门时,原价合计 735、折后应付 588(735×0.8)。"
127
  },
128
  {
129
  "id": "wizard.three.step",
130
  "m": 2,
131
- "dimension": "交互",
132
  "w": 1.5,
133
- "description": "点「去报名」进入三步流程:第 1 步列出已选课程与应付金额;第 2 步手机号填 1380000 等非 11 位数字时出现错误提示且无法进入第 3 步,返回上一步再前进时已填姓名不丢失;填入合法 11 位手机号后第 3 步成功页显示的门数与实付金额与第 1 步完全一致(如 2 门、¥385)。"
134
  },
135
  {
136
  "id": "live.removed",
137
  "m": 3,
138
- "dimension": "覆盖",
139
  "w": 1.5,
140
- "description": "页面中再也找不到「本周直播预告」标题及 AI 时代的前端工程师、作品集怎么做才加分、雅思口语急救包 任一条目与「预约」按钮;课程列表与页脚之间不留空白占位块或孤立分割线。"
141
  },
142
  {
143
  "id": "stats.three",
144
  "m": 3,
145
- "dimension": "覆盖",
146
  "w": 1.5,
147
- "description": "顶部统计带由 4 项变为 3 项,本周直播 3 场 整项消失,剩余三项文案与数值仍为 在售课程 40 门、累计学员 128,000+、签约讲师 86 位。"
148
  },
149
  {
150
  "id": "regress.filter.after.delete",
151
  "m": 3,
152
- "dimension": "功能",
153
  "w": 1.0,
154
- "description": "删除直播内容后回归:不加筛选时仍为 40 门 5 页、末页 4 张;分类=语言学习 时结果为 6 门且只有 1 页。"
155
  },
156
  {
157
  "id": "regress.cart.after.delete",
158
  "m": 3,
159
- "dimension": "交互",
160
  "w": 1.0,
161
- "description": "删除直播内容后回归:加入 Python 入门与数据处理 与 Excel 数据透视实战,角标仍为 2 且折后应付仍显示 385,三步报名流程仍可走到成功页。"
162
  },
163
  {
164
  "id": "layout.sidebar",
165
  "m": 4,
166
- "dimension": "视觉",
167
  "w": 1.5,
168
- "description": "桌面宽屏(≥1200px)下筛选以竖向侧栏形式位于页面左侧(分类/难度/价格分组竖排、搜索框在侧栏内),右侧结果区每行 3 张卡片且顶部与侧栏顶部对齐;中等屏(约 769–1199px)下结果区每行 2 张卡片;原横向筛选条不再出现,页面中依旧没有任何直播区块。"
169
  },
170
  {
171
  "id": "layout.mobile.drawer",
172
  "m": 4,
173
- "dimension": "交互",
174
  "w": 1.5,
175
- "description": "窄屏(≤768px)下侧栏收为「筛选」入口,点击后打开抽屉或面板,在其中选择 分类=考试提分 并关闭后右侧结果立即变为 5 门且卡片单列铺开。"
176
  },
177
  {
178
  "id": "state.kept.after.refactor",
179
  "m": 4,
180
- "dimension": "功能",
181
  "w": 1.5,
182
- "description": "改版后筛选与排序仍完全生效:侧栏选 分类=设计创意 结果为 8 门且仅 1 页,再把排序切到「报名人数从高到低」,第 1 张为 插画手绘基础(3020),第 2 张为 短视频剪辑与调色(2450)。"
183
  },
184
  {
185
  "id": "state.cart.after.refactor",
186
  "m": 4,
187
- "dimension": "功能",
188
  "w": 1.0,
189
- "description": "改版后选课清单与报名链路未被破坏:加入任意 2 门后角标为 2 且折后应付仍按九折抹零显示,清空清单后「去报名」再次变为不可点击。"
190
  },
191
  {
192
  "id": "style.consistency",
193
  "m": 4,
194
- "dimension": "视觉",
195
  "w": 1.0,
196
- "description": "侧栏中被选中的筛选项有明确的选中标识(如靛蓝底色或靛蓝文字/边框),且品牌强调与选中态仍只使用 #1F4ED8 一种彩色,未出现第二种高饱和主题色(表单校验红字等语义/状态用色不计入);页面底色与卡片白底圆角淡阴影的第一版风格保持不变。"
197
  },
198
  {
199
  "id": "result.count.display",
200
  "m": 4,
201
- "dimension": "功能",
202
  "w": 1.0,
203
- "description": "结果区顶部一行同时显示当前结果数量与排序下拉(侧栏内不再出现排序下拉),且数量与实际卡片数一致:无筛选时显示 40;选 难度=中级 时显示 14,与列表分页对应(共 2 页,第 1 页 9 张、第 2 页 5 张)。"
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": "先把我们这版官网首页一比一做出来,截图我发你了,按图上看得见的部分来,文字一律保留图里的英文原文,不要翻译也不要换成别的说法。从上往下大概是:最顶上一条很窄的深色信息条;接着是白色页头,左边是 PaulHoda 字样的品牌标志加一面英国国旗,右边一排导航 Home、SEO、Blog、Case studies、Contact;再往下是首屏,左边是大标题 \"Welcome to PaulHoda.UK, your search engine optimisation (SEO) expert in London\"、下面几段介绍文字、一个蓝色圆角的 BOOK NOW 按钮和 \"5 Stars Rated on Google Reviews\" 的谷歌五星评价条,右边是一张谷歌搜索结果的截图(图片先放占位就行),截图下面是两行加粗大字 \"#1 with SEO\" 和 \"by PaulHoda.UK\"。再下面是居中标题 \"SEO Case Studies: Latest Achievements\",底下四个案例(ChrisBowers、Dental Practice、Scichart、Total K9),每个案例都是左边文字右边截图的两栏,左边要有小标题和带圆点的成绩清单。然后是灰底的 \"Results Timeline with our SEO Expertise\",里面是 1st Month 到 12th Month 六段进度说明,底部有一段很长的小字免责声明。再往下是 \"How Our Clients Review Us on Google\",两列排的评价卡一共七张,最后一张单独占一行的左边,每张卡里有姓名、网址、五颗星和英文评语。接着是 \"SEO Packages for the #1 page of Google.co.uk:\" 和四张深色的套餐卡,从左到右是 Standard SEO、Bronze SEO、Silver SEO、Gold SEO,四张卡顶部的标题条颜色分别是绿色、铜橙色、银蓝灰、金黄色。最后是 \"SEO Specialist in London UK\" 的长文段落,以及 \"50% of all UK SEO agencies buy SEO from us\" 标题下的多栏文案。整体白底、蓝色点缀的克制风格要还原。"
26
  },
27
  {
28
- "operator": "新增区块",
29
- "request": "光有静态套餐卡不够,客户老是打电话问价。我们要在评价区下面加一个可以逐个下单的方案商城。运营给的报价口述如下,你自己整理:我们卖的其实是一个组合——四个等级 Standard、Bronze、Silver、Gold;关键词包有 3 个��8 个、15 个、40 个四档;合约长度是 3 个月、6 个月、12 个月三种。全排列出来每一种都要作为一个能单独下单的方案摆在页面上,所以数量不少,页面上得有个总数给客户看。价格是老板拍的:Standard 每个关键词每月 39 镑、Bronze 58、Silver 89、Gold 139,乘上关键词个数就是月费;签半年的整份合约打九折、签一整年按八五折算,3 个月的没折扣;算出来有零头就直接抹掉,只留整镑数。每张方案上月费和这份合约一共要付多少都要写清楚,方案名字里要能看出等级、关键词档位和合约月数。另外运营点名了一批主推的:凡是 15 个或者 40 个关键词、并且签一整年的,都挂个 HOT 标,其他的不要挂。视觉上别自作主张换配色,等级用什么颜色你照着上面那四张深色套餐卡的绿/铜橙/银蓝/金来。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "方案太多了,客户滑不动。给商城加上挑选能力:等级可以多选(四个等级随便勾几个),关键词档位和合约月数也都能单独筛,另外给个搜索框能按方案名字模糊找。排序四种都要有:月费从低到高、月费从高到低、合约总价从低到高、合约总价从高到低;不选排序时按默认顺序,默认就是等级 Standard、Bronze、Silver、Gold 排下来,同一个等级里关键词少的在前,关键词一样的合约短的在前。列表每页固定 12 条,下面给翻页,页码要能看出一共几页。筛选面板旁边永远显示当前筛出来多少个方案,数字得跟列表实际对得上。排序出现并列的时候(比如月费一样),一律按合约短的排前面,这样每次刷新看到的顺序都一样。改了任何筛选条件都要跳回第一页,别让客户停在一个空页上。如果搜出来什么都没有,给一句友好的提示,并且这时候翻页控件不要再出现。"
34
  },
35
  {
36
- "operator": "删除区块",
37
- "request": "上线评审过了两点:第一,原来那四张深色的 SEO Packages 卡片已经被新商城完全替代,留着反而让客户以为有两套价格,整块拿掉,那行 \"SEO Packages for the #1 page of Google.co.uk:\" 的标题也一起去掉;第二,\"Results Timeline with our SEO Expertise\" 那个灰底的时间线区块法务说免责声明措辞有风险,也整��删掉,1st Month 到 12th Month 那些文字和下面的免责小字一个都不要留。删干净之后页面别塌出一大片空白,上下区块的间距要跟其他区块看着差不多,首屏、案例、评价这些原样保留,顺序不要乱,底部的 \"SEO Specialist in London UK\" 长文和 \"50% of all UK SEO agencies buy SEO from us\" 那几栏也要留着。还有一点要盯住:套餐卡虽然删了,但商城里四个等级的那套颜色是从它们身上来的,不能跟着一起消失,该是绿的还是绿的。整站继续保持参考图那种白底加蓝色点缀的克制风格,不要因为这次改动冒出新的品牌色。商城的筛选、排序、翻页也别被这次删除影响到。"
38
  },
39
  {
40
- "operator": "交互化",
41
- "request": "最后把生意闭环做出来。每个方案卡上要能加入购物车,同一个方案连点多次是加数量而不是多出一行,页面上要有个购物车入口带件数角标,客户滑到商城区域的时候这个入口得一直看得见、够显眼别让人找——但配色你从我们已有的那套里挑(首屏蓝按钮的蓝,或者等级色),别为了醒目再引进一个新颜色,整站看起来还是同一个牌子。打开购物车能看到每行的方案名、单价、数量和小计,这里的单价是客户签这份合约要付的总价(不是月费,别写错了),小计就是单价乘数量;数量能加能减,减到 0 这行就没了;全空的时候给个空购物车提示,并且结算按钮点不动。购物车里有个优惠码输入框,填 SEO10 整单打九折、零头照样抹掉,应付金额实时更新。点结算走三步:第一步填姓名和邮箱,邮箱里没有 @ 就不让进下一步并给出提示;第二步确认订单,把每一行和最终应付金额列清楚,还能退回第一步改信息而且填过的东西不能丢;第三步提交后给个下单成功的页面,上面的金额要跟第二步确认的一模一样,同时购物车清空、角标归零。还有个细节别搞错:已经加进购物车的方案,如果客户随后把筛选改成看不到它了,购物车里的行和角标不能变,但列表里它既然被筛掉了就不该还有加购的入口。"
42
  }
43
  ],
44
  "checklist": [
45
  {
46
  "id": "hero.nav.copy",
47
  "m": 1,
48
- "dimension": "覆盖",
49
  "w": 1.5,
50
- "description": "页面最顶部为一条深色窄信息条;其下页头右侧导航自左至右依次为 Home、SEO、Blog、Case studies、Contact 共 5 项,左侧为 PaulHoda 品牌标志加英国国旗;首屏大标题原文为 \"Welcome to PaulHoda.UK, your search engine optimisation (SEO) expert in London\"(英文原文,未被替换为中文或其他业务文案)。"
51
  },
52
  {
53
  "id": "hero.twocol.cta",
54
  "m": 1,
55
- "dimension": "视觉",
56
  "w": 1.0,
57
- "description": "首屏为左右两栏:左栏含介绍段落、一个蓝色圆角 BOOK NOW 按钮和写有 \"5 Stars Rated on Google Reviews\" 的五星评价条;右栏为搜索结果图(可占位),其正下方是两行加粗大字 \"#1 with SEO\" 与 \"by PaulHoda.UK\"。"
58
  },
59
  {
60
  "id": "cases.four.layout",
61
  "m": 1,
62
- "dimension": "视觉",
63
  "w": 1.0,
64
- "description": "居中标题 \"SEO Case Studies: Latest Achievements\" 之下恰有 4 个案例区(ChrisBowers、Dental Practice、Scichart、Total K9),每个案例为左文字右图片的两栏,左栏含至少一条带圆点的成绩列表项。"
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\" 区为两列卡片网格,评价卡恰为 7 张(第 7 张单独占一行且位于左列),每张卡含姓名、网址、五颗星与英文评语。"
72
  },
73
  {
74
  "id": "packages.four.colors",
75
  "m": 1,
76
- "dimension": "视觉",
77
  "w": 1.5,
78
- "description": "【本条按里程碑 1 完成时的页面评审;里程碑 4 之后该区块被删除属预期,不在本条判定范围】\"SEO Packages for the #1 page of Google.co.uk:\" 下为 4 张深色套餐卡,标题自左至右为 Standard SEO、Bronze SEO、Silver SEO、Gold SEO,其顶部标题条颜色依次为绿色、铜橙色、银蓝灰、金黄色且四色互不相同。"
79
  },
80
  {
81
  "id": "timeline.footer.copy",
82
  "m": 1,
83
- "dimension": "覆盖",
84
  "w": 1.0,
85
- "description": "【时间线部分按里程碑 1 完成时的页面评审,里程碑 4 之后被删除属预期】灰底 \"Results Timeline with our SEO Expertise\" 区含 1st Month 至 12th Month 六段说明与底部免责小字;页面底部另有 \"SEO Specialist in London UK\" 长文段与 \"50% of all UK SEO agencies buy SEO from us\" 标题下的多栏文案(该两段为最终态亦须保留的内容),文字均为参考图英文原文。"
86
  },
87
  {
88
  "id": "shop.count48",
89
  "m": 2,
90
- "dimension": "覆盖",
91
  "w": 1.5,
92
- "description": "评价区下方出现方案商城区块,方案总数为 48 个(4 个等级 × 关键词 3/8/15/40 四档 × 合约 3/6/12 个月三档),页面上可见的方案总数文案显示 48。"
93
  },
94
  {
95
  "id": "shop.monthly.exact",
96
  "m": 2,
97
- "dimension": "功能",
98
  "w": 1.5,
99
- "description": "月费按等级单价(Standard 39 / Bronze 58 / Silver 89 / Gold 139)乘关键词数计算并显示:Standard·3 关键词显示 £117,Silver·15 关键词显示 £1335,Gold·40 关键词显示 £5560。"
100
  },
101
  {
102
  "id": "shop.total.discount",
103
  "m": 2,
104
- "dimension": "功能",
105
  "w": 1.5,
106
- "description": "合约总价 = 月费×月数,6 个月打九折、12 个月打八五折、3 个月不打折且零头向下抹为整镑:Standard·3 关键词·12 个月 = £1193,Bronze·8 关键词·6 个月 = £2505,Silver·15 关键词·12 个月 = £13617,Gold·40 关键词·3 个月 = £16680。"
107
  },
108
  {
109
  "id": "shop.card.fields",
110
  "m": 2,
111
- "dimension": "视觉",
112
  "w": 1.0,
113
- "description": "每张方案卡同时显示等级、关键词档位、合约月数、月费与合约总价五项信息,且等级标识颜色沿用参考图套餐卡配色(Standard 绿 / Bronze 铜橙 / Silver 银蓝 / Gold 金),四色互不相同。"
114
  },
115
  {
116
  "id": "shop.hot.eight",
117
  "m": 2,
118
- "dimension": "功能",
119
  "w": 1.0,
120
- "description": "带 HOT 标的方案恰为 8 个,且全部满足「关键词 15 或 40 且合约 12 个月」;其余 40 个方案不带 HOT 标(例如 Gold·40·6 个月无标,Silver·15·12 个月有标)。"
121
  },
122
  {
123
  "id": "list.default.page3",
124
  "m": 3,
125
- "dimension": "功能",
126
  "w": 1.5,
127
- "description": "不加任何筛选、使用默认排序(等级 Standard→Bronze→Silver→Gold,同等级关键词少→多,再合约短→长)、每页 12 条时共 4 页;第 3 页第 1 条为 Silver·3 关键词·3 个月,其月费显示 £267、合约总价显示 £801。"
128
  },
129
  {
130
  "id": "sort.monthly.asc",
131
  "m": 3,
132
- "dimension": "功能",
133
  "w": 1.5,
134
- "description": "切到月费从低到高(并列时合约短的在前)且无筛选时,第 1 页最后一条为 Standard·8 关键词·12 个月(月费 £312、总价 £3182),第 2 页第 1 条为 Gold·3 关键词·3 个月(月费 £417)。"
135
  },
136
  {
137
  "id": "sort.other.two",
138
  "m": 3,
139
- "dimension": "功能",
140
  "w": 1.0,
141
- "description": "另外两种排序同样可用且结果正确:无筛选下选「月费从高到低」时第 1 页第 1 条为 Gold·40 关键词·3 个月(月费 £5560,并列按合约短的在前);选「合约总价从低到高」时第 1 页第 1 条为 Standard·3 关键词·3 个月(总价 £351)。"
142
  },
143
  {
144
  "id": "filter.combo.eight",
145
  "m": 3,
146
- "dimension": "功能",
147
  "w": 1.5,
148
- "description": "等级多选 Silver+Gold 且合约筛为 12 个月时,计数文案显示 8 个方案、一页显示完且翻页只剩 1 页;在此基础上再把关键词档位筛为 40,计数变为 2,按合约总价从高到低排序时首条为 Gold·40·12 个月显示 £56712、次条为 Silver·40·12 个月显示 £36312。"
149
  },
150
  {
151
  "id": "search.match.silver",
152
  "m": 3,
153
- "dimension": "功能",
154
  "w": 1.0,
155
- "description": "清空其他筛选后在搜索框输入 \"Silver\",计数显示 12、翻页为 1 页,列表中出现的方案全部为 Silver 等级,无 Standard/Bronze/Gold 方案混入。"
156
  },
157
  {
158
  "id": "filter.reset.page1",
159
  "m": 3,
160
- "dimension": "交互",
161
  "w": 1.0,
162
- "description": "在第 3 页时改变任一筛选条件会立即回到第 1 页;清空全部筛选与搜索后计数恢复 48、翻页恢复 4 页。"
163
  },
164
  {
165
  "id": "search.empty.state",
166
  "m": 3,
167
- "dimension": "交互",
168
  "w": 1.0,
169
- "description": "在搜索框输入不存在的词(如 Platinum)后,列表显示友好空态提示、计数显示 0,且此时页面上不再出现翻页控件。"
170
  },
171
  {
172
  "id": "del.blocks.gone",
173
  "m": 4,
174
- "dimension": "覆盖",
175
  "w": 1.5,
176
- "description": "最终页面上已不存在四张深色 SEO Packages 卡片及 \"SEO Packages for the #1 page of Google.co.uk:\" 标题,也不存在灰底时间线区块——全页搜索不到 \"Results Timeline\"、\"12th Month\" 及其免责声明小字。"
177
  },
178
  {
179
  "id": "del.colors.kept",
180
  "m": 4,
181
- "dimension": "视觉",
182
  "w": 1.5,
183
- "description": "删除后商城方案卡上的等级配色依旧生效:Standard 绿、Bronze 铜橙、Silver 银蓝、Gold 金四色仍可见且互不相同,未退化为同一灰色或默认色。"
184
  },
185
  {
186
  "id": "del.order.kept",
187
  "m": 4,
188
- "dimension": "覆盖",
189
  "w": 1.0,
190
- "description": "删除后页面自上而下顺序仍为顶部深色信息条 → 页头(导航五项)→ 首屏(含蓝色 BOOK NOW 按钮)→ 案例区(4 个案例)→ 评价区(7 张评价卡)→ 商城区块 → \"SEO Specialist in London UK\" 长文与 \"50% of all UK SEO agencies buy SEO from us\" 多栏文案。"
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": "删除操作后商城功能未被波及:默认仍为 48 个方案 4 页,筛选、搜索、排序、翻页均可正常使用且计数与列表一致(如 Silver+Gold 且 12 个月仍为 8 条)。"
205
  },
206
  {
207
  "id": "cart.merge.badge",
208
  "m": 5,
209
- "dimension": "交互",
210
  "w": 1.5,
211
- "description": "对 Standard·3 关键词·12 个月连续点击加入购物车两次后,购物车中该方案只有一行且数量显示 2(不新增第二行),该行单价显示 £1193(即合约总价,而非月费 £117)、行小计显示 £2386,购物车入口角标按件数显示 2。"
212
  },
213
  {
214
  "id": "cart.total.promo",
215
  "m": 5,
216
- "dimension": "功能",
217
  "w": 1.5,
218
- "description": "购物车含 Standard·3 关键词·12 个月 ×1(行单价与小计均显示 £1193)与 Bronze·8 关键词·6 个月 ×1(行单价与小计均显示 £2505)时,小计合计显示 £3698;输入优惠码 SEO10 后应付金额变为 £3328(九折后零头抹去),移除优惠码后金额回到 £3698。"
219
  },
220
  {
221
  "id": "checkout.wizard.chain",
222
  "m": 5,
223
- "dimension": "交互",
224
  "w": 1.5,
225
- "description": "在购物车含 Standard·3 关键词·12 个月 ×1 与 Bronze·8 关键词·6 个月 ×1、且已应用优惠码 SEO10(应付 £3328)的状态下点击结算:第一步邮箱填 \"abc.com\"(无 @)时无法进入下一步并出现提示,改为合法邮箱后可进入;第二步列出这两行与应付金额 £3328,且可返回第一步、姓名/邮箱仍保留;提交后成功页显示金额同为 £3328,随后购物车为空、角标显示 0。"
226
  },
227
  {
228
  "id": "cart.filter.coupling",
229
  "m": 5,
230
- "dimension": "交互",
231
  "w": 1.5,
232
- "description": "先加购 Gold·40 关键词·12 个月,再把等级筛选切为仅 Standard:列表中该方案消失且不存在可点击的加购入口,但购物车内该行及数量、角标数字均保持不变;把筛选清空后该方案重新出现,购物车仍只有一行不重复。"
233
  },
234
  {
235
  "id": "cart.empty.idempotent",
236
  "m": 5,
237
- "dimension": "交互",
238
  "w": 1.0,
239
- "description": "购物车为空时显示空态文案且结算按钮不可用(点击无任何跳转);将某行数量减到 0 时该行被移除,移除全部行后回到空态且角标显示 0。"
240
  },
241
  {
242
  "id": "style.accent.consistent",
243
  "m": 5,
244
- "dimension": "视觉",
245
  "w": 1.0,
246
- "description": "购物车入口在滚动到商城区域时始终可见(固定入口或区块内常驻入口);全站未引入参考图既有配色(白底、首屏 BOOK NOW 的蓝色、四个等级色、顶部深色信息条的深色)之外的新品牌色/新强调色,加购与结算按钮的强调色取自上述既有配色且各处用法一致。"
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": "我们门店 SOLDOUT LA 的官网首页,设计那边只给了一张长图稿,你先原样把这一屏做出来,文案一个字都别改、别换成别的品牌的话术,图片没有就用灰底占位块顶上。从上往下大致是这样:最顶上贴着一条通栏的 cookie 提示条,左边有个小饼干图标和一句 \"This website uses cookies to ensure you get the best experience.\",后面跟一个 \"Learn more\" 链接,右边并排两个按钮 \"Decline\" 和 \"Accept\",最右一个关闭的叉。往下是一张接近全宽的店招大图(招牌上写 SOLDOUTLA),左右留白。再往下是门店信息带:左边一个斜向上的小箭头图标,下面一行大写标题 \"LOCATED AT TOPANGA VILLAGE*\",其中 TOPANGA VILLAGE* 要更粗更重;右边是营业时间两行,右对齐,\"Sun - Thurs: 11am - 7pm\" 和 \"Fri - Sat: 11am - 9pm\",时间部分加粗;最右边一小块地图(占位即可),地图下面一行小字地址 \"6250 CA-27 Unit 1580, Canoga Park, CA 91367\"。接着是小标题 \"Newest Arrivals\",下面四列两行共八张商品卡,卡片上半部是浅灰底的方形图片区,下面左对齐两行小字:商品名和价格,依次是 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,其中第二行第二张图没图,就显示一个禁止符号和 \"No image\" 的灰色占位。再下面是一整块黑色背景区,中间放一个视频/图片占位(画面里是 SOLDOUT LA 的收银屏),右下角一个暂停样式的小按钮,黑块底部中间有一个圆形向下箭头。紧接着是一整屏的背景照片区,上面压着一段白色的全大写正文:\"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*\",字距拉开,段落下面居中一个浅黄色药丸按钮 \"VIEW SHOP\",按钮下面还有一个大的斜向上白色箭头。最后是黑色的页脚区:左上小字 \"SoldOut LA\",下面大标题 \"Newsletter\" 带斜箭头,右侧一段小字 \"Stay ahead of the game and be the first to know about our latest drops by signing up for our newsletter.\",下面一个宽输入框 placeholder 是 \"Enter your Email\",右边一个红色 \"SIGN UP\" 按钮,再下面一行灰色小字 \"By clicking Sign Up you're confirming that you agree with our Terms and Conditions.\"。页脚再往下左边写 \"Questions?\",右边是五条问答行,每行一条细下划线、右侧一个 \">\" 箭头,依次是 \"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?\"。最底部一行左边 HOME / ABOUT / CONTACT 三个链接,右边两个社交图标。整体是黑白灰的冷淡极简感,字体偏工业风。"
25
  },
26
  {
27
- "operator": "数据化",
28
- "request": "首页现在只有八件是写死的,太假了。把库存台账搬上去,商品区改成吃这份清单,全部 42 件一次性铺出来(先不用分页),原来那八张写死的卡片就由台账里对应的条目顶替,不要留着重复出现;台账上的名字和首页现在的写法有出入的(比如 Jordan 4 那双台账里没有 After Brick、Kobe 6 台账写的是 Protro),一律以台账为准。卡片样式还是沿用上一版那个浅灰图块加左对齐两行文字的样子,别改得面目全非;价格统一两位小数。台账是仓库同事随手记的,我贴给你:鞋这边——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(这双早没了);Nike Dunk Low Panda $110;Nike SB Dunk Low Sandy Bodecker $560(没了);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(没了);Jordan 11 Retro Cool Grey (2021) $260;Travis Scott Jordan 1 Low Reverse Mocha $1150(没了);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(没了)。服饰这边——HMDD Crystal Sweatpants Orange $180;HMDD Crystal Sweatpants Green $250;Chrome Hearts White Foil Hoodie $795;Supreme Box Logo Crewneck Navy $650(没了);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(没了);Denim Tears Cotton Wreath Sweatpants $340;Hellstar Studios Tee Black $95。配件是零碎的几件——Supreme Box Logo Beanie Red $60;Chrome Hearts Trucker Hat Black $420(没了);Nike Everyday Crew Socks 3-Pack $22;Goyard Card Holder Black $780(没了);Stussy Bucket Hat Stone $65;Crep Protect Cleaning Kit $30。凡是我写了\"没了\"的都算售罄,卡片上要一眼看出来。商品区顶上再给我写一句总数,数字得跟实际铺出来的对得上。"
29
  },
30
  {
31
- "operator": "状态化",
32
- "request": "42 件全堆着没法逛,商品区得能挑能翻。上面加一排分类切换:全部 / 鞋 / 服饰 / 配件,选中的那个要有明显的激活样式;旁边一个\"只看现货\"的开关,打开后售罄的那些就不出现在列表里;再给一个排序,默认就按台账里记的先后顺序来,另外提供价格从低到高、从高到低两种。列表每页只放 12 件,下面给页码和上一页下一页,翻页、换筛选、换排序之后总数文案要跟着实时变,翻到不存在的页要自动回到第一页。另外,我们页面现在连个站点导航都没有,顶上先补一条简洁的导航条(放品牌名和几个占位链接就行,下面复刻好的那些内容别动),导航条右侧放一个心愿单图标带数字角标:卡片上能\"加入心愿单\",加过的再点一次就取消,售罄的商品根本不给加;角标数字只跟真正加进去的件数走,筛选把某件藏起来或者翻了页都不该让数字变。顺手把两个老毛病收拾了:页脚那五条问答现在点了没反应,要能展开答案(答案文案随便写一句像样的),而且同一时间最多只展开一条,点已经展开的那条就收起来;顶上的 cookie 条点 Decline 或 Accept 之后要真的消失,页面内容跟着上移,刷新之前别再冒出来。"
33
  },
34
  {
35
- "operator": "新增区块",
36
- "request": "运营要推会员了,在商品区和那块黑色视频区之间插一段会员订阅的区块,标题就叫 \"SOLDOUT CLUB\",下面三档并排,档名分别写清楚 Basic、Pro、Founder:Basic 月付 $19、Pro 月付 $49、Founder 月付 $99,每档下面列三条权益文案(你按潮流店的调性写,比如优先购、免运费之类)。上面放一个月付/年付的切换,默认月付;切到年付就显示整年的价钱——年费是按月费打八五折算一整年,带零头的直接抹掉只留整数美元,同时在每档上标出一年能省多少钱,省的钱就是原来一年的价减掉现在的年费,数字自己对得上就行;切回月付时那行省钱标注就不要显示了,别留着误导人。另外会员的核心卖点是全场八五折,所以再给个\"会员价预览\"的开关(放在商品区顶上就行),打开之后所有商品卡上的价格换成会员价,算法跟年费一样是八五折抹零头;但注意排序还是按原价排的,开不开这个预览不许把列表顺序、总数、分页给我搞乱了。心愿单那边也顺带改一下:除了角标数字,还要显示一个合计金额,合计是心愿单里这些商品当前显示价格的总和,会员价预览开着的时候合计也跟着按会员价算。"
37
  },
38
  {
39
- "operator": "换肤",
40
- "request": "月底有一波深夜 drop,市场部想要页面能整体切到暗黑模式。在顶部导航条右侧再加一个主题切换的小开关,切过去之后整页(导航条、门店信息带、商品区、会员订阅区、那段全大写文案区、Newsletter 和问答区、页脚)都变成近黑底浅字,切回来完全恢复原样。有个矛盾你自己拿捏:市场部说暗黑下\"要够醒目\",希望用招牌上那种橙色做强调;但我们店的调性还是冷淡极简,别搞得整页花里胡哨——橙色只点在少数关键位置(比如选中的分类、主按钮、心愿单角标这类),而且两套主题里强调色的用法要保持一致,不要浅色模式一个规矩、���黑模式又一个规矩。最重要的一点:换肤只是换皮,用户当时选的分类、只看现货、排序、翻到第几页、会员价预览、心愿单里加的东西,切完之后一个都不能丢,展开的那条问答也别给我收回去。之前做的东西(门店地址、营业时间、VIEW SHOP 按钮、邮件订阅框、五条问答)在暗黑下要一样在、文案一字不变、排版不塌。"
41
  }
42
  ],
43
  "checklist": [
44
  {
45
  "id": "replicate.cookie",
46
  "m": 1,
47
- "dimension": "视觉",
48
  "w": 1.0,
49
- "description": "页面最顶部有贴顶通栏的 cookie 提示条,文案逐字为 \"This website uses cookies to ensure you get the best experience.\" 并跟随 \"Learn more\" 链接,右侧并排 \"Decline\" 与 \"Accept\" 两个按钮及一个关闭叉,四者在同一水平行内。"
50
  },
51
  {
52
  "id": "replicate.hero-video",
53
  "m": 1,
54
- "dimension": "视觉",
55
  "w": 1.0,
56
- "description": "cookie 条之下是一张近全宽、左右留白的店招图(含 SOLDOUTLA 字样,或等尺寸灰底占位块);商品网格之后另有一整块通栏黑色区域,其中央为媒体占位、右下角有暂停样式的小控件、黑块底部中央有一个圆形向下箭头。"
57
  },
58
  {
59
  "id": "replicate.located",
60
  "m": 1,
61
- "dimension": "视觉",
62
  "w": 1.0,
63
- "description": "店招大图下方的信息带左侧为全大写标题 \"LOCATED AT TOPANGA VILLAGE*\"(后半部分明显更粗),右侧右对齐两行 \"Sun - Thurs: 11am - 7pm\" 与 \"Fri - Sat: 11am - 9pm\",最右地图占位块下方一行小字为 \"6250 CA-27 Unit 1580, Canoga Park, CA 91367\"。"
64
  },
65
  {
66
  "id": "replicate.grid",
67
  "m": 1,
68
- "dimension": "视觉",
69
  "w": 1.5,
70
- "description": "\"Newest Arrivals\" 标题下为四列两行共 8 张卡片,卡片为浅灰底方形图片区加下方左对齐的名称与价格两行;8 个价格逐字为 $180.00、$250.00、$320.00、$795.00、$300.00、$300.00、$380.00、$90.00,且第二行第二张卡显示禁止符号与 \"No image\" 占位。"
71
  },
72
  {
73
  "id": "replicate.statement",
74
  "m": 1,
75
- "dimension": "视觉",
76
  "w": 1.0,
77
- "description": "整屏背景照片区上压着白色全大写、字距拉开的段落,以 \"WE ARE CONSTANTLY UPDATING OUR INVENTORY\" 开头、以 \"IN STOCK FOR YOU*\" 结尾;段落下方居中一个浅黄色药丸按钮,按钮文字为 \"VIEW SHOP\",按钮下方另有一个大号斜向上的白色箭头。"
78
  },
79
  {
80
  "id": "replicate.footer",
81
  "m": 1,
82
- "dimension": "覆盖",
83
  "w": 1.0,
84
- "description": "深色页脚左上有小字 \"SoldOut LA\"、其下大标题 \"Newsletter\",右侧含 placeholder 为 \"Enter your Email\" 的输入框与红色 \"SIGN UP\" 按钮,按钮下方一行灰色小字逐字为 \"By clicking Sign Up you're confirming that you agree with our Terms and Conditions.\";再往下 \"Questions?\" 右侧恰好 5 条带 \">\" 箭头的问答行(首条 \"Do You Offer International Shipping?\"、末条 \"What Payment Methods Do You Offer?\"),最底行为 HOME / ABOUT / CONTACT 与右侧社交图标。"
85
  },
86
  {
87
  "id": "data.total42",
88
  "m": 2,
89
- "dimension": "功能",
90
  "w": 1.5,
91
- "description": "商品区一次性渲染 42 张商品卡(无分页时可全部数到,不存在与台账重复的旧硬编码卡片),且商品区顶部可见的总数文案显示为 42,与实际卡片数一致。"
92
  },
93
  {
94
  "id": "data.soldout9",
95
  "m": 2,
96
- "dimension": "功能",
97
  "w": 1.0,
98
- "description": "恰有 9 件商品带明显售罄标记(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),其余 33 件无售罄标记。"
99
  },
100
  {
101
  "id": "data.sample",
102
  "m": 2,
103
- "dimension": "功能",
104
  "w": 1.0,
105
- "description": "抽验三条数据准确:Travis Scott Jordan 1 Low Reverse Mocha 显示 $1150.00 且为售罄;Nike Everyday Crew Socks 3-Pack 显示 $22.00 且非售罄;Chrome Hearts White Foil Hoodie 显示 $795.00 且非售罄。"
106
  },
107
  {
108
  "id": "data.naming",
109
  "m": 2,
110
- "dimension": "功能",
111
  "w": 1.0,
112
- "description": "名称一律采用台账写法:页面中存在 \"Jordan 4 Retro OG Nigel Sylvester Brick\"(不含 After Brick)与 \"Nike Kobe 6 Protro Grinch (2020)\"(Protro 而非 Proto),且全页不再出现旧写法 \"…Brick After Brick\" 或 \"Kobe 6 Proto\"。"
113
  },
114
  {
115
  "id": "data.format",
116
  "m": 2,
117
- "dimension": "视觉",
118
  "w": 1.0,
119
- "description": "全部 42 个价格均为 \"$\" 加两位小数格式(如 $75.00、$1150.00),且卡片沿用需求1 的浅灰图片块 + 左对齐名称/价格两行排版,宽屏下仍为多列网格未退化为单列长列表。"
120
  },
121
  {
122
  "id": "state.counts",
123
  "m": 3,
124
- "dimension": "功能",
125
  "w": 1.5,
126
- "description": "分类切到 全部/鞋/服饰/配件 时总数文案依次为 42 / 24 / 12 / 6,当前选中项有明显区别于其他项的激活样式;开启\"只看现货\"后同样三次切换(全部/鞋/配件)总数变为 33 / 19 / 4,关闭后恢复 42 / 24 / 6。"
127
  },
128
  {
129
  "id": "state.paging",
130
  "m": 3,
131
- "dimension": "功能",
132
  "w": 1.0,
133
- "description": "每页最多 12 张卡片:全部分类共 4 页且第 4 页恰好 6 张;\"鞋\"+只看现货 共 2 页且第 2 页恰好 7 张;停留在第 2 页时收紧筛选导致页数变少,列表自动回到第 1 页而非空白。"
134
  },
135
  {
136
  "id": "state.sort",
137
  "m": 3,
138
- "dimension": "功能",
139
  "w": 1.0,
140
- "description": "默认排序即台账顺序:全部分类第 1 页首张为 Jordan 4 Retro OG Nigel Sylvester Brick $320.00、第 12 张为 New Balance 550 White Green $95.00;切到\"价格从高到低\"后全部分类首张为 Travis Scott Jordan 1 Low Reverse Mocha $1150.00(带售罄标记)、第二张为 Chrome Hearts White Foil Hoodie $795.00;在 鞋+只看现货+价格从高到低 下首张为 Nike Kobe 6 Protro Grinch (2020) $380.00。"
141
  },
142
  {
143
  "id": "state.chain",
144
  "m": 3,
145
- "dimension": "交互",
146
  "w": 1.5,
147
- "description": "依次执行 选\"鞋\" → 开\"只看现货\" → 选\"价格从低到高\" → 翻到第 2 页:第 1 页首张为 Vans Knu Skool Black $75.00,第 2 页首张为 New Balance 990v6 Grey $210.00、末张为 Nike Kobe 6 Protro Grinch (2020) $380.00,且全程无售罄商品出现。"
148
  },
149
  {
150
  "id": "state.wish",
151
  "m": 3,
152
- "dimension": "交互",
153
  "w": 1.0,
154
- "description": "页面顶部新增的站点导航条(含品牌名与链接)右侧有心愿单图标与数字角标,且角标随加入件数精确变化:加入 2 件后显示 2,对同一件再点一次变回 1;点击任一售罄商品无法加入且角标数字不变;随后切换分类、开关只看现货或翻页,角标数字保持不变。"
155
  },
156
  {
157
  "id": "state.faq-cookie",
158
  "m": 3,
159
- "dimension": "交互",
160
  "w": 1.0,
161
- "description": "点击任一问答行展开答案,再点另一条时前一条自动收起(同一时刻最多 1 条展开),点已展开的那条则收起;点击 Decline 或 Accept 后 cookie 条从页面消失、下方内容上移,且在不刷新的情况下不再出现。"
162
  },
163
  {
164
  "id": "block.plan-price",
165
  "m": 4,
166
- "dimension": "功能",
167
  "w": 1.5,
168
- "description": "商品区与黑色视频区之间存在标题为 \"SOLDOUT CLUB\" 的三档订阅区块,档名 Basic / Pro / Founder 清晰可见,默认月付显示 $19 / $49 / $99;切到年付后三档价格精确显示为 $193 / $499 / $1009。"
169
  },
170
  {
171
  "id": "block.save",
172
  "m": 4,
173
- "dimension": "功能",
174
  "w": 1.0,
175
- "description": "年付状态下每档标出的年省金额依次为 $35 / $89 / $179(等于月付×12 减去年费);切回月付后该省钱标注在三档中均不显示,三档权益各 3 条文案始终可见。"
176
  },
177
  {
178
  "id": "block.toggle",
179
  "m": 4,
180
- "dimension": "交互",
181
  "w": 1.0,
182
- "description": "月付/年付开关连点 4 次后回到初始的月付态且三档价格仍为 $19 / $49 / $99,中间不出现 $193.8 之类带零头或错档的数字。"
183
  },
184
  {
185
  "id": "block.member-price",
186
  "m": 4,
187
- "dimension": "功能",
188
  "w": 1.5,
189
- "description": "开启\"会员价预览\"后商品卡价格按原价×85% 向下取整到整数美元显示:$320.00→$272.00、$180.00→$153.00、$795.00→$675.00、$22.00→$18.00、$1150.00→$977.00;关闭后全部恢复原价。"
190
  },
191
  {
192
  "id": "block.coupling",
193
  "m": 4,
194
- "dimension": "功能",
195
  "w": 1.5,
196
- "description": "在 鞋+只看现货+价格从低到高+第2页 的状态下开启会员价预览:总数仍为 19、仍是 2 页、第 2 页仍是 7 张,首张仍为 New Balance 990v6 Grey 且价格显示 $178.00,末张仍为 Nike Kobe 6 Protro Grinch (2020) 显示 $323.00。"
197
  },
198
  {
199
  "id": "block.wish-total",
200
  "m": 4,
201
- "dimension": "功能",
202
  "w": 1.0,
203
- "description": "心愿单同时显示件数与合计金额:加入 Jordan 4 Retro OG Nigel Sylvester Brick 与 Stussy 8 Ball Tee Black 后合计为 $390.00;开启会员价预览后合计变为 $331.00;关闭后回到 $390.00。"
204
  },
205
  {
206
  "id": "skin.dark",
207
  "m": 5,
208
- "dimension": "视觉",
209
  "w": 1.5,
210
- "description": "顶部导航条右侧存在主题切换控件,点击后导航条、门店信息带、商品区、SOLDOUT CLUB 区、Newsletter 与问答区、页脚全部变为近黑底浅色文字(正文与背景对比清晰、无浅底残块),再次点击完整恢复浅色外观。"
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": "在 鞋+只看现货+价格从低到高+第2页+会员价预览开启+心愿单 2 件 的状态下切换主题:切换后仍停留在第 2 页、仍是同样 7 张卡片、首张仍为 New Balance 990v6 Grey $178.00、总数仍显示 19、心愿单角标仍为 2,已展开的那条问答仍保持展开。"
225
  },
226
  {
227
  "id": "skin.regression",
228
  "m": 5,
229
- "dimension": "覆盖",
230
  "w": 1.5,
231
- "description": "暗黑模式下需求1 的内容全部保留且文案一字未改:\"LOCATED AT TOPANGA VILLAGE*\"、两行营业时间、地址行、\"VIEW SHOP\" 按钮、placeholder \"Enter your Email\" 的输入框与 \"SIGN UP\" 按钮、5 条问答行均可见,问答手风琴仍保持同一时刻最多展开 1 条。"
232
  },
233
  {
234
  "id": "skin.plan-intact",
235
  "m": 5,
236
- "dimension": "功能",
237
  "w": 1.0,
238
- "description": "暗黑模式下 SOLDOUT CLUB 区块仍为三档并排布局未错位或堆叠,切到年付后价格仍精确为 $193 / $499 / $1009、省钱金额仍为 $35 / $89 / $179。"
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": "我们今年要把三个拍摄棚和线上棚的档期直接开放给客户预约,先在案例列表之后、页脚之前加一块「档期预约 / BOOK A SESSION」。排期按 2025 年 10 月来排(10 月 6 日是周一),运营给我的单子写得比较乱,你自己整理:雅典的 Alpha 棚,10月6日到10月10日周一到周五,每天三场,10:00、14:00、19:00;塞萨洛尼基的 Beta 棚只开 10月7、9、13、15、17 这五天,每天两场,11:00 和 16:00;线上直播棚 Gamma 是 10月6日到10月17日之间的工作日晚上 20:00 各一场,也就是 10/6、10/7、10/8、10/9、10/10、10/13、10/14、10/15、10/16、10/17;米科诺斯的 Delta 棚只做周末,10月11、12、18、19 这四天,每天 09:30 和 15:00 两场。位子数:Alpha 每场12个、Beta 每场8个、Gamma 每场30个、Delta 每场6个。价格:Alpha 和 Beta 每位120欧,Gamma 每位45欧,Delta 每位150欧。目前被订掉的只有这几场:Alpha 10月6日10:00 已经订满;Alpha 10月8日14:00 订了11个;Beta 10月9日16:00 订满;Gamma 10月13日20:00 订满;Delta 10月11日09:30 订满;其余场次一个都没卖。每一条要看得出日期、时间、棚名(带城市)、单价和还剩几个位子,订满的要一眼看出来并且不能下单。板块最上面给我三个数:总场次、还能约的场次、剩下的位子总数——数字必须跟下面的列表对得上。顶部导航里也加一个能直接跳到这块的新入口,Agency 和 Works 这两个老入口的去处别动。这块要够醒目让人一眼找到,但整站调性别给我改乱了:颜色只准用站里现在已经有的那几个,别冒出新色。"
28
  },
29
  {
30
- "operator": "交互化",
31
- "request": "列表太长,客户得能挑。给我按棚筛选(全部 / Alpha / Beta / Gamma / Delta 五个选项)、一个「只看还有位子的」开关、还有排序可以在「按时间先后」和「按价格从低到高」之间切;列表一页放12条,多出来的翻页,筛选或排序一变就回到第一页。预约本身做成三步:先点某一场的预约按钮,然后选人数(最多4个人,也不能超过这场还剩的位子),再到确认页看到总价才下单。价钱这样算:3个人及以上给9折,算出来带零头的直接抹掉只留���数欧元。确认之后这场的剩余位子要真的少掉,顶上那几个统计数字也得跟着对上。第二步要能退回去重挑一场,退回去人数从1重新开始。还有别让人连点两下确认就被扣两次位子。"
32
  },
33
  {
34
- "operator": "修复",
35
- "request": "另外报个毛病:案例那几块的标题原本是错落的阶梯排版(「A WAY /   TO LABEL / SCENTS」那种一层层缩进的感觉),页面刚打开还看着对,可一滚到它们淡入出现之后,几行字连同上面的小标题就全都齐刷刷顶到左边去了,阶梯全没了,三个案例都这样。麻烦修好,淡入效果本身别删掉,其它地方也别顺手改。"
36
  },
37
  {
38
- "operator": "删除区块",
39
- "request": "底部那条黑色的横向滚动横幅(写着 DARE TO GO HYPER?、CONTACT US 还有那个紫色大光标的)我们不要了,整条拿掉。删完页面别塌,也别留一条黑边或者一大块空白;顶部导航的 Contact 还是得能用,但它现在的去处改成档期预约那一块。页脚那块蓝底和右下角的圆形徽标保持原样别动。删完再自己过一遍,预约那块的数字、筛选和标题排版别被弄坏了。"
40
  }
41
  ],
42
  "checklist": [
43
  {
44
  "id": "data.rows.43",
45
  "m": 1,
46
- "dimension": "覆盖",
47
  "w": 1.5,
48
- "description": "预约板块位于最后一个案例(Onoma Hotel)之后、页脚之前,板块标题含「档期预约」与「BOOK A SESSION」字样;默认筛选下数据全集为 43 条时段(Alpha 15、Beta 10、Gamma 10、Delta 8),第一页恰好显示 12 条,翻页可遍历到全部 43 条。"
49
  },
50
  {
51
  "id": "data.stats.exact",
52
  "m": 1,
53
- "dimension": "功能",
54
  "w": 1.5,
55
- "description": "板块顶部三个统计数字精确为:总场次 43、还能约的场次 39、剩余位子 541;三个数字同时可见且与列表数据一致。"
56
  },
57
  {
58
  "id": "data.soldout.4",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.0,
62
- "description": "恰好 4 条被标记为订满(Alpha 10月6日10:00、Beta 10月9日16:00、Gamma 10月13日20:00、Delta 10月11日09:30),这 4 条没有可点击的预约入口;Alpha 10月8日14:00 显示剩余 1 个位子且仍可预约。"
63
  },
64
  {
65
  "id": "data.fields.price",
66
  "m": 1,
67
- "dimension": "覆盖",
68
  "w": 1.0,
69
- "description": "每条时段都同时显示日期、时间、棚名(含城市/线上标识)、单价与剩余位子;单价按棚正确:Alpha 与 Beta 为 120 欧、Gamma 为 45 欧、Delta 为 150 欧。"
70
  },
71
  {
72
  "id": "data.style.palette",
73
  "m": 1,
74
- "dimension": "视觉",
75
  "w": 1.0,
76
- "description": "预约板块只使用站内种子样式中已出现的颜色(黑 #0a0a0a、白 #fff、蓝 #2622ff、淡黄 #f2eda2、页脚/英雄区既有紫色系),未出现种子中不存在的新色相(如绿色、橙色、红色等);且板块内预约按钮、订满标记、筛选选中态共用同一个强调色,不出现两种不同强调色混用。"
77
  },
78
  {
79
  "id": "data.nav.entry",
80
  "m": 1,
81
- "dimension": "交互",
82
  "w": 1.0,
83
- "description": "顶部导航新增一个指向预约板块的入口,点击后页面滚动到该板块并使「档期预约 / BOOK A SESSION」标题进入视口;同时 Agency 入口仍滚到页脚介绍区、Works 入口仍滚到案例区,两者目标未被改动。"
84
  },
85
  {
86
  "id": "filter.combo.counts",
87
  "m": 2,
88
- "dimension": "功能",
89
  "w": 1.5,
90
- "description": "五个棚筛选项齐全且计数精确:全部 43 条、Alpha 15 条、Beta 10 条、Gamma 10 条、Delta 8 条;叠加「只看还有位子的」后分别为 39、14、9、9、7 条。"
91
  },
92
  {
93
  "id": "filter.paging.reset",
94
  "m": 2,
95
- "dimension": "交互",
96
  "w": 1.5,
97
- "description": "每页 12 条:默认分 4 页且各页条数为 12/12/12/7;开启「只看有位子」后末页为 3 条;处于第 3 页时切换任一筛选或排序,列表立即回到第 1 页且首条是新结果集的第一条。"
98
  },
99
  {
100
  "id": "sort.price.first",
101
  "m": 2,
102
- "dimension": "功能",
103
  "w": 1.0,
104
- "description": "切到「价格从低到高」时首页第一条是 45 欧的 Gamma 线上场;切回「按时间先后」时首条是 10月6日 10:00 的 Alpha 场;同价位之间仍按时间先后排列。"
105
  },
106
  {
107
  "id": "book.chain.total",
108
  "m": 2,
109
- "dimension": "交互",
110
  "w": 1.5,
111
- "description": "三步预约链完整可走:点某场预约→选人数→确认页显示总价。Gamma 场选 3 人总价显示 121(45×3 打9折抹零),Delta 场选 3 人显示 405,Alpha 场选 4 人显示 432,2 人及以下不打折(如 Alpha 2 人为 240)。"
112
  },
113
  {
114
  "id": "book.limit.remain",
115
  "m": 2,
116
- "dimension": "功能",
117
  "w": 1.0,
118
- "description": "第二步人数上限双重生效:剩余位子 ≥4 的普通场次(如 Alpha 任一未满场)最多只能选到 4 人、加不到 5 人;剩余 1 个位子的 Alpha 10月8日14:00 最多只能选到 1 人、加不上 2 人;在第二步退回第一步换另一场后,人数重新从 1 开始而不是保留上一次的值。"
119
  },
120
  {
121
  "id": "book.stats.sync",
122
  "m": 2,
123
- "dimension": "功能",
124
  "w": 1.5,
125
- "description": "为 Gamma 某未满场下单 3 人后:该场剩余位子相应减少,顶部剩余位子总数由 541 变为 538,总场次仍为 43、可约场次仍为 39;连续快速点击两次确认只扣一次(剩余位子不会变成 535);被筛选隐藏的场次不会出现在预约流程里。"
126
  },
127
  {
128
  "id": "fix.indent.zoniou",
129
  "m": 3,
130
- "dimension": "视觉",
131
  "w": 1.5,
132
- "description": "滚动使第一个案例淡入完成后,标题仍是阶梯排版:「TO LABEL」行的左起点明显右于「A WAY」与「SCENTS」(约为视口宽度的 5%,1920 宽下约 100px),且小标题「Zoniou Perfumes」与「A WAY」「SCENTS」左侧对齐(无额外缩进)。"
133
  },
134
  {
135
  "id": "fix.indent.others",
136
  "m": 3,
137
- "dimension": "视觉",
138
  "w": 1.0,
139
- "description": "淡入后第二个案例的「SOMETHING TO」「GENERATION Z」仍比「TUNE IN」右移约视口宽度的 5.9%(1920 宽下约 113px),小标题「Shook Radio」与「TUNE IN」左对齐;第三个案例的小标题「Onoma Hotel」与「A STORY OF AN」「HOTEL」仍比「INSTAGRAMMABLE」右移约视口宽度的 5%(约 96px)。"
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": "修复未伤及预约板���:修复后统计仍为 43 / 39 / 541(未下单前提下),Gamma + 只看有位子仍为 9 条,三步预约链仍可走通。"
161
  },
162
  {
163
  "id": "del.marquee.gone",
164
  "m": 4,
165
- "dimension": "覆盖",
166
  "w": 1.5,
167
- "description": "页面任何位置都不再出现黑色滚动横幅的文字「DARE TO GO HYPER?」「CONTACT US」及那个紫色大光标图形,也没有残留的黑色空条或高度超过一屏的空白间隙。"
168
  },
169
  {
170
  "id": "del.footer.intact",
171
  "m": 4,
172
- "dimension": "视觉",
173
  "w": 1.0,
174
- "description": "页脚保持原样:蓝色底、白色文字,三行机构介绍文案、Facebook 与 Instagram 两个链接、© Tria 2021 与 Privacy policy 均在,右下角圆形 tria→hyper→Branding 徽标位置不变。"
175
  },
176
  {
177
  "id": "del.nav.contact",
178
  "m": 4,
179
- "dimension": "交互",
180
  "w": 1.5,
181
- "description": "顶部导航 Contact 点击后滚动到档期预约板块(该板块标题进入视口),既不是无反应、也不是跳回页面顶部或页脚。"
182
  },
183
  {
184
  "id": "del.regress.stats",
185
  "m": 4,
186
- "dimension": "功能",
187
  "w": 1.0,
188
- "description": "删除横幅后预约板块未被破坏:统计仍为 43 / 39 / 541,Delta + 只看有位子仍为 7 条,且仍能完成一次三步预约并使剩余位子总数正确减少。"
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": "在 src/styles.css 的案例(works)样式段落之后,插入一条优先级更高、只在滚动淡入完成后才生效的覆盖规则,使已显示的案例标题失去阶梯缩进。具体做法:在 `.work-title .line` 规则之后新增形如 `.reveal.is-visible .eyebrow, .reveal.is-visible .work-title .line { padding-left: 0; }` 的规则(选择器与书写风格要与文件其余部分保持一致,不加任何注释、不加 !important 以免过于显眼)。不要修改 Works.jsx、useReveal.js 或任何行内 --indent 值,不要触碰 header、hero、marquee、footer 的样式,不得产生控制台报错或布局报错。效果应为:页面首次加载、元素尚未进入视口时缩进仍存在,一旦淡入类名加上,三个案例的小标题与标题各行全部塌成左对齐。"
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": "先做最急的:浅色那一整段「The Button / 数字真伪」这周下架,法务还没批。把它整段从首页拿走——浅底色的整块背景、上面那行小字 DIGITAL PROOF OF AUTHENTICITY、'Introducing The Button: our digital superhero' 大标题、下面的 Read the story 链接,还有满天飘的那六个圆形浮雕图案,一个都别留下。拿掉之后不要在页面中间留一条白缝或者一大块空屏,短片 Lost Recording 那段结束就应该顺顺地接到页脚。页脚右上角那个回到顶部的箭头照旧得好使。"
28
  },
29
  {
30
- "operator": "换肤",
31
- "request": "接着把整站换成我们资讯品牌「Dispatch」的夜读皮肤。底色别再用那种死黑了,统一走墨蓝 #0B1520(页面主体底色、香氛+订阅那块深色画布、页脚都是这个色);各区块顶上那种全大写的小标、首屏那句副标题,这些说明性小字统一用冷灰 #9AA7B4;所有可点的文字链接(Discover the design、Discover the fragrances、Explore the Film、订阅那条)、首屏 Enter 按钮的底色、页脚回到顶部的箭头、还有订阅身份的选中态,统统用我们的琥珀 #C8922F。风格上我们是编辑部,克制一点——首屏那个大标题还是保持白的,别搞成满屏发金,各区块大标题也别染色,反正就是:能点的、被选中的才用琥珀,全站一个规矩。品牌署名顺手改掉:首屏页眉和菜单浮层顶栏那两处 moooi 都换成小写 dispatch(那种拉开的字距感觉保留),页脚版权那行改成 ©2025 Dispatch;其它地方的英文原文案这轮先不动。还有页脚那个国家选择,按钮文案改成 Select your region,名单按我们现在的发行区来,运营发我的是这么一串(顺序乱的,你自己理):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 —— 一个都不能漏,点开能看到全名单,选了谁按钮上就显示谁并且把列表收起来。"
32
  },
33
  {
34
- "operator": "修复",
35
- "request": "读者投诉一个老问题:首屏正中那个 Enter 按钮点下去页面纹丝不动,第二屏 Boogie 那块的 Discover the design 也点不动;以前点 Enter 能平滑滚到 Boogie 那屏,点 Discover the design 能把 Boogie 那屏顶到屏幕最上方。请把它查出来修好,别顺手把别的按钮改坏了(菜单徽章、Sound 开关、页脚地区选择、回到顶部都还得照常)。另外顺带确认一下订阅那条链路是完整的:选身份 → 填邮箱 → 点订阅出感谢文案 → 再改邮箱回到可提交状态,中途已经选好的身份不许被重置。"
36
  },
37
  {
38
- "operator": "响应式",
39
- "request": "最后收拾移动端。现在手机上惨不忍睹:首屏文字挤成一团互相压着,左右还能拉出横向滚动条。请把首页在手机 375、平板 768、桌面 1440 三档都调好:首屏里小标、大标题、副标题、Enter、Sound、Menu 徽章要自上而下排开互不重叠且都待在首屏区域里;菜单浮层、订阅表单、页脚导航和地区名单在手机上都要完整可用、不溢出屏幕、点得到。桌面那一版的样子别改乱了,之前定的皮肤和刚修好的滚动在小屏上也得一样好使。"
40
  }
41
  ],
42
  "checklist": [
43
  {
44
  "id": "remove.copy.gone",
45
  "m": 1,
46
- "dimension": "覆盖",
47
  "w": 1.5,
48
- "description": "在任意滚动位置全页搜索,均不存在文字 'Introducing The Button'、'Digital proof of authenticity'(含大小写变体)与 'Read the story';且全页不存在任何「整屏浅色区块」——定义为背景色 RGB 三通道均 ≥230 且自身可见高度 ≥ 视口高度 80% 的可见区块。"
49
  },
50
  {
51
  "id": "remove.discs.gone",
52
  "m": 1,
53
- "dimension": "视觉",
54
  "w": 1.0,
55
- "description": "页面中不再渲染任何一张圆形浮雕装饰图(原 disc-a~disc-f 六张图片全部不出现,页面图片总数相应减少 6 张)。"
56
  },
57
  {
58
  "id": "remove.seam",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.5,
62
- "description": "Lost Recording 短片区块的底边与页脚顶边之间的垂直间隙不超过 8px,两者之间没有任何其他可见区块或空白屏。"
63
  },
64
  {
65
  "id": "remove.backtotop",
66
  "m": 1,
67
- "dimension": "交互",
68
  "w": 1.0,
69
- "description": "滚动到页面底部后点击页脚的向上箭头,页面回到顶部(垂直滚动量回到 0±5px),首屏标题 'A LIFE EXTRAORDINARY' 重新出现在视口内。"
70
  },
71
  {
72
  "id": "skin.bg.navy",
73
  "m": 2,
74
- "dimension": "视觉",
75
  "w": 1.5,
76
- "description": "页面主体底色(body/首屏所在容器的背景)、'Stay in the loop' 所在深色画布、页脚三处取样均为 #0B1520(各通道允许 ±3),不再是原来的 #010101/近黑。"
77
  },
78
  {
79
  "id": "skin.accent.links",
80
  "m": 2,
81
- "dimension": "视觉",
82
  "w": 1.5,
83
- "description": "Discover the design、Discover the fragrances、Explore the Film、订阅提交这几条文字链接的文字与下划线颜色均为 #C8922F(±3);同时首屏大标题 'A LIFE EXTRAORDINARY' 仍为白色(#FFFFFF 附近),未被染成琥珀色。"
84
  },
85
  {
86
  "id": "skin.accent.controls",
87
  "m": 2,
88
- "dimension": "视觉",
89
  "w": 1.0,
90
- "description": "首屏 Enter 按钮的底色为 #C8922F(±3),页脚回到顶部箭头的描边/填充同为 #C8922F(±3)。"
91
  },
92
  {
93
  "id": "skin.wordmark",
94
  "m": 2,
95
- "dimension": "覆盖",
96
  "w": 1.0,
97
- "description": "三处品牌署名位置均已替换:首屏页眉与菜单浮层顶栏的字标都显示为小写 'dispatch' 且保留明显拉开的字母间距(字距不小于字号的 0.3 倍),页脚版权行显示 '©2025 Dispatch';这三处不再出现 moooi/Moooi。页面其它英文原文案(如订阅按钮文案)不在本条约束范围内。"
98
  },
99
  {
100
  "id": "skin.region.count",
101
  "m": 2,
102
- "dimension": "功能",
103
  "w": 1.5,
104
- "description": "页脚地区按钮初始文案为 'Select your region';点开后列表恰好 42 项,且包含 Türkiye、United Arab Emirates、Argentina、Czechia 四项。"
105
  },
106
  {
107
  "id": "skin.region.select",
108
  "m": 2,
109
- "dimension": "交互",
110
  "w": 1.0,
111
- "description": "1440 宽下,在展开的地区列表中点击 Argentina,列表收起且按钮文字变为 Argentina;再次点开列表后仍为 42 项,选择 Japan 后按钮文字变为 Japan。"
112
  },
113
  {
114
  "id": "skin.restraint",
115
  "m": 2,
116
- "dimension": "视觉",
117
  "w": 1.0,
118
- "description": "说明性小字为冷灰 #9AA7B4(±3):首屏 'Moooi presents' 小标、香氛区 'Brand-new' 小标、短片区 'A series of short films' 小标与首屏副标题 'A unique journey through the unexpected.' 四处取样均满足;且这四处与 Boogie、香氛两处大标题均非琥珀色,即琥珀仅出现在可点击元素与选中态上,四个区块表现一致。"
119
  },
120
  {
121
  "id": "fix.enter.scroll",
122
  "m": 3,
123
- "dimension": "功能",
124
  "w": 1.5,
125
- "description": "在 1440 宽、页面处于顶部时点击 Enter,页面发生向下滚动(垂直滚动量 > 500px),滚动停止后标题 'Boogie to the rhythm of Space' 完整出现在视口内。"
126
  },
127
  {
128
  "id": "fix.anchor.link",
129
  "m": 3,
130
- "dimension": "功能",
131
  "w": 1.0,
132
- "description": "先把页面滚到香氛区('A scent journey' 标题可见)作为起点,再点击 Boogie 区块内的 'Discover the design':页面应向上滚动并把 Boogie 区块顶到屏幕最上方(该区块顶边与视口顶部距离不超过 10px,其标题在视口内);若点击后视口位置与点击瞬间相比无任何变化则判失败。"
133
  },
134
  {
135
  "id": "fix.regress.menu",
136
  "m": 3,
137
- "dimension": "交互",
138
  "w": 1.0,
139
- "description": "修复后点击 Menu 徽章仍能打开全屏菜单浮层并显示 Products、Brand-new、Stories、Spaces、Showrooms、Contact 六个链接;点击 Close 后浮层关闭,且页面垂直滚动位置与打开菜单前一致(差值不超过 5px)。"
140
  },
141
  {
142
  "id": "fix.regress.footer",
143
  "m": 3,
144
- "dimension": "功能",
145
  "w": 1.0,
146
- "description": "修复后页脚地区选择器仍能展开出 42 项并完成一次选择(选 Canada 后按钮显示 Canada);首屏 Sound 按钮点击后在 'Sound on' 与 'Sound off' 之间来回切换;Enter 按钮底色仍为 #C8922F(±3)。"
147
  },
148
  {
149
  "id": "fix.chain.newsletter",
150
  "m": 3,
151
- "dimension": "交互",
152
  "w": 1.5,
153
- "description": "完整链路可走通:点击 Press 后 Press 呈选中高亮且高亮色为 #C8922F(±3)、Consumer 同时失去高亮 → 在邮箱框输入 reader@dispatch.io 并提交,提交按钮文案变为感谢文案 → 再向邮箱框补输一个字符,按钮文案恢复为初始渲染时的订阅文案,且此时选中的仍是 Press(未被重置为 Consumer)。"
154
  },
155
  {
156
  "id": "rwd.no.hscroll",
157
  "m": 4,
158
- "dimension": "视觉",
159
  "w": 1.5,
160
- "description": "375 宽视口下页面不产生横向滚动(文档可滚动宽度不超过视口宽度 +1px),在页脚地区列表展开状态下同样不产生横向滚动;且页脚 5 条导航项(地区按钮、Press Area、Shipping & Return Policy、FAQ、Newsletter)文字均完整可见不被截断、左右边界都在视口内。"
161
  },
162
  {
163
  "id": "rwd.region.mobile",
164
  "m": 4,
165
- "dimension": "交互",
166
  "w": 1.0,
167
- "description": "375 宽下点击页脚地区按钮可展开列表且列表项完整可见(不被视口左右边界裁切),点击 Canada 后列表收起、按钮文字变为 Canada;随后点击页脚 FAQ 链接页面不报错且不出现横向位移。"
168
  },
169
  {
170
  "id": "rwd.hero.stack",
171
  "m": 4,
172
- "dimension": "视觉",
173
  "w": 1.5,
174
- "description": "375 宽下首屏内的小标、大标题、副标题、Enter 按钮、Sound 按钮、Menu 徽章六个元素自上而下排列,两两边界框无重叠,且全部位于首屏区块的垂直范围内(不溢出到下一区块)。"
175
  },
176
  {
177
  "id": "rwd.enter.mobile",
178
  "m": 4,
179
- "dimension": "交互",
180
  "w": 1.5,
181
- "description": "375 宽下点击 Enter 仍能滚动到 Boogie 区块(标题 'Boogie to the rhythm of Space' 进入视口);点击 Menu 打开浮层后六个链接每行文字完整不被截断或溢出屏幕,点击其中任一链接浮层关闭。"
182
  },
183
  {
184
  "id": "rwd.state.coupling",
185
  "m": 4,
186
- "dimension": "功能",
187
  "w": 1.0,
188
- "description": "375 宽下订阅区的三个身份选项与邮箱输入框均完整可见且未超出视口宽度,点击 Press 后高亮色仍为 #C8922F(±3);同时在 375、768、1440 三档宽度下都搜索不到 'Introducing The Button' 文案,也不存在背景 RGB 三通道均 ≥230 的整屏浅色区块。"
189
  },
190
  {
191
  "id": "rwd.desktop.intact",
192
  "m": 4,
193
- "dimension": "视觉",
194
  "w": 1.0,
195
- "description": "1440 宽下桌面版式保持原样:首屏大标题为居中的大号衬线大写文字(字号明显大于 375 档),Boogie 区块仍为整屏背景图加居中文案,页脚导航链接仍竖向排列,未被移动端样式污染。"
196
  },
197
  {
198
  "id": "rwd.tablet",
199
  "m": 4,
200
- "dimension": "功能",
201
  "w": 1.0,
202
- "description": "768 宽下同样不产生横向滚动,且点击 Enter 后页面滚动并使 Boogie 区块标题进入视口。"
203
  }
204
  ],
205
  "inject": {
206
- "type": "选择器漂移",
207
- "saboteur_prompt": "在 src/components/FeatureDome.jsx 中,把该 section 上的 id 从 \"brand-new\" 改为 \"feature-dome\"(只改这一个属性值)。不要修改 src/components/Hero.jsx 里 scrollToNext 中的 document.getElementById('brand-new'),也不要修改 FeatureDome 内 text-link 的 href=\"#brand-new\"。结果是:点击首屏 Enter 按钮与点击 'Discover the design' 都不再滚动到该区块,且控制台无任何报错(getElementById 返回 null 后被可选链吞掉,锚点无匹配目标)。禁止添加任何注释或 TODO,禁止改动样式、文案、其他组件与任何无关功能;不要在提交里留下解释性字符串。"
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": "这个站现在只是一份报告,我们打算顺手把它变成工作室对外的案例入口。在「How design teams level up」那一大段之后、底部那块下载 CTA 之前,插一块「我们的案例」。\n\n案例清单我这边没整理成表格,口述一下,你按规律铺就行:一共 42 个,编号从 P001 一路排到 P042。行业是按编号轮着来的——P001 金融、P002 医疗、P003 零售、P004 教育、P005 出行,到 P006 又回到金融,就这么循环排满 42 个。上线年份也是轮的,P001 是 2019,一年一年往上加,到 P006 是 2024,P007 再从 2019 重新开始。投入人天好记:编号数字乘 2 再加 10(所以 P001 是 12 人天,P042 是 94 人天)。\n\n每张卡片上编号、行业、上线年份、投入人天这四样都得看得见;标题你们自己起,别重名就行。\n一屏别堆太多:每页 12 个,下面配翻页,要能看出现在是第几页、一共几页,第一页不能再往前翻、最后一页不能再往后翻。\n列表上方给一排行业筛选(要有「全部」)和一个排序切换:默认按编号从小到大;另一种叫「最新优先」,年份新的排前面,同一年的编号小的在前。筛选和排序要能一起用,翻页也跟着当前的筛选排序走。\n视觉上跟现在这个站是一套的,别弄出一块看着像临时外挂上去的组件。"
28
  },
29
  {
30
- "operator": "状态化",
31
- "request": "光看不够,客户得能挑。每张案例卡片上加个「加入提案篮」,加过的那张要明确显示它已经在篮子里了,再点也不能重复算数。\n\n顶部那条导航上要能随时看到篮子里有几件——一件都没有的时候就别显示数字了,免得人误会。\n点开篮子能看到已选清单,每件可以单独移出,也能一键清空。清单里要算钱:一个人天按 1880 块,全篮加起来算总价;挑满 3 件(含 3 件)以上整单给 7 个点的优惠,算完小数点后面的零头直接抹掉;不到 3 件就按原价,别显示优惠。\n篮子空的时候要有一句提示,别是一片空白,而且那个「生成提案」按钮这时候不能点。\n还有两点注意:筛选把某些案例藏起来的时候,它们自然就没法被加进来;反过来,翻页、换筛选、换排序都不该把已经选好的东西弄丢。\n篮子那个数字要一眼看得见,但别把顶上那条导航原来的样子改乱了。"
32
  },
33
  {
34
- "operator": "修复",
35
- "request": "另外有个老毛病一直没人管:往下滚到「A view of the design universe」那个圆环图,最大的那一段(Enterprise 71%)画得不对——它本来应该绕着圆环走一大圈的,现在变成从旁边斜着抄近路连过去的一小截,整个环缺了一大块,看上去像只有二十几个百分点。旁边 Agency、Nonprofit、Government 那几段和四条文字标注倒都是对的。麻烦把它修好,修的时候别把这块里别的东西碰坏了,也别影响刚做好的案例列表和提案篮。"
36
  },
37
  {
38
- "operator": "删除区块",
39
- "request": "最后,「Ready for liftoff?」那整块下载报告的 CTA 我们不留了——星空背景、那张行星地面的插画、右边那串 insights 清单和按钮,一起去掉,整段删干净,底下别留出一条空背景带,页脚要直接接上来。\n但页面里原来指向它的入口不能变成死的:顶部导航右边那颗按钮、还有正文里那条粉色的「Get the full report.」文字链,都改成把人带到案例那块去(或者直接把提案篮打开),点了必须有反应。\n改完再自己确认一遍:圆环图还是修好后的样子,篮子里已经选的东西也不能被清空。"
40
  }
41
  ],
42
  "checklist": [
43
  {
44
  "id": "works.first.page",
45
  "m": 1,
46
- "dimension": "覆盖",
47
  "w": 1.5,
48
- "description": "「我们的案例」区块出现在 Levels(How design teams level up)内容之后,默认状态下第一页正好显示 12 张卡片,编号依次为 P001 至 P012,且页面上可读出当前为第 1 页、总页数为 4(「第 1 页 / 共 4 页」「1/4」等任意等价写法均可)。"
49
  },
50
  {
51
  "id": "works.last.page",
52
  "m": 1,
53
- "dimension": "功能",
54
  "w": 1.5,
55
- "description": "在不加筛选的默认排序下翻到第 4 页,只显示 6 张卡片且编号为 P037–P042;此时继续点击「下一页」页面内容与页码不变,回到第 1 页后点击「上一页」同样不变。"
56
  },
57
  {
58
  "id": "works.filter.count",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.0,
62
- "description": "选中行业「医疗」后列表恰好剩 9 张卡片(P002、P007、P012、P017、P022、P027、P032、P037、P042),且页码信息显示当前第 1 页、总页数为 1。"
63
  },
64
  {
65
  "id": "works.filter.all",
66
  "m": 1,
67
- "dimension": "功能",
68
  "w": 1.0,
69
- "description": "在已筛选「医疗」且排序为「最新优先」的状态下点击「全部」,列表恢复为 42 条(首页 12 张),总页数回到 4 且当前页回到第 1 页,同时「最新优先」排序仍生效:首页第一张为 P006(2024 年、同年编号最小),而非 P001。"
70
  },
71
  {
72
  "id": "works.combo.sort",
73
  "m": 1,
74
- "dimension": "功能",
75
  "w": 1.5,
76
- "description": "在筛选「医疗」的同时切换到「最新优先」,卡片顺序的第一张是 P012(2024)、第二张是 P042(2024)、最后一张是 P037(2019)。"
77
  },
78
  {
79
  "id": "works.card.fields",
80
  "m": 1,
81
- "dimension": "覆盖",
82
  "w": 1.0,
83
- "description": "卡片 P014 上同时可读到编号 P014、行业「教育」、年份 2020、投入人天 38,以及一个非空标题。"
84
  },
85
  {
86
  "id": "works.cards.titles",
87
  "m": 1,
88
- "dimension": "功能",
89
  "w": 1.0,
90
- "description": "默认排序下逐页浏览 4 页共 42 张卡片,每张标题均非空,且 42 个标题两两互不重复(不存在任何一个标题出现两次)。"
91
  },
92
  {
93
  "id": "works.visual.style",
94
  "m": 1,
95
- "dimension": "视觉",
96
  "w": 1.0,
97
- "description": "案例区块沿用站内既有排版语言:区块大标题为无衬线粗体黑色大字(与 \"A view of the design universe\" 一类同风格),筛选选中态/按钮使用站内粉红强调色系(#ff3366 / #f6335f 一类),不出现浏览器默认蓝色链接、灰色系统边框或与全站割裂的默认控件外观。"
98
  },
99
  {
100
  "id": "basket.badge.idempotent",
101
  "m": 2,
102
- "dimension": "交互",
103
  "w": 1.5,
104
- "description": "点击 P001 的「加入提案篮」后导航区角标显示 1 且该卡片按钮变为已加入状态;再次点击该卡片按钮,角标仍为 1,篮内仍只有 1 件。"
105
  },
106
  {
107
  "id": "basket.price.discount",
108
  "m": 2,
109
- "dimension": "功能",
110
  "w": 1.5,
111
- "description": "篮中为 P001+P014 两件时合计金额数值等于 94000(含千分位与否不限),且无优惠提示;再加入 P042 后件数变 3,合计金额数值等于 251769(270720 的 93% 抹去小数),并出现优惠提示。"
112
  },
113
  {
114
  "id": "basket.remove.recalc",
115
  "m": 2,
116
- "dimension": "功能",
117
  "w": 1.0,
118
- "description": "在上述 3 件状态下逐件移出中的 P014,角标变为 2、篮内剩 P001 与 P042、合计金额数值等于 199280,且优惠提示消失。"
119
  },
120
  {
121
  "id": "basket.clear.empty",
122
  "m": 2,
123
- "dimension": "交互",
124
  "w": 1.0,
125
- "description": "篮子面板提供一键清空控件;在篮内有 2 件及以上时点击它,篮子被一次性清空:导航角标不再显示任何数字、篮内出现空态提示文案而非一片空白、「生成提案」按钮变为不可点击(点击后页面无任何变化)。"
126
  },
127
  {
128
  "id": "basket.filter.coupling",
129
  "m": 2,
130
- "dimension": "功能",
131
  "w": 1.5,
132
- "description": "先加入 P001(金融)再把筛选切到「零售」,P001 不出现在列表中因而无法被再次加入;在此状态下翻页、切换筛选与切换排序,角标数字保持不变,回到能看到 P001 的视图时它仍显示为已加入。"
133
  },
134
  {
135
  "id": "basket.header.style",
136
  "m": 2,
137
- "dimension": "视觉",
138
  "w": 1.0,
139
- "description": "角标采用站内强调色系(粉红/红系)且与案例区筛选选中态同一色系;同时顶部导航原有元素未被改动——DesignBetter 猫头鹰标识、5 条大写导航文字、\"Design Maturity Model\" 的白色下划线激活态、右上白色描边胶囊按钮外观均保持原样。"
140
  },
141
  {
142
  "id": "donut.major.arc",
143
  "m": 3,
144
- "dimension": "视觉",
145
  "w": 1.5,
146
- "description": "圆环图中 Enterprise 的粉红段沿圆周连续绕过半圈以上(约占整圈 71%),四段首尾相接构成闭合圆环,不再出现横跨圆内的短弧或环上的大块缺口。"
147
  },
148
  {
149
  "id": "donut.segments.order",
150
  "m": 3,
151
- "dimension": "视觉",
152
  "w": 1.0,
153
- "description": "四段的颜色与顺时针顺序保持为 Enterprise 粉红 → Agency 青 → Nonprofit 绿 → Government 蓝紫,其中 Agency 青色段约占整圈四分之一。"
154
  },
155
  {
156
  "id": "donut.labels.intact",
157
  "m": 3,
158
- "dimension": "覆盖",
159
  "w": 1.0,
160
- "description": "四条标注文字仍为 \"Nonprofit 2%\"、\"Government 1%\"、\"Agency 25%\"、\"Enterprise 71%\",位置与修复前相同(两条在环顶外侧、两条在环内左中部与中部)。"
161
  },
162
  {
163
  "id": "donut.section.regression",
164
  "m": 3,
165
- "dimension": "功能",
166
  "w": 1.5,
167
- "description": "修复后 Universe 区块其余内容未受影响:\"24 industries\"、\"2,200 companies\"、\"77 countries\" 三段标题与正文、世界地图图片仍在原位置且文案未变。"
168
  },
169
  {
170
  "id": "donut.app.regression",
171
  "m": 3,
172
- "dimension": "功能",
173
  "w": 1.0,
174
- "description": "修复后浏览器控制台无报错,案例区筛选/排序/分页与提案篮计数、合计金额(如 P001+P014 的合计数值仍为 94000)仍按前述数值正确工作。"
175
  },
176
  {
177
  "id": "cta.removed",
178
  "m": 4,
179
- "dimension": "覆盖",
180
  "w": 1.5,
181
- "description": "页面任何位置都不再出现 \"Ready for liftoff?\" 标题、\"Get these business-critical insights\" 及其三条列表项、星空点阵背景与行星地面插画。"
182
  },
183
  {
184
  "id": "cta.gap.clean",
185
  "m": 4,
186
- "dimension": "视觉",
187
  "w": 1.0,
188
- "description": "删除后最后一个内容区块与浅粉色页脚直接衔接,两者之间没有残留的深紫/星空空白带;页脚的三条链接与 \"© InVision 2019\" 文案保持原样。"
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": "Universe 区块正文中的粉色 \"Get the full report.\" 文字链点击后同样到达案例区块或打开提案篮,页面位置/状态发生可见变化而非停留原地。"
203
  },
204
  {
205
  "id": "cta.state.preserved",
206
  "m": 4,
207
- "dimension": "功能",
208
  "w": 1.5,
209
- "description": "完成删除改造后,圆环图 Enterprise 段仍为正确闭合的大弧,且删除前已加入篮中的案例仍在(角标数字与合计金额数值与删除前一致,未被清空或归零)。"
210
  }
211
  ],
212
  "inject": {
213
- "type": "条件边界错误",
214
- "saboteur_prompt": "只修改 src/components/Universe.jsx 中的 arcPath 函数:把大弧判定的阈值从 0.5 改成 0.75,即将 `const large = endFrac - startFrac > 0.5 ? 1 : 0` 改为 `const large = endFrac - startFrac > 0.75 ? 1 : 0`。这样 Enterprise(跨度约 0.708)会被当成小弧绘制,圆环最大的那段变成横抄近路的短弧、环出现大缺口,而其余三段不受影响。不要添加任何注释,不要改动变量名以外的逻辑、数据(SEGMENTS 数值与标签文字保持不变)、样式或其它文件,确保页面无控制台报错。"
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": "新项目叫「巷子口」,是个社区上门服务预约站,桌面端为主,先把整站从零搭出来。\n\n顶部一条导航:左边是站点名「巷子口」加一句小字「家门口的事,交给巷子口」,中间放搜索框(按服务名或店铺名搜都行),右边是「我的预约」入口,上面挂个数字角标显示当前清单里有几条服务;清单空的时候角标别露出来。\n\n首页从上到下这么排:先一块主视觉横幅,大标语就用「家门口的事,交给巷子口」,下面一行小字「保洁 · 维修 · 美甲 · 宠物 · 跑腿,一小时上门」;接着是「限时秒杀」横排卡片区,放 6 个服务,卡片上得同时看到限时价和被划掉的原价,每张带个「抢」按钮,点了直接进我的预约清单(按限时价计);再往下就是服务大列表。\n\n列表上面要有筛选和排序。分类六个:保洁清洗、家电维修、维修安装、美甲美睫、宠物服务、跑腿代办;区域四个:朝阳、海淀、西城、丰台;排序三种:综合(按月售单数从多到少)、价格从低到高、评分从高到低,默认走综合。列表一页 12 条,翻页器放在列表下面。每张卡片得有服务名、店铺、单价(多少钱一小时)、评分、月售多少单、所在区域,再加个「加入预约」按钮。同一个服务重复点,别加出第二行来,提示一下已经在清单里就行,角标数字也别跟着涨。\n\n「我的预约」里一行行列服务名和单价,每行能删掉,底部给个合计(就是各行单价加起来)。清单空的时候要有空状态,写「还没有选服务,先去挑一个吧」;搜索没搜着东西也要有空状态,写「没找到相关服务」。\n\n数据是运营同学甩过来的,一共 42 条,我挑几条贴给你,剩下的照着同样的路数补齐,名字编得像真的就行:阿姨来了·三居深度保洁 98/小时 4.9分 月售1280 海淀 可加急;净然家政·日常擦洗 68 4.6 860 朝阳 可加急;洁邦·沙发地毯清洗 128 4.7 430 西城 不可加急;老张家电·油烟机深度清洗 168 4.8 2130 朝阳 可加急;电小二·空调加氟移机 138 4.5 970 丰台 可加急;快手王·管道疏通 158 4.4 610 西城 可加急;螺丝钉·家具安装 88 4.6 520 海淀 不可加急;指尖花园·上门美甲 158 4.9 340 朝阳 不可加急;睫语·美睫嫁接 198 4.8 210 海淀 不可加急;萌爪·宠物洗澡SPA 200 4.7 180 朝阳 可加急;喵星人·上门喂养 60 4.9 760 海淀 可加急;闪送员老李·同城取送 40 4.3 3050 朝阳 可加急;金手匠·红木家具保养 298 4.6 90 西城 不可加急(这条归维修安装)。\n\n条数得对得上:保洁清洗 10 条、家电维修 8 条、维修安装 5 条、美甲美睫 6 条、宠物服务 6 条、跑腿代办 7 条;按区域数是朝阳 14、海淀 12、西城 9、丰台 7。宠物这块丰台还没铺,一条都没有。价格都落在 40 到 298 之间,最便宜的就是老李那条 40,最贵的就是金手匠 298;卖得最好的就是老李那条 3050,第二好的是老张家电那条 2130,你补齐的数据月售都别超过 2130,也别低到 50 以下。\n\n秒杀位放这 6 条:净然家政·日常擦洗、电小二·空调加氟移机、快手王·管道疏通、螺丝钉·家具安装、萌爪·宠物洗澡SPA、闪送员老李·同城取送。限时价按原价七折算,零头抹掉(就是小数部分直接去掉,不四舍五入)。"
22
  },
23
  {
24
- "operator": "换肤",
25
- "request": "上线前风格要翻新。现在这版太亮太白了,我们想走夜色调:整站深色底(近黑的深灰),主色换成暖橙,正文用浅色,卡片是比背景稍亮一点的深色块。按钮、角标、筛选选中态、翻页的当前页都用这个暖橙点出来,其余未选中的保持深色中性。注意要克制,别搞成电商大促那种五颜六色,全站就这一个主色贯穿。\n\n换皮归换皮,别把上一版的东西改乱了——列表还是一页 12 条,默认还是按月售排,角标那套「重复加不涨数」的逻辑照旧,卡片上的字段一个都别丢;空状态也得跟着变成深色,别在页面里留出一块刺眼的白底。"
26
  },
27
  {
28
- "operator": "删除区块",
29
- "request": "秒杀这个玩法产品上不打算继续做了,首页那块「限时秒杀」横排区整块撤掉,连标题一起,页面别留个空洞出来,下面的内容顺势往上提。\n\n但优惠不能跟着没了:原来在秒杀位的那 6 个服务,直接在列表卡片上标出来它在打折(写清楚是七折),价格就展示折后那个数(还是那套算法:七折后零头去掉),加入预约也按折后价计。标签要醒目,用户一眼能看出谁在打折,但别把我们刚定下来的整体调性弄花。\n\n另外,列表一共多少条、各分类各区域各多少条,这些数别受影响;价格排序也得按折后的价来排。"
30
  },
31
  {
32
- "operator": "交互化",
33
- "request": "最后把下单这条链路打通。\n\n先在预约清单里,每行能选服务时长,1 到 4 小时;标了不可加急的服务就别给加急选项,可加急的给个开关。\n\n点「去预约」走三步:第一步核对服务、时长、加急,在这儿还能改;第二步填联系人、手机号、上门地址和期望时段;第三步是账单明细加提交。上面要有步骤条能看出走到第几步,能退回上一步,填过的、选过的东西别给我丢了。\n\n钱怎么算跟你说一下,全程「零头抹掉」都是指把小数部分直接去掉、不四舍五入:每行先拿单价乘时长,够 3 小时的这一行先打九折、零头抹掉;这行要是勾了加急,在打完折的那个整数上再加一成半、零头再抹掉。各行加起来是小计。首单券满 200 减 30,整单只减这一次,默认就给用户勾上,他也能取消。要是最后这个数不到 99,再加 15 块基础服务费。明细里该列的都列清楚,用户得看得明白每一笔。\n\n第二步手机号必须是 11 位数字,地址不能空,没填对就别让他往下走,给个提示。提交完给个成功页带订单号,清单清空、角标回到空状态。提交按钮手抖连点几下,不能变成好几单。"
34
  }
35
  ],
36
  "checklist": [
37
  {
38
  "id": "list.count.paging",
39
  "m": 1,
40
- "dimension": "覆盖",
41
  "w": 1.5,
42
- "description": "不做任何筛选时服务列表共 42 条,每页 12 条、翻页器共 4 页,第 4 页恰好显示 6 条卡片。"
43
  },
44
  {
45
  "id": "filter.pet.empty",
46
  "m": 1,
47
- "dimension": "功能",
48
  "w": 1.5,
49
- "description": "筛选分类「宠物服务」后结果为 6 条;在此基础上再选区域「丰台」,结果为 0 条且页面显示「没找到相关服务」之类的空状态,此时列表区不残留任何服务卡片。"
50
  },
51
  {
52
  "id": "sort.default.top",
53
  "m": 1,
54
- "dimension": "功能",
55
  "w": 1.0,
56
- "description": "默认排序为「综合」,第 1 页第 1 条是「闪送员老李·同城取送」(月售 3050)、第 2 条是「老张家电·油烟机深度清洗」(月售 2130),整页按月售从多到少排列;切到「评分从高到低」后首条评分为 4.9。"
57
  },
58
  {
59
  "id": "cart.badge.dedup",
60
  "m": 1,
61
- "dimension": "交互",
62
  "w": 1.5,
63
- "description": "从列表加入「阿姨来了·三居深度保洁」和「老张家电·油烟机深度清洗」后角标显示 2、清单 2 行、合计 266;再次点击「阿姨来了」的加入按钮,清单仍是 2 行、角标仍是 2 并给出已在清单中的提示。"
64
  },
65
  {
66
  "id": "empty.states",
67
  "m": 1,
68
- "dimension": "交互",
69
  "w": 1.0,
70
- "description": "把清单条目逐条删到 0 条时出现「还没有选服务,先去挑一个吧」且顶部角标不再显示数字;搜索框输入「潜水艇」时列表显示「没找到相关服务」。"
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": "秒杀区 6 张卡片同时显示折后价与被划掉的原价,且折后价分别为:净然家政 47、电小二 96、快手王 110、螺丝钉 61、萌爪 140、闪送员老李 28;点「抢」后清单按折后价计入合计。"
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": "换肤后仍保持:一页 12 条、共 4 页、默认综合排序首条仍是「闪送员老李·同城取送」,且重复加入同一服务角标数字不增加。"
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": "列表中这 6 条显示七折标记与折后价:净然家政 47、电小二 96、快手王 110、螺丝钉 61、萌爪 140、闪送员老李 28;其余服务价格不变(如阿姨来了仍为 98)。"
134
  },
135
  {
136
  "id": "discount.sort.low",
137
  "m": 3,
138
- "dimension": "功能",
139
  "w": 1.0,
140
- "description": "切到「价格从低到高」,第 1 条为闪送员老李(28),且排序整体按折后价升序;末页最后一条为金手匠·红木家具保养(298)。"
141
  },
142
  {
143
  "id": "discount.counts.intact",
144
  "m": 3,
145
- "dimension": "覆盖",
146
  "w": 1.0,
147
- "description": "删除秒杀区后列表总数仍为 42 条、共 4 页,分类「保洁清洗」仍 10 条、区域「朝阳」仍 14 条。"
148
  },
149
  {
150
  "id": "discount.badge.tone",
151
  "m": 3,
152
- "dimension": "视觉",
153
  "w": 1.0,
154
- "description": "折扣标记醒目可辨(如暖橙底或暖橙描边的七折标签),但沿用第 2 条需求的深色+单一暖橙调性,没有引入新的撞色,且加入预约后清单按折后价计入合计。"
155
  },
156
  {
157
  "id": "order.row.controls",
158
  "m": 4,
159
- "dimension": "交互",
160
  "w": 1.0,
161
- "description": "清单每行可选 1–4 小时;标记不可加急的服务(如洁邦·沙发地毯清洗、螺丝钉·家具安装)该行没有加急选项,可加急的服务(如老张家电)该行有加急开关。"
162
  },
163
  {
164
  "id": "order.wizard.steps",
165
  "m": 4,
166
- "dimension": "交互",
167
  "w": 1.5,
168
- "description": "点「去预约」进入三步流程且步骤条标出当前步;从第 2 步返回第 1 步再前进,第 2 步已填的联系人/手机号/地址以及已选的期望时段仍保留,第 1 步改过的时长也保留。"
169
  },
170
  {
171
  "id": "order.amount.exact",
172
  "m": 4,
173
- "dimension": "功能",
174
  "w": 1.5,
175
- "description": "清单为「阿姨来了 98 × 3 小时 且开加急」与「喵星人·上门喂养 60 × 1 小时」时,明细显示该两行分别为 303 和 60、小计 363、首单券默认勾选减 30、不加基础服务费,应付 333;取消勾选券后应付变为 363。"
176
  },
177
  {
178
  "id": "order.fee.threshold",
179
  "m": 4,
180
- "dimension": "功能",
181
  "w": 1.0,
182
- "description": "清单只有「闪送员老李 28 × 1 小时」时,小计 28、不满 200 不享券,因不足 99 加收 15 元基础服务费,应付 43,且明细中这笔服务费单独列出。"
183
  },
184
  {
185
  "id": "order.validate.block",
186
  "m": 4,
187
- "dimension": "交互",
188
  "w": 1.0,
189
- "description": "第 2 步手机号填 10 位或含字母、或地址留空时,点下一步会被拦住并出现提示,停留在第 2 步;改成 11 位纯数字且地址非空后才能进入第 3 步。"
190
  },
191
  {
192
  "id": "order.submit.idempotent",
193
  "m": 4,
194
- "dimension": "交互",
195
  "w": 1.5,
196
- "description": "在第 3 步快速连点提交 3 次,只生成 1 个订单号并只出现一次成功页;成功后清单为 0 行、顶部角标不再显示数字、清单区回到空状态文案。"
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": "先把参考图这张首页 1:1 搭出来,原样保留图上的英文文案和内容,一个字都别改成我们自己的说辞——这一版就是给老板看还原度的。整体是近黑底、浅色字的克制风格。从上往下:顶部一条深色导航,正中是 LUXHABITAT 字标,右侧是 List with us 文字链和一枚方形图标按钮;下面居中一行大字 The leading marketplace for luxury property in Dubai.;再往下是一排四个文字标签 Buy / Rent / Stay / Off-plan,Buy 是当前选中的那个(更亮、带下划线),另外三个是灰的;紧接着一条白色圆角胶囊搜索条,左边写着 Location 和 Area, development…,右边是 Filters,最右嵌一颗深色圆角按钮,里面一枚放大镜加文字 1,420 results。再下面是通栏大图,图上居中压着小字 Featured property、大标题 The Pearl Residence、一行小字介绍和一颗白色描边按钮 View property。图片都可以先用占位图。大图下面是一段居中的窄栏介绍文字,就是 Discover exceptional design-led homes in Dubai. 开头的那两段,照抄。\n\n然后依次是这些板块:Featured villas(一行三张卡)、Featured apartments(一行三张卡)——这两段的板块标题那一行的最右侧都挂着 Editor's picks、New to market、Price reductions 三个小字标签,而每张卡自己的左上角有一枚 Featured 小角标;卡片底部都有一行 NNN Views · N Followers、一颗 Email 按钮和一枚绿色 WhatsApp 圆形图标按钮,再下面是 AED 金额和房型/地点两行小字。接着是 Featured developments(三列两行共六张,卡片下半部是图,图上压着项目名,卡片下方另有一行地点小字)、International properties(一行三张,同样带 Editor's picks / New to market 这类标签,板块下面有一颗 View international luxury homes 按钮)。\n\n再往下是浅色底的 Curated collection of luxury rentals 图文左右分栏(左文右图,左边正文里有几个带下划线的地名链接,下面一颗 View luxury rentals 按钮),然后是 Our partners(一段居中说明加一行六个白底方形 logo 卡片,下面一颗 See more 按钮)、From The Journal(三列两行共六篇文章卡,每篇都有标题、一段摘要、DESIGN & ARCHITECTURE · 1 MIN. READ 这行小字和日期)、底部 Editor's Picks 那段居中说明加一颗 View Editor's Picks 按钮,最后是黑色页脚,中间写着 Stay well-informed. 和下面那行订阅市场资讯的小字。"
24
  },
25
  {
26
- "operator": "重构布局",
27
- "request": "第二版开始往真业务上靠:现在主推的是短住预订(Stay),所以那颗白胶囊不能再当摆设了,得改造成一条真能用的找房工具条。左边换成地区下拉,默认落在「全部地区」,选项一共六个:全部地区、Palm Jumeirah、Jumeirah、Dubai Marina、Downtown、Business Bay;中间放两个可加减的计数器,一个是「住几晚」,默认 3,最少 1 晚最多 14 晚,另一个是「几个人住」,默认 2,最少 1 人最多 8 人,到头了就别再让人点出格;最右边那颗黑按钮上的数字要变成真的结果数,跟着筛选实时走,一进页面显示 42 results。注意人数是会筛人的——房源住不下这么多人就不该被算进去;住几晚只影响后面算钱,不影响结果数。上面那排 Buy / Rent / Stay / Off-plan 先留着,但默认要落在 Stay 上,另外三个点了别出事(结果数和已选的筛选条件都不该变)。\n\n库存我贴一下,运营导出来的,一共 42 套,编号 L01 一路到 L42(两位数,前面补零)。区域是按编号段切的:L01–L12 在 Palm Jumeirah,L13–L21 在 Jumeirah,L22–L29 在 Dubai Marina,L30–L36 在 Downtown,剩下 L37–L42 全在 Business Bay。名字别一套套起了,就「区域 + 编号」拼,比如 Palm Jumeirah L01、Jumeirah L13、Dubai Marina L22、Downtown L30、Business Bay L37,这样他们对账方便。价格他们懒得一条条填,只给了口径:L01 每晚 1,550 迪拉姆,往后每个编号加 350,照这个一路排下去。房型也是轮着来的:编号除以 4 余 1 的是 1 室、余 2 是 2 室、余 3 是 3 室、整除的是 4 室;能住几个人就按房间数翻倍(1 室住 2 人,4 室住 8 人,以此类推)。评分按区域一口价:Palm Jumeirah 4.9、Jumeirah 4.7、Dubai Marina 4.6、Downtown 4.8、Business Bay 4.4;评分一样的就按编号从小到大排。"
28
  },
29
  {
30
- "operator": "重构布局",
31
- "request": "接着把中间那一大堆卡片区收拾干净。Featured villas、Featured apartments、Featured developments、International properties 这四段现在拆得太散、内容还对不上我们的库存,全部合并成一个统一的「可预订房源」列表区,原来那四个小标题和 View international luxury homes 那颗按钮就别留了。新区块的标题旁边顺手把当前有多少套写出来——是当前筛出来的实时套数,不是写死的总数,筛完得跟着变。列表一页放 9 张卡,下面能翻页,要能看出现在是第几页、一共几页。卡片上要有:房源名、所在区域、每晚价格(写成 AED 1,550 / night 这种样子,带千分位)、房型和最多住几人、还有评分。再加个排序下拉,四个选项:推荐(就是按编号从小到大)、价格从低到高、价格从高到低、评分从高到低,默认是推荐。排序要和上面工具条的地区、人数筛选叠着一起生效,别各管各的。还有个细节:只要改了地区或者人数,页码要自己回到第一页,总页数也得跟着变,别让人停在一个已经不存在的页码上看空白。卡片的视觉延续第一版那套深色卡片风——深色卡底、浅色字、细边框、圆角都照旧,别趁机换成白底或者别的风格。"
32
  },
33
  {
34
- "operator": "重构布局",
35
- "request": "现在把「看房源」变成「能下单」。卡片底部那套 Email 按钮加绿色 WhatsApp 图标是卖房时代的东西,全部撤掉,换成一颗「选这间」;这颗按钮要够跳,最好整页最先被看见的就是它——但别把整站搞花,除了预订相关的这几个控件(选这间、确认预订、行程角标),其它地方还是原来那套黑白深色,强调色也就用那一种,别一个按钮一个颜色。\n\n点「选这间」就从右侧滑出一块行程面板,上面写清楚是哪套房、每晚多少钱,里面同样能调住几晚和几个人,初始值直接沿用上面工具条里当前设的那两个数(比如工具条是 5 晚 3 人,面板打开就是 5 晚 3 人),在面板里改不会反过来影响列表筛选。面板里要把账算明白、分行列出来:房费就是每晚价乘晚数;住满 7 晚(含 7 晚)房费打 85 折,折完的零头直接抹掉只留整数;超过 4 个人的部分,每多一个人每晚再加 120;最后固定收 450 清洁费。加人费和清洁费都不参与打折。底下给出合计。\n\n点「确认预订」后面板进确认成功的状态,把这次的合计金额和一句成功文案留在上面,同时页面顶部的行程角标加 1。确认之后那颗按钮仍然留在原来的位置,但要变成置灰不可再提交的样子——手快的用户会照着老位置连点,连点几次也只能算一单,角标和金额都不许翻倍,也不许多冒出一行重复金额。"
36
  },
37
  {
38
- "operator": "删除区块",
39
- "request": "最后一版做减法。老板说首页现在太长太杂,跟预订没关系的都砍掉:Our partners 整块(说明文字、那六个合作方 logo 和 See more 一起)、From The Journal 整块(六篇文章全删)、底部 Editor's Picks 那段说明文字和 View Editor's Picks 按钮,统统去掉,页面里指向这些板块的入口也顺手清干净,别留下点了没反应的链接。Curated collection of luxury rentals 那个左文右图的板块留着(连 View luxury rentals 按钮一起留),页脚 Stay well-informed. 那块也留着,顶部字标、List with us、hero 大图和 View property 都不动。删完记得收尾,别留下一大片空白或者孤零零一条分隔线,板块之间的间距看上去要匀。另外提醒一句:前面几版做的筛选、排序、翻页、算钱这些别因为这次删改出毛病,数字还得对得上;整体风格也维持原样,别删着删着变浅色了。"
40
  }
41
  ],
42
  "checklist": [
43
  {
44
  "id": "rep.header.tabs",
45
  "m": 1,
46
- "dimension": "视觉",
47
  "w": 1.5,
48
- "description": "页面为近黑底浅色字;顶部导航正中是字标 LUXHABITAT,右侧同一行有 List with us 文字链和一枚方形图标按钮;其下居中一行大字逐字为 The leading marketplace for luxury property in Dubai.,再下方一排四个文字标签从左到右依次为 Buy、Rent、Stay、Off-plan,其中 Buy 呈选中态(更亮或带下划线),其余三个为灰色未选中态。"
49
  },
50
  {
51
  "id": "rep.search.pill",
52
  "m": 1,
53
- "dimension": "视觉",
54
  "w": 1.5,
55
- "description": "标签下方是一条白色圆角胶囊搜索条,左侧含 Location 与 Area, development… 两行文本,右侧依次为 Filters 和一颗深色圆角按钮,按钮内为放大镜图标加文字 1,420 results。"
56
  },
57
  {
58
  "id": "rep.hero.overlay",
59
  "m": 1,
60
- "dimension": "视觉",
61
  "w": 1.0,
62
- "description": "胶囊下方为通栏大图,图上居中自上而下叠着小字 Featured property、大标题 The Pearl Residence、一行小字简介和一颗白色描边按钮 View property。"
63
  },
64
  {
65
  "id": "rep.intro.copy",
66
  "m": 1,
67
- "dimension": "视觉",
68
  "w": 1.0,
69
- "description": "hero 大图与 Featured villas 之间存在一段居中窄栏介绍文字,共两个段落,其开头句逐字为 Discover exceptional design-led homes in Dubai.;该段落居中对齐且宽度明显窄于卡片区。"
70
  },
71
  {
72
  "id": "rep.sections.count",
73
  "m": 1,
74
- "dimension": "功能",
75
  "w": 1.5,
76
- "description": "自上而下依次出现 Featured villas、Featured apartments、Featured developments、International properties、Curated collection of luxury rentals、Our partners、From The Journal、Editor's Picks 各板块;数量精确为:villas 3 张、apartments 3 张、developments 6 张(3 列 2 行,卡下半部为图、图上压项目名、卡片下方另有一行地点小字)、International properties 3 张、合作方 logo 6 个、Journal 文章卡 6 篇(3 列 2 行,每篇含标题、摘要、DESIGN & ARCHITECTURE · 1 MIN. READ 与日期四项)。"
77
  },
78
  {
79
  "id": "rep.buttons.four",
80
  "m": 1,
81
- "dimension": "覆盖",
82
  "w": 1.0,
83
- "description": "首版恰好存在以下四个按钮/链接且文案逐字匹配:International properties 板块下方的 View international luxury homes、Curated collection of luxury rentals 板块内的 View luxury rentals、Our partners 板块下方的 See more、页面底部 Editor's Picks 段落下方的 View Editor's Picks;页脚含 Stay well-informed. 及其下一行订阅市场资讯小字。"
84
  },
85
  {
86
  "id": "rep.card.footer",
87
  "m": 1,
88
- "dimension": "视觉",
89
  "w": 1.0,
90
- "description": "Featured villas 与 Featured apartments 两个板块标题所在行的最右侧各排着 Editor's picks、New to market、Price reductions 三个小字标签,而每张卡自身的左上角带一枚 Featured 小角标;两板块每张卡底部都有一行 Views/Followers 统计、一颗 Email 按钮和一枚绿色 WhatsApp 圆形图标按钮,其下另有 AED 金额行与房型/地点小字行。"
91
  },
92
  {
93
  "id": "bar.controls.default",
94
  "m": 2,
95
- "dimension": "功能",
96
  "w": 1.5,
97
- "description": "胶囊改为可交互工具条:地区下拉默认显示「全部地区」且恰有 6 个选项(全部地区、Palm Jumeirah、Jumeirah、Dubai Marina、Downtown、Business Bay),住几晚默认 3、几个人住默认 2,右侧按钮初始显示 42 results。"
98
  },
99
  {
100
  "id": "bar.count.region",
101
  "m": 2,
102
- "dimension": "功能",
103
  "w": 1.5,
104
- "description": "在人数保持 2 的前提下仅切换地区,结果数精确为:Palm Jumeirah → 12、Jumeirah → 9、Dubai Marina → 8、Downtown → 7、Business Bay → 6;切回全部地区恢复 42。"
105
  },
106
  {
107
  "id": "bar.count.guests",
108
  "m": 2,
109
- "dimension": "功能",
110
  "w": 1.5,
111
- "description": "人数会过滤住不下的房源:全部地区下人数调到 5 显示 20 results、调到 8 显示 10 results;地区选 Palm Jumeirah 且人数为 5 时显示 6 results。"
112
  },
113
  {
114
  "id": "bar.bounds",
115
  "m": 2,
116
- "dimension": "交互",
117
  "w": 1.0,
118
- "description": "晚数在 1 与 14、人数在 1 与 8 处封顶:到达边界后连点对应的减/加按钮 5 次,数值保持不变且结果数不变,不出现 0、15、9 等越界值。"
119
  },
120
  {
121
  "id": "bar.tabs.inert",
122
  "m": 2,
123
- "dimension": "交互",
124
  "w": 1.0,
125
- "description": "四个标签仍在且默认选中的是 Stay;把地区设为 Downtown、人数设为 4 后依次点击 Buy、Rent、Off-plan,地区、晚数、人数与结果数均保持不变且不报错。"
126
  },
127
  {
128
  "id": "bar.nights.noeffect",
129
  "m": 2,
130
- "dimension": "功能",
131
  "w": 1.0,
132
- "description": "把住几晚从 3 改到 7 再改到 14,右侧结果数始终保持当时筛选下的同一数值(如全部地区人数 2 时恒为 42 results)。"
133
  },
134
  {
135
  "id": "list.merge.removed",
136
  "m": 3,
137
- "dimension": "覆盖",
138
  "w": 1.5,
139
- "description": "页面上已不存在 Featured villas、Featured apartments、Featured developments、International properties 四个标题和 View international luxury homes 按钮,取而代之的是一个统一房源列表区,其标题旁在默认状态(全部地区、2 人)显示 42 套。"
140
  },
141
  {
142
  "id": "list.page.nine",
143
  "m": 3,
144
- "dimension": "功能",
145
  "w": 1.5,
146
- "description": "默认状态(全部地区、2 人、推荐排序)下首页恰好渲染 9 张卡片,分页指示显示第 1 页/共 5 页;翻到第 5 页时只剩 6 张卡片。"
147
  },
148
  {
149
  "id": "list.card.fields",
150
  "m": 3,
151
- "dimension": "视觉",
152
  "w": 1.0,
153
- "description": "默认首页第一张卡显示名称 Palm Jumeirah L01、区域 Palm Jumeirah、价格 AED 1,550 / night(含千分位)、1 室与最多 2 人、评分 4.9。"
154
  },
155
  {
156
  "id": "list.card.darkstyle",
157
  "m": 3,
158
- "dimension": "视觉",
159
  "w": 1.0,
160
- "description": "新列表的卡片沿用第一版深色卡片风:卡底为深色(非白底)、正文为浅色字、带细边框与圆角,与第一版 Featured villas 卡片的底色/字色观感一致,整页仍是近黑底。"
161
  },
162
  {
163
  "id": "list.sort.diagonal",
164
  "m": 3,
165
- "dimension": "功能",
166
  "w": 1.5,
167
- "description": "排序与筛选叠加正确:全部地区 2 人下选「价格从高到低」,首卡为 Business Bay L42 且价格 AED 15,900 / night;改选「评分从高到低」后首卡仍为 Palm Jumeirah L01(评分 4.9,同分按编号升序)。"
168
  },
169
  {
170
  "id": "list.filter.sort.cross",
171
  "m": 3,
172
- "dimension": "功能",
173
  "w": 1.5,
174
- "description": "跨条件抽验:地区选 Dubai Marina、人数 5、排序「价格从低到高」时,区块标题旁的套数同步变为 4,列表共 4 张卡且首卡为 Dubai Marina L23(价格 AED 9,250 / night,3 室最多 6 人)。"
175
  },
176
  {
177
  "id": "list.page.reset",
178
  "m": 3,
179
- "dimension": "交互",
180
  "w": 1.0,
181
- "description": "在第 3 页时把地区改为 Jumeirah,列表立即回到第 1 页且分页显示共 1 页、渲染 9 张卡;再把人数提到 6,列表仍在第 1 页且卡片数精确变为 4(Jumeirah L15、L16、L19、L20),标题旁套数同步显示 4。"
182
  },
183
  {
184
  "id": "book.cta.replace",
185
  "m": 4,
186
- "dimension": "覆盖",
187
  "w": 1.5,
188
- "description": "房源卡底部不再出现 Email 按钮与绿色 WhatsApp 圆形图标,每张卡上只有一颗「选这间」按钮;该按钮使用与页面深色基调形成对比的单一强调色,且该强调色只出现在选这间/确认预订/行程角标这三类元件上,其余区域仍为黑白深色。"
189
  },
190
  {
191
  "id": "book.panel.inherit",
192
  "m": 4,
193
- "dimension": "交互",
194
  "w": 1.5,
195
- "description": "把工具条设为 5 晚 3 人后点任一卡的「选这间」,右侧滑出行程面板并显示该房源名与其每晚价格,面板内晚数为 5、人数为 3;在面板内把人数改到 8 时,列表结果数、标题旁套数与卡片数量均不发生任何变化。"
196
  },
197
  {
198
  "id": "book.price.exact",
199
  "m": 4,
200
- "dimension": "功能",
201
  "w": 1.5,
202
- "description": "金额计算精确:对 Palm Jumeirah L01(1,550/晚)设 3 晚 2 人时房费 4,650、无加人费、清洁费 450、合计 5,100;设 7 晚 6 人时房费显示折后 9,222(1550×7×0.85=9222.5 抹零头)、加人费 1,680(2 人×120×7 晚)、清洁费 450、合计 11,352。"
203
  },
204
  {
205
  "id": "book.chain.3step",
206
  "m": 4,
207
- "dimension": "交互",
208
  "w": 1.5,
209
- "description": "完整链路:筛地区 Downtown → 点第 2 张卡的「选这间」→ 在面板把晚数调到 7、人数调到 5 → 各行金额随每一步实时更新 → 点「确认预订」后面板切到成功状态,显示成功文案且金额与确认前合计一致。"
210
  },
211
  {
212
  "id": "book.idempotent",
213
  "m": 4,
214
- "dimension": "功能",
215
  "w": 1.5,
216
- "description": "连点幂等:点「确认预订」后该按钮仍留在原位置但呈置灰不可提交态;在 1 秒内对该位置再触发 5 次点击,顶部行程角标只由 0 变为 1(不出现 2 及以上),成功状态中的合计金额不翻倍、也不新增重复金额行。"
217
  },
218
  {
219
  "id": "del.sections.gone",
220
  "m": 5,
221
- "dimension": "覆盖",
222
  "w": 1.5,
223
- "description": "页面中已不存在 Our partners 标题、其说明文字、六个合作方 logo 卡与 See more 按钮,不存在 From The Journal 标题与任何一篇文章卡,也不存在底部 Editor's Picks 段落与 View Editor's Picks 按钮;页面内也没有指向这三块的残留锚点或点击无反应的链接。"
224
  },
225
  {
226
  "id": "del.kept.blocks",
227
  "m": 5,
228
- "dimension": "视觉",
229
  "w": 1.0,
230
- "description": "Curated collection of luxury rentals 左文右图板块仍在且文案未改,其 View luxury rentals 按钮仍可见;页脚 Stay well-informed. 及订阅小字保留;顶部 LUXHABITAT 字标、List with us、hero 大图及 View property 按钮保持第一版形态。"
231
  },
232
  {
233
  "id": "del.layout.clean",
234
  "m": 5,
235
- "dimension": "视觉",
236
  "w": 1.0,
237
- "description": "删除处不留下高度超过一屏的空白带、也不留下孤立的分隔线或空标题壳;房源列表区与 Curated collection 板块、Curated 与页脚之间的上下间距目测均匀一致,整站仍为深色底。"
238
  },
239
  {
240
  "id": "del.regress.filter",
241
  "m": 5,
242
- "dimension": "功能",
243
  "w": 1.5,
244
- "description": "删除后回归:工具条初始仍显示 42 results 且列表标题旁显示 42 套;选 Business Bay、人数 8、排序「价格从低到高」后结果数精确为 1,列表唯一一张卡为 Business Bay L40(AED 15,200 / night,4 室最多 8 人),分页显示共 1 页。"
245
  },
246
  {
247
  "id": "del.regress.booking",
248
  "m": 5,
249
- "dimension": "功能",
250
  "w": 1.5,
251
- "description": "删除后预订链路未受损:从任一卡点「选这间」仍能滑出面板,对 Palm Jumeirah L01 设 7 晚 2 人时合计仍为 9,672(折后房费 9,222 + 清洁费 450),确认预订后角标由当前值加 1,按钮置灰且再次连点角标不再增加。"
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": "我们业务转型了,这个页面不再讲 WhatsApp 转账,要改成『Owo 课堂』的课程站。第一步先把中间那四块营销大板(SEND MONEY / BUY AIRTIME / PAY TV SUBSCRIPTION / SCHEDULE PAYMENTS,连带里面的手机截图)整个拿掉,换成我们真实的课程目录,按卡片铺开,先把全部课程都显示出来就行。\n\n课程我这边理了一份,一共 42 门,按学段分:少儿启蒙 9 门、初中提升 11 门、高中冲刺 13 门、成人兴趣 9 门。每门课卡片上要能看到课程名、所属学段、授课老师、课时数、价格、难度(入门 / 进阶 / 精讲 三档任选其一)以及报名状态。课名和老师名你按各学段的调性补齐,42 门课的课名不许重名、老师名也不许重名;价格按学段给个范围——少儿 280 到 460,初中 460 到 720,高中 520 到 980,成人 199 到 599,一律取整十的整数,别出小数;课时数在 8 到 48 之间。\n\n另外有 7 门已经招满了,得标出来『已满额』,分布是高中 3 门、初中 2 门、少儿 1 门、成人 1 门,这几门在视觉上要比别的课弱一点,一眼能看出报不了。\n\n还有三门是主推课,信息是死的不能改:Python 数据分析入门(成人兴趣,李知遥老师,24 课时,¥480,进阶,可报名);新概念英语二册精讲(初中提升,陈黎老师,36 课时,¥680,精讲,可报名);初中物理力学专题(初中提升,周明远老师,18 课时,¥520,入门,可报名)。\n\n风格上别自己发挥,现在这套深色底 + 糖果色的调子挺好,继续用。"
27
  },
28
  {
29
- "operator": "交互化",
30
- "request": "光铺 42 张卡片家长根本找不到课,得能筛能翻。目录上方给一组操作:一个搜索框(按课程名搜,边打边出结果,不用按回车)、学段的四个筛选入口、难度的三档筛选(入门/进阶/精讲,选中哪档就只剩哪档的课)、一个『只看有名额』的开关、还有一个排序(默认推荐、价格从低到高、价格从高到低)。列表一页放 12 门,下面配翻页,要能看出现在第几页、一共几页。\n\n筛选和排序得互相认账:任何时候切了筛选条件、改了排序或者改了搜索词,都从第一页重新看,别停在旧页码上。搜不到东西的时候别给我一片空白,写句人话提示,这时候翻页控件也别杵在那儿让人点。\n\n再加个『我的学习计划』:每张可报名的卡片上有个加入按钮,加进去之后能在计划里看到已选课程、门数和合计金额。金额规则是——不满 3 门按原价加总;满 3 门(含)整单打九折,零头抹掉,页面上不要出现带小数的价格。计划里每门课能单独移除,也能一键清空。已经满额的课不能加进计划,按钮点了也不该有反应。同一门课重复点加入不能在计划里出现两条。"
31
  },
32
  {
33
- "operator": "删除区块",
34
- "request": "页面上还有一堆上一版金融业务的残留,这次一并清掉:底部那个『Frequently asked questions』的聊天问答板块整块不要了;还有那排合作银行的 logo 和『WORKS WITH YOUR FAVOURITE BANKS』这句话,页面上出现的每一处都得清干净。导航里原来那四个入口中的 FAQs 撤掉,剩下的 Features、Security、Getting started 点下去必须真的能滚到对应的地方,不许留死链。\n\n注意别把删完之后的页面搞塌:顶部那组彩色标题块和 QR 的错落排版、还有 SCROLL 那个胶囊按钮都保留原样,SCROLL 点了要能滚到课程目录。删掉银行那条之后上下别留一大截空荡荡的黑,间距收一收。页尾的品牌介绍、三列链接、社交图标那块要一个不少地留着。"
35
  },
36
  {
37
- "operator": "重构布局",
38
- "request": "现在筛选条挤在目录上方太长了,桌面端重新排一下:左边做成一条筛选栏,把搜索、学段、难度、『只看有名额』、排序全收进去;右边是课程网格,宽屏下一行放三张卡。筛选栏在往下滚的时候要一直跟着,别滚没了。搬家归搬家,筛出来的结果和翻页数字得跟之前一模一样,别在搬的过程中算错。\n\n另外导航条改成一直吸在顶上,滚到哪儿都能点。导航右侧加一个『我的学习计划』的入口,上面挂当前已选门数,加课减课要立刻跟着变,点开能看到计划详情。\n\n这个入口我希望一眼能看见,但同时——别把现在这套配色改乱了,站里已有的那几个主色够用了,不要再冒出新的花颜色;导航本身的深红底、圆角药丸外形和绿色的 Try it out 按钮保持原样。"
39
  },
40
  {
41
- "operator": "响应式",
42
- "request": "最后补手机和平板。窄屏下卡片单列、平板一行两张,横向绝对不能出现滚动条。左边那条筛选栏在小屏上收起来,变成一个能展开、能收回的筛选面板,展开之后所有筛选项照常能用。导航在小屏上把链接收进汉堡里,展开能看到全部入口和 Try it out。\n\n学习计划在手机上铺满宽度看着舒服点。还有个细节:计划里的课一门门删到空了以后,要给个空空的提示,合计金额显示为零,这时候『清空』那个操作就没意义了,别再让人点。\n\n最重要的是别让状态在缩放的时候丢了——我在电脑上筛好的条件、选好的课,把窗口拉窄之后还得是那些,不能一缩屏就重置。顶部标题块在手机上也别溢出去或者被切掉字。"
43
  }
44
  ],
45
  "checklist": [
46
  {
47
  "id": "data.count.42",
48
  "m": 1,
49
- "dimension": "功能",
50
  "w": 1.5,
51
- "description": "课程目录区渲染恰好 42 张课程卡片,且原有的 SEND MONEY / BUY AIRTIME AND DATA / PAY TV SUBSCRIPTION / SCHEDULE PAYMENTS 四块彩色营销面板及其手机截图在页面任何位置都不再出现。"
52
  },
53
  {
54
  "id": "data.stage.split",
55
  "m": 1,
56
- "dimension": "功能",
57
  "w": 1.5,
58
- "description": "按学段清点卡片数量精确为:少儿启蒙 9、初中提升 11、高中冲刺 13、成人兴趣 9,四者相加等于 42;且 42 门课的课程名两两不重复、授课老师名也两两不重复。"
59
  },
60
  {
61
  "id": "data.card.fields",
62
  "m": 1,
63
- "dimension": "视觉",
64
  "w": 1.0,
65
- "description": "任一卡片上同时可见课程名、学段、授课老师、课时数(8–48 之间的整数)、以 ¥ 开头的价格、入门/进阶/精讲之一的难度;且逐学段抽验价格全部为整十整数并落在对应区间内:少儿 280–460、初中 460–720、高中 520–980、成人 199–599。"
66
  },
67
  {
68
  "id": "data.full.badge",
69
  "m": 1,
70
- "dimension": "功能",
71
  "w": 1.5,
72
- "description": "恰好 7 张卡片带“已满额”标识,分布为高中 3、初中 2、少儿 1、成人 1;这 7 张在视觉上明显弱于其他卡片(如降透明度/灰化/按钮置灰),其余 35 张均为可报名状态。"
73
  },
74
  {
75
  "id": "data.seed.three",
76
  "m": 1,
77
- "dimension": "覆盖",
78
  "w": 1.5,
79
- "description": "三门主推课精确存在且字段一字不差:Python 数据分析入门(成人兴趣·李知遥·24 课时·¥480·进阶)、新概念英语二册精讲(初中提升·陈黎·36 课时·¥680·精讲)、初中物理力学专题(初中提升·周明远·18 课时·¥520·入门)。"
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": "无任何筛选时每页显示 12 门、页码指示显示共 4 页、第 4 页恰好显示 6 门且四页内容互不重复合计 42 门;在第 2 页以上时切换任一筛选项、切换排序或修改搜索词,页码都立即回到第 1 页。"
94
  },
95
  {
96
  "id": "inter.filter.stage",
97
  "m": 2,
98
- "dimension": "功能",
99
  "w": 1.5,
100
- "description": "逐个选择学段,结果数精确为:高中冲刺 13 门(共 2 页,第 2 页 1 门)、初中提升 11 门(共 1 页)、少儿启蒙 9 门、成人兴趣 9 门;每次结果中的卡片学段标注均与所选学段一致。"
101
  },
102
  {
103
  "id": "inter.filter.difficulty",
104
  "m": 2,
105
- "dimension": "功能",
106
  "w": 1.5,
107
- "description": "分别选择入门/进阶/精讲后,当前结果中每张卡片的难度标注都与所选档一致:入门档结果内可找到“初中物理力学专题”,进阶档内可找到“Python 数据分析入门”,精讲档内可找到“新概念英语二册精讲”;清除难度筛选后恢复 42 门 4 页。"
108
  },
109
  {
110
  "id": "inter.filter.vacancy.sort",
111
  "m": 2,
112
- "dimension": "功能",
113
  "w": 1.0,
114
- "description": "仅打开“只看有名额”时结果为 35 门共 3 页(12/12/11)且任何一页都不出现“已满额”卡片;叠加“高中冲刺”后变为 10 门 1 页(翻页不可再前进);关闭开关恢复 42 门 4 页。切到“价格从低到高”时当前列表相邻卡片价格非递减,切到“从高到低”时非递增。"
115
  },
116
  {
117
  "id": "inter.plan.price",
118
  "m": 2,
119
- "dimension": "功能",
120
  "w": 1.5,
121
- "description": "依次加入 Python 数据分析入门(¥480)、新概念英语二册精讲(¥680),计划显示 2 门、合计 ¥1160;再加入初中物理力学专题(¥520) 后显示 3 门、合计 ¥1512(1680 的九折且无小数);移除任意一门回到 2 门且合计恢复为两门原价之和;点击“清空”后一次性变为 0 门、合计 ¥0。"
122
  },
123
  {
124
  "id": "inter.plan.edge",
125
  "m": 2,
126
- "dimension": "交互",
127
  "w": 1.0,
128
- "description": "已满额课程的加入操作无效(按钮禁用或点击后计划门数与合计金额均不变);对同一门可报名课程连点加入 3 次,计划中仍只有 1 条该课程;在搜索框逐字输入时无需按回车,列表随每次输入即时收窄;输入一个不存在的词时显示文字空态提示且翻页控件不可用,清空搜索词后恢复 42 门。"
129
  },
130
  {
131
  "id": "del.faq.gone",
132
  "m": 3,
133
- "dimension": "覆盖",
134
  "w": 1.5,
135
- "description": "页面中已无“Frequently asked questions”标题、聊天气泡与问题按钮列表;与此同时页尾 CTA 与 footer 完整保留(品牌标语、三列链接、三个社交图标均可见)。"
136
  },
137
  {
138
  "id": "del.banks.gone",
139
  "m": 3,
140
- "dimension": "功能",
141
  "w": 1.5,
142
- "description": "全站不再出现任何银行 logo 图标,也搜不到“WORKS WITH YOUR FAVOURITE BANKS”这句文案(原首屏与原面板内的多处均已清除)。"
143
  },
144
  {
145
  "id": "del.nav.links",
146
  "m": 3,
147
- "dimension": "交互",
148
  "w": 1.5,
149
- "description": "导航中不再出现 FAQs 入口,Features、Security、Getting started 三个入口保留;逐个点击,每个链接都能滚动定位到页面上实际存在的区域,不出现点击后无反应或滚到页面底部空白的情况。"
150
  },
151
  {
152
  "id": "del.hero.keep",
153
  "m": 3,
154
- "dimension": "视觉",
155
  "w": 1.0,
156
- "description": "首屏彩色标题块仍保持原有三行错落排布与紫/橙/黄/粉四色块加 QR 方块的组合,未被改色或改为单行;SCROLL 胶囊仍在且点击后滚动到课程目录区。"
157
  },
158
  {
159
  "id": "del.gap.tight",
160
  "m": 3,
161
- "dimension": "视觉",
162
  "w": 1.0,
163
- "description": "1440px 宽下,SCROLL 胶囊底部到第一张课程卡片顶部之间的纯背景垂直空隙小于 400px,页面不存在因删除区块留下的接近满屏的空白段。"
164
  },
165
  {
166
  "id": "layout.sidebar.grid",
167
  "m": 4,
168
- "dimension": "视觉",
169
  "w": 1.5,
170
- "description": "1440px 宽下左侧筛选栏与右侧课程网格左右并排,网格每行恰好 3 张卡片;向下滚动浏览列表时筛选栏保持在视口内可见。"
171
  },
172
  {
173
  "id": "layout.filter.parity",
174
  "m": 4,
175
- "dimension": "功能",
176
  "w": 1.5,
177
- "description": "搜索、学段、难度、只看有名额、排序五组控件均已移入侧栏且结果与改版前一致:侧栏内选“高中冲刺”+“只看有名额”仍为 10 门单页,单选“精讲”仍只剩精讲课且含“新概念英语二册精讲”,无筛选时仍为 42 门 4 页。"
178
  },
179
  {
180
  "id": "layout.nav.sticky",
181
  "m": 4,
182
- "dimension": "交互",
183
  "w": 1.0,
184
- "description": "滚动到课程目录中部时导航条仍固定可见,且其深红底色、圆角药丸外形与绿色“Try it out”按钮外观与改造前一致,未被新样式覆盖。"
185
  },
186
  {
187
  "id": "layout.plan.badge",
188
  "m": 4,
189
- "dimension": "功能",
190
  "w": 1.5,
191
- "description": "导航上的“我的学习计划”入口初始显示 0;加入 3 门后显示 3,移除 1 门后立即变为 2,且该数字任何时刻与计划详情内的条目条数一致。"
192
  },
193
  {
194
  "id": "layout.accent.consistent",
195
  "m": 4,
196
- "dimension": "视觉",
197
  "w": 1.0,
198
- "description": "计划入口数字角标、选中态筛选项、加入按钮所用的强调色均取自站内既有主色(绿 #84ff00 / 品红 #ff009c / 黄 #fff527,允许不同元素取不同色);页面未引入这三种之外的新高饱和强调色。"
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 宽下课程网格每行恰好 2 张卡片且页面无横向滚动条;导航链接收入汉堡入口,展开后可见保留的全部导航入口与“Try it out”按钮。"
213
  },
214
  {
215
  "id": "resp.state.persist",
216
  "m": 5,
217
- "dimension": "交互",
218
  "w": 1.5,
219
- "description": "在桌面宽度下完成“筛高中冲刺 + 只看有名额 + 加入 2 门课”后,不刷新页面将窗口缩到 375px:筛选结果仍为 10 门、计划仍是 2 门且合计金额与缩窄前完全相同。"
220
  },
221
  {
222
  "id": "resp.plan.empty",
223
  "m": 5,
224
- "dimension": "功能",
225
  "w": 1.5,
226
- "description": "375px 宽下学习计划面板占满屏宽;把计划内课程逐条删到 0 门时出现文字空态提示、合计金额显示为 ¥0,且“清空”操作此时消失或不可点击。"
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": "先把参考图里这个德语落地页原样搭出来,这是客户已经上线的页面,文案一个字都不要改、不要翻译成中文,德语原文照抄。要有的东西:顶部深藏青色窄条,左边是 CREDITGUIDE.DE 标识,右边依次是 Sofortkredit、Online、Beantragen、Zinsen、Ohne Schufa? 这几个入口,最右是一枚亮蓝色圆角按钮 Direktvergleich →。下面首屏左边一张人物照片(图我们还没定稿,先放占位图),右边白底上大标题 Sofortkredit,下面小一号的 Online vergleichen & Direkt beantragen,再往下是两行四个带对勾的短句:Schneller Überblick、Top-Zins Angebote、Sofort-Antrag、Express-Auszahlung,最后一枚蓝色按钮 » Kreditvergleich starten。首屏底下压一条深色横条,一行四项:Zahlreiche Bankangebote、Mit wenigen Klicks vergleichen、Top-Zinsen erhalten、Schnelle Prüfung & Auszahlung,每项前面带对勾图标。正文是左边一枚蓝色描边六边形徽章、右边一段德语正文的结构,依次是 SOFORTKREDIT、VERWENDUNG、VERGLEICH 三块;VERWENDUNG 那块正文下面有一份 8 条的项目符号清单(从 Unvorhersehbare Reparaturen 一直到 Ausgleich des Girokontos)。正文区一共插三条一模一样的深色横幅,位置分别是:VERGLEICH 段之后一条、Sofortkredit Online 区块之后一条、Sofortkredit Beantragen 区块之后一条;三条文案都是 Ihr Creditguide zum Sofortkredit. Vergleichen, Anfragen, Abschließen.,下面各一枚蓝色 » Jetzt starten 按钮。接着是浅灰底的 Sofortkredit Online 区块,标题两种颜色(前半深藏青、后半亮蓝)居中并带一小段下划线,下面三张白卡片,每张左侧一枚六边形徽章写 SCHRITT 1 / SCHRITT 2 / SCHRITT 3,右侧是小标题加德语正文。再往下 Sofortkredit Beantragen 区块,同样的双色居中标题,正文按 ALLGEMEIN、UNTERLAGEN、HINWEISE、LEGITIMATION 四枚六边形徽章分段:ALLGEMEIN 下面有 2 条清单,UNTERLAGEN 下面有 7 条清单,HINWEISE 段里有四个带下划线的小标题(Kreditvergleich、Dokument-Upload、Qualifizierte elektronische Signatur (QES)、Bonitätsprüfung in Echtzeit),LEGITIMATION 段里有 Post-Ident-Verfahren 和 Video-Ident-Verfahren 两个带下划线的小标题。页面最底部还要留一个同样风格的双色居中标题 Sofortkredit Ohne Schufa?。整体气质要跟图一样:大量留白、稳重的深藏青 + 亮蓝、正文灰黑小字。"
25
  },
26
  {
27
- "operator": "数据化",
28
- "request": "光有文章没用,客户要的是能比价。在 VERGLEICH 那段后面加一块真正的报价对比区。运营发过来的基准年利率清单写得挺乱,我抄给你:Santander 3,49;ING 最便宜 3,29;DKB 3,95;Postbank 4,15;Targobank 4,59(这家最贵);Norisbank 3,79;Commerzbank 4,29。这七家每家都能做 12、24、36、48、60、72 个月共六个期限,全排组合都要列出来。行规是期限越长越贵,每多一年在这家的基准上加 0.25 个点,12 个月就按基准算,利率写到小数点后两位。贷款金额用户能在 5.000 到 25.000 之间每 5.000 一档地挑,一共就这五档,默认 10.000,换金额利率不跟着变、只有钱数跟着变。还款别用银行那套复杂公式,就按总还款 = 本金 ×(1 + 年利率 × 年数)来,月供 = 总还款 ÷ 月数、往上取整到整欧元,利息就是总还款减本金。列表默认按利率从低到高排,利率一样的按银行名字母顺序;另外还得能改成按月供排、按总利息排。左边要能按银行勾选、按期限筛(都能多选),一页放 10 条、能翻页,翻页别把筛选条件弄丢。筛到一条不剩的时候要有个像样的空状态提示,别给用户一片白板。另外全场利率最低的那条给挂个醒目的标记让人一眼看到,但别搞得花花绿绿,还是原来那套稳重的蓝。"
29
  },
30
  {
31
- "operator": "新增区块",
32
- "request": "比价完要能接着申请。每条报价右边加个选择按钮,选中后顶部要有个已选提示(几条就写几条,我们同一时间只允许选一条,改选就直接换掉旧的),被选中那行自己也要看得出来是选中的。同时页面上出现一个三步申请向导:第一步填姓名和年龄,不满 18 岁不给进下一步,要给提示;第二步填月净收入,我们风控的红线是月供不能超过净收入的 35%,超了就明确提示并且卡住不让往下走,改到够了提示消失才能继续;第三步是确认摘要,银行、期限、金额、月供、总利息都要跟列表里那条完全一致,确认提交后给个成功提示。还没选方案的时候向导要显示引导空态,不能让人空着往下点。有个细节别忘了:用户如果选���某条以后又改筛选条件把那条藏起来,已选的东西不能跟着丢;要清空只能通过明确的清除选择操作,清完回到空态。"
33
  },
34
  {
35
- "operator": "重构布局",
36
- "request": "页面太长了,重排一下。大屏上把报价列表和申请向导并排放,向导在右边,往下滚的时候它要一直跟着看得见;窄屏就还是上下叠起来,列表在上向导在下。那三条一模一样的深色横幅太啰嗦,正文里别再重复了,合并成一条常驻在页面底部的条:没选方案的时候还是原来的德语文案和那枚 » Jetzt starten 按钮,选了方案就换成这条方案的摘要,至少要有银行和月供,数字必须跟列表里对得上。顶部那五个入口都要点了就滚到对应位置:Sofortkredit 回首屏顶部,Online 去 Sofortkredit Online 区块,Beantragen 去 Sofortkredit Beantragen 区块,Zinsen 去新做的报价对比区,Ohne Schufa? 去页面底部那个标题;滚到哪一块哪个入口就亮起来,同一时间只亮一个。上一版做的六边形、德语正文、带下划线的小标题、三处双色标题、首屏左图右文那套别给我改乱了。"
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": "顶部深藏青窄条左侧显示 CREDITGUIDE.DE,右侧按 Sofortkredit、Online、Beantragen、Zinsen、Ohne Schufa? 顺序排列 5 个导航项,最右为亮蓝色圆角按钮且文案为 Direktvergleich →(含箭头),顺序与文案完全一致。"
50
  },
51
  {
52
  "id": "rep.hero.layout",
53
  "m": 1,
54
- "dimension": "视觉",
55
  "w": 1.5,
56
- "description": "首屏为左图右文:左侧图片(可占位)约占首屏宽度一半,右侧白底上依次是大标题 Sofortkredit、副标题 Online vergleichen & Direkt beantragen、四个带对勾的短句 Schneller Überblick / Top-Zins Angebote / Sofort-Antrag / Express-Auszahlung(分两行两列排布)、蓝色按钮 » Kreditvergleich starten,文案逐字一致。"
57
  },
58
  {
59
  "id": "rep.strip.four",
60
  "m": 1,
61
- "dimension": "视觉",
62
  "w": 1.0,
63
- "description": "首屏正下方有一条深藏青横条,横向排列且仅有 4 项,文案依次为 Zahlreiche Bankangebote、Mit wenigen Klicks vergleichen、Top-Zinsen erhalten、Schnelle Prüfung & Auszahlung,每项前带对勾图标。"
64
  },
65
  {
66
  "id": "rep.hex.count",
67
  "m": 1,
68
- "dimension": "覆盖",
69
  "w": 1.5,
70
- "description": "全页共有 10 枚蓝色描边六边形徽章,文字依次为 SOFORTKREDIT、VERWENDUNG、VERGLEICH、SCHRITT 1、SCHRITT 2、SCHRITT 3、ALLGEMEIN、UNTERLAGEN、HINWEISE、LEGITIMATION,且徽章统一位于正文左侧成一列对齐,不是圆形或方形。"
71
  },
72
  {
73
  "id": "rep.lists.subheads",
74
  "m": 1,
75
- "dimension": "覆盖",
76
  "w": 1.0,
77
- "description": "VERWENDUNG 段的项目符号清单恰为 8 条(首条 Unvorhersehbare Reparaturen…、末条 Ausgleich des Girokontos…)、UNTERLAGEN 段恰为 7 条、ALLGEMEIN 段恰为 2 条;同时 HINWEISE 段内有 4 个带下划线的小标题 Kreditvergleich、Dokument-Upload、Qualifizierte elektronische Signatur (QES)、Bonitätsprüfung in Echtzeit,LEGITIMATION 段内有 2 个带下划线的小标题 Post-Ident-Verfahren、Video-Ident-Verfahren,共 6 个小标题文字逐字一致且带下划线样式。"
78
  },
79
  {
80
  "id": "rep.headings.tricolor",
81
  "m": 1,
82
- "dimension": "视觉",
83
  "w": 1.0,
84
- "description": "页面中共有 3 处居中双色标题,自上而下依次为 Sofortkredit Online、Sofortkredit Beantragen、Sofortkredit Ohne Schufa?(第三处位于页面最底部),三者均为前半深藏青、后半亮蓝,且下方都带一小段下划短线。"
85
  },
86
  {
87
  "id": "data.count42",
88
  "m": 2,
89
- "dimension": "功能",
90
  "w": 1.5,
91
- "description": "未施加任何筛选、金额为默认 10.000 时,报价共 42 条(7 家银行 × 6 个期限,可由总数文案或翻页累计核对),默认排序为利率从低到高,首条为 ING 12 Monate,利率显示 3.29%(或 3,29 %)、月供 861 €、总利息 329 €。"
92
  },
93
  {
94
  "id": "data.calc.extreme",
95
  "m": 2,
96
- "dimension": "功能",
97
  "w": 1.5,
98
- "description": "金额 10.000 时,Targobank 72 Monate 一条的利率为 5.84%(或 5,84 %)、月供 188 €、总利息 3.504 €;ING 36 Monate 一条为 3.79%(或 3,79 %)、月供 310 €、总利息 1.137 €(月供按向上取整,小数点与千位分隔两种写法均可)。"
99
  },
100
  {
101
  "id": "data.amount.steps",
102
  "m": 2,
103
- "dimension": "功能",
104
  "w": 1.0,
105
- "description": "金额选择器提供且仅提供 5.000、10.000、15.000、20.000、25.000 五个档位,默认停在 10.000;切到 5.000 时 ING 12 Monate 的利率仍显示 3.29%(或 3,29 %)而月供变为 431 €,切到 20.000 时 ING 36 Monate 的月供变为 619 €、总利息 2.274 €。"
106
  },
107
  {
108
  "id": "data.sort.combo",
109
  "m": 2,
110
- "dimension": "功能",
111
  "w": 1.0,
112
- "description": "金额 10.000、无筛选时:排序切为按月供从低到高,首条为 ING 72 Monate、月供 177 €;排序切为按总利息从低到高,首条为 ING 12 Monate(总利息 329 €)、次条为 Santander 12 Monate(总利息 349 €),两种排序的首条结果彼此不同。"
113
  },
114
  {
115
  "id": "data.filter.page",
116
  "m": 2,
117
- "dimension": "交互",
118
  "w": 1.5,
119
- "description": "无筛选时每页 10 条共 5 页且第 5 页只有 2 条;翻到第 2 页后、以及在第 2 页切换排序方式后,已勾选的银行/期限条件均保持不变且第 2 页始终显示当前条件下排序结果的第 11–20 条;仅勾选 DKB 与 Postbank、期限仅选 36 与 60 个月时结果恰为 4 条并在一页内显示完(分页控件消失或只剩 1 页)。"
120
  },
121
  {
122
  "id": "data.empty.badge",
123
  "m": 2,
124
- "dimension": "功能",
125
  "w": 1.0,
126
- "description": "日间、无筛选、金额 10.000 时,仅 ING 12 Monate 那一行带有醒目的最低利率标记(其余 41 行都没有),标记配色属于全站蓝色系而非新增的红/绿/橙等第二主色;把银行全部取消勾选后列表区显示明确的空状态提示,不出现任何报价行与分页页码。"
127
  },
128
  {
129
  "id": "wiz.select.single",
130
  "m": 3,
131
- "dimension": "交互",
132
  "w": 1.5,
133
- "description": "点击某条报价的选择按钮后,顶部出现已选提示且计数为 1,该行呈明显选中态;再点另一条报价,选中态转移到新行、旧行恢复未选中,计数仍为 1(不累加)。"
134
  },
135
  {
136
  "id": "wiz.age.gate",
137
  "m": 3,
138
- "dimension": "功能",
139
  "w": 1.0,
140
- "description": "向导第一步填入年龄 17 时无法进入第二步并给出明确提示;改为 18 或以上后可以进入第二步。"
141
  },
142
  {
143
  "id": "wiz.income.rule",
144
  "m": 3,
145
- "dimension": "功能",
146
  "w": 1.5,
147
- "description": "选中 ING 12 Monate(金额 10.000、月供 861 €)后,第二步填月净收入 2000 时提示超出 35% 红线且无法进入第三步;改为 2500 后提示消失并可进入第三步(阈值为月供 ≤ 净收入 ×35%,2000 对应上限 700、2500 对应上限 875)。"
148
  },
149
  {
150
  "id": "wiz.summary.match",
151
  "m": 3,
152
- "dimension": "功能",
153
  "w": 1.0,
154
- "description": "第三步摘要同时列出银行、期限、金额、月供、总利息五项,数值与列表中被选中那条完全一致(例如选中 ING 36 Monate、金额 10.000 时显示月供 310 €、总利息 1.137 €),确认提交后出现成功提示;未选择任何报价时向导显示引导空态且无法推进到收入校验步骤。"
155
  },
156
  {
157
  "id": "wiz.coupling.filter",
158
  "m": 3,
159
- "dimension": "功能",
160
  "w": 1.5,
161
- "description": "先选中 ING 的某条报价,再在筛选中取消勾选 ING 使该行从列表消失:顶部已选计数仍为 1,向导中该方案的银行/期限/月供信息原样不变;只有点击清除选择后计数归零、向导回到未选方案的引导空态。"
162
  },
163
  {
164
  "id": "layout.twocol",
165
  "m": 4,
166
- "dimension": "视觉",
167
  "w": 1.5,
168
- "description": "浏览器宽度约 1280px 时报价列表与申请向导左右并排(向导在右),向下滚动列表时向导仍保持在视口内可见;宽度约 480px 时两者上下堆叠且列表在上、向导在下。"
169
  },
170
  {
171
  "id": "layout.sticky.merge",
172
  "m": 4,
173
- "dimension": "功能",
174
  "w": 1.5,
175
- "description": "正文区不再出现重复的 Ihr Creditguide… 深色横幅(原三条已合并),页面底部改为一条常驻条;未选方案时该常驻条显示原德语文案 Ihr Creditguide zum Sofortkredit. Vergleichen, Anfragen, Abschließen. 与 » Jetzt starten 按钮。"
176
  },
177
  {
178
  "id": "layout.sticky.bound",
179
  "m": 4,
180
- "dimension": "功能",
181
  "w": 1.5,
182
- "description": "选�� ING 36 Monate(金额 10.000)后,底部常驻条改为显示该方案摘要,至少包含银行名 ING 与月供 310 €,数值与列表行、向导摘要三处一致;清除选择后该条恢复原德语文案。"
183
  },
184
  {
185
  "id": "layout.anchor.targets",
186
  "m": 4,
187
- "dimension": "交互",
188
  "w": 1.0,
189
- "description": "点击 Online 滚动至 Sofortkredit Online 区块、点击 Beantragen 滚动至 Sofortkredit Beantragen 区块、点击 Ohne Schufa? 滚动至页面底部的 Sofortkredit Ohne Schufa? 标题处,三次跳转目标各不相同且均可见。"
190
  },
191
  {
192
  "id": "layout.anchor.zinsen",
193
  "m": 4,
194
- "dimension": "交互",
195
  "w": 1.0,
196
- "description": "点击 Zinsen 滚动至报价对比区(筛选与报价列表进入视口)、点击 Sofortkredit 回到首屏顶部;滚动过程中同一时刻只有一个导航项处于高亮态,停在报价对比区时高亮的是 Zinsen。"
197
  },
198
  {
199
  "id": "layout.regression",
200
  "m": 4,
201
- "dimension": "覆盖",
202
  "w": 1.0,
203
- "description": "重排后 10 枚六边形徽章、6 个带下划线小标题、三处双色居中标题仍全部存在且样式未变,首屏仍为左图右文,全部德语正文一字未改(未被替换为中文或新文案)。"
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": "夜间模式下报价列表、筛选控件、申请向导、底部常驻条全部随主题变深,不存在仍保持白底的残留区块;主色仍为蓝色系(未引入第二种彩色主色),ING 12 Monate 行的最低利率标记在两种模式下都清晰可辨且与全站样式同族。"
218
  },
219
  {
220
  "id": "skin.state.keep",
221
  "m": 5,
222
- "dimension": "功能",
223
  "w": 1.5,
224
- "description": "在勾选 DKB+Postbank、排序为按月供从低到高、停留在非首页(若该组合有多页)、已选中某条方案、向导停在第二步并已填内容的状态下切换主题:筛选结果条数、排序结果顺序、当前页码、选中行、向导步骤与已填内容全部保持不变。"
225
  },
226
  {
227
  "id": "skin.persist",
228
  "m": 5,
229
- "dimension": "功能",
230
  "w": 1.0,
231
- "description": "选择夜间模式后刷新页面,页面仍为夜间模式(不闪回日间后再切换),且刷新后底部常驻条在未选方案时仍显示原德语文案 Ihr Creditguide zum Sofortkredit. Vergleichen, Anfragen, Abschließen.。"
232
  },
233
  {
234
  "id": "skin.hex.regression",
235
  "m": 5,
236
- "dimension": "覆盖",
237
  "w": 1.0,
238
- "description": "夜间模式下 10 枚徽章仍为六边形且描边清晰可见(未退化为方块或消失),6 个带下划线小标题、三处双色标题与德语正文文案与日间完全相同。"
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": "先把我们官网首页照着参考图一比一做出来,文案一个字都别改(西班牙语原文保留),图片没有就用同色块或灰块占位,但版面、配色、顺序要对得上。从上往下依次是:\n1)顶部一条很细的深色条,右侧有一排小社交图标和 Es / Ca / En 语言切换;页头左上角是白色的 monday happy monday 文字标志,右上角一个橙色方块的菜单按钮。\n2)首屏是一张暖黄色调的大照片背景,正中间压着白色大字引言:「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」(带引号照抄)。\n3)接着是六张服务卡片,三列两行。第一行:Design Sprint(黄底,小字「Resuelve grandes problemas y testea nuevas ideas en sólo 5 días」)、Formación(深蓝底,小字「La escuela para convertirse en un líder del siglo XXI, ser un emprendedor o Simplemente cambiar el mundo.」)、Design Thinking(浅蓝底,小字「Proyectos de innovación con Design Thinking que podrás llevar a la práctica」)。第二行:Design Research(珊瑚红底,小字「¿Conoces a tu usuario y su entorno y enfoca tu reto en sólo 2 días?」)、Talleres de Creatividad(绿底,小字「¡Haz emerger las mejores ideas en solo un día!」)、Agile(粉紫底,小字「Te acompañamos para sacar el mejor rendimiento de tu plan」)。卡片标题都是白字放在卡片上部,中间有个小插画位。\n4)一整条青色区块,居中白色大标题「Conócenos」,下面一张居中的人物照片,照片下沿要越过青色区、压进下面的橙色区里。\n5)橙色区块,白色大标题「Novedades en el blog」,下面一行小字链接「TODOS LOS ARTÍCULOS」,再下面三张白底文章卡:标题分别是「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)」,标题下各有一行「por Alicia Linares Roger | 20 May. 2026」「por Alejo Montero Bosch | 15 May. 2026」「por Alicia Linares Roger | 28 Abr. 2026」,再下一行是逗号分隔的分类(Innovación, Tendencias / Innovación, Tendencias / Historias reales, Innovación, Tendencias),最后是一段灰色摘要文字。\n6)深蓝色的订阅区,上下两条边缘是锯齿状的。里面居中标题「Suscríbete」,一个小喇叭图标,说明文字「Introduce tu correo para recibir novedades y actualizaciones de Monday Happy Monday」,一个占位为「Tu correo」的输入框和一个「ENVÍA」按钮;下面横排三组橙色大数字:92(Empresas)、176(Proyectos)、3121(Personas),标签是小号灰白字。\n7)最后是浅灰白底的区块,蓝色大标题「Clientes」,下面是灰度 logo 墙,每行五个,排满六行以上。"
26
  },
27
  {
28
- "operator": "重构布局",
29
- "request": "客户那一整片 logo 墙太糊弄人了,投资人来看只会问「所以到底合作了多少」。把 Clientes 这块整个改成一个客户数据面板:顶上横排三个汇总大数字,下面左边一条窄窄的行业栏、右边是客户卡片网格(宽屏一行三到四个,窄屏可以竖着堆成一列),每张卡上要看得到客户名、所属行业、首次合作年份、做过几个项目。\n还有一件事顺手做了:订阅区里那三个写死的数字(92 / 176 / 3121)搬到新面板顶上去,订阅区那儿就别留了,只保留标题、喇叭图标、说明文字、邮箱框和 ENVÍA 按钮,深蓝底和上下的锯齿边一点都别动。搬过去的三个数字不要再写死,按下面这份清单实算:一共多少家客户、项目数加起来多少、覆盖几个行业。字号配色沿用原来那种橙色大字加灰色小标签的感觉。首屏、六张服务卡、Conócenos、博客区这些上一版做好的地方别顺手改乱了。\n客户清单(销售那边给的,格式乱,自己整理,括号里依次是行业、首次合作年份、项目数):EDEM(教育,2016,7)、La Salle(教育,2018,4)、ESADE(教育,2015,9)、UOC(教育,2019,3)、IEBS(教育,2020,2)、inesdi(教育,2017,5)、EAE Business School(教育,2014,6)、eada(教育,2021,1)、Barcelona Activa(教育,2013,11)、Fundació Pere Tarrés(教育,2019,4);Roche(健康,2016,8)、B.Braun(健康,2018,3)、Uriach(健康,2015,6)、Clínic(健康,2017,5)、Boehringer Ingelheim(健康,2020,2)、Sanofi(健康,2019,4)、INDIBA(健康,2021,1);DENSO(工业,2014,5)、Schneider Electric(工业,2016,7)、SHAD(工业,2018,3)、Werfen(工业,2015,6)、Carglass(工业,2017,4)、Altran(工业,2019,2)、Volkswagen(工业,2013,9)、Keysight(工业,2020,3);Diputació de Barcelona(公共部门,2013,10)、Ajuntament de Lleida(公共部门,2016,4)、Port de Barcelona(公共部门,2015,6)、FGC(公共部门,2018,5)、Incasol(公共部门,2019,2)、Foment de Ciutat(公共部门,2017,3)、Òmnium(公共部门,2020,1)、Abertis(公共部门,2014,7);Vodafone(科技电信,2016,6)、Cellnex(科技电信,2018,4)、InPost(科技电信,2021,2)、Mediapro(科技电信,2015,5);PepsiCo(消费,2014,8)、Makro(消费,2017,5)、Vueling(消费,2016,6)、Endesa(消费,2015,7)、McCann(消费,2018,4)、Serunion(消费,2019,3)。\n先按项目数从多到少铺开,项目数打平的先合作的排前面,要是连年份都一样就按名字的字母顺序。这一步先全部铺出来,不用翻页。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "面板现在只能干看,得让人能自己筛。左边那条行业栏做成可以点的,六个行业都能多选(再点一次取消),按钮上顺便标一下这个行业本身有多少家客户,这个数字是固定的总数,别跟着筛选变。面板上方再放一个按客户名字搜的框,输入片段就能匹配(大小写不用管,名字里含这段就算命中),搜索和行业筛选是叠加的,两个条件都得满足才显示。再给个排序的选择,两种:「项目数 多→少」和「首次合作年份 早→晚」;按年份排的时候,同一年的把项目多的放前面,项目数也一样的就按名字字母顺序,规则和之前那套打平处理保持一致。\n卡片一页最多放 12 张,多了就翻页,要有页码和上一页/下一页,第一页时别让人翻到前面去、最后一页也别翻过头,狂点也不能出事。顶上那三个汇总数字要跟着当前筛选走——筛完(含搜索)之后显示的就是结果里的客户数、项目数合计和涉及的行业数,数字得对得上,别拿总数糊弄。\n另外,一改筛选、一改搜索词、一换排序,都自动回到第 1 页,别让人停在空白的第 4 页上。行业一个都没选中、搜索框是空的时候就当作看全部。"
34
  },
35
  {
36
- "operator": "新增区块",
37
- "request": "在客户卡片网格下面再加一块「行业分布」:当前筛选结果里涉及到的每个行业各占一条横向的条,条上写行业名和占比,占比按项目数算(该行业在当前结果里的项目数 ÷ 当前结果的项目数合计),四舍五入到整数百分比,条的长度跟着占比走,从长到短排。条的配色就从上面六张服务卡那套色里挑,别另起一套花里胡哨的。\n要注意的是这块得跟着筛选和搜索走,但翻页不影响它(第 2 页看到的分布应该和第 1 页一样)。还有,搜个谁都不匹配的词时,这块和卡片区都别留个空壳子在那儿,给句人话提示就行,汇总数字该显示 0 就显示 0。"
38
  },
39
  {
40
- "operator": "交互化",
41
- "request": "最后让客户卡片能点开看详情:点任意一张卡,右侧滑出一个抽屉,里面显示这家客户的名字、行业、首次合作年份、项目数,以及一条「平均每年 X 个项目」——X 用项目数除以从首次合作年到 2026 年的年数(含首尾两年)算,保留一位小数。抽屉里再放一个「只看该行业」的按钮,点了就把左边行业栏切成只选中这一个行业、抽屉关掉、列表回到第 1 页,上面的汇总数字和行业分布也得跟着变成这个行业的数。抽屉打开时背后要有一层遮罩,点遮罩或者按 Esc 都能关掉。\n还有个小矛盾我先说清楚:老板既要抽屉「一眼看到」,又不想把首页那种干净的留白风格搞乱——你自己拿捏一个方案,但要做得全站统一,别这块浓妆那块素颜。"
42
  }
43
  ],
44
  "checklist": [
45
  {
46
  "id": "replicate.hero.quote",
47
  "m": 1,
48
- "dimension": "视觉",
49
  "w": 1.5,
50
- "description": "首屏为暖黄色调大图/色块背景,正中居中显示白色大字西班牙语引言,文字包含「La creatividad es la capacidad de imaginar un futuro que aún no existe」与「– Tim Brown」,一字未改。"
51
  },
52
  {
53
  "id": "replicate.cards.six",
54
  "m": 1,
55
- "dimension": "覆盖",
56
  "w": 1.5,
57
- "description": "服务卡区恰好 6 张卡,桌面宽度下按 3 列 2 行排列,标题依次为 Design Sprint、Formación、Design Thinking、Design Research、Talleres de Creatividad、Agile,底色依次为黄、深蓝、浅蓝、珊瑚红、绿、粉紫,每张卡标题下有对应西语描述文字。"
58
  },
59
  {
60
  "id": "replicate.blog.three",
61
  "m": 1,
62
- "dimension": "覆盖",
63
  "w": 1.5,
64
- "description": "橙色区标题为「Novedades en el blog」,其正下方有小字链接「TODOS LOS ARTÍCULOS」;再下方 3 张白底文章卡按顺序标题为「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)」,署名行依次逐字为「por Alicia Linares Roger | 20 May. 2026」「por Alejo Montero Bosch | 15 May. 2026」「por Alicia Linares Roger | 28 Abr. 2026」,分类行依次为「Innovación, Tendencias」「Innovación, Tendencias」「Historias reales, Innovación, Tendencias」,每卡末尾有一段灰色摘要文字。"
65
  },
66
  {
67
  "id": "replicate.header.topbar",
68
  "m": 1,
69
- "dimension": "覆盖",
70
  "w": 1.0,
71
- "description": "页面最顶部为一条细的深色条,其右侧同时出现一排小社交图标与三项语言切换文字 Es、Ca、En;页头左上角为白色文字标志「monday happy monday」,右上角为橙色方块的菜单按钮。"
72
  },
73
  {
74
  "id": "replicate.subscribe.stats",
75
  "m": 1,
76
- "dimension": "视觉",
77
  "w": 1.0,
78
- "description": "深蓝订阅区上下边缘为锯齿形,区内自上而下含标题「Suscríbete」、一个喇叭图标、说明文字「Introduce tu correo para recibir novedades y actualizaciones de Monday Happy Monday」、占位文字为「Tu correo」的输入框与「ENVÍA」按钮,最下方横排三组橙色大数字 92 / 176 / 3121,标签分别为 Empresas / Proyectos / Personas。"
79
  },
80
  {
81
  "id": "replicate.clients.wall",
82
  "m": 1,
83
- "dimension": "视觉",
84
  "w": 1.0,
85
- "description": "青色区块内居中显示白色大标题「Conócenos」,其下为居中人物照片且照片下沿越界压入下方橙色区;页面最底部为浅灰白底区块,蓝色大标题「Clientes」,其下 logo 墙每行 5 个灰度占位、不少于 6 行。"
86
  },
87
  {
88
  "id": "refactor.summary.values",
89
  "m": 2,
90
- "dimension": "功能",
91
  "w": 1.5,
92
- "description": "面板顶部三个汇总数字由清单实算得出:客户数显示 43、项目数合计显示 208、行业数显示 6(初始未筛选状态)。"
93
  },
94
  {
95
  "id": "refactor.subscribe.preserved",
96
  "m": 2,
97
- "dimension": "视觉",
98
  "w": 1.5,
99
- "description": "订阅区不再出现 92、176、3121 这三个数字及其标签,但深蓝底色、上下锯齿边缘、「Suscríbete」标题、喇叭图标、说明文字、邮箱输入框与 ENVÍA 按钮全部原样保留。"
100
  },
101
  {
102
  "id": "refactor.cards.fields",
103
  "m": 2,
104
- "dimension": "覆盖",
105
  "w": 1.0,
106
- "description": "客户网格共渲染 43 张卡片,每张卡同时可见客户名、行业名、首次合作年份、项目数四项信息;桌面宽度下每行 3–4 张卡,窄屏(约 375px)下卡片纵向堆叠为单列;左侧存在一条窄的行业栏列出 6 个行业名称。"
107
  },
108
  {
109
  "id": "refactor.sort.default",
110
  "m": 2,
111
- "dimension": "功能",
112
  "w": 1.5,
113
- "description": "默认按项目数降序排列:前四张卡依次为 Barcelona Activa(11)、Diputació de Barcelona(10)、Volkswagen(9)、ESADE(9)(Volkswagen 2013 早于 ESADE 2015 故在前)。"
114
  },
115
  {
116
  "id": "refactor.upstream.intact",
117
  "m": 2,
118
- "dimension": "视觉",
119
  "w": 1.0,
120
- "description": "改造后首屏引言、6 张服务卡的标题与底色、Conócenos 青色区、博客区三张文章卡的文案均与需求1一致,未被改动或错位。"
121
  },
122
  {
123
  "id": "state.filter.multi",
124
  "m": 3,
125
- "dimension": "交互",
126
  "w": 1.5,
127
- "description": "点击行业栏中「教育」后仅显示教育类客户(共 10 家),再点击「健康」后同时显示教育与健康客户(共 17 家);再次点击「教育」取消后仅剩健康 7 家。"
128
  },
129
  {
130
  "id": "state.filter.badge.static",
131
  "m": 3,
132
- "dimension": "功能",
133
  "w": 1.0,
134
- "description": "行业栏每个行业旁标注的客户数始终为固定总数(教育 10、健康 7、工业 8、公共部门 8、科技电信 4、消费 6),在任意筛选、搜索或排序状态下都不变化。"
135
  },
136
  {
137
  "id": "state.summary.coupled",
138
  "m": 3,
139
- "dimension": "功能",
140
  "w": 1.5,
141
- "description": "仅选中「科技电信」时,顶部三个汇总数字变为客户数 4、项目数 17、行业数 1;取消全部选择后恢复 43 / 208 / 6。"
142
  },
143
  {
144
  "id": "state.search.intersect",
145
  "m": 3,
146
- "dimension": "功能",
147
  "w": 1.0,
148
- "description": "清空行业选择后在搜索框输入「barcelona」(不区分大小写),仅显示 Barcelona Activa、Diputació de Barcelona、Port de Barcelona 三张卡,顶部汇总为 3 / 27 / 2;此时再点选「教育」,结果只剩 Barcelona Activa,汇总变为 1 / 11 / 1。"
149
  },
150
  {
151
  "id": "state.sort.year",
152
  "m": 3,
153
- "dimension": "功能",
154
  "w": 1.0,
155
- "description": "切换到「首次合作年份 早→晚」且未筛选、搜索框为空时,首两张卡依次为 Barcelona Activa(2013, 11)、Diputació de Barcelona(2013, 10)(同年按项目数多者在前);同年同项目数按名字字母序,故该排序下 Serunion 排在 UOC 之前、Altran 排在 Incasol 之前。"
156
  },
157
  {
158
  "id": "state.paging.reset",
159
  "m": 3,
160
- "dimension": "交互",
161
  "w": 1.5,
162
- "description": "未筛选时每页最多 12 张卡、共 4 页(末页 7 张);翻到第 3 页后点击任一行业筛选、修改搜索词或切换排序,列表立即回到第 1 页;在第 1 页连点「上一页」5 次仍停在第 1 页且卡片数量不变,在末页连点「下一页」也不越界。"
163
  },
164
  {
165
  "id": "block.distribution.percent",
166
  "m": 4,
167
- "dimension": "功能",
168
  "w": 1.5,
169
- "description": "网格下方存在「行业分布」区块;仅选中「教育」与「科技电信」时(项目数合计 52+17=69),显示两条:教育约 75%、科技电信约 25%,且条长与百分比成正比、长条在前。"
170
  },
171
  {
172
  "id": "block.distribution.pageIndependent",
173
  "m": 4,
174
- "dimension": "功能",
175
  "w": 1.5,
176
- "description": "未筛选状态下从第 1 页翻到第 3 页,行业分布区块的行业条数量、顺序与百分比数值完全不变(仍为 6 条,只随筛选/搜索变化而非翻页)。"
177
  },
178
  {
179
  "id": "block.empty.state",
180
  "m": 4,
181
- "dimension": "交互",
182
  "w": 1.0,
183
- "description": "在搜索框输入无任何客户匹配的关键词(如「zzzz」)时,卡片区与行业分布区不留空白框架而是显示一句可读的无数据提示,同时顶部三个汇总数字均显示 0;清空搜索词后恢复 43 / 208 / 6 且回到第 1 页。"
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": "点击 Barcelona Activa 卡片后右侧滑出抽屉,显示名称、行业教育、首次合作 2013、项目数 11,并显示「平均每年 0.8 个项目」(11 ÷ 14 年 = 0.79 四舍五入到一位小数)。"
198
  },
199
  {
200
  "id": "inter.drawer.avg.second",
201
  "m": 5,
202
- "dimension": "功能",
203
  "w": 1.0,
204
- "description": "点击 INDIBA(健康,2021,1)后抽屉显示平均每年 0.2 个项目(1 ÷ 6 年);点击 PepsiCo(消费,2014,8)显示 0.6(8 ÷ 13 年)。"
205
  },
206
  {
207
  "id": "inter.drawer.filterChain",
208
  "m": 5,
209
- "dimension": "交互",
210
  "w": 1.5,
211
- "description": "在第 2 页打开某张工业类客户抽屉并点「只看该行业」后:抽屉关闭、行业栏仅「工业」处于选中态、列表回到第 1 页、顶部汇总变为客户数 8 / 项目数 39 / 行业数 1,行业分布仅剩一条工业 100%。"
212
  },
213
  {
214
  "id": "inter.drawer.dismiss",
215
  "m": 5,
216
- "dimension": "交互",
217
  "w": 1.0,
218
- "description": "抽屉打开时背景有一层遮罩覆盖页面内容;点击遮罩可关闭抽屉,键盘按下 Esc 同样可关闭,关闭后当前页码、搜索词与筛选状态保持不变。"
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": "先照着我给的这张官网截图做一版落地页,尽量像。可见范围内的东西都要有:最上面一条导航(左边 logo,中间 AI Labs、Work、Services、Solutions、Industry、Insights 这几项,最右边一个橙色圆角实心按钮 Discuss Your Project);首屏左文右图,大标题分两行写 “Embrace AI/ML Tech” 和 “and Get Future Ready”,其中 Future Ready 是橙色斜体,下面一段小字介绍,再下面一个深蓝胶囊按钮 Talk to us,紧挨着右边还有个单独的圆形箭头按钮;右侧那个粉橘色的几何球体插图用占位图就行,但位置和大小要撑住右半边。首屏右下角压着一个隐私授权浮层,标题 We Value Your Privacy,右上角 SETTINGS,正文一大段小字,底部并排两个按钮 DECLINE ALL 和 ALLOW ALL。往下是 “Engineering the Shift to AI-Native Systems” 这一段,左边是这个标题、右边是一段说明文字,左右两栏并排。再下面一排三张并列白卡:120+ / Digital Products Launched、4.7★ / Clutch Rating、15+ / Years of Experience,每张卡下面都有一小段灰字说明。再往下是 Featured Projects 那段:左上角一个小眉标 Featured Projects,居中标题 Innovating Tech at Enterprise Scale,左边一段说明文字,右边一堆客户案例卡——zilch 的 BNPL Platform、arm 的 Cloud-Based SoC Design System、VONAGE 的 Enterprise Communication APIs、gener8 的 Ad Blocker Platform、LANDBAY 的 Property-Backed Investment Platform,每张卡上面是客户 logo 区(占位即可)下面是标题加一小段描述,这段底下居中一个深蓝按钮 View Case Studies。再下面是 Our Solutions 那段,标题 Solutions We Offer,两列一共 8 张卡,依次是 Prediction Markets & Exchanges、Agentic Commerce & Payments、Embedded Finance & Wallets、Fraud & Risk Mitigation、Financial Intelligence & Analytics、Credit & Lending、Asset & Wealth Management、Crypto, Stablecoins & Blockchains,每张卡都是标题 + 一段小字 + 一张图(图占位即可),底部居中一个 Discuss Your Requirements 按钮。最后是 Our Process 那段,标题 A Collaborative Process That Delivers Impactful Outcomes,下面 01 Discover and Analyse、02 Validate and Derisk、03 Launch and Scale、04 Measure and Optimize 四步,橙色大号编号,图文左右交错排布。注意:文案原样保留英文,别替换成我们自己的业务说法,这一版就是照着做像。"
24
  },
25
  {
26
- "operator": "数据化",
27
- "request": "接下来这页要真的能用起来——我们要把 Solutions 那一段从“图文展示”变成“能约专家时段”的排期表。眉标 Our Solutions 和标题 Solutions We Offer 留着别动,但下面那 8 张静态卡片换成一个可筛可排的场次列表。排期是运营用表格拉的,我口头念三条你感受一下格式:『Agentic Commerce 深度诊断 / London / 3月12日 / 90min / £240 / 剩 4 席 / 4.8』、『Fraud & Risk 风控工作坊 / Online / 3月15日 / 60min / £180 / 剩 6 席 / 4.6』、『Embedded Finance 架构评审 / Manchester / 3月20日 / 120min / £320 / 剩 2 席 / 4.9』,剩下的你照这个格式补齐,总共凑 45 场。城市就 London / Manchester / Dublin / Online 这四种,别多也别少;主题直接沿用上面那 8 个 Solutions 标题;日期全部排在 3 月里,同一天最多排 3 场,别把一堆课全堆到一天;评分落在 4.2 到 5.0 之间,价格落在 £120 到 £480 之间,里头要有 6 场是已经约满的(剩 0 席)。两个硬要求:London 的 Fraud & Risk Mitigation 专题必须至少排 2 场,而且这几场彼此价格不能一样;另外财务对账有要求,£240、£180、£320 这三个价位在全部 45 场里各自只能出现一次,其它场次的价格要避开这三个数。列表一页放 8 个,底下给页码。筛选给三样:城市、主题、还有一个『只看还有名额的』开关;排序给三种:最早开课、价格从低到高、评分从高到低。不管是改筛选还是改排序,都立刻回到第一页,别让人卡在第 5 页看空白。每张场次卡上有个预约按钮,点了进右侧的预约清单;约满的那几场按钮点不动。清单里要把钱算清楚:先列小计,三场及以上一起订整单按 88 折算,算出来的零头直接抹掉不留小数,今天先收折后金额的两成做定金,同样抹零头。清单里的场次可以单独移除,重复点同一场不要重复加。清单空着的时候确认按钮不能点;点了确认就给个成功提示加一个预约号,方便用户截图,而且确认完按钮就得变成不可再点的样子,别让人手滑重复下单。"
28
  },
29
  {
30
- "operator": "删除区块",
31
- "request": "上线前砍两块:首屏那个隐私授权浮层整个拿掉(法务那边走别的方案了,标题、SETTINGS、正文、两个按钮一个不留),Featured Projects 整段也拿掉——客户 logo 授权还没续,连同那个小眉标、标题、说明文字、zilch/arm/VONAGE/gener8/LANDBAY 那些卡和 View Case Studies 按钮一起清掉,别留一片大空白或者把首屏插图挤变形,上下顺序还是首屏 → Engineering the Shift 段 → 三张数据卡 → 预约排期 → Our Process。另外那三张数据卡也别再写死数字了,客户看着假:第一张改成我们现在总共有多少场可约(就是排期表的条数),第二张改成所有场次的平均评分、保留一位小数,第三张改成所有场次剩余席位加起来的总数;下面那行灰字说明按新含义改一下措辞就行。注意这三个数字说的是“我们全部的排期”,用户在下面怎么筛、怎么翻页、往清单里加了几场,它们都不该跟着动。"
32
  },
33
  {
34
- "operator": "换肤",
35
- "request": "品牌部换了 VI,整站要换一版皮:主色从深蓝换成墨绿(#0F3D33 这种调子),点缀色从橙色换成暖沙金(#D9A441 这种),页面底色走米白(#FAF7F2 一类)。全站都要换到位——导航的那个 CTA、首屏按钮、Our Process 的 01–04 编号、排期区里的筛选选中态、当前页码、预约按钮,还有预约清单里小计/应付/定金那几个金额的强调色,一处都别漏,页面上不该再看到老的橙色和深蓝;具体哪个元素用墨绿哪个用沙金你按视觉合理性拿捏,只要是新配色就行,金额那几个数字还是要突出、别降成普通灰黑正文。有个矛盾你自己拿捏:老板要求主 CTA 更醒目,品牌部又要求整体克制,所以我的意见是每个大区块里最多留一个金色实心按钮,其余按钮一律降级;降级用描边还是纯文字你挑一种,挑定了全站都用同一种,别东一榔头西一棒子。另外换肤只是换颜色,版式、英文文案(首屏标题里 Future Ready 还是要斜体强调,只是颜色换成新配色)、四步流程的顺序都别改乱了,排期那块的筛选、翻页、折扣和定金也要照旧算对。"
36
  }
37
  ],
38
  "checklist": [
39
  {
40
  "id": "rep.nav.order",
41
  "m": 1,
42
- "dimension": "覆盖",
43
  "w": 1.0,
44
- "description": "顶部导航从左到右为 logo + AI Labs、Work、Services、Solutions、Industry、Insights 六项(顺序完全一致),最右侧是一个橙色圆角实心按钮,文字为 Discuss Your Project。"
45
  },
46
  {
47
  "id": "rep.hero.main",
48
  "m": 1,
49
- "dimension": "视觉",
50
  "w": 1.5,
51
- "description": "首屏大标题分两行显示 “Embrace AI/ML Tech” 与 “and Get Future Ready”,其中仅 “Future Ready” 为橙色斜体、其余为深蓝正体;标题下为一段说明小字,再下方深蓝胶囊按钮 Talk to us 与其右侧紧邻的独立圆形箭头按钮处于同一行;首屏右半侧存在一张球体/几何插图(占位图可),高度与左侧文案区相当且未被裁切。"
52
  },
53
  {
54
  "id": "rep.hero.cookie",
55
  "m": 1,
56
- "dimension": "覆盖",
57
  "w": 1.0,
58
- "description": "首屏右下方压着一个隐私授权浮层,含标题 We Value Your Privacy、右上角 SETTINGS、一段正文小字,底部并排两个按钮 DECLINE ALL 与 ALLOW ALL。"
59
  },
60
  {
61
  "id": "rep.shift.stats",
62
  "m": 1,
63
- "dimension": "视觉",
64
  "w": 1.0,
65
- "description": "存在 “Engineering the Shift to AI-Native Systems” 段,且为左标题右说明的左右两栏并排布局(文案为参考图原英文);其下方为三张等宽白卡横排,从左到右依次是 120+ / Digital Products Launched、4.7★ / Clutch Rating、15+ / Years of Experience,数字为大号深蓝粗体,每卡下方各有一段灰色小字说明。"
66
  },
67
  {
68
  "id": "rep.featured.projects",
69
  "m": 1,
70
- "dimension": "覆盖",
71
  "w": 1.5,
72
- "description": "存在 Featured Projects 段:含小眉标 Featured Projects、标题 Innovating Tech at Enterprise Scale、左侧一段说明文字,右侧五张案例卡的标题依次可见 BNPL Platform(zilch)、Cloud-Based SoC Design System(arm)、Enterprise Communication APIs(VONAGE)、Ad Blocker Platform(gener8)、Property-Backed Investment Platform(LANDBAY),段落底部居中一个深蓝按钮 View Case Studies。"
73
  },
74
  {
75
  "id": "rep.solutions.process",
76
  "m": 1,
77
- "dimension": "视觉",
78
  "w": 1.5,
79
- "description": "Solutions We Offer 区为两列共 8 张卡,标题按 Prediction Markets & Exchanges、Agentic Commerce & Payments、Embedded Finance & Wallets、Fraud & Risk Mitigation、Financial Intelligence & Analytics、Credit & Lending、Asset & Wealth Management、Crypto, Stablecoins & Blockchains 的顺序出现;Our Process 区含橙色大号编号 01–04,标题依次为 Discover and Analyse、Validate and Derisk、Launch and Scale、Measure and Optimize,且相邻步骤的图与文左右交错排布。"
80
  },
81
  {
82
  "id": "data.total.paging",
83
  "m": 2,
84
- "dimension": "功能",
85
  "w": 1.5,
86
- "description": "不做任何筛选时排期共 45 条、每页 8 条、页码 6 页、第 6 页只有 5 条;打开“只看还有名额的”后变为 39 条 / 5 页,列表中不再出现任何剩余 0 席的场次,且视图自动回到第 1 页。"
87
  },
88
  {
89
  "id": "data.dataset.constraints",
90
  "m": 2,
91
- "dimension": "功能",
92
  "w": 1.0,
93
- "description": "翻完全部 45 场可核对:£240、£180、£320 三个价位各自只出现一次、其余场次价格都不等于这三个数;所有价格落在 £120–£480、所有评分落在 4.2–5.0、所有日期都在 3 月且同一天不超过 3 场;城市筛选可选项恰为 London、Manchester、Dublin、Online 四种。"
94
  },
95
  {
96
  "id": "data.combo.sort",
97
  "m": 2,
98
- "dimension": "功能",
99
  "w": 1.0,
100
- "description": "同时选城市 London、主题 Fraud & Risk Mitigation 时结果不少于 2 条且每条都同时满足这两个条件;再选“价格从低到高”后这些结果的价格自上而下严格递增(无相同价格);此时改动任一筛选项,页码立即回到第 1 页。"
101
  },
102
  {
103
  "id": "data.sort.order",
104
  "m": 2,
105
- "dimension": "功能",
106
  "w": 1.0,
107
- "description": "不加筛选先翻到第 3 页,改选“评分从高到低”后视图立即回到第 1 页,跨页核对可见 Embedded Finance 架构评审(4.9) 在 Agentic Commerce 深度诊断(4.8) 之前、后者在 Fraud & Risk 风控工作坊(4.6) 之前;再改选“最早开课”同样回到第 1 页,三者顺序变为 3月12日深度诊断 → 3月15日风控工作坊 → 3月20日架构评审,且整列日期自上而下不递减。"
108
  },
109
  {
110
  "id": "data.cart.chain",
111
  "m": 2,
112
- "dimension": "交互",
113
  "w": 1.5,
114
- "description": "依次预约「Agentic Commerce 深度诊断」「Fraud & Risk 风控工作坊」「Embedded Finance 架构评审」三场后,清单显示小计 £740、折后应付 £651、定金 £130;随后单独移除「Embedded Finance 架构评审」,三个数字变���小计 £420、应付 £420(不打折)、定金 £84。"
115
  },
116
  {
117
  "id": "data.cart.edge",
118
  "m": 2,
119
- "dimension": "交互",
120
  "w": 1.0,
121
- "description": "边界表现正确:对同一场次连点 3 次预约,清单中仍只有一条且金额不变;剩余 0 席场次的按钮为禁用态、点击后清单无新增;清单为空时确认按钮不可点;有场次时点确认出现成功提示与一个预约号,之后确认按钮变为不可再点、不会产生第二个预约号。"
122
  },
123
  {
124
  "id": "del.blocks.gone",
125
  "m": 3,
126
- "dimension": "覆盖",
127
  "w": 1.5,
128
- "description": "整页任何位置都找不到 We Value Your Privacy、SETTINGS、DECLINE ALL、ALLOW ALL,也找不到眉标 Featured Projects、标题 Innovating Tech at Enterprise Scale 与按钮 View Case Studies;客户品牌名 zilch、arm、VONAGE、gener8、LANDBAY 不再以品牌名/logo 形式出现(按完整品牌名判断,不因普通单词中的字母子串误判)。"
129
  },
130
  {
131
  "id": "del.layout.keep",
132
  "m": 3,
133
- "dimension": "视觉",
134
  "w": 1.0,
135
- "description": "删除后自上而下顺序仍为首屏 → Engineering the Shift 两栏段 → 三张数据卡 → 预约排期区 → Our Process;首屏右侧插图完整可见、未被裁切或拉伸变形,被删位置不留超过一屏高度的连续空白。"
136
  },
137
  {
138
  "id": "del.stats.bound",
139
  "m": 3,
140
- "dimension": "功能",
141
  "w": 1.5,
142
- "description": "三张数据卡改读排期数据:第一张显示 45(总场次数),第二张显示全部 45 场评分的平均值且保留一位小数,第三张显示全部场次剩余席位之和(与逐页核对的合计一致),每张卡下方的灰色小字说明已改为与新含义匹配的措辞。"
143
  },
144
  {
145
  "id": "del.stats.stable",
146
  "m": 3,
147
- "dimension": "功能",
148
  "w": 1.5,
149
- "description": "打开“只看还有名额的”、切换主题筛选、翻到第 3 页、以及把 3 场加入预约清单之后,三张数据卡的数字与操作前完全一致(仍按全量 45 场计算),不随筛选/分页/清单变化。"
150
  },
151
  {
152
  "id": "del.rest.intact",
153
  "m": 3,
154
- "dimension": "覆盖",
155
  "w": 1.0,
156
- "description": "排期区上方仍保留眉标 Our Solutions 与标题 Solutions We Offer;Our Process 的 01–04 编号、顺序与英文标题(Discover and Analyse / Validate and Derisk / Launch and Scale / Measure and Optimize)保持不变。"
157
  },
158
  {
159
  "id": "skin.palette.global",
160
  "m": 4,
161
- "dimension": "视觉",
162
  "w": 1.5,
163
- "description": "全站主色替换为深墨绿、点缀色为暖沙金、页面底色为米白;导航 CTA、首屏按钮、Our Process 的 01–04 编号、排期区筛选与预约按钮、以及预约清单中小计/应付/定金金额均已换成新配色,其中金额仍以沙金作强调显示、未回退为普通灰黑正文色;页面任何位置不再出现原先的橙色(#F05A28 一类)或深蓝(#0B2A5B 一类)按钮、文字与色块。"
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": "换肤后功能未被破坏:默认仍为 45 条 / 每页 8 条 / 6 页,打开“只看还有名额的”后为 39 条 / 5 页;预约那三场样例(£240+£180+£320)仍得到小计 £740、应付 £651、定金 £130。"
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": "换肤后首屏标题仍为 “Embrace AI/ML Tech and Get Future Ready” 且 “Future Ready” 保持斜体强调(颜色为新配色),Our Process 四步的编号顺序与英文标题、三张数据卡的数字含义均未被改动。"
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": "做一个叫「砚台快讯」的资讯站首页,副标语「每天七分钟,把世界读薄一点」。\n\n页面从上往下:顶栏放站名和副标语,右侧放一个「我的书签(0)」的入口;顶栏下面是一条频道条,档位固定为 全部 / 科技 / 财经 / 文化 / 体育,默认停在「全部」;再往下是文章列表,每页 8 条,底部翻页。\n\n文章一共放 26 条,每条要有标题、所属频道、阅读量、一个「加书签」按钮。26 条里科技 9 条、财经 6 条、文化 5 条、体育 6 条。阅读量你按从高到低排,第 1 条 9800,之后每条比上一条少 300。列表默认按阅读量从高到低。"
30
  },
31
  {
32
- "operator": "换肤",
33
- "request": "晚上看着太刺眼。顶栏右侧加一个「夜间」开关,打开后整站切到深色:底色变深、正文文字变浅色。开关状态要记住——翻到第 2 页、切频道之后都不能自己弹回白天。"
34
  },
35
  {
36
- "operator": "交互化",
37
- "request": "书签要真能用。点「加书签」后按钮变成「已加入」,顶栏那个「我的书签(N)」的 N 要跟着涨;再点一次取消,N 跟着减。这个计数和每条的按钮状态,在切频道、翻页、开关夜间模式之后都得保持住。"
38
  },
39
  {
40
- "operator": "删除区块",
41
- "request": "频道条里的「体育」不做了,整个档位去掉,那 6 条体育文章也一并从列表里撤掉。撤完之后列表总数和翻页页数要跟着变,别留空页。"
42
  },
43
  {
44
- "operator": "数据化",
45
- "request": "顶栏下面加一行汇总:「共 N 篇 · 总阅读 M」。N 是当前频道下的文章数,M 是这些文章阅读量的和,切频道要跟着变。数字要算准。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.channels.five",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "频道条恰好 5 个档位,文字依次为 全部 / 科技 / 财经 / 文化 / 体育,且「全部」处于选中态(与其余档位有可见区别)"
55
  },
56
  {
57
  "id": "gen.count.26",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部频道下文章总数为 26 条,分页为每页 8 条共 4 页(第 4 页 2 条)"
62
  },
63
  {
64
  "id": "gen.first.reads",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "默认按阅读量降序:第 1 条阅读量 9800,第 2 条 9500,第 3 条 9200"
69
  },
70
  {
71
  "id": "gen.last.reads",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.0,
75
- "description": "翻到第 4 页,末条(第 26 条)阅读量为 2300"
76
  },
77
  {
78
  "id": "gen.chan.split",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.0,
82
- "description": "切到科技显示 9 条、财经 6 条、文化 5 条、体育 6 条"
83
  },
84
  {
85
  "id": "gen.header.bm0",
86
  "m": 1,
87
- "dimension": "视觉",
88
  "w": 1.0,
89
- "description": "顶栏右侧存在书签入口,初始文字中的计数为 0"
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": "开启夜间 → 翻到第 2 页,仍为深色态(未回到白天)"
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": "点第 1 条的「加书签」,该按钮文字变为「已加入」且顶栏计数变为 1"
146
  },
147
  {
148
  "id": "int.bm.three",
149
  "m": 3,
150
- "dimension": "交互",
151
  "w": 1.5,
152
- "description": "再对第 2、3 条加书签,顶栏计数变为 3,三条按钮均为「已加入」"
153
  },
154
  {
155
  "id": "int.bm.cancel",
156
  "m": 3,
157
- "dimension": "交互",
158
  "w": 1.5,
159
- "description": "对第 2 条再点一次,按钮回到「加书签」且顶栏计数变为 2"
160
  },
161
  {
162
  "id": "int.bm.keep.page",
163
  "m": 3,
164
- "dimension": "交互",
165
  "w": 1.5,
166
- "description": "加书签 3 条后翻到第 2 页再翻回第 1 页,计数仍为 3 且原三条仍显示「已加入」"
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": "对同一条连续点两次「加书签」,计数净变化为 0(不出现重复计数)"
188
  },
189
  {
190
  "id": "del.sports.gone",
191
  "m": 4,
192
- "dimension": "覆盖",
193
  "w": 1.5,
194
- "description": "频道条只剩 4 个档位,「体育」不再出现"
195
  },
196
  {
197
  "id": "del.count.20",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.5,
201
- "description": "全部频道下文章总数变为 20 条,分页为每页 8 条共 3 页(第 3 页 4 条)"
202
  },
203
  {
204
  "id": "del.no.empty",
205
  "m": 4,
206
- "dimension": "功能",
207
  "w": 1.0,
208
- "description": "翻页控件不存在可点击的空页(第 4 页不存在或不可达)"
209
  },
210
  {
211
  "id": "del.sports.items",
212
  "m": 4,
213
- "dimension": "覆盖",
214
  "w": 1.0,
215
- "description": "逐页浏览 20 条,没有任何一条的频道标记为体育"
216
  },
217
  {
218
  "id": "del.keep.bm",
219
  "m": 4,
220
- "dimension": "交互",
221
  "w": 1.5,
222
- "description": "删除体育前先给科技类 2 条加书签,删除后顶栏计数仍为 2 且这 2 条仍为「已加入」"
223
  },
224
  {
225
  "id": "data.sum.all",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部频道下汇总行显示「共 20 篇」,总阅读为这 20 条阅读量之和且数字精确"
230
  },
231
  {
232
  "id": "data.sum.tech",
233
  "m": 5,
234
- "dimension": "功能",
235
  "w": 1.5,
236
- "description": "切到科技,汇总行篇数变为 9,总阅读等于这 9 条阅读量之和"
237
  },
238
  {
239
  "id": "data.sum.exists",
240
  "m": 5,
241
- "dimension": "视觉",
242
  "w": 1.0,
243
- "description": "汇总行位于顶栏下方、频道条附近,文案形如「共 N 篇 · 总阅读 M」"
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
- "视觉": 9,
267
- "功能": 8,
268
- "交互": 11,
269
- "覆盖": 2
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": "做一个叫「拾物集」的小众好物电商列表页。顶栏放店名和一个「购物车(0)」。下面一条分类条:全部 / 器物 / 书房 / 织物,默认「全部」。\n\n商品共 18 件:器物 7、书房 6、织物 5。每件要有名称、分类、价格、一个「加入购物车」按钮。价格从 88 起,之后每件加 37(88、125、162…),按价格从低到高排列。列表一页放完,不分页。"
31
  },
32
  {
33
- "operator": "数据化",
34
- "request": "每件商品后面补上库存数字。库存按这个规则给:按当前排列顺序,第 n 件的库存 =(n × 7)除以 5 的余数再加 1,也就是在 1 到 5 之间循环。库存为 1 的商品要标「仅剩 1 件」。"
35
  },
36
  {
37
- "operator": "状态化",
38
- "request": "购物车要真能加。点「加入购物车」顶栏计数加 1,同一件最多加到它的库存上限,到上限后按钮变成「已达上限」不能再点。顶栏再补一个「合计 ¥X」,X 是已加入商品的价格乘数量之和,要算准。"
39
  },
40
  {
41
- "operator": "删除区块",
42
- "request": "「织物」这个分类不做了,档位和那 5 件商品一起撤掉。撤掉之后商品总数、库存编号规则按新的顺序重新算(也就是第 n 件还是按新位置算库存)。"
43
  },
44
  {
45
- "operator": "交互化",
46
- "request": "分类条上加一个「只看有货」的开关,打开后隐藏库存为 0 的商品——现在没有 0 库存的,所以打开后列表不变,但开关本身要能开能关,且开关状态在切分类后保持。另外购物车的计数和合计,在切分类、开关筛选之后都不能丢。"
47
  }
48
  ],
49
  "checklist": [
50
  {
51
  "id": "gen.cats.four",
52
  "m": 1,
53
- "dimension": "视觉",
54
  "w": 1.5,
55
- "description": "分类条恰好 4 个档位:全部 / 器物 / 书房 / 织物,「全部」为选中态且与其他档位可辨"
56
  },
57
  {
58
  "id": "gen.count.18",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.5,
62
- "description": "全部分类下商品恰好 18 件,一页展示完,页面中无分页控件"
63
  },
64
  {
65
  "id": "gen.price.seq",
66
  "m": 1,
67
- "dimension": "功能",
68
  "w": 1.5,
69
- "description": "按价格升序:第 1 件 ¥88、第 2 件 ¥125、第 3 件 ¥162"
70
  },
71
  {
72
  "id": "gen.price.last",
73
  "m": 1,
74
- "dimension": "功能",
75
  "w": 1.0,
76
- "description": "末件(第 18 件)价格为 ¥717"
77
  },
78
  {
79
  "id": "gen.cat.split",
80
  "m": 1,
81
- "dimension": "功能",
82
  "w": 1.0,
83
- "description": "切分类后:器物 7 件、书房 6 件、织物 5 件"
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": "顶栏可见店名「拾物集」与购物车入口,初始计数为 0"
98
  },
99
  {
100
  "id": "data.stock.first",
101
  "m": 2,
102
- "dimension": "功能",
103
  "w": 1.5,
104
- "description": "库存按位置计算:第 1 件库存 3、第 2 件库存 5、第 3 件库存 2(n×7 mod 5 + 1)"
105
  },
106
  {
107
  "id": "data.stock.only1",
108
  "m": 2,
109
- "dimension": "视觉",
110
  "w": 1.5,
111
- "description": "库存为 1 的商品卡上可见「仅剩 1 件」标记,且该标记只出现在库存为 1 的卡片上"
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": "逐件核对,全部库存值都落在 1 到 5 之间,无 0 或大于 5 的值"
126
  },
127
  {
128
  "id": "st.cart.add",
129
  "m": 3,
130
- "dimension": "交互",
131
  "w": 1.5,
132
- "description": "点第 1 件的「加入购物车」,顶栏计数变 1,合计变为 ¥88"
133
  },
134
  {
135
  "id": "st.cart.sum2",
136
  "m": 3,
137
- "dimension": "交互",
138
  "w": 1.5,
139
- "description": "再加第 2 件,顶栏计数变 2,合计变为 ¥213(88+125)"
140
  },
141
  {
142
  "id": "st.cart.limit",
143
  "m": 3,
144
- "dimension": "交互",
145
  "w": 1.5,
146
- "description": "对第 3 件(库存 2)连点三次,计数只增加 2,按钮变为「已达上限」且不可再点"
147
  },
148
  {
149
  "id": "st.cart.sum.exact",
150
  "m": 3,
151
- "dimension": "功能",
152
  "w": 1.5,
153
- "description": "第 1 件加 1 件、第 2 件加 1 件、第 3 件加满 2 件后,合计精确为 ¥537(88+125+162×2)"
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": "顶栏同时可见购物车���数与「合计 ¥X」两处信息"
168
  },
169
  {
170
  "id": "del.textile.gone",
171
  "m": 4,
172
- "dimension": "覆盖",
173
  "w": 1.5,
174
- "description": "分类条只剩 3 个档位,「织物」不再出现"
175
  },
176
  {
177
  "id": "del.count.13",
178
  "m": 4,
179
- "dimension": "功能",
180
  "w": 1.5,
181
- "description": "全部分类下商品变为 13 件"
182
  },
183
  {
184
  "id": "del.no.textile",
185
  "m": 4,
186
- "dimension": "覆盖",
187
  "w": 1.0,
188
- "description": "逐件浏览 13 件,没有任何一件的分类为织物"
189
  },
190
  {
191
  "id": "del.stock.recalc",
192
  "m": 4,
193
- "dimension": "功能",
194
  "w": 1.5,
195
- "description": "库存按新位置重算:删除后第 1 件库存 3、第 2 件库存 5、第 3 件库存 2"
196
  },
197
  {
198
  "id": "del.keep.cart",
199
  "m": 4,
200
- "dimension": "交互",
201
  "w": 1.5,
202
- "description": "删除前先加购器物类 2 件,删除织物后顶栏计数与合计保持不变"
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": "打开「只看有货」后商品数仍为 13(当前无零库存商品),列表未被清空"
217
  },
218
  {
219
  "id": "int.stock.off",
220
  "m": 5,
221
- "dimension": "交互",
222
  "w": 1.0,
223
- "description": "关闭该开关后开关回到关闭态,商品数仍为 13"
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": "加购 2 件后开关「只看有货」两次,顶栏计数与合计均不变"
238
  },
239
  {
240
  "id": "int.combo.all",
241
  "m": 5,
242
- "dimension": "交互",
243
  "w": 1.5,
244
- "description": "加购 2 件 → 切书房 → 打开只看有货 → 切回全部,顶栏计数、合计、开关态三者同时保持正确"
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
- "视觉": 9,
268
- "功能": 9,
269
- "交互": 10,
270
- "覆盖": 2
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": "做「巷口生活」本地生活站首页。顶栏放站名和一个「我的收藏(0)」。下面一条区域条:全城 / 城东 / 城西 / 城南,默认「全城」。\n\n主体是商户列表,共 22 家:城东 8、城西 7、城南 7。每家要有店名、所属区域、评分、人均价格、一个「收藏」按钮。评分从 4.9 起每家递减 0.1,最低到 2.8 为止循环回 4.9。人均价格按位置算:第 n 家 = 30 + n × 5。列表默认按评分从高到低。"
31
  },
32
  {
33
- "operator": "响应式",
34
- "request": "窄屏(浏览器宽度 500 像素左右)下要能看:商户列表从多列变成单列竖排,区域条如果放不下就折成两行或收进一个下拉里,但四个区域必须还能选到。桌面宽度下保持原样。"
35
  },
36
  {
37
- "operator": "状态化",
38
- "request": "收藏要真能用。点「收藏」按钮变「已收藏」,顶栏计数加 1;再点取消,计数减 1。这个状态在切区域、切窄屏/宽屏之后都不能丢。"
39
  },
40
  {
41
- "operator": "重构布局",
42
- "request": "把商户列表从纵向长列表改成网格:桌面宽度下一行放 3 家。改完之后评分排序、人均价格、收藏状态都要和改之前一模一样。"
43
  },
44
  {
45
- "operator": "删除区块",
46
- "request": "「城南」这个区域不做了,档位和那 7 家商户一起撤掉。撤完之后人均价格按新位置重算(第 n 家 = 30 + n × 5)。"
47
  }
48
  ],
49
  "checklist": [
50
  {
51
  "id": "gen.areas.four",
52
  "m": 1,
53
- "dimension": "视觉",
54
  "w": 1.5,
55
- "description": "区域条恰好 4 个档位:全城 / 城东 / 城西 / 城南,「全城」为选中态"
56
  },
57
  {
58
  "id": "gen.count.22",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.5,
62
- "description": "全城下商户恰好 22 家"
63
  },
64
  {
65
  "id": "gen.score.desc",
66
  "m": 1,
67
- "dimension": "功能",
68
  "w": 1.5,
69
- "description": "默认按评分降序:第 1 家 4.9、第 2 家 4.8、第 3 家 4.7"
70
  },
71
  {
72
  "id": "gen.price.rule",
73
  "m": 1,
74
- "dimension": "功能",
75
  "w": 1.5,
76
- "description": "人均价格按位置计算:第 1 家 ¥35、第 2 家 ¥40、第 10 家 ¥80"
77
  },
78
  {
79
  "id": "gen.area.split",
80
  "m": 1,
81
- "dimension": "功能",
82
  "w": 1.0,
83
- "description": "切区域后:城东 8 家、城西 7 家、城南 7 家"
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": "顶栏可见站名「巷口生活」与收藏入口,初始计数为 0"
98
  },
99
  {
100
  "id": "resp.narrow.single",
101
  "m": 2,
102
- "dimension": "视觉",
103
  "w": 1.5,
104
- "description": "窄屏(约 500px 宽)下商户卡为单列竖排,不存在并排两列的情况"
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": "点第 1 家的「收藏」,按钮变为「已收藏」且顶栏计数为 1"
133
  },
134
  {
135
  "id": "st.fav.three",
136
  "m": 3,
137
- "dimension": "交互",
138
  "w": 1.5,
139
- "description": "再收藏第 2、3 家,顶栏计数为 3,三家均显示「已收藏」"
140
  },
141
  {
142
  "id": "st.fav.cancel",
143
  "m": 3,
144
- "dimension": "交互",
145
  "w": 1.5,
146
- "description": "对第 2 家再点一次,按钮回到「收藏」且计数变为 2"
147
  },
148
  {
149
  "id": "st.fav.keep.area",
150
  "m": 3,
151
- "dimension": "交互",
152
  "w": 1.5,
153
- "description": "收藏 3 家后切到城西再切回全城,顶栏计数仍为 3 且原三家仍为「已收藏」"
154
  },
155
  {
156
  "id": "st.fav.keep.resp",
157
  "m": 3,
158
- "dimension": "交互",
159
  "w": 1.5,
160
- "description": "收藏 3 家后切到窄屏再回宽屏,顶栏计数与各家按钮状态均不变"
161
  },
162
  {
163
  "id": "ref.grid.three",
164
  "m": 4,
165
- "dimension": "视觉",
166
  "w": 1.5,
167
- "description": "桌面宽度下商户卡为网格排布且每行恰好 3 家"
168
  },
169
  {
170
  "id": "ref.order.same",
171
  "m": 4,
172
- "dimension": "功能",
173
  "w": 1.5,
174
- "description": "重构后仍按评分降序,前三家评分依次为 4.9 / 4.8 / 4.7"
175
  },
176
  {
177
  "id": "ref.price.same",
178
  "m": 4,
179
- "dimension": "功能",
180
  "w": 1.0,
181
- "description": "重构后第 1 家人均仍为 ¥35、第 10 家仍为 ¥80"
182
  },
183
  {
184
  "id": "ref.fav.same",
185
  "m": 4,
186
- "dimension": "交互",
187
  "w": 1.5,
188
- "description": "重构前先收藏 2 家,重构为网格后顶栏计数仍为 2 且这 2 家仍为「已收藏」"
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": "区域条只剩 3 个档位,「城南」不再出现"
203
  },
204
  {
205
  "id": "del.count.15",
206
  "m": 5,
207
- "dimension": "功能",
208
  "w": 1.5,
209
- "description": "全城下商户变为 15 家"
210
  },
211
  {
212
  "id": "del.no.south",
213
  "m": 5,
214
- "dimension": "覆盖",
215
  "w": 1.0,
216
- "description": "逐家浏览 15 家,没有任何一家所属区域为城南"
217
  },
218
  {
219
  "id": "del.price.recalc",
220
  "m": 5,
221
- "dimension": "功能",
222
  "w": 1.5,
223
- "description": "人均按新位置重算:删除后第 1 家 ¥35、第 10 家 ¥80、末家(第 15 家)¥105"
224
  },
225
  {
226
  "id": "del.keep.fav",
227
  "m": 5,
228
- "dimension": "交互",
229
  "w": 1.5,
230
- "description": "删除前先收藏城东 2 家,删除城南后顶栏计数仍为 2 且这 2 家仍为「已收藏」"
231
  },
232
  {
233
  "id": "del.grid.reflow",
234
  "m": 5,
235
- "dimension": "视觉",
236
  "w": 1.0,
237
- "description": "删除后网格仍每行 3 家,末行按剩余数量排布且无空占位格"
238
  },
239
  {
240
  "id": "del.area.recheck",
241
  "m": 5,
242
- "dimension": "交互",
243
  "w": 1.0,
244
- "description": "删除城南后在城东与城西之间来回切换两次,每次商户数分别为 8 与 7 且排序仍为评分降序"
245
  },
246
  {
247
  "id": "del.combo",
248
  "m": 5,
249
- "dimension": "交互",
250
  "w": 1.5,
251
- "description": "收藏 2 家 → 切窄屏 → 切城西 → 回宽屏,顶栏计数与收藏态仍正确"
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
- "视觉": 13,
289
- "功能": 8,
290
- "交互": 10,
291
- "覆盖": 2
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": "做一个叫「学阶课堂」的站点首页,副标语「把每一节课讲透」。顶栏放站名和一个「我的计划(0)」入口。\n\n下面一条筛选条,档位固定为 全部 / 编程 / 设计 / 语言,默认停在「全部」。主体是课程列表,共 21 项,分布为:编程 8 项、设计 7 项、语言 6 项。\n\n每项要有名称、所属档位、课时费、一个「加入计划」按钮。课时费按位置给:第 n 项 = 120 + n × 30。另外每项有一个评价分,第 1 项 4.9,之后每项比上一项少 0.1。列表默认按评价分从高到低排。"
31
  },
32
  {
33
- "operator": "状态化",
34
- "request": "「加入计划」要真能用。点了之后按钮变成「已加入」,顶栏「我的计划」的计数加 1;再点一次取消,计数减 1。这个计数和每项的按钮状态,在切档位之后不能丢。"
35
  },
36
  {
37
- "operator": "数据化",
38
- "request": "筛选条下面加一行汇总:「共 N 项 · 课时费合计 M」。N 是当前档位下的项数,M 是这些项的课时费之和,切档位要跟着变,数字要算准。"
39
  },
40
  {
41
- "operator": "删除区块",
42
- "request": "「语言」这个档位不做了,档位和那 6 项一起撤掉。撤完之后课时费按新位置重算(第 n 项 = 120 + n × 30),汇总行也要跟着变。"
43
  },
44
  {
45
- "operator": "交互化",
46
- "request": "筛选条上再加一个「只看高分」开关,打开后只显示评价分不低于 4.6 的项。开关状态在切档位后要保持,且顶栏计数在开关筛选前后都不能变。"
47
  }
48
  ],
49
  "checklist": [
50
  {
51
  "id": "gen.tabs",
52
  "m": 1,
53
- "dimension": "视觉",
54
  "w": 1.5,
55
- "description": "筛选条恰好 4 个档位,文字依次为 全部 / 编程 / 设计 / 语言,「全部」为选中态且与其余档位可辨"
56
  },
57
  {
58
  "id": "gen.total",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.5,
62
- "description": "全部档位下课程总数为 21 项"
63
  },
64
  {
65
  "id": "gen.val.desc",
66
  "m": 1,
67
- "dimension": "功能",
68
  "w": 1.5,
69
- "description": "默认按评价分降序:第 1 项 4.9、第 2 项 4.8、第 3 项 4.7"
70
  },
71
  {
72
  "id": "gen.extra.rule",
73
  "m": 1,
74
- "dimension": "功能",
75
  "w": 1.5,
76
- "description": "课时费按位置计算:第 1 项 150、第 2 项 180、第 5 项 270"
77
  },
78
  {
79
  "id": "gen.split",
80
  "m": 1,
81
- "dimension": "功能",
82
  "w": 1.0,
83
- "description": "切档位后各档数量为:编程 8、设计 7、语言 6"
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": "顶栏可见站名「学阶课堂」、副标语「把每一节课讲透」与「我的计划」入口,初始计数为 0"
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": "点第 1 项的「加入计划」,按钮变为「已加入」且顶栏计数为 1"
112
  },
113
  {
114
  "id": "st.add3",
115
  "m": 2,
116
- "dimension": "交互",
117
  "w": 1.5,
118
- "description": "再对第 2、3 项操作,顶栏计数为 3 且三项均显示「已加入」"
119
  },
120
  {
121
  "id": "st.cancel",
122
  "m": 2,
123
- "dimension": "交互",
124
  "w": 1.5,
125
- "description": "对第 2 项再点一次,按钮回到「加入计划」且顶栏计数为 2"
126
  },
127
  {
128
  "id": "st.keep.tab",
129
  "m": 2,
130
- "dimension": "交互",
131
  "w": 1.5,
132
- "description": "操作 3 项后切到「编程」再切回全部,顶栏计数仍为 3 且原三项仍为「已加入」"
133
  },
134
  {
135
  "id": "st.no.dup",
136
  "m": 2,
137
- "dimension": "交互",
138
  "w": 1.0,
139
- "description": "对同一项连续点两次,计数净变化为 0(不出现重复计数)"
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": "全部档位下汇总行显示「共 21 项」,课时费合计等于 21 项之和且数字精确"
154
  },
155
  {
156
  "id": "data.sum.tab",
157
  "m": 3,
158
- "dimension": "功能",
159
  "w": 1.5,
160
- "description": "切到「编程」,汇总行项数变为 8,合计等于该档位各项之和"
161
  },
162
  {
163
  "id": "data.sum.pos",
164
  "m": 3,
165
- "dimension": "视觉",
166
  "w": 1.0,
167
- "description": "汇总行位于筛选条下方,文案形如「共 N 项 · 课时费合计 M」"
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": "先操作 2 项再切档位,汇总行随档位变化而顶栏计数保持为 2"
182
  },
183
  {
184
  "id": "del.tab.gone",
185
  "m": 4,
186
- "dimension": "覆盖",
187
  "w": 1.5,
188
- "description": "筛选条只剩 3 个档位,「语言」不再出现"
189
  },
190
  {
191
  "id": "del.total",
192
  "m": 4,
193
- "dimension": "功能",
194
  "w": 1.5,
195
- "description": "全部档位下总数变为 15 项"
196
  },
197
  {
198
  "id": "del.none.left",
199
  "m": 4,
200
- "dimension": "覆盖",
201
  "w": 1.0,
202
- "description": "逐项浏览 15 项,没有任何一项所属档位为「语言」"
203
  },
204
  {
205
  "id": "del.extra.recalc",
206
  "m": 4,
207
- "dimension": "功能",
208
  "w": 1.5,
209
- "description": "课时费按新位置重算:第 1 项 150、第 5 项 270、末项(第 15 项)570"
210
  },
211
  {
212
  "id": "del.sum.update",
213
  "m": 4,
214
- "dimension": "功能",
215
  "w": 1.5,
216
- "description": "汇总行同步更新为「共 15 项」,合计等于重算后 15 项之和"
217
  },
218
  {
219
  "id": "del.keep.state",
220
  "m": 4,
221
- "dimension": "交互",
222
  "w": 1.5,
223
- "description": "删除前先对保留档位中的 2 项操作,删除「语言」后顶栏计数仍为 2 且这 2 项仍为「已加入」"
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": "打开「只看高分」后,列表中每一项的评价分都不低于 4.6,低于该值的项全部不可见"
238
  },
239
  {
240
  "id": "int.toggle.off",
241
  "m": 5,
242
- "dimension": "交互",
243
  "w": 1.0,
244
- "description": "关闭该开关后列表恢复为 15 项"
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": "操作 2 项后连续开关「只看高分」两次,顶栏计数始终为 2"
259
  },
260
  {
261
  "id": "int.combo.all",
262
  "m": 5,
263
- "dimension": "交互",
264
  "w": 1.5,
265
- "description": "操作 2 项 → 切「编程」→ 打开只看高分 → 切回全部,顶栏计数、汇总行、��关态三者同时正确"
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
- "视觉": 9,
289
- "功能": 9,
290
- "交互": 13,
291
- "覆盖": 2
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": "做一个叫「邻里集市」的站点首页,副标语「一条街的热闹都在这儿」。顶栏放站名和一个「我的关注(0)」入口。\n\n下面一条筛选条,档位固定为 全部 / 果蔬 / 熟食 / 手作,默认停在「全部」。主体是摊位列表,共 20 项,分布为:果蔬 9 项、熟食 6 项、手作 5 项。\n\n每项要有名称、所属档位、租位费、一个「关注」按钮。租位费按位置给:第 n 项 = 20 + n × 8。另外每项有一个评价分,第 1 项 4.8,之后每项比上一项少 0.1。列表默认按评价分从高到低排。"
31
  },
32
  {
33
- "operator": "状态化",
34
- "request": "「关注」要真能用。点了之后按钮变成「已关注」,顶栏「我的关注」的计数加 1;再点一次取消,计数减 1。这个计数和每项的按钮状态,在切档位之后不能丢。"
35
  },
36
  {
37
- "operator": "数据化",
38
- "request": "筛选条下面加一行汇总:「共 N 项 · 租位费合计 M」。N 是当前档位下的项数,M 是这些项的租位费之和,切档位要跟着变,数字要算准。"
39
  },
40
  {
41
- "operator": "删除区块",
42
- "request": "「手作」这个档位不做了,档位和那 5 项一起撤掉。撤完之后租位费按新位置重算(第 n 项 = 20 + n × 8),汇总行也要跟着变。"
43
  },
44
  {
45
- "operator": "交互化",
46
- "request": "筛选条上再加一个「只看高分」开关,打开后只显示评价分不低于 4.5 的项。开关状态在切档位后要保持,且顶栏计数在开关筛选前后都不能变。"
47
  }
48
  ],
49
  "checklist": [
50
  {
51
  "id": "gen.tabs",
52
  "m": 1,
53
- "dimension": "视觉",
54
  "w": 1.5,
55
- "description": "筛选条恰好 4 个档位,文字依次为 全部 / 果蔬 / 熟食 / 手作,「全部」为选中态且与其余档位可辨"
56
  },
57
  {
58
  "id": "gen.total",
59
  "m": 1,
60
- "dimension": "功能",
61
  "w": 1.5,
62
- "description": "全部档位下摊位总数为 20 项"
63
  },
64
  {
65
  "id": "gen.val.desc",
66
  "m": 1,
67
- "dimension": "功能",
68
  "w": 1.5,
69
- "description": "默认按评价分降序:第 1 项 4.8、第 2 项 4.7、第 3 项 4.6"
70
  },
71
  {
72
  "id": "gen.extra.rule",
73
  "m": 1,
74
- "dimension": "功能",
75
  "w": 1.5,
76
- "description": "租位费按位置计算:第 1 项 28、第 2 项 36、第 5 项 60"
77
  },
78
  {
79
  "id": "gen.split",
80
  "m": 1,
81
- "dimension": "功能",
82
  "w": 1.0,
83
- "description": "切档位后各档数量为:果蔬 9、熟食 6、手作 5"
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": "顶栏可见站名「邻里集市」、副标语「一条街的热闹都在这儿」与「我的关注」入口,初始计数为 0"
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": "点第 1 项的「关注」,按钮变为「已关注」且顶栏计数为 1"
112
  },
113
  {
114
  "id": "st.add3",
115
  "m": 2,
116
- "dimension": "交互",
117
  "w": 1.5,
118
- "description": "再对第 2、3 项操作,顶栏计数为 3 且三项均显示「已关注」"
119
  },
120
  {
121
  "id": "st.cancel",
122
  "m": 2,
123
- "dimension": "交互",
124
  "w": 1.5,
125
- "description": "对第 2 项再点一次,按钮回到「关注」且顶栏计数为 2"
126
  },
127
  {
128
  "id": "st.keep.tab",
129
  "m": 2,
130
- "dimension": "交互",
131
  "w": 1.5,
132
- "description": "操作 3 项后切到「果蔬」再切回全部,顶栏计数仍为 3 且原三项仍为「已关注」"
133
  },
134
  {
135
  "id": "st.no.dup",
136
  "m": 2,
137
- "dimension": "交互",
138
  "w": 1.0,
139
- "description": "对同一项连续点两次,计数净变化为 0(不出现重复计数)"
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": "全部档位下汇总行显示「共 20 项」,租位费合计等于 20 项之和且数字精确"
154
  },
155
  {
156
  "id": "data.sum.tab",
157
  "m": 3,
158
- "dimension": "功能",
159
  "w": 1.5,
160
- "description": "切到「果蔬」,汇总行项数变为 9,合计等于该档位各项之和"
161
  },
162
  {
163
  "id": "data.sum.pos",
164
  "m": 3,
165
- "dimension": "视觉",
166
  "w": 1.0,
167
- "description": "汇总行位于筛选条下方,文案形如「共 N 项 · 租位费合计 M」"
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": "先操作 2 项再切档位,汇总行随档位变化而顶栏计数保持为 2"
182
  },
183
  {
184
  "id": "del.tab.gone",
185
  "m": 4,
186
- "dimension": "覆盖",
187
  "w": 1.5,
188
- "description": "筛选条只剩 3 个档位,「手作」不再出现"
189
  },
190
  {
191
  "id": "del.total",
192
  "m": 4,
193
- "dimension": "功能",
194
  "w": 1.5,
195
- "description": "全部档位下总数变为 15 项"
196
  },
197
  {
198
  "id": "del.none.left",
199
  "m": 4,
200
- "dimension": "覆盖",
201
  "w": 1.0,
202
- "description": "逐项浏览 15 项,没有任何一项所属档位为「手作」"
203
  },
204
  {
205
  "id": "del.extra.recalc",
206
  "m": 4,
207
- "dimension": "功能",
208
  "w": 1.5,
209
- "description": "租位费按新位置重算:第 1 项 28、第 5 项 60、末项(第 15 项)140"
210
  },
211
  {
212
  "id": "del.sum.update",
213
  "m": 4,
214
- "dimension": "功能",
215
  "w": 1.5,
216
- "description": "汇总行同步更新为「共 15 项」,合计等于重算后 15 项之和"
217
  },
218
  {
219
  "id": "del.keep.state",
220
  "m": 4,
221
- "dimension": "交互",
222
  "w": 1.5,
223
- "description": "删除前先对保留档位中的 2 项操作,删除「手作」后顶栏计数仍为 2 且这 2 项仍为「已关注」"
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": "打开「只看高分」后,列表中每一项的评价分都不低于 4.5,低于该值的项全部不可见"
238
  },
239
  {
240
  "id": "int.toggle.off",
241
  "m": 5,
242
- "dimension": "交互",
243
  "w": 1.0,
244
- "description": "关闭该开关后列表恢复为 15 项"
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": "操作 2 项后连续开关「只看高分」两次,顶栏计数始终为 2"
259
  },
260
  {
261
  "id": "int.combo.all",
262
  "m": 5,
263
- "dimension": "交互",
264
  "w": 1.5,
265
- "description": "操作 2 项 → 切「果蔬」→ 打开只看高分 → 切回全部,顶栏计数、汇总行、开���态三者同时正确"
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
- "视觉": 9,
289
- "功能": 9,
290
- "交互": 13,
291
- "覆盖": 2
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": "做一个叫「数格观察」的站点首页,副标语「让每个数字都有来处」。顶栏放站名和一个「我的看板(0)」入口。\n\n下面一条筛选条,档位固定为 全部 / 流量 / 转化 / 留存,默认停在「全部」。主体是指标列表,共 20 项,分布为:流量 7 项、转化 7 项、留存 6 项。\n\n每项要有名称、所属档位、采样成本、一个「盯住」按钮。采样成本按位置给:第 n 项 = 50 + n × 15。另外每项有一个评价分,第 1 项 4.9,之后每项比上一项少 0.2。列表默认按评价分从高到低排。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「盯住」要真能用。点了之后按钮变成「已盯住」,顶栏「我的看板」的计数加 1;再点一次取消,计数减 1。这个计数和每项的按钮状态,在切档位之后不能丢。"
34
  },
35
  {
36
- "operator": "数据化",
37
- "request": "筛选条下面加一行汇总:「共 N 项 · 采样成本合计 M」。N 是当前档位下的项数,M 是这些项的采样成本之和,切档位要跟着变,数字要算准。"
38
  },
39
  {
40
- "operator": "删除区块",
41
- "request": "「留存」这个档位不做了,档位和那 6 项一起撤掉。撤完之后采样成本按新位置重算(第 n 项 = 50 + n × 15),汇总行也要跟着变。"
42
  },
43
  {
44
- "operator": "交互化",
45
- "request": "筛选条上再加一个「只看高分」开关,打开后只显示评价分不低于 4.3 的项。开关状态在切档位后要保持,且顶栏计数在开关筛选前后都不能变。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位,文字依次为 全部 / 流量 / 转化 / 留存,「全部」为选中态且与其余档位可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下指标总数为 20 项"
62
  },
63
  {
64
  "id": "gen.val.desc",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "默认按评价分降序:第 1 项 4.9、第 2 项 4.7、第 3 项 4.5"
69
  },
70
  {
71
  "id": "gen.extra.rule",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "采样成本按位置计算:第 1 项 65、第 2 项 80、第 5 项 125"
76
  },
77
  {
78
  "id": "gen.split",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.0,
82
- "description": "切档位后各档数量为:流量 7、转化 7、留存 6"
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": "顶栏可见站名「数格观察」、副标语「让每个数字都有来处」与「我的看板」入口,初始计数为 0"
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": "点第 1 项的「盯住」,按钮变为「已盯住」且顶栏计数为 1"
111
  },
112
  {
113
  "id": "st.add3",
114
  "m": 2,
115
- "dimension": "交互",
116
  "w": 1.5,
117
- "description": "再对第 2、3 项操作,顶栏计数为 3 且三项均显示「已盯住」"
118
  },
119
  {
120
  "id": "st.cancel",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "对第 2 项再点一次,按钮回到「盯住」且顶栏计数为 2"
125
  },
126
  {
127
  "id": "st.keep.tab",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "操作 3 项后切到「流量」再切回全部,顶栏计数仍为 3 且原三项仍为「已盯住」"
132
  },
133
  {
134
  "id": "st.no.dup",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.0,
138
- "description": "对同一项连续点两次,计数净变化为 0(不出现重复计数)"
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": "全部档位下汇总行显示「共 20 项」,采样成本合计等于 20 项之和且数字精确"
153
  },
154
  {
155
  "id": "data.sum.tab",
156
  "m": 3,
157
- "dimension": "功能",
158
  "w": 1.5,
159
- "description": "切到「流量」,汇总行项数变为 7,合计等于该档位各项之和"
160
  },
161
  {
162
  "id": "data.sum.pos",
163
  "m": 3,
164
- "dimension": "视觉",
165
  "w": 1.0,
166
- "description": "汇总行位于筛选条下方,文案形如「共 N 项 · 采样成本合计 M」"
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": "先操作 2 项再切档位,汇总行随档位变化而顶栏计数保持为 2"
181
  },
182
  {
183
  "id": "del.tab.gone",
184
  "m": 4,
185
- "dimension": "覆盖",
186
  "w": 1.5,
187
- "description": "筛选条只剩 3 个档位,「留存」不再出现"
188
  },
189
  {
190
  "id": "del.total",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "全部档位下总数变为 14 项"
195
  },
196
  {
197
  "id": "del.none.left",
198
  "m": 4,
199
- "dimension": "覆盖",
200
  "w": 1.0,
201
- "description": "逐项浏览 14 项,没有任何一项所属档位为「留存」"
202
  },
203
  {
204
  "id": "del.extra.recalc",
205
  "m": 4,
206
- "dimension": "功能",
207
  "w": 1.5,
208
- "description": "采样成本按新位置重算:第 1 项 65、第 5 项 125、末项(第 14 项)260"
209
  },
210
  {
211
  "id": "del.sum.update",
212
  "m": 4,
213
- "dimension": "功能",
214
  "w": 1.5,
215
- "description": "汇总行同步更新为「共 14 项」,合计等于重算后 14 项之和"
216
  },
217
  {
218
  "id": "del.keep.state",
219
  "m": 4,
220
- "dimension": "交互",
221
  "w": 1.5,
222
- "description": "删除前先对保留档位中的 2 项操作,删除「留存」后顶栏计数仍为 2 且这 2 项仍为「已盯住」"
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": "打开「只看高分」后,列表中每一项的评价分都不低于 4.3,低于该值的项全部不可见"
237
  },
238
  {
239
  "id": "int.toggle.off",
240
  "m": 5,
241
- "dimension": "交互",
242
  "w": 1.0,
243
- "description": "关闭该开关后列表恢复为 14 项"
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": "操作 2 项后连续开关「只看高分」两次,顶栏计数始终为 2"
258
  },
259
  {
260
  "id": "int.combo.all",
261
  "m": 5,
262
- "dimension": "交互",
263
  "w": 1.5,
264
- "description": "操作 2 项 → 切「流量」→ 打开只看高分 → 切回全部,顶栏计数、汇总行、��关态三者同时正确"
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
- "视觉": 9,
288
- "功能": 9,
289
- "交互": 13,
290
- "覆盖": 2
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": "做一个叫「短憩旅宿」的站点首页,副标语「住一晚,记很久」。顶栏放站名和一个「我的收藏(0)」入口。\n\n下面一条筛选条,档位固定为 全部 / 民宿 / 酒店 / 营地,默认停在「全部」。主体是房型列表,共 20 项,分布为:民宿 8 项、酒店 7 项、营地 5 项。\n\n每项要有名称、所属档位、夜床价、一个「收藏」按钮。夜床价按位置给:第 n 项 = 180 + n × 40。另外每项有一个评价分,第 1 项 4.9,之后每项比上一项少 0.15。列表默认按评价分从高到低排。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「收藏」要真能用。点了之后按钮变成「已收藏」,顶栏「我的收藏」的计数加 1;再点一次取消,计数减 1。这个计数和每项的按钮状态,在切档位之后不能丢。"
34
  },
35
  {
36
- "operator": "数据化",
37
- "request": "筛选条下面加一行汇总:「共 N 项 · 夜床价合计 M」。N 是当前档位下的项数,M 是这些项的夜床价之和,切档位要跟着变,数字要算准。"
38
  },
39
  {
40
- "operator": "删除区块",
41
- "request": "「营地」这个档位不做了,档位和那 5 项一起撤掉。撤完之后夜床价按新位置重算(第 n 项 = 180 + n × 40),汇总行也要跟着变。"
42
  },
43
  {
44
- "operator": "交互化",
45
- "request": "筛选条上再加一个「只看高分」开关,打开后只显示评价分不低于 4.5 的项。开关状态在切档位后要保持,且顶栏计数在开关筛选前后都不能变。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位,文字依次为 全部 / 民宿 / 酒店 / 营地,「全部」为选中态且与其余档位可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下房型总数为 20 项"
62
  },
63
  {
64
  "id": "gen.val.desc",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "默认按评价分降序:第 1 项 4.9、第 2 项 4.8、第 3 项 4.6"
69
  },
70
  {
71
  "id": "gen.extra.rule",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "夜床价按位置计算:第 1 项 220、第 2 项 260、第 5 项 380"
76
  },
77
  {
78
  "id": "gen.split",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.0,
82
- "description": "切档位后各档数量为:民宿 8、酒店 7、营地 5"
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": "顶栏可见站名「短憩旅宿」、副标语「住一晚,记很久」与「我的收藏」入口,初始计数为 0"
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": "点第 1 项的「收藏」,按钮变为「已收藏」且顶栏计数为 1"
111
  },
112
  {
113
  "id": "st.add3",
114
  "m": 2,
115
- "dimension": "交互",
116
  "w": 1.5,
117
- "description": "再对第 2、3 项操作,顶栏计数为 3 且三项均显示「已收藏」"
118
  },
119
  {
120
  "id": "st.cancel",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "对第 2 项再点一次,按钮回到「收藏」且顶栏计数为 2"
125
  },
126
  {
127
  "id": "st.keep.tab",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "操作 3 项后切到「民宿」再切回全部,顶栏计数仍为 3 且原三项仍为「已收藏」"
132
  },
133
  {
134
  "id": "st.no.dup",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.0,
138
- "description": "对同一项连续点两次,计数净变化为 0(不出现重复计数)"
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": "全部档位下汇总行显示「共 20 项」,夜床价合计等于 20 项之和且数字精确"
153
  },
154
  {
155
  "id": "data.sum.tab",
156
  "m": 3,
157
- "dimension": "功能",
158
  "w": 1.5,
159
- "description": "切到「民宿」,汇总行项数变为 8,合计等于该档位各项之和"
160
  },
161
  {
162
  "id": "data.sum.pos",
163
  "m": 3,
164
- "dimension": "视觉",
165
  "w": 1.0,
166
- "description": "汇总行位于筛选条下方,文案形如「共 N 项 · 夜床价合计 M」"
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": "先操作 2 项再切档位,汇总行随档位变化而顶栏计数保持为 2"
181
  },
182
  {
183
  "id": "del.tab.gone",
184
  "m": 4,
185
- "dimension": "覆盖",
186
  "w": 1.5,
187
- "description": "筛选条只剩 3 个档位,「营地」不再出现"
188
  },
189
  {
190
  "id": "del.total",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "全部档位下总数变为 15 项"
195
  },
196
  {
197
  "id": "del.none.left",
198
  "m": 4,
199
- "dimension": "覆盖",
200
  "w": 1.0,
201
- "description": "逐项浏览 15 项,没有任何一项所属档位为「营地」"
202
  },
203
  {
204
  "id": "del.extra.recalc",
205
  "m": 4,
206
- "dimension": "功能",
207
  "w": 1.5,
208
- "description": "夜床价按新位置重算:第 1 项 220、第 5 项 380、末项(第 15 项)780"
209
  },
210
  {
211
  "id": "del.sum.update",
212
  "m": 4,
213
- "dimension": "功能",
214
  "w": 1.5,
215
- "description": "汇总行同步更新为「共 15 项」,合计等于重算后 15 项之和"
216
  },
217
  {
218
  "id": "del.keep.state",
219
  "m": 4,
220
- "dimension": "交互",
221
  "w": 1.5,
222
- "description": "删除前先对保留档位中的 2 项操作,删除「营地」后顶栏计数仍为 2 且这 2 项仍为「已收藏」"
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": "打开「只看高分」后,列表中每一项的评价分都不低于 4.5,低于该值的项全部不可见"
237
  },
238
  {
239
  "id": "int.toggle.off",
240
  "m": 5,
241
- "dimension": "交互",
242
  "w": 1.0,
243
- "description": "关闭该开关后列表恢复为 15 项"
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": "操作 2 项后连续开关「只看高分」两次,顶栏计数始终为 2"
258
  },
259
  {
260
  "id": "int.combo.all",
261
  "m": 5,
262
- "dimension": "交互",
263
  "w": 1.5,
264
- "description": "操作 2 项 → 切「民宿」→ 打开只看高分 → 切回全部,顶栏计数、汇总行、开关态三者同��正确"
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
- "视觉": 9,
288
- "功能": 9,
289
- "交互": 13,
290
- "覆盖": 2
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": "做一个叫「匠作档案」的站点首页,副标语「作品会替人说话」。顶栏放站名和一个「我的清单(0)」入口。\n\n下面一条筛选条,档位固定为 全部 / 插画 / 摄影 / 装置,默认停在「全部」。主体是作品列表,共 20 项,分布为:插画 9 项、摄影 6 项、装置 5 项。\n\n每项要有名称、所属档位、授权价、一个「想要」按钮。授权价按位置给:第 n 项 = 60 + n × 20。另外每项有一个评价分,第 1 项 4.9,之后每项比上一项少 0.1。列表默认按评价分从高到低排。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「想要」要真能用。点了之后按钮变成「已想要」,顶栏「我的清单」的计数加 1;再点一次取消,计数减 1。这个计数和每项的按钮状态,在切档位之后不能丢。"
34
  },
35
  {
36
- "operator": "数据化",
37
- "request": "筛选条下面加一行汇总:「共 N 项 · 授权价合计 M」。N 是当前档位下的项数,M 是这些项的授权价之和,切档位要跟着变,数字要算准。"
38
  },
39
  {
40
- "operator": "删除区块",
41
- "request": "「装置」这个档位不做了,档位和那 5 项一起撤掉。撤完之后授权价按新位置重算(第 n 项 = 60 + n × 20),汇总行也要跟着变。"
42
  },
43
  {
44
- "operator": "交互化",
45
- "request": "筛选条上再加一个「只看高分」开关,打开后只显示评价分不低于 4.6 的项。开关状态在切档位后要保持,且顶栏计数在开关筛选前后都不能变。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位,文字依次为 全部 / 插画 / 摄影 / 装置,「全部」为选中态且与其余档位可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下作品总数为 20 项"
62
  },
63
  {
64
  "id": "gen.val.desc",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "默认按评价分降序:第 1 项 4.9、第 2 项 4.8、第 3 项 4.7"
69
  },
70
  {
71
  "id": "gen.extra.rule",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "授权价按位置计算:第 1 项 80、第 2 项 100、第 5 项 160"
76
  },
77
  {
78
  "id": "gen.split",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.0,
82
- "description": "切档位后各档数量为:插画 9、摄影 6、装置 5"
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": "顶栏可见站名「匠作档案」、副标语「作品会替人说话」与「我的清单」入口,初始计数为 0"
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": "点第 1 项的「想要」,按钮变为「已想要」且顶栏计数为 1"
111
  },
112
  {
113
  "id": "st.add3",
114
  "m": 2,
115
- "dimension": "交互",
116
  "w": 1.5,
117
- "description": "再对第 2、3 项操作,顶栏计数为 3 且三项均显示「已想要」"
118
  },
119
  {
120
  "id": "st.cancel",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "对第 2 项再点一次,按钮回到「想要」且顶栏计数为 2"
125
  },
126
  {
127
  "id": "st.keep.tab",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "操作 3 项后切到「插画」再切回全部,顶栏计数仍为 3 且原三项仍为「已想要」"
132
  },
133
  {
134
  "id": "st.no.dup",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.0,
138
- "description": "对同一项连续点两次,计数净变化为 0(不出现重复计数)"
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": "全部档位下汇总行显示「共 20 项」,授权价合计等于 20 项之和且数字精确"
153
  },
154
  {
155
  "id": "data.sum.tab",
156
  "m": 3,
157
- "dimension": "功能",
158
  "w": 1.5,
159
- "description": "切到「插画」,汇总行项数变为 9,合计等于该档位各项之和"
160
  },
161
  {
162
  "id": "data.sum.pos",
163
  "m": 3,
164
- "dimension": "视觉",
165
  "w": 1.0,
166
- "description": "汇总行位于筛选条下方,文案形如「共 N 项 · 授权价合计 M」"
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": "先操作 2 项再切档位,汇总行随档位变化而顶栏计数保持为 2"
181
  },
182
  {
183
  "id": "del.tab.gone",
184
  "m": 4,
185
- "dimension": "覆盖",
186
  "w": 1.5,
187
- "description": "筛选条只剩 3 个档位,「装置」不再出现"
188
  },
189
  {
190
  "id": "del.total",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "全部档位下总数变为 15 项"
195
  },
196
  {
197
  "id": "del.none.left",
198
  "m": 4,
199
- "dimension": "覆盖",
200
  "w": 1.0,
201
- "description": "逐项浏览 15 项,没有任何一项所属档位为「装置」"
202
  },
203
  {
204
  "id": "del.extra.recalc",
205
  "m": 4,
206
- "dimension": "功能",
207
  "w": 1.5,
208
- "description": "授权价按新位置重算:第 1 项 80、第 5 项 160、末项(第 15 项)360"
209
  },
210
  {
211
  "id": "del.sum.update",
212
  "m": 4,
213
- "dimension": "功能",
214
  "w": 1.5,
215
- "description": "汇总行同步更新为「共 15 项」,合计等于重算后 15 项之和"
216
  },
217
  {
218
  "id": "del.keep.state",
219
  "m": 4,
220
- "dimension": "交互",
221
  "w": 1.5,
222
- "description": "删除前先对保留档位中的 2 项操作,删除「装置」后顶栏计数仍为 2 且这 2 项仍为「已想要」"
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": "打开「只看高分」后,列表中每一项的评价分都不低于 4.6,低于该值的项全部不可见"
237
  },
238
  {
239
  "id": "int.toggle.off",
240
  "m": 5,
241
- "dimension": "交互",
242
  "w": 1.0,
243
- "description": "关闭该开关后列表恢复为 15 项"
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": "操作 2 项后连续开关「只看高分」两次,顶栏计数始终为 2"
258
  },
259
  {
260
  "id": "int.combo.all",
261
  "m": 5,
262
- "dimension": "交互",
263
  "w": 1.5,
264
- "description": "操作 2 项 → 切「插画」→ 打开只看高分 → 切回全部,顶栏计数、汇总行、开关态��者同时正确"
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
- "视觉": 9,
288
- "功能": 9,
289
- "交互": 13,
290
- "覆盖": 2
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": "做一个叫「闸口面板」的站点首页,副标语「把复杂留给后台」。顶栏放站名、一个「已启用模块(0)」入口,以及一个「合计 ¥0」。\n\n筛选条档位为 全部 / 监控 / 告警 / 报表,默认「全部」。模块列表共 19 项:监控 7 项、告警 7 项、报表 5 项。每项有名称、所属档位、标价、一个「启用」按钮。\n\n标价按位置算:第 n 项 = 80 + n × 40。另外有个规则:标价满 300 的项打 80 折后向下取整,卡片上要同时显示原价和折后价。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「启用」要真能用:点了按钮变「已启用」,顶栏计数加 1,顶栏「合计」加上这一项的**折后价**;再点取消则都减回去。合计必须按折后价算准。"
34
  },
35
  {
36
- "operator": "换肤",
37
- "request": "顶栏加一个「夜间」开关,打开后整站切深色(底色变深、正文变浅)。开关状态在切档位之后要保持,且顶栏的计数与合计不能因为切换主题而变化。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "把模块列表改成网格,桌面宽度下一行 3 项。改完之后标价、折后价、排序、已选状态、合计都要和改之前一致。"
42
  },
43
  {
44
- "operator": "删除区块",
45
- "request": "「报表」档位不做了,档位和那 5 项一起撤掉。撤完之后标价按新位置重算(第 n 项 = 80 + n × 40),折扣规则照旧适用。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位:全部 / 监控 / 告警 / 报表,「全部」为选中态且可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下共 19 项"
62
  },
63
  {
64
  "id": "gen.price",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "标价按位置计算:第 1 项 ¥120、第 2 项 ¥160、第 6 项 ¥320"
69
  },
70
  {
71
  "id": "gen.disc.exact",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "满 300 打 80 折向下取整:第 6 项折后价为 ¥256(若其标价未达门槛则不显示折后价)"
76
  },
77
  {
78
  "id": "gen.disc.boundary",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.5,
82
- "description": "标价低于 300 的项不显示折后价,只显示原价"
83
  },
84
  {
85
  "id": "gen.split",
86
  "m": 1,
87
- "dimension": "功能",
88
  "w": 1.0,
89
- "description": "切档位后各档数量为:监控 7、告警 7、报表 5"
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": "顶栏可见站名「闸口面板」、「已启用模块」入口(初始 0)与「合计 ¥0」"
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": "点第 1 项的「启用」,按钮变「已启用」,计数为 1,合计变为 ¥120"
118
  },
119
  {
120
  "id": "st.add2",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "再选第 6 项,计数为 2,合计变为 ¥376(按折后价累加)"
125
  },
126
  {
127
  "id": "st.cancel",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "取消第 6 项,计数回到 1,合计回到 ¥120"
132
  },
133
  {
134
  "id": "st.keep.tab",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.5,
138
- "description": "选 2 项后切到「监控」再切回全部,计数与合计均不变"
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": "先选 2 项再开关夜间两次,计数与合计均不���"
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": "桌面宽度下为网格排布且每行恰好 3 项"
188
  },
189
  {
190
  "id": "ref.price.same",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "重构后标价不变:第 1 项 ¥120、第 6 项 ¥320"
195
  },
196
  {
197
  "id": "ref.disc.same",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.0,
201
- "description": "重构后第 6 项折后价仍为 ¥256"
202
  },
203
  {
204
  "id": "ref.state.same",
205
  "m": 4,
206
- "dimension": "交互",
207
  "w": 1.5,
208
- "description": "重构前先选 2 项,重构后计数与合计不变且这 2 项仍为已选态"
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": "筛选条只剩 3 个档位,「报表」不再出现"
223
  },
224
  {
225
  "id": "del.total",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部档位下变为 14 项"
230
  },
231
  {
232
  "id": "del.none",
233
  "m": 5,
234
- "dimension": "覆盖",
235
  "w": 1.0,
236
- "description": "逐项浏览 14 项,无任何一项属于「报表」"
237
  },
238
  {
239
  "id": "del.price.recalc",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "标价按新位置重算:第 1 项 ¥120、第 6 项 ¥320、末项(第 14 项)¥640"
244
  },
245
  {
246
  "id": "del.disc.recalc",
247
  "m": 5,
248
- "dimension": "功能",
249
  "w": 1.5,
250
- "description": "折扣规则对重算后的标价照旧适用:末项(第 14 项)折后价为 ¥512"
251
  },
252
  {
253
  "id": "del.keep.state",
254
  "m": 5,
255
- "dimension": "交互",
256
  "w": 1.5,
257
- "description": "删除前先选保留档位中 2 项,删除后计数与合计不变"
258
  },
259
  {
260
  "id": "del.grid.reflow",
261
  "m": 5,
262
- "dimension": "视觉",
263
  "w": 1.0,
264
- "description": "删除后网格仍每行 3 项,末行按剩余数量排布且无空占位"
265
  },
266
  {
267
  "id": "del.combo",
268
  "m": 5,
269
- "dimension": "交互",
270
  "w": 1.5,
271
- "description": "选 2 项 → 开夜间 → 切「监控」→ 回全部,计数、合计、主题态三者同时正确"
272
  },
273
  {
274
  "id": "del.sum.recalc",
275
  "m": 5,
276
- "dimension": "交互",
277
  "w": 1.5,
278
- "description": "删除后重新选第 1 项,合计增量等于其重算后的折后价"
279
  }
280
  ],
281
  "inject": null,
@@ -284,10 +284,10 @@
284
  "hand_notes": {
285
  "cross_requirement_items": 7,
286
  "dim_counts": {
287
- "视觉": 10,
288
- "功能": 11,
289
- "交互": 10,
290
- "覆盖": 2
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": "做一个叫「晨读书屋」的站点首页,副标语「一天从一页开始」。顶栏放站名、一个「我的书架(0)」入口,以及一个「合计 ¥0」。\n\n筛选条档位为 全部 / 文学 / 社科 / 科普,默认「全部」。书目列表共 20 项:文学 9 项、社科 6 项、科普 5 项。每项有名称、所属档位、标价、一个「加书架」按钮。\n\n标价按位置算:第 n 项 = 30 + n × 25。另外有个规则:标价满 200 的项打 90 折后向下取整,卡片上要同时显示原价和折后价。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「加书架」要真能用:点了按钮变「已加入」,顶栏计数加 1,顶栏「合计」加上这一项的**折后价**;再点取消则都减回去。合计必须按折后价算准。"
34
  },
35
  {
36
- "operator": "换肤",
37
- "request": "顶栏加一个「夜间」开关,打开后整站切深色(底色变深、正文变浅)。开关状态在切档位之后要保持,且顶栏的计数与合计不能因为切换主题而变化。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "把书目列表改成网格,桌面宽度下一行 3 项。改完之后标价、折后价、排序、已选状态、合计都要和改之前一致。"
42
  },
43
  {
44
- "operator": "删除区块",
45
- "request": "「科普」档位不做了,档位和那 5 项一起撤掉。撤完之后标价按新位置重算(第 n 项 = 30 + n × 25),折扣规则照旧适用。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位:全部 / 文学 / 社科 / 科普,「全部」为选中态且可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下共 20 项"
62
  },
63
  {
64
  "id": "gen.price",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "标价按位置计算��第 1 项 ¥55、第 2 项 ¥80、第 6 项 ¥180"
69
  },
70
  {
71
  "id": "gen.disc.exact",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "满 200 打 90 折向下取整:第 6 项折后价为 ¥180(若其标价未达门槛则不显示折后价)"
76
  },
77
  {
78
  "id": "gen.disc.boundary",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.5,
82
- "description": "标价低于 200 的项不显示折后价,只显示原价"
83
  },
84
  {
85
  "id": "gen.split",
86
  "m": 1,
87
- "dimension": "功能",
88
  "w": 1.0,
89
- "description": "切档位后各档数量为:文学 9、社科 6、科普 5"
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": "顶栏可见站名「晨读书屋」、「我的书架」入口(初始 0)与「合计 ¥0」"
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": "点第 1 项的「加书架」,按钮变「已加入」,计数为 1,合计变为 ¥55"
118
  },
119
  {
120
  "id": "st.add2",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "再选第 6 项,计数为 2,合计变为 ¥235(按折后价累加)"
125
  },
126
  {
127
  "id": "st.cancel",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "取消第 6 项,计数回到 1,合计回到 ¥55"
132
  },
133
  {
134
  "id": "st.keep.tab",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.5,
138
- "description": "选 2 项后切到「文学」再切回全部,计数与合计均不变"
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": "先选 2 项再开关夜间两次,计数与合计均不变"
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": "桌面宽度下为网格排布且每行恰好 3 项"
188
  },
189
  {
190
  "id": "ref.price.same",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "重构后标价不变:第 1 项 ¥55、第 6 项 ¥180"
195
  },
196
  {
197
  "id": "ref.disc.same",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.0,
201
- "description": "重构后第 6 项折后价仍为 ¥180"
202
  },
203
  {
204
  "id": "ref.state.same",
205
  "m": 4,
206
- "dimension": "交互",
207
  "w": 1.5,
208
- "description": "重构前先选 2 项,重构后计数与合计不变且这 2 项仍为已选态"
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": "筛选条只剩 3 个档位,「科普」不再出现"
223
  },
224
  {
225
  "id": "del.total",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部档位下变为 15 项"
230
  },
231
  {
232
  "id": "del.none",
233
  "m": 5,
234
- "dimension": "覆盖",
235
  "w": 1.0,
236
- "description": "逐项浏览 15 项,无任何一项属于「科普」"
237
  },
238
  {
239
  "id": "del.price.recalc",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "标价按新位置重算:第 1 项 ¥55、第 6 项 ¥180、末项(第 15 项)¥405"
244
  },
245
  {
246
  "id": "del.disc.recalc",
247
  "m": 5,
248
- "dimension": "功能",
249
  "w": 1.5,
250
- "description": "折扣规则对重算后的标价照旧适用:末项(第 15 项)折后价为 ¥364"
251
  },
252
  {
253
  "id": "del.keep.state",
254
  "m": 5,
255
- "dimension": "交互",
256
  "w": 1.5,
257
- "description": "删除前先选保留档位中 2 项,删除后计数与合计不变"
258
  },
259
  {
260
  "id": "del.grid.reflow",
261
  "m": 5,
262
- "dimension": "视觉",
263
  "w": 1.0,
264
- "description": "删除后网格仍每行 3 项,末行按剩余数量排布且无空占位"
265
  },
266
  {
267
  "id": "del.combo",
268
  "m": 5,
269
- "dimension": "交互",
270
  "w": 1.5,
271
- "description": "选 2 项 → 开夜间 → 切「文学」→ 回全部,计数、合计、主题态三者同时正确"
272
  },
273
  {
274
  "id": "del.sum.recalc",
275
  "m": 5,
276
- "dimension": "交互",
277
  "w": 1.5,
278
- "description": "删除后重新选第 1 项,合计增量等于其重算后的折后价"
279
  }
280
  ],
281
  "inject": null,
@@ -284,10 +284,10 @@
284
  "hand_notes": {
285
  "cross_requirement_items": 7,
286
  "dim_counts": {
287
- "视觉": 10,
288
- "功能": 11,
289
- "交互": 10,
290
- "覆盖": 2
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": "做一个叫「轻装计划」的站点首页,副标语「少一点,好一点」。顶栏放站名、一个「我的选购(0)」入口,以及一个「合计 ¥0」。\n\n筛选条档位为 全部 / 户外 / 通勤 / 居家,默认「全部」。装备列表共 20 项:户外 8 项、通勤 7 项、居家 5 项。每项有名称、所属档位、标价、一个「选购」按钮。\n\n标价按位置算:第 n 项 = 150 + n × 60。另外有个规则:标价满 500 的项打 75 折后向下取整,卡片上要同时显示原价和折后价。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「选购」要真能用:点了按钮变「已选购」,顶栏计数加 1,顶栏「合计」加上这一项的**折后价**;再点取消则都减回去。合计必须按折后价算准。"
34
  },
35
  {
36
- "operator": "换肤",
37
- "request": "顶栏加一个「夜间」开关,打开后整站切深色(底色变深、正文变浅)。开关状态在切档位之后要保持,且顶栏的计数与合计不能因为切换主题而变化。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "把装备列表改成网格,桌面宽度下一行 3 项。改完之后标价、折后价、排序、已选状态、合计都要和改之前一致。"
42
  },
43
  {
44
- "operator": "删除区块",
45
- "request": "「居家」档位不做了,档位和那 5 项一起撤掉。撤完之后标价按新位置重算(第 n 项 = 150 + n × 60),折扣规则照旧适用。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位:全部 / 户外 / 通勤 / 居家,「全部」为选中态且可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下共 20 项"
62
  },
63
  {
64
  "id": "gen.price",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "标价按位置计算:第 1 项 ¥210、第 2 项 ¥270、第 6 项 ¥510"
69
  },
70
  {
71
  "id": "gen.disc.exact",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "满 500 打 75 折向下取整:第 6 项折后价为 ¥382(若其标价未达门槛则不显示折后价)"
76
  },
77
  {
78
  "id": "gen.disc.boundary",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.5,
82
- "description": "标价低于 500 的项不显示折后价,只显示原价"
83
  },
84
  {
85
  "id": "gen.split",
86
  "m": 1,
87
- "dimension": "功能",
88
  "w": 1.0,
89
- "description": "切档位后各档数量为:户外 8、通勤 7、居家 5"
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": "顶栏可见站名「轻装计划」、「我的选购」入口(初始 0)与「合计 ¥0」"
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": "点第 1 项的「选购」,按钮变「已选购」,计数为 1,合计变为 ¥210"
118
  },
119
  {
120
  "id": "st.add2",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "再选第 6 项,计数为 2,合计变为 ¥592(按折后价累加)"
125
  },
126
  {
127
  "id": "st.cancel",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "取消第 6 项,计数回到 1,合计回到 ¥210"
132
  },
133
  {
134
  "id": "st.keep.tab",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.5,
138
- "description": "选 2 项后切到「户外」再切回全部,计数与合计均不变"
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": "先选 2 项再开关夜间两次,计数与合计均不变"
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": "桌面宽度下为网格排布且每行恰好 3 项"
188
  },
189
  {
190
  "id": "ref.price.same",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "重构后标价不变:第 1 项 ¥210、第 6 项 ¥510"
195
  },
196
  {
197
  "id": "ref.disc.same",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.0,
201
- "description": "重构后第 6 项折后价仍为 ¥382"
202
  },
203
  {
204
  "id": "ref.state.same",
205
  "m": 4,
206
- "dimension": "交互",
207
  "w": 1.5,
208
- "description": "重构前先选 2 项,重构后计数与合计不变且这 2 项仍为已选态"
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": "筛选条只剩 3 个档位,「居家」不再出现"
223
  },
224
  {
225
  "id": "del.total",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部档位下变为 15 项"
230
  },
231
  {
232
  "id": "del.none",
233
  "m": 5,
234
- "dimension": "覆盖",
235
  "w": 1.0,
236
- "description": "逐项浏览 15 项,无任何一项属于「居家」"
237
  },
238
  {
239
  "id": "del.price.recalc",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "标价按新位置重算:第 1 项 ¥210、第 6 项 ¥510、末项(第 15 项)¥1050"
244
  },
245
  {
246
  "id": "del.disc.recalc",
247
  "m": 5,
248
- "dimension": "功能",
249
  "w": 1.5,
250
- "description": "折扣规则对重算后的标价照旧适用:末项(第 15 项)折后价为 ¥787"
251
  },
252
  {
253
  "id": "del.keep.state",
254
  "m": 5,
255
- "dimension": "交互",
256
  "w": 1.5,
257
- "description": "删除前先选保留档位中 2 项,删除后计数与合计不变"
258
  },
259
  {
260
  "id": "del.grid.reflow",
261
  "m": 5,
262
- "dimension": "视觉",
263
  "w": 1.0,
264
- "description": "删除后网格仍每行 3 项,末行按剩余数量排布且无空占位"
265
  },
266
  {
267
  "id": "del.combo",
268
  "m": 5,
269
- "dimension": "交互",
270
  "w": 1.5,
271
- "description": "选 2 项 → 开夜间 → 切「户外」→ 回全部,计数、合计、主题态三者同时正确"
272
  },
273
  {
274
  "id": "del.sum.recalc",
275
  "m": 5,
276
- "dimension": "交互",
277
  "w": 1.5,
278
- "description": "删除后重新选第 1 项,合计增量等于其重算后的折后价"
279
  }
280
  ],
281
  "inject": null,
@@ -284,10 +284,10 @@
284
  "hand_notes": {
285
  "cross_requirement_items": 7,
286
  "dim_counts": {
287
- "视觉": 10,
288
- "功能": 11,
289
- "交互": 10,
290
- "覆盖": 2
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": "做一个叫「岸边食肆」的站点首页,副标语「近海才有的鲜」。顶栏放站名、一个「我的餐单(0)」入口,以及一个「合计 ¥0」。\n\n筛选条档位为 全部 / 海鲜 / 烧物 / 甜点,默认「全部」。菜品列表共 20 项:海鲜 9 项、烧物 6 项、甜点 5 项。每项有名称、所属档位、标价、一个「点单」按钮。\n\n标价按位置算:第 n 项 = 40 + n × 35。另外有个规则:标价满 250 的项打 88 折后向下取整,卡片上要同时显示原价和折后价。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「点单」要真能用:点了按钮变「已点单」,顶栏计数加 1,顶栏「合计」加上这一项的**折后价**;再点取消则都减回去。合计必须按折后价算准。"
34
  },
35
  {
36
- "operator": "换肤",
37
- "request": "顶栏加一个「夜间」开关,打开后整站切深色(底色变深、正文变浅)。开关状态在切档位之后要保持,且顶栏的计数与合计不能因为切换主题而变化。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "把菜品列表改成网格,桌面宽度下一行 3 项。改完之后标价、折后价、排序、已选状态、合计都要和改之前一致。"
42
  },
43
  {
44
- "operator": "删除区块",
45
- "request": "「甜点」档位不做了,档位和那 5 项一起撤掉。撤完之后标价按新位置重算(第 n 项 = 40 + n × 35),折扣规则照旧适用。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位:全部 / 海鲜 / 烧物 / 甜点,「全部」为选中态且可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下共 20 项"
62
  },
63
  {
64
  "id": "gen.price",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "标价按位置计算:第 1 项 ¥75、第 2 项 ¥110、第 6 项 ¥250"
69
  },
70
  {
71
  "id": "gen.disc.exact",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "满 250 打 88 折向下取整:第 6 项折后价为 ¥220(若其标价未达门槛则不显示折后价)"
76
  },
77
  {
78
  "id": "gen.disc.boundary",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.5,
82
- "description": "标价低于 250 的项不显示折后价,只显示原价"
83
  },
84
  {
85
  "id": "gen.split",
86
  "m": 1,
87
- "dimension": "功能",
88
  "w": 1.0,
89
- "description": "切档位后各档数量为:海鲜 9、烧物 6、甜点 5"
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": "顶栏可见站名「岸边食肆」、「我的餐单」入口(初始 0)与「合计 ¥0」"
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": "点第 1 项的「点单」,按钮变「已点单」,计数为 1,合计变为 ¥75"
118
  },
119
  {
120
  "id": "st.add2",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "再选第 6 项,计数为 2,合计变为 ¥295(按折后价累加)"
125
  },
126
  {
127
  "id": "st.cancel",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "取消第 6 项,计数回到 1,合计回到 ¥75"
132
  },
133
  {
134
  "id": "st.keep.tab",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.5,
138
- "description": "选 2 项后切到「海鲜」再切回全部,计数与合计均不变"
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": "先选 2 项再开关夜间两次,计数与合计均不变"
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": "桌面宽度下为网格排布且每行恰好 3 项"
188
  },
189
  {
190
  "id": "ref.price.same",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "重构后标价不变:第 1 项 ¥75、第 6 项 ¥250"
195
  },
196
  {
197
  "id": "ref.disc.same",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.0,
201
- "description": "重构后第 6 项折后价仍为 ¥220"
202
  },
203
  {
204
  "id": "ref.state.same",
205
  "m": 4,
206
- "dimension": "交互",
207
  "w": 1.5,
208
- "description": "重构前先选 2 项,重构后计数与合计不变且这 2 项仍为已选态"
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": "筛选条只剩 3 个档位,「甜点」不再出现"
223
  },
224
  {
225
  "id": "del.total",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部档位下变为 15 项"
230
  },
231
  {
232
  "id": "del.none",
233
  "m": 5,
234
- "dimension": "覆盖",
235
  "w": 1.0,
236
- "description": "逐项浏览 15 项,无任何一项属于「甜点」"
237
  },
238
  {
239
  "id": "del.price.recalc",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "标价按新位置重算:第 1 项 ¥75、第 6 项 ¥250、末项(第 15 项)¥565"
244
  },
245
  {
246
  "id": "del.disc.recalc",
247
  "m": 5,
248
- "dimension": "功能",
249
  "w": 1.5,
250
- "description": "折扣规则对重算后的标价照旧适用:末项(第 15 项)折后价为 ¥497"
251
  },
252
  {
253
  "id": "del.keep.state",
254
  "m": 5,
255
- "dimension": "交互",
256
  "w": 1.5,
257
- "description": "删除前先选保留档位中 2 项,删除后计数与合计不变"
258
  },
259
  {
260
  "id": "del.grid.reflow",
261
  "m": 5,
262
- "dimension": "视觉",
263
  "w": 1.0,
264
- "description": "删除后网格仍每行 3 项,末行按剩余数量排布且无空占位"
265
  },
266
  {
267
  "id": "del.combo",
268
  "m": 5,
269
- "dimension": "交互",
270
  "w": 1.5,
271
- "description": "选 2 项 → 开夜间 → 切「海鲜」→ 回全部,计数、合计、主题态三者同时正确"
272
  },
273
  {
274
  "id": "del.sum.recalc",
275
  "m": 5,
276
- "dimension": "交互",
277
  "w": 1.5,
278
- "description": "删除后重新选第 1 项,合计增量等于其重算后的折后价"
279
  }
280
  ],
281
  "inject": null,
@@ -284,10 +284,10 @@
284
  "hand_notes": {
285
  "cross_requirement_items": 7,
286
  "dim_counts": {
287
- "视觉": 10,
288
- "功��": 11,
289
- "交互": 10,
290
- "覆盖": 2
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": "做一个叫「循迹健身」的站点首页,副标语「把进度看得见」。顶栏放站名、一个「我的课包(0)」入口,以及一个「合计 ¥0」。\n\n筛选条档位为 全部 / 力量 / 有氧 / 康复,默认「全部」。课包列表共 20 项:力量 8 项、有氧 7 项、康复 5 项。每项有名称、所属档位、标价、一个「报名」按钮。\n\n标价按位置算:第 n 项 = 90 + n × 55。另外有个规则:标价满 450 的项打 80 折后向下取整,卡片上要同时显示原价和折后价。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「报名」要真能用:点了按钮变「已报名」,顶栏计数加 1,顶栏「合计」加上这一项的**折后价**;再点取消则都减回去。合计必须按折后价算准。"
34
  },
35
  {
36
- "operator": "换肤",
37
- "request": "顶栏加一个「夜间」开关,打开后整站切深色(底色变深、正文变浅)。开关状态在切档位之后要保持,且顶栏的计数与合计不能因为切换主题而变化。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "把课包列表改成网格,桌面宽度下一行 3 项。改完之后标价、折后价、排序、已选状态、合计都要和改之前一致。"
42
  },
43
  {
44
- "operator": "删除区块",
45
- "request": "「康复」档位不做了,档位和那 5 项一起撤掉。撤完之后标价按新位置重算(第 n 项 = 90 + n × 55),折扣规则照旧适用。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位:全部 / 力量 / 有氧 / 康复,「全部」为选中态且可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下共 20 项"
62
  },
63
  {
64
  "id": "gen.price",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "标价按位置计算:第 1 项 ¥145、第 2 项 ¥200、第 6 项 ¥420"
69
  },
70
  {
71
  "id": "gen.disc.exact",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "满 450 打 80 折向下取整:第 6 项折后价为 ¥420(若其标价未达门槛则不显示折后价)"
76
  },
77
  {
78
  "id": "gen.disc.boundary",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.5,
82
- "description": "标价低于 450 的项不显示折后价,只显示原价"
83
  },
84
  {
85
  "id": "gen.split",
86
  "m": 1,
87
- "dimension": "功能",
88
  "w": 1.0,
89
- "description": "切档位后各档数量为:力量 8、有氧 7、康复 5"
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": "顶栏可见站名「循迹健身」、「我的课包」入口(初始 0)与「合计 ¥0」"
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": "点第 1 项的「报名」,按钮变「已报名」,计数为 1,合计变为 ¥145"
118
  },
119
  {
120
  "id": "st.add2",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "再选第 6 项,计数为 2,合计变为 ¥565(按折后价累加)"
125
  },
126
  {
127
  "id": "st.cancel",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "取消第 6 项,计数回到 1,合计回到 ¥145"
132
  },
133
  {
134
  "id": "st.keep.tab",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.5,
138
- "description": "选 2 项后切到「力量」再切回全部,计数与合计均不变"
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": "先选 2 项再开关夜间两次,计数与合计均不变"
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": "桌面宽度下为网格排布且每行恰好 3 项"
188
  },
189
  {
190
  "id": "ref.price.same",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "重构后标价不变:第 1 项 ¥145、第 6 项 ¥420"
195
  },
196
  {
197
  "id": "ref.disc.same",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.0,
201
- "description": "重构后第 6 项折后价仍为 ¥420"
202
  },
203
  {
204
  "id": "ref.state.same",
205
  "m": 4,
206
- "dimension": "交互",
207
  "w": 1.5,
208
- "description": "重构前先选 2 项,重构后计数与合计不变且这 2 项仍为已选态"
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": "筛选条只剩 3 个档位,「康复」不再出现"
223
  },
224
  {
225
  "id": "del.total",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部档位下变为 15 项"
230
  },
231
  {
232
  "id": "del.none",
233
  "m": 5,
234
- "dimension": "覆盖",
235
  "w": 1.0,
236
- "description": "逐项浏览 15 项,无任何一项属于「康复」"
237
  },
238
  {
239
  "id": "del.price.recalc",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "标价按新位置重算:第 1 项 ¥145、第 6 项 ¥420、末项(第 15 项)¥915"
244
  },
245
  {
246
  "id": "del.disc.recalc",
247
  "m": 5,
248
- "dimension": "功能",
249
  "w": 1.5,
250
- "description": "折扣规则对重算后的标价照旧适用:末项(第 15 项)折后价为 ¥732"
251
  },
252
  {
253
  "id": "del.keep.state",
254
  "m": 5,
255
- "dimension": "交互",
256
  "w": 1.5,
257
- "description": "删除前先选保留档位中 2 项,删除后计数与合计不变"
258
  },
259
  {
260
  "id": "del.grid.reflow",
261
  "m": 5,
262
- "dimension": "视觉",
263
  "w": 1.0,
264
- "description": "删除后网格仍每行 3 项,末行按剩余数量排布且无空占位"
265
  },
266
  {
267
  "id": "del.combo",
268
  "m": 5,
269
- "dimension": "交互",
270
  "w": 1.5,
271
- "description": "选 2 项 → 开夜间 → 切「力量」→ 回全部,计数、合计、主题态三者同时正确"
272
  },
273
  {
274
  "id": "del.sum.recalc",
275
  "m": 5,
276
- "dimension": "交互",
277
  "w": 1.5,
278
- "description": "删除后重新选第 1 项,合计增量等于其重算后的折后价"
279
  }
280
  ],
281
  "inject": null,
@@ -284,10 +284,10 @@
284
  "hand_notes": {
285
  "cross_requirement_items": 7,
286
  "dim_counts": {
287
- "视觉": 10,
288
- "功能": 11,
289
- "交互": 10,
290
- "覆盖": 2
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": "做一个叫「格物实验室」的站点首页,副标语「先量清,再下结论」。顶栏放站名、一个「我的借用(0)」入口,以及一个「合计 ¥0」。\n\n筛选条档位为 全部 / 光学 / 电学 / 力学,默认「全部」。器材列表共 20 项:光学 7 项、电学 7 项、力学 6 项。每项有名称、所属档位、标价、一个「借用」按钮。\n\n标价按位置算:第 n 项 = 200 + n × 70。另外有个规则:标价满 600 的项打 78 折后向下取整,卡片上要同时显示原价和折后价。"
30
  },
31
  {
32
- "operator": "状态化",
33
- "request": "「借用」要真能用:点了按钮变「已借用」,顶栏计数加 1,顶栏「合计」加上这一项的**折后价**;再点取消则都减回去。合计必须按折后价算准。"
34
  },
35
  {
36
- "operator": "换肤",
37
- "request": "顶栏加一个「夜间」开关,打开后整站切深色(底色变深、正文变浅)。开关状态在切档位之后要保持,且顶栏的计数与合计不能因为切换主题而变化。"
38
  },
39
  {
40
- "operator": "重构布局",
41
- "request": "把器材列表改成网格,桌面宽度下一行 3 项。改完之后标价、折后价、排序、已选状态、合计都要和改之前一致。"
42
  },
43
  {
44
- "operator": "删除区块",
45
- "request": "「力学」档位不做了,档位和那 6 项一起撤掉。撤完之后标价按新位置重算(第 n 项 = 200 + n × 70),折扣规则照旧适用。"
46
  }
47
  ],
48
  "checklist": [
49
  {
50
  "id": "gen.tabs",
51
  "m": 1,
52
- "dimension": "视觉",
53
  "w": 1.5,
54
- "description": "筛选条恰好 4 个档位:全部 / 光学 / 电学 / 力学,「全部」为选中态且可辨"
55
  },
56
  {
57
  "id": "gen.total",
58
  "m": 1,
59
- "dimension": "功能",
60
  "w": 1.5,
61
- "description": "全部档位下共 20 项"
62
  },
63
  {
64
  "id": "gen.price",
65
  "m": 1,
66
- "dimension": "功能",
67
  "w": 1.5,
68
- "description": "标价按位置计算:第 1 项 ¥270、第 2 项 ¥340、第 6 项 ¥620"
69
  },
70
  {
71
  "id": "gen.disc.exact",
72
  "m": 1,
73
- "dimension": "功能",
74
  "w": 1.5,
75
- "description": "满 600 打 78 折向下取整:第 6 项折后价为 ¥483(若其标价未达门槛则不显示折后价)"
76
  },
77
  {
78
  "id": "gen.disc.boundary",
79
  "m": 1,
80
- "dimension": "功能",
81
  "w": 1.5,
82
- "description": "标价低于 600 的项不显示折后价,只显示原价"
83
  },
84
  {
85
  "id": "gen.split",
86
  "m": 1,
87
- "dimension": "功能",
88
  "w": 1.0,
89
- "description": "切档位后各档数量为:光学 7、电学 7、力学 6"
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": "顶栏可见站名「格物实验室」、「我的借用」入口(初始 0)与「合计 ¥0」"
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": "点第 1 项的「借用」,按钮变「已借用」,计数为 1,合计变为 ¥270"
118
  },
119
  {
120
  "id": "st.add2",
121
  "m": 2,
122
- "dimension": "交互",
123
  "w": 1.5,
124
- "description": "再选第 6 项,计数为 2,合计变为 ¥753(按折后价累加)"
125
  },
126
  {
127
  "id": "st.cancel",
128
  "m": 2,
129
- "dimension": "交互",
130
  "w": 1.5,
131
- "description": "取消第 6 项,计数回到 1,合计回到 ¥270"
132
  },
133
  {
134
  "id": "st.keep.tab",
135
  "m": 2,
136
- "dimension": "交互",
137
  "w": 1.5,
138
- "description": "选 2 项后切到「光学」再切回全部,计数与合计均不变"
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": "先选 2 项再开关夜间两次,计数与���计均不变"
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": "桌面宽度下为网格排布且每行恰好 3 项"
188
  },
189
  {
190
  "id": "ref.price.same",
191
  "m": 4,
192
- "dimension": "功能",
193
  "w": 1.5,
194
- "description": "重构后标价不变:第 1 项 ¥270、第 6 项 ¥620"
195
  },
196
  {
197
  "id": "ref.disc.same",
198
  "m": 4,
199
- "dimension": "功能",
200
  "w": 1.0,
201
- "description": "重构后第 6 项折后价仍为 ¥483"
202
  },
203
  {
204
  "id": "ref.state.same",
205
  "m": 4,
206
- "dimension": "交互",
207
  "w": 1.5,
208
- "description": "重构前先选 2 项,重构后计数与合计不变且这 2 项仍为已选态"
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": "筛选条只剩 3 个档位,「力学」不再出现"
223
  },
224
  {
225
  "id": "del.total",
226
  "m": 5,
227
- "dimension": "功能",
228
  "w": 1.5,
229
- "description": "全部档位下变为 14 项"
230
  },
231
  {
232
  "id": "del.none",
233
  "m": 5,
234
- "dimension": "覆盖",
235
  "w": 1.0,
236
- "description": "逐项浏览 14 项,无任何一项属于「力学」"
237
  },
238
  {
239
  "id": "del.price.recalc",
240
  "m": 5,
241
- "dimension": "功能",
242
  "w": 1.5,
243
- "description": "标价按新位置重算:第 1 项 ¥270、第 6 项 ¥620、末项(第 14 项)¥1180"
244
  },
245
  {
246
  "id": "del.disc.recalc",
247
  "m": 5,
248
- "dimension": "功能",
249
  "w": 1.5,
250
- "description": "折扣规则对重算后的标价照旧适用:末项(第 14 项)折后价为 ¥920"
251
  },
252
  {
253
  "id": "del.keep.state",
254
  "m": 5,
255
- "dimension": "交互",
256
  "w": 1.5,
257
- "description": "删除前先选保留档位中 2 项,删除后计数与合计不变"
258
  },
259
  {
260
  "id": "del.grid.reflow",
261
  "m": 5,
262
- "dimension": "视觉",
263
  "w": 1.0,
264
- "description": "删除后网格仍每行 3 项,末行按剩余数量排布且无空占位"
265
  },
266
  {
267
  "id": "del.combo",
268
  "m": 5,
269
- "dimension": "交互",
270
  "w": 1.5,
271
- "description": "选 2 项 → 开夜间 → 切「光学」→ 回全部,计数、合计、主题态三者同时正确"
272
  },
273
  {
274
  "id": "del.sum.recalc",
275
  "m": 5,
276
- "dimension": "交互",
277
  "w": 1.5,
278
- "description": "删除后重新选第 1 项,合计增量等于其重算后的折后价"
279
  }
280
  ],
281
  "inject": null,
@@ -284,10 +284,10 @@
284
  "hand_notes": {
285
  "cross_requirement_items": 7,
286
  "dim_counts": {
287
- "视觉": 10,
288
- "功能": 11,
289
- "交互": 10,
290
- "覆盖": 2
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
+ }