design-prompt.mdMIT
本站自己的源码,只读浏览:左边点文件,右边看内容。
快照 4131b57 · 发布 2026-09-10 · 350 个文件 · 3.8 MB
rounds/round-mobile2/design-prompt.mdmarkdown · 9.0 KB · 120 行 给 Claude Design 的提示词 —— R-MOBILE-2:移动 5c / 5d(新文件)(standalone 载体下的壳层修补:顶部空条 + 屏底 Tab Bar + 备案行)
用法:打开 Claude Design 项目「Agent X-Ray 设计完成」(id 1a257a60-2f83-4795-9535-1d5a4677f21f),
把下面 --- 之间的整段贴进去。画完后 DesignSync 写回云端,再按 design/README.md
「与云端稿的合并口径」拉回本地(新文件,直接落盘、无三方合并)。
文件安排(贴之前先看):
- 两块新画板放一份新文件 Agent X-Ray Mobile - Shell.dc.html(5c / 5d)。
Agent X-Ray Mobile - Notes Skills About.dc.html 现为 198,838 字节,DesignSync get_file 上限 262,144 字节、
超了静默截断不报错(一块移动画板约 27 KB,两块并列的更多),离上限只剩 63 KB,不追加。
Agent X-Ray Mobile - Runtime.dc.html(234,371 B)与 - Runtime 2.dc.html(125,528 B)都不碰。
- 编号:移动 4a–4z 已用尽,5a / 5b 归 R-CARDS-2,本轮从 5c 起。只增不改。
- 原型 Agent X-Ray Prototype.dc.html:不动(本轮改的是壳层几何,原型里没有 standalone 载体的表达)。
拉回 design/ 之后 R-MOBILE-2 才允许开工(CLAUDE.md 规则 8:先改设计稿、再进轮次)。
拉稿后先验四项:字节数 / </x-dc> </html> 闭合 / <div> 开合 / 画板数。
为什么要这两块(先读这一段,它是全部动机)
移动端 21 块画板(4a–4u)是以微信 webview 为主场景画的:每屏顶部都画着
「状态栏 59 · 不可控」+「微信导航栏 44 · 不可控」两条占位。代码从不渲染那两条(所有者 2026-09-07
二次裁定「按普通 H5 做」),所以画板不作废 —— 但有一个后果当时没人算到:
- 在微信里,我们自己的 44 高「功能条」上面还压着宿主那条 44 导航栏,一级页(Notes / Skills / About)
功能条两侧都空也不突兀 —— 它读起来是宿主标题栏的延续。
- 在添加到主屏幕后的 standalone(PWA)与普通浏览器里,宿主那条不存在。状态栏之下直接就是
我们那条 —— 所有者 2026-09-10 在真机 standalone 上报障的第一条就是它:
「除了 Runtime 页,头部有多余空白」。
这是本站自己的源码,与线上运行的版本一致;快照随每次发版更新。
空的 44
同一原因还牵出屏底两条:备案号那 26 高的底栏(画板从来没画过它,docs/deploy-cn-lightweight.md 的部署约束)
挡在 Tab Bar 下方,于是 Tab Bar 贴的是「内容区的底」而不是屏底 —— 它自己那 34 的安全区留白落在了
Home Indicator 上方(屏底出现一条白带),而随滚动收起时整条只滑出 49,剩 26 的残条压在备案号上
(所有者报障的第 2、4 条,已实测复现:收起后 translateY(0, 83)、恰好盖住备案条 26px)。
所以这两块画板要定的是同一件事的两端:standalone / 普通浏览器载体下,一屏的顶部与底部各留多少、各长什么样。
内容区的一切(列表、卡片、内核层、markdown 排版)一律不动。
所有者已裁定(2026-09-10)
| # | 裁定项 | 结论 |
|---|
| 1 | 备案号搬家 | ICP 与公安联网备案两个号在移动端统一搬进 About 页,不再占屏底高度(桌面底栏原样保留,零改动) |
| 2 | 屏底归属 | 移动端屏底从此只有 Tab Bar;它贴真正的屏底,49 之下的留白就是 Home Indicator 的安全区 |
| 3 | 收起 | Tab Bar 随滚动收起时整条滑出屏外,屏底不留任何残条 |
| 4 | 顶部形态 | 1-A:一级页滚到顶不出功能条、大标题贴安全区;滚过大标题后玻璃条淡入,条里是 17/600 左对齐的收起标题(即画板 4k 附已定过的收起规则)+ 右侧动作 |
| 5 | About 头部 | 移动端 About 按画板 4r 收口:去掉 GitHub ↗ 按钮(@名本身是链接)、头像行回到「头像 + @名 + repo 数」一行 + 简介独立段。这是补既有画板、不是新设计,5c / 5d 不用为它画新态 |
| 6 | 顺序 | 先画板、再进轮次 |
未圈定的两档(记 rounds/BACKLOG.md,画板不要画):1-C 一级页任何时候都不出功能条(失去回到顶部的锚点);
C2 Notes / Skills 首页页尾也各挂一条备案(合规更稳,但三处版式都要定)。
提示词正文(从这里开始复制)
在项目里新建一份画板集 Agent X-Ray Mobile - Shell,画两块:5c(顶部)、5d(屏底 + 备案行)。
先读一遍现有画板再动手:4a(移动壳层的全部裁定:功能条 44 / Tab Bar 49 / 玻璃与降级 / 安全区)、
4k 连同它的「附 · 大标题收起态」(34/700 收进功能条后是 17/600 且左对齐)、4o(Skills 首页,功能条两侧都空)、
4r(About:头像行、分组卡、外观 Switch、公开仓库、技术栈条)、4u(载体适配态:standalone / 浏览器 / 横屏)。
桌面源看 2a(Notes 首页,RSS 是标题行右端的 ghost 按钮)与 2e(About)。
0. 载体设定(与 4a–4u 唯一的不同,务必照此画)
本轮两块画板画的是 standalone(添加到主屏幕后全屏启动)与普通移动浏览器:
- 顶部只有「状态栏 59 · 不可控」一条占位,它下面没有宿主导航栏 —— 画板 4a–4u 那条
「微信导航栏 44 · 不可控」在本轮不画。
- 底部仍有「Home Indicator 34 · 不可控」占位。
- 屏 390 宽;三个数(59 / 34 / 可视高)都不是常量,实现按 100dvh 与 env(safe-area-inset-*) 取,画板只是示意。
1. 5c · 一级页顶部(三屏并列 · 各 390×845)
三屏都用 About(4r 的内容)与 Notes 首页(4k 的内容)现成的画面,只改顶部那一段:
- ① About · 滚到顶:状态栏之下没有任何条,--bg 一片到底;大标题「About」34/700 距安全区下 8;
其后照 4r 原样(头像行 / 简介 / 分组卡…)。整屏比现状上移 44。
- ② About · 向上滚过大标题后:顶部出现玻璃功能条(44 + 状态栏那一段的内边距;
玻璃 rgba(255,255,255,0.72) + blur(24px) saturate(180%),降级 rgba(255,255,255,0.94) 实底 + 1px rgba(0,0,0,0.06)),
条内左对齐 17/600「About」(不居中,理由见 4k 附),两侧动作位空;内容从玻璃底下穿过。
- ③ Notes 首页 · 滚到顶:同 ①,但 RSS 动作按钮回到大标题同一行的右端(照桌面 2a 的位置,
视觉仍是 4k 那枚 30 圆 + --m-fill 底、命中 44);滚动后它进条的右位子(与 ② 同一条,右侧多一枚圆按钮)。
标注要写清:二级页(Notes 章节 4m / Skill 详情 4p–4q)不变 —— 它们的条里有带文字的返回,
本来就不是空条,继续从到顶起就在。
2. 5d · 屏底 + About 页尾的备案行(三屏并列 · 各 390×845)
- ① Tab Bar 常态:Tab Bar 贴真正的屏底,49 高、四格,49 之下是 Home Indicator 那 34 的安全区留白
(玻璃条自身把这 34 含进高度,文字不落进指示条);屏底不再有任何备案条。
- ② Tab Bar 收起后(向下滚):整条完全滑出屏外,屏底除 Home Indicator 留白外什么都不剩
(对照:现状会剩一条 26 高的残条,那是要修掉的 bug)。位移动画沿用 4a 的 .25s cubic-bezier(.32,.72,0,1)。
- ③ About 页尾的备案行:About 页滚到最底部的那一屏。在 4r 最后一块(技术栈条 + 「教程库…→ Notes」导流句)之后,
给备案号一块页尾区:
- 两个号各占一行、居中(390 宽里并排会挤;桌面是并排一行,那边不动);
- ICP 号:mono 11 #9ca3af,可点(链工信部);
- 公安号:备案编号图标在左、号码在右(格式硬要求),图标 18×20(备案系统原文件半尺寸),同一 mono 11 #9ca3af,可点;
- 两行之间与「导流句」之间的留白、以及与 Tab Bar 的距离要标出来(内容区底部本来就为 Tab Bar 留了 49 + 安全区)。
- 视觉上它是页尾小字,不是分组卡、不加分隔线、不加标题(「备案信息」这类字不要)。
3. 硬约束
- 不新造视觉语言:玻璃、44 / 49、34/700 与 17/600、mono 11 #9ca3af、--m-fill 圆按钮、r16 分组卡
全部取自 4a–4u;本轮一个新 token 都不加。
- 内容区零改动:列表 / 卡片 / 内核层 / markdown 排版 / Sheet / 抽屉都不在本轮范围,画的时候原样搬。
- 桌面零改动:桌面 29 块画板与桌面底栏(两个号并排一行)一个像素都不动。
- 备案号必须可见且可点:两个号都是部署合规约束(docs/deploy-cn-lightweight.md),
不能截断、不能只留一个、不能变成不可点的纯文本。
- 不新增功能:本轮只有几何与位置,不许出现「返回顶部」按钮、页尾链接组、语言切换、
「关于本站」标题、cookie 提示之类画板上没有的东西。
4. 交付
5c / 5d 两块画在新文件 Agent X-Ray Mobile - Shell 里,每块沿用现有画板的注释体例:
屏名 + 尺寸 + 「裁定」段(源自哪块桌面 / 移动画板、320 / 430 的弹性与不变项、横滚、token 保留 / 换掉、接缝、玻璃降级)。
苏公网安备32011402012723号