精选 · 开放 · 免费
Verse Sh
专注React与Three.js实验的创意开发者极简作品集。
PortfolioDeveloper3DDark ModeExperimental
01
设计气质 DNA
创意开发者网页3D实验性极简主义
开发者暗黑模式工作台，展示3D实验成果。
02
色彩
#D4D4D4Ink
#737373Ink soft
#000000BG
rgba(23, 23, 23, 1)Line
极致简约：纯黑背景搭配浅灰等宽文字与深色细边框。
03
字体
monospace
- display
16px · 400 - h1
16px · 400 - body
11px · 400
文本主要采用大写形式。 · 所有文字使用'Commit Mono'等宽字体。 · 不使用400以上字重。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用统一的16px内边距与间距，构建结构化网格布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用1px实线边框（#171717）构建严格的单元格网格。
06
布局
1280container
2columns
768 / 1024breakpoints
双栏网格布局，单元格尺寸统一，边框单元格间无间距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的透明度过渡（0.5秒）。 · 3D骷髅对象可能具有持续旋转或悬停交互效果。
链接与交互元素的微妙透明度变化。 · 标准链接导航。
08
组件
- button 单元格内的括号文本链接，如[LINK]或[CODE]。
- card 带边框的网格单元格，包含预览图与包含技术栈和链接的页脚行。
- chip 未见使用。
- input 未见使用。
- hero 顶部极简单元格，包含品牌名称、标语和联系链接。
09
文案语气与禁用清单
- 语气 直接、极简、面向开发者。
- 标题风格 简短的全大写等宽文本（例如'VERSE'、'I MAKE COOL WEBSITES'）。
- 按钮文案 技术化且低调，使用括号如[LINK]或[CODE]。
- 勿使用衬线或无衬线字体——全站使用等宽字体。
- 勿使用明亮的强调色——调色板严格限定于黑、灰、白。
- 勿使用圆角——所有元素与边框均为直角。
- 勿使用复杂的多栏布局——站点采用严格的双栏网格。
- 勿使用投影——设计依赖平面边框与背景对比。
- 勿使用粗体或重字重——文本统一使用细体（400字重）。
- 避免: 营销式夸张或说服性语言。
- 避免: 装饰性或衬线字体。
- 避免: 明亮或彩色的UI强调色。
- 避免: 复杂的布局结构。
- 避免: 高字重字体。
- 避免: 圆角或柔和阴影。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是‘Verse’的极简开发者作品集。采用纯黑（#000000）背景搭配浅灰（#D4D4D4）等宽文字（Commit Mono）。布局为严格的双栏带边框单元格网格（#171717），内含3D实验与项目链接。关键元素包括技术栈的大写标签（如'REACT + REACT-THREE-FIBER'）和括号链接如'[CODE]'。重要禁忌：避免使用衬线或无衬线字体，避免圆角或阴影，避免明亮强调色。设计纯粹注重功能性与技术性，以清晰展示项目为优先，不强调装饰元素。
en · zh-CN · zh-TW · ja · ko