精选 · 开放 · 免费

Val Town

一个友好、可即时编写和部署 JavaScript 的无服务器平台。

01

设计气质 DNA

一个供开发者快速部署脚本的温馨本地咖啡馆

02

色彩

高对比度的深色文字与浅色背景基础，搭配单一鲜明的青色作为主要操作的强调色。

03

字体

geometric-sans · humanist-sans · slab-mono

• display48px · 700
• headline36px · 700
• body16px · 400
• caption14px · 400
• code16px · 400

04

间距

基于 4 的间距系统，各区块之间留有充足的垂直内边距（通常为 96px），确保清晰的视觉分隔。

05

表面 (圆角 / 阴影 / 边线)

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

布局

居中的主视觉区，左侧为文字，右侧为复杂的重叠复合图像，下方是堆叠的内容区块。

07

动效与交互

交互元素的标准颜色和背景色过渡 · 按钮和链接的平滑 hover 和 focus 状态变化

按钮和链接上细微的背景色变化或透明度改变。 · 通过背景色过渡提供即时的视觉反馈。

08

组件

• button 主按钮为药丸形状，采用鲜明的青色背景和深色文字；次按钮为药丸形状，带有细微边框和深色文字。
• card 深色主题卡片，带有细微阴影和圆角，用于客户评价和功能亮点。
• chip 极少使用，主要作为 UI 模型中的徽章或小标签出现。
• input 简洁、带边框的输入框，采用标准内边距和圆角。
• hero 分屏布局，包含醒目的标题、副标题、两个主要操作按钮，以及一个大型的产品界面重叠复合图像。

09

文案语气与禁用清单

• 语气 友好、平易近人且略带俏皮，同时兼具技术专业性。
• 标题风格 直接、以利益为导向，采用随意、欢迎的语气撰写。
• 按钮文案 行动导向，使用“开始”或“复制”等简单动词鼓励即时参与。

• 不要使用衬线字体做标题——截图显示全文采用粗体几何无衬线字体。
• 不要默认使用深色主题——主要背景是干净、明亮的白色。
• 不要使用刺眼、饱和的强调色——主要强调色是明亮但平易近人的青色 (#2EC4FF)。
• 不要使用尖锐的直角——UI 大量使用圆角，按钮常采用药丸形状 (999px)。
• 不要到处使用厚重的投影——阴影很细微，主要用于浮动卡片和复合图像。
• 不要让布局显得拥挤——设计使用了大量留白和内边距，尤其是在主要区块之间。
• 避免: 过于复杂或术语过多的技术语言
• 避免: 激进或紧急的销售驱动型文案
• 避免: 正式、刻板或听起来像企业的措辞

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko