精选 · 开放 · 免费

Josh Comeau

一个教育类 Web 开发者博客，运用明亮活泼的插图和清晰的排版，使复杂的编程概念易于理解。

01

设计气质 DNA

一本友好、插图丰富的教科书，用多彩的交互式隐喻来解释复杂的网络技术。

02

色彩

采用明亮通透的美学风格，以标志性的天蓝色 (#B1DFF6) 和充满活力的洋红色点缀 (#E60067) 为主导，深海军蓝文本 (#0A0C10) 确保最佳可读性。

03

字体

geometric-sans · monospace

• display36px · 700
• heading24px · 600
• subtitle19px · 400
• body16px · 400
• caption14px · 400

对类别标签使用大写字母和宽松的字间距。 · 仅对代码片段和技术术语使用等宽字体。 · 为长文本内容保持充裕的行高 (1.5)。 · 谨慎使用粗体以突出关键术语，避免破坏布局平衡。

04

间距

基于 4px 的基础网格确保一致的韵律，结构元素间采用 24px 的充裕间距，主要版块分隔则使用 48-96px 的间距。

05

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

使用细微的中性灰色（例如 rgba(10, 12, 16, 0.1)）细边框作为卡片和输入框的边界，而类别标签则采用略微更清晰的描边。

0px 2px 4px rgba(0, 0, 0, 0.02) · 0px 4px 12px rgba(0, 0, 0, 0.03) · 0px 8px 24px rgba(0, 0, 0, 0.05)

06

布局

采用双栏布局，一个窄侧边栏 (300px) 用于‘热门内容’和‘分类’，与宽大的主内容栏并列。

07

动效与交互

为 UI 状态变化使用平滑的透明度过渡。 · 为交互元素使用细微的变换动画。 · 为内容版块使用交错入场动画。

交互元素带有细微的缩放或颜色偏移，提供即时视觉反馈。 · 平滑过渡到新状态或页面，延迟最小。

08

组件

• button 简洁的文本按钮或带有浅色背景填充和圆角的细微胶囊形标签。
• card 简洁的、通栏内容卡片，具有清晰的排版层级和用于强调的细微背景色。
• chip 小型胶囊形标签，文本大写，用于分类（例如 CSS, React）。
• input 简洁的圆角输入框，带有细微边框和清晰的聚焦状态。
• hero 一个全宽度的插图英雄区域，包含 3D 风格图形和浅蓝色渐变背景。

09

文案语气与禁用清单

• 语气 友好、平易近人且鼓舞人心，如同一位乐于助人的导师。
• 标题风格 清晰、直接且以利益为导向，常使用‘……交互式指南’或‘……友好入门’等句式。
• 按钮文案 融入内容流的、微妙的文本式行动号召。

• 不要为主内容区域使用深色背景——截图显示的是明亮、浅色背景的美学。
• 不要使用纯粹的单色或灰度调色板——设计依赖于充满活力的天蓝色和洋红色点缀。
• 不要为正文使用传统的衬线字体——截图中只使用了简洁的几何无衬线体和等宽字体。
• 不要为 UI 组件使用生硬的黑色边框——边框是细微且浅色的，通常是透明或灰色的。
• 不要用紧凑的边距使布局显得拥挤——设计使用了充裕的留白和清晰的版块分隔。
• 不要为按钮或卡片使用尖锐的 90 度直角——截图显示一致地使用了圆角 (4-12px)。
• 避免: 晦涩难懂的术语堆砌。
• 避免: 非个人的、企业化的套话。
• 避免: 过于戏剧化或耸人听闻的措辞。
• 避免: 枯燥、教科书式的行文。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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