本稿对应的 Figma 可编辑 UI 设计稿：小猪盖被 · Resend 官网首页 Figma 公开稿。打开即可对照版面结构、代码演示卡与组件层级。
Resend 首页把邮件发送这件基础设施能力，处理成一张深色的开发者产品封面。近黑顶栏先收住视线：左侧是 Resend 字标，Features、Company、Enterprise、Help、Docs、AI、Pricing 依次排开，右侧用 Log in 与描边的 Get started 完成入口分级。首屏上方的「What you missed at Resend Forward」公告胶囊带着紫蓝描边，像一枚低调的版本标记；下方「Email for / developers」以衬线大字断行，占据足够呼吸空间。副文把重点落在触达真实收件人、避开垃圾箱，两个 CTA 则将 Get started 与 Documentation 并列。右侧深色立体方块由斜向光带切出体积，既补足首屏重心，也刻意不抢走标题和行动入口的阅读优先级。
近黑首屏、衬线大标题 Email for developers、右侧立体方块主视觉与双 CTA
标题之下先接入「Companies of all sizes trust Resend…」的信任条，并以 Explore Enterprise 延续企业场景。接着的 Integrate this morning 把营销页面最关键的证据提前：左边是一串语言与框架标签，Node.js、Serverless、Ruby、Python、PHP、CLI、Go、Rust 等选项让兼容范围可扫描；右边直接摆出 resend.emails.send 的 Node.js 示例。View on GitHub 与 Download ZIP 被安排在代码卡底部，像文档操作的一部分。这里的取舍很明确：首屏没有继续堆叠抽象插画，SDK 调用、标签切换和下载动作本身就承担了可信度。标签切换可形成轻微的内容替换动效，代码区保持稳定，读者的注意力因此落在调用结构上。
Integrate this morning 区语言/框架标签与右侧 emails.send 代码演示卡
First-class developer experience 延续这种「运行中的证据」语言。Test mode 卡片把 Delivered、Clicked、Opened 等模拟事件排成事件流；Modular webhooks 则把分发关系拆成独立模块。反复出现的 HTTP 200 与 id 回执，是页面的反馈母题：它既像接口响应，也适合在滚动进入时做逐条亮起、向下传递的动效线索。两张卡并不追求信息塞满，黑底、大留白、细线框让状态标签拥有足够辨识度。相较于用夸张的动态图表营造技术感，Resend 选择了更接近日常调试界面的节奏。
每个区块的容器尺度也保持一致：宽阔的外边距先划出阅读带，再将标签条、代码、状态行收进圆角矩形。分隔线和卡片边缘的明度差都很轻，视觉重音只在交互状态、关键数字与操作按钮处出现。页面因而能容纳较高的信息密度，却不会呈现控制台式的压迫感；它借用了开发文档的结构，保留了品牌首页应有的停顿与节奏。
First-class developer experience 区 Test mode 事件流与 Modular webhooks 双卡
页面在 Write using a delightful editor 处嵌入一扇浅色产品窗。From、To、Subject 等字段与 Styles 面板建立熟悉的邮件编辑器骨架，Test、Send 两个按钮则把操作终点明确留在右下角。深色营销壳包住浅色工作台，是全页最有效的对比策略之一：外层负责气氛和层级，内层负责证明产品可被实际使用。蓝色也被刻意压缩到预览按钮和关键操作附近；大面积视觉秩序仍由黑、白、灰完成，避免品牌色泛滥后削弱代码与字段本身的可读性。
浅色邮件编辑器产品窗：From/To/Subject、Styles 与 Test/Send
Develop emails using React 再把「可编辑」推进到组件层。左侧 react-email 的多文件代码标签让项目结构可见，右侧「Welcome to ACME, user!」渲染预览即时给出结果。代码和邮件成品并置，省去了长段解释从组件到收件箱的转换过程，也让界面在开发者文档感之外保有编辑设计的温度。整页的组件体系由公告胶囊、双 CTA、信任条、标签式代码卡、事件卡与产品窗反复组成；衬线标题带来一点编辑感，正文则保持短促、无衬线和高对比。它的克制恰好建立了清晰的阅读路径：先理解承诺，再看到调用、测试、编辑与渲染的连续证据。
Develop emails using React 区 react-email 代码标签与 Welcome to ACME 预览并置