01
设计气质 DNA
开发者框架性能现代
网页开发的高速赛道
02
色彩
#3facf9Accent#ffffffInk#dee2e6Ink soft#000000BG#1e2226BG softrgba(255, 255, 255, 0.12)Line高对比度深色模式搭配活力充沛的强调色
03
字体
- display
84px · 700 - heading
56px · 700 - body
16px · 400 - caption
13px · 400
导航与界面标签使用大写等宽字体 · 展示标题采用紧凑字间距的粗体几何无衬线字体 · 正文使用简洁的人文主义无衬线字体
04
间距
4px8px16px24px32px48px64px96px120px主要章节间采用充足垂直间距（120px）
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 999px
1px solid rgba(255, 255, 255, 0.12)
rgb(253, 189, 134) 0px 0px 2px 0px · rgb(253, 189, 134) 0px 0px 8px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色英雄区域配居中内容块，过渡至双栏功能展示布局
07
动效与交互
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
细腻背景粒子动画与发光轨迹 · 界面元素平滑透明度过渡
交互元素的色彩过渡效果 · 按钮与链接的指针光标
08
组件
- button 简约文字按钮，常使用大写等宽标签
- card 深色背景语法高亮的代码块，或采用细微边框的毛玻璃质感面板
- chip 导航使用大写等宽标签（例如 [G] GITHUB）
- input 命令行风格等宽字体（例如 npx remix@next new）
- hero 超大尺寸紧凑字间距的展示字体，叠加于动态深色粒子场背景
09
文案语气与禁用清单
- 语气 自信、技术性、赋能型
- 标题风格 强调力量与多功能性的粗体直接陈述
- 按钮文案 直接指令，常包含命令行代码片段
- 勿使用亮色模式或柔和背景——截图显示为深色高对比度环境
- 标题勿使用衬线或手写字体——截图显示为粗体紧凑字间距的几何无衬线字体
- 组件勿使用厚重边框——截图显示为细微、纤薄、低透明度边框
- 导航勿使用常规句子大小写——截图显示为大写等宽标签
- 背景勿使用静态平面设计——截图显示为动态粒子场与发光轨迹
- 间距勿使用紧凑布局——截图显示章节间充足垂直间距
- 避免: 缺乏明确价值的复杂技术术语
- 避免: 被动或犹豫的措辞
- 避免: 明亮或柔和的色彩方案
10
包内真实截图
11
System Prompt
Remix是采用深色开发者美学的高性能网页框架网站，主色调为纯黑（#000000）与米白（#ffffff, #dee2e6），搭配鲜亮蓝色（#3facf9）与活力光迹。字体系统结合粗体几何无衬线大标题、人文主义无衬线正文及等宽代码字体，关键设计特征包括紧凑字间距标题、充足垂直间距（120px）及细腻发光交互元素。核心禁忌：避免亮色主题、避免标题使用衬线字体、避免厚重边框。整体设计传递速度感、现代感与技术性。