浏览器空状态界面图
Unreviewed source draft

图片 · Claude 5.5

浏览器空状态界面图

生成浅色与深色模式的浏览器空状态 SVG,真实产品界面缩略图、配色规范与图标要求便于复用。

查看原始出处

Prompt

画一张浏览器扩展的空状态插图,场景是【书签文件夹里什么都没有】。风格是“缩小版的真实产品界面”,不是插画。输出一个独立的 inline SVG。

画布与底板
- viewBox 0 0 160 120,圆角 18 的底板铺满画布。
- 底板浅色 #fafafa;上面叠 45° 细斜纹,线宽 1,间距 7,颜色 rgba(15,23,42,0.05);内描边 1px rgba(15,23,42,0.07)。

物体(缩小版的真实产品界面)
- 白色不透明卡片或窗口,圆角 10–13;1px 描边 rgba(47,42,34,0.08);阴影向下偏移 5、模糊 4.5、颜色 rgb(47,42,34)、不透明度 0.13。
- 浏览器窗口顶部是 18 高的标签条 #eef1f5,激活的标签是白色,圆角 5。
- 文字一律用占位条代替:普通 4 高 #e5e9ef,标题 5 高 #cdd4de,两端全圆角。
- 空格子 #f1f3f6;露在后面的卡片 #f3f3f4。
- 图标只用 Remix icon的线性款。普通图标 #a3abb7,次要操作 #6b7280。
- 只有一个强调色元素,表示下一步操作(按钮、重试、新增);没有下一步就不用强调色。强调色 #3462ad。按键或主按钮用石板灰渐变 #404859 → #273042,上面配白色图标。

深色模式
- 底板 #26262b,斜纹 rgba(255,255,255,0.035),表面 #323238,标签条 #2a2a2f,占位条 #3f3f47 / #52525b,图标 #7d828c,强调色 #7ea6ea,阴影黑色、不透明度 0.36。
- 颜色写成 CSS 变量,放在 SVG 内部的 <style> 里,并用 SVG 自己的 id 限定作用域。根元素写 data-theme="light|dark|auto";auto 跟随 prefers-color-scheme。

构图
- 画的是这个空状态在真实界面里的样子,按比例简化;不要抽象符号。
- 一个场景,2–3 个物体,外接框居中于 (80, 60),四周留白至少 14。
- 不要文字、人物、渐变插画背景,也不要半透明物体互相叠加。

技术
- 不引用外部资源,不用 <image> 或 <use>。
- 阴影用 feGaussianBlur + feOffset + feFlood + feComposite + feMerge 拼出来,不要用 feDropShadow(有些 HTML 解析器会把它的名字转成小写)。
- 所有 id 都带上同一个随机前缀,同一页放多张图也不会冲突。
- 可选动画:强调色元素在 prefers-reduced-motion: no-preference 时做一次缩放弹出,用 transform-box: fill-box。

使用建议

将【书签文件夹里什么都没有】替换为你的功能空状态描述,生成配套界面图。

信息

类型
图片
模型
Claude 5.5
许可
Source-author-rights
发布时间

反馈这条内容