#1 Design Engineer 是什么, 以及 Aurora Overlay 效果学习

INTRO

Design Engineer 的概念和职位这几年在海外越来越被互联网公司重视，薪资水平也大幅提高，比如最近 Sahil Lavingia 就开出了 44 万美金的天价年薪，借用 Jordan Singer 的话，设计工程师是这样演变而来的：

• 设计工程师的兴起：设计师通过学习编程，开始关注如何将设计转化为实际可交互的产品，这标志着设计工程师角色的兴起。

• 好奇心作为起点：对于设计师来说，好奇心是开始编程和探索另一边的起点。

• 新视角的双刃剑：获得工程技能让设计师感到强大，但同时也意味着他们需要对实现过程中的困难保持同理心。

• 学习通过实践：Singer 建议设计师通过实际操作来学习，从小项目开始，逐步提升技能和信心。

• 设计与工程的紧密结合：未来，能够设计和工程化生产的能力将变得越来越受欢迎，两者的结合比大多数人想象的要紧密。

• 对控制权的追求：Drew Andersen 认为，设计师想要控制整个设计到实现的过程，这种追求可能会带来新的问题和挑战。

• 实践验证：Saïd Aitmbarek 通过自己的项目 Microlaunch.net 证明了设计与工程技能的结合在实际中的应用。

关于 Design Engineer 更多的理念可以看一下本周刊官网给出的几个链接。

本周刊内容架构分为（根据实际情况会随时变动）：

• Case Study: design engineering 小教程，不保证每期都有。

• Resources: 相关资源，如组件库、字体、动效框架等。

• Motion: 每周网上看到的有创意的动效。

• Articles: 相关文章分享。

• Products: 相关产品分享。

• Others: 其他新闻和资源。

CASE STUDY

Aurora Overlay

在线预览地址，可点击 fork 并编辑。

此效果是从 Magic 官网学来的，动态光影的背景渐变效果，一开始看起来像是用 shader 做的，发现只需要用 CSS 就可以轻松实现。原理就是贴一张渐变图片，再利用 CSS 叠加一层渐变，配合 Blend mode 做出叠加效果：

.aurora-overlay {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 20vw;
  min-height: 200px;
  mix-blend-mode: lighten;
  background: linear-gradient(280deg, #03f241, #d549dd, #03e5f2, #03f241);
  background-size: 400% 400%;
  animation: aurora-overlay 15s ease infinite;
}

核心代码，通过给背景设置不同定位让它动起来，再加上 backdrop-filter 滤镜效果就完成了。

@keyframes aurora-overlay {
  0% {
    background-position: 0 94%;
    -webkit-backdrop-filter: saturate(1.5);
    backdrop-filter: saturate(1.5);
  }

  50% {
    background-position: 70% 7%;
    -webkit-backdrop-filter: saturate(1.5) hue-rotate(100deg);
    backdrop-filter: saturate(1.5) hue-rotate(100deg);
  }

  to {
    background-position: 0 94%;
    -webkit-backdrop-filter: saturate(1.5);
    backdrop-filter: saturate(1.5);
  }
}

RESOURCES

Base UI

Base UI 是一个新的 React UI 库，由 Radix UI 原班人马打造，当年他们还在做 Modulz 时开发了 Radix UI 和我最喜欢的 Stitches，后来被 WorkOS 收购其中一位作者去了 Raycast，而 Stitches 也不再维护了。Radix UI 本来也很小众但因为 shacdn/ui 的关系渐渐发扬光大了。如果这个项目正常发展，很有可能代替 Radix UI 成为 shacdn/ui 的底层架构。

Fancy Components

又一个免费开源的炫酷 web 组件库合集，目前内容还不是很多，可以持续关注下。

Berkeley Mono 2.0

最好看的编程字体之一 Berkeley Mono 发布了 2.0 版，想不到几年前团购的 1.0 还能免费升级。看官网他们今年还会再发布 3 款新字体，期待了。

MOTION

Lochie 为 family app 的 support 页面设计了一套动态图标。

ARTICLES

Next-level frosted glass with backdrop-filter

backdrop-filter: blur() 通常用来制作毛玻璃效果，那么除了常见的导航栏毛玻璃，还可以扩展出哪些更高级的用法呢？

CSS Wrapped 2024

2024 年 CSS 有哪些改进和进步呢？你可以一键用 AI 总结一下，内容超级多我就不展开了，反正大部分新功能大家都不太关心，现在都用 Tailwind 一把梭了。

PRODUCTS

Ghostty

大概是目前市面上最好的终端之一 Ghostty 终于发布了 1.0 公开版。为什么这个产品得到了空前的关注？因为作者是大神 Mitchell Hashimoto，前 HashiCorp 创始人，市值百亿的公司 CTO 不干了，就为了自己亲手写代码为我们带来更好的产品，还免费使用，这是什么精神？只能感谢他和互联网了。更好的是最喜欢的图标设计师 Michael Flarup 也强强联合贡献了超可爱的图标，甚至图标样式都可以通过设置自定义。更多详细教程可以看这篇中文文章，有人还写了一个可视化的设置工具 Ghostty Config，开源社区太美好了。

OTHERS

• Clamper: 一款 macOS 小工具，专为网页开发者设计，它能够帮助用户快速设置网页的最小和最大屏幕宽度、字体或对象大小，以及在像素和 REM 之间切换，同时提供响应式友好的 clamp 计算公式，直接复制到浏览器中使用。图标设计很好看。

• Fantastic Motion: 一个很不错的 Framer Motion 课程，主要是作者 Frontend.FYI 非常厉害，自己写了很多很好的教程和视频。

• Framer Motion 变成 Motion 后更新非常积极，这是新的例子页面。

• Framer Wrapped 是怎么制作的，官方分享的教程，利用 Google Sheet 插件导入数据，用 Framer 的 fetch 功能抓取数据。

• Shadercraft: 一个专注于着色器艺术、学习和灵感的平台，喜欢研究 shader 和 WebGL 的人肯定喜欢。

• Scan Domains: 实用小工具，可以快速查询 Whois 信息、域名服务器、DNS记录等。

• 如果你需要好看的鼠标指针组件，Motion 自带的这个就非常好用。

Love this newsletter?