01
设计气质 DNA
开发者平台无服务器JavaScript简洁
一个供开发者快速部署脚本的温馨本地咖啡馆
02
色彩
#2EC4FFAccent#000000Ink#4B5563Ink soft#FFFFFFBG#F7F9FCBG soft#1C2433BG quiet#6B7280Mutedrgba(0,0,0,0.1)Line高对比度的深色文字与浅色背景基础，搭配单一鲜明的青色作为主要操作的强调色。
03
字体
- display
48px · 700 - headline
36px · 700 - body
16px · 400 - caption
14px · 400 - code
16px · 400
04
间距
4px8px12px16px24px32px48px64px96px基于 4 的间距系统，各区块之间留有充足的垂直内边距（通常为 96px），确保清晰的视觉分隔。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.1)
0 20px 25px -5px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 8px 10px -6px rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的主视觉区，左侧为文字，右侧为复杂的重叠复合图像，下方是堆叠的内容区块。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的标准颜色和背景色过渡 · 按钮和链接的平滑 hover 和 focus 状态变化
按钮和链接上细微的背景色变化或透明度改变。 · 通过背景色过渡提供即时的视觉反馈。
08
组件
- button 主按钮为药丸形状，采用鲜明的青色背景和深色文字；次按钮为药丸形状，带有细微边框和深色文字。
- card 深色主题卡片，带有细微阴影和圆角，用于客户评价和功能亮点。
- chip 极少使用，主要作为 UI 模型中的徽章或小标签出现。
- input 简洁、带边框的输入框，采用标准内边距和圆角。
- hero 分屏布局，包含醒目的标题、副标题、两个主要操作按钮，以及一个大型的产品界面重叠复合图像。
09
文案语气与禁用清单
- 语气 友好、平易近人且略带俏皮，同时兼具技术专业性。
- 标题风格 直接、以利益为导向，采用随意、欢迎的语气撰写。
- 按钮文案 行动导向，使用“开始”或“复制”等简单动词鼓励即时参与。
- 不要使用衬线字体做标题——截图显示全文采用粗体几何无衬线字体。
- 不要默认使用深色主题——主要背景是干净、明亮的白色。
- 不要使用刺眼、饱和的强调色——主要强调色是明亮但平易近人的青色 (#2EC4FF)。
- 不要使用尖锐的直角——UI 大量使用圆角，按钮常采用药丸形状 (999px)。
- 不要到处使用厚重的投影——阴影很细微，主要用于浮动卡片和复合图像。
- 不要让布局显得拥挤——设计使用了大量留白和内边距，尤其是在主要区块之间。
- 避免: 过于复杂或术语过多的技术语言
- 避免: 激进或紧急的销售驱动型文案
- 避免: 正式、刻板或听起来像企业的措辞
10
包内真实截图
11
System Prompt
Val Town 是一个友好的开发者工具，用于即时部署 JavaScript，其特点是干净、平易近人的美感。关键颜色包括纯净的白色背景 (#FFFFFF)、深黑色文字 (#000000)，以及用于主要行动号召的鲜明青色 (#2EC4FF)。字体方面，使用几何无衬线字体作为醒目标题，人文无衬线字体作为正文，等宽字体用于代码。关键设计规则包括：不要使用深色模式作为主要布局；截图显示的是明亮、以白色为主导的界面。不要使用尖锐的直角；UI 广泛使用圆角和药丸形状按钮。不要使用拥挤的布局；充足的留白和清晰的视觉层次至关重要。语调随意且友好，避免使用过于技术性的术语。