design-prompt.mdMIT
本站自己的源码,只读浏览:左边点文件,右边看内容。
快照 4131b57 · 发布 2026-09-10 · 350 个文件 · 3.8 MB
rounds/round-perf/design-prompt.mdmarkdown · 6.5 KB · 112 行 给 Claude Design 的提示词 —— 新增 2i / 2j / 2k 三块画板
用法:打开 Claude Design 项目「Agent X-Ray 设计完成」(id 1a257a60-2f83-4795-9535-1d5a4677f21f),
把下面 --- 之间的整段贴进去。画完后 DesignSync 写回云端,再按 design/README.md
「与云端稿的合并口径」拉回本地(先 diff 计数为 0 再覆盖)。
拉回 design/ 之后,R-PERF 的 T2 / T3 才允许开工(CLAUDE.md 规则 8:先改设计稿、再进轮次)。
提示词正文(从这里开始复制)
在现有画板集 Agent Runtime Workbench 里追加三块新画板,编号 2i、2j、2k。
先读一遍现有画板再动手:2c(Notes 文章阅读页)、2g(Skill 详情页 · SKILL.md 预览态)、
2f(Skills 首页)。新画板是这几块的「还没加载出来」与「加载失败」两种状态,
必须与它们同一套骨架、同一套 token,不新造任何视觉语言。
为什么要画这三块(背景,决定取舍)
站点上线后实测:访客点一张 Skills 卡片、或点一篇 Notes 章节之后,
页面要等服务端 0.1 – 5 秒才换内容,而这段时间里界面一个像素都不动 ——
访客的实际体验是「点了没反应」,会反复点。所以这三块画板要解决的是
「已经收到你的点击、正在取」这件事怎么说清楚,不是装饰。
三条硬约束:
- 不新造视觉语言。颜色、圆角、字号、间距、字体全部从下面的 token 表里取。
- 动效只在现有三个里挑或不用:omPulseBg(1.8s 明暗脉动)、
omWaveSweep(1.8s 自左向右扫光)、omSpin(0.8s 转圈)。
不要引入新的 shimmer / skeleton 关键帧;如果骨架块需要呼吸感,直接复用 omPulseBg 的节奏。
- 加载态的骨架必须和真实内容对得上位:同样的容器宽度、同样的行高、同样的间距,
这样内容到达时不会跳版。
现有 design token(照抄,勿改)
- 画布:#ffffff 底 / #f5f5f5 面板 / #eeeeee hover / #e8e8e8 选中 / 1px #e0e0e0 边框
- 文字: 正文 / 次级 / 弱化;品牌色 (hover )
这是本站自己的源码,与线上运行的版本一致;快照随每次发版更新。
#1a1a1a
#6b7280
#9ca3af
#2563eb
#1d4ed8
语义:成功 #16a34a;错误 #ef4444 + rgba(248,113,113,.05/.3) 淡染圆角:4 微徽标 / 5 小按钮 / 6–7 卡片 / 8 弹层等宽字体 JetBrains Mono;小标题(如 INSTALL / FILES)= mono 10px/600 #9ca3af、字距 0.08em顶部导航条:高 44、四格(Runtime · Notes · Skills · About),三块新画板都要带上,与现有画板一致
画板 2i —— Skill 详情页 · 加载态
触发:访客在 /skills 点了一张卡片,地址还没换,服务端在渲染。实测 0.4 – 5 秒。
- 顶部导航条:完整实体,不做骨架(它本来就已经在屏幕上,不该闪)
- 面包屑行:Skills / … —— Skills 是真实文字(已知),后面两级用骨架条
- 标题行:等宽 22px 大标题位置一条骨架条 + 右边徽标位一个小骨架块
- 一句话描述:两行骨架条,第二行短一些(约 60% 宽)
- 元信息行(mono 11):一条窄骨架条
- 右上两枚 ghost 按钮(GitHub ↗ / 下载 zip):画成真实的禁用态还是骨架块,你来定,
在画板上用注释说明你选了哪种、为什么
- INSTALL 面板:小标题 INSTALL 用真实文字(它是固定的),里面那行命令用骨架条
- 下半部「左 240px 目录树 / 右预览卡」:
- 左栏 FILES 小标题真实,下面 6–8 行等高(26px)骨架条,缩进层级参照 2g
- 右栏预览卡:保留卡片边框与头部条,头部条里放三小段骨架;正文区放 8–12 行长短不一的骨架条
请在画板上顺带标注:骨架块的填充色取哪个 token、圆角多少、是否带 omPulseBg。
画板 2j —— Notes 章节页 · 加载态
触发:访客点一篇章节。实测 0.1 – 3.4 秒(与文章长短无关,是服务端渲染在抖)。
- 顶部导航条完整实体;顶端那条阅读进度线此时应当是什么状态,请给出裁定并标注
(归零 / 不出现 / 走一个不确定进度的动效 —— 三选一,写清理由)
- 面包屑、文章大标题、meta 行(作者 / 更新时间 / 字数)各一条骨架
- 正文区:6–10 段骨架,段落之间保留 2c 的真实间距;其中一段做成「代码卡片」形状的骨架,
一段做成「三行列表」形状的骨架 —— 让骨架看起来像一篇文章而不是一堆等长横条
- 右栏「本章目录」:标题真实,下面 5–6 条短骨架
画板 2k —— 错误态(两个变体画在同一块画板上)
变体 A · 页面出错:页面渲染失败时的兜底。现在这里是 Next.js 的默认白屏,
只有一行英文 Application error: a client-side exception has occurred —— 访客看不懂,也不知道能做什么。
需要:一句中文说明、一枚重试按钮(点了重新渲染当前页)、一条回首页的次级链接。
风格取现有 ghost 按钮那一套。是否显示一个可复制的错误标识(便于所有者排查)由你裁定并标注。
变体 B · 找不到:访客访问了不存在的地址(比如失效的 skill 链接)。
现在这里同样是 Next.js 默认的英文 404 | This page could not be found。
需要:同一套版式下的「这个页面不存在」中文说明 + 回首页 / 回上一层列表两条出口。
两个变体请共用同一套版式(同样的居中方式、同样的字号层级),只换文案与按钮 ——
它们是同一种「路走不通」的两种原因,视觉上不该是两个设计。
不要在错误态里画:插画、吉祥物、表情符号、大号数字 404、任何新配色。
这个站的调性是 DevTools,错误页也该是 DevTools 的样子。
交付
三块画板追加进 Agent Runtime Workbench,编号严格用 2i / 2j / 2k(编号只增不改,不复用作废的 3x 号段)。
可交互原型 Agent X-Ray Prototype 本次不必改 —— 加载态与错误态是瞬时状态,原型里没有真实的服务端等待可演。
如果你认为原型里值得加一个手动触发的开关来预览这三态,请先说明理由再动手,不要默认改。
提示词正文(到这里结束)
拿回来之后要做的事(给实现者)
- 按 design/README.md 的合并口径拉回 design/,并在 README 的「画板增删记录」补一条 2i–2k 的说明。
- 同步更新 CLAUDE.md 规则 8 与 ROUNDS.md 功能边界段里的画板计数(15 → 18)。
- 然后才开 R-PERF 的 T2 / T3。
苏公网安备32011402012723号