这里是 Design Fragments，一处搜集互联网碎片的地方，也是之前 Design Scenes Weekly 的精神续作。
更多内容请查看 Design Fragments 的独立网站，包含了 RSS 订阅和搜索功能。

Design Fragments 目前共搜集了 2303 条信息。

本期是 5 月第 5 周内容。

New

从本期开始到 Design Fragments 2.0 上线，会在这里更新一些迭代内容：

  • 现在的 DF 主要是条目列表的形态，看完即走，或者订阅了 RSS 后根本不需要访问网站。新版本主要是进一步使用 LLM 等工具去炼化这些内容，这样搜索精度也会更加精细。
  • 根据这一点，目前只针对「文章」内容提取知识点，将其「原子化」，重新打上标签和组织，形成「专题」集中查看。像「字体」「产品」等标签的内容会用加合适的形式来呈现。
  • 虽然不是什么新概念，但是实际流程中提取、清洗和组织到一种理想形态还是有些困难。因为提取出来的内容数量膨胀得很快，现在 800 多篇文章提取出来有 11k+ 的知识点。
  • 清洗这些知识实体和关联主体，主要是用了多种分簇和 AI 验证的方法，详细我会在上线后的文章里面分享。
    • 标记知识点实体模型用的 Gemini 3.5 Flash，提取使用的是 Grok 4.3，验证使用了 Qwen-3.7 Max。
  • 前台样式也会有大规模更新，比如：
    • 重写搜索，现在用的 algolia 第三方搜索，需要更换；
    • 重新组织导航栏；
    • 知识点内容变为可自由移动&缩放的窗口形态；
    • 一系列新的独立页面；
    • 还有很多 feature 之后会一一分享；
  • 综上，之后的 DF 在筛选条目时会筛进来更多类型的条目，来进一步扩展「知识库」；

对了，现在最大的好处是，DF 有了完整的后台，之后发布内容再也不用飞书多维表格里写内容再传到 supabase 了；之前条目嵌入也是手动执行脚本，现在都在后台变为了自动化流程。

条目的描述依然是我人工写的。

Design

WINDOWS

  • 透过飞机舷窗看到的风景与城市景观，被 Jim Darling 记录了下来。
  • → 访问 (jimdarling.com)

===

Showreel 集合

  • 搜集了各大 agency 的 showreel 视频。
  • → 访问 (showreel.design)

===

WUT-塔明朝

  • 偶然发现了这款超高纵横比的明朝体，目前包含了 2734 字。
  • → 访问 (wuttype.com)

===

St John's College 标志更新

  • 始于 1909 年的 St John's College 与 Kit Studio 合作更新了学院标志。Kit Studio 为其设计了五种场景下的标志，从宏观笔触到数十像素的精简，搭配 PP Fragment Glare 字体显得优雅而现代。我最喜欢的亮点是精简版 logo 的巧妙截断。比如简化版的燕尾十字，左侧和上侧与方心断开，除了视觉补偿，更是一种 Northwest Lighting 的高光设计要素体现，细节满满。
  • → 访问 (kit.studio)

===

Weird Folders

  • 文件夹自定义图标资源包，内容算是千奇百怪。获取完整资源 €9。图片使用 AI 生成，作者也公布了生成方法。
  • → 访问 (weirdfolders.com)

===

埃舍尔图形生成器

  • 编辑四边形或六边形一侧的多条邻边，另一侧边也会随着向量信息而变形，形成密铺纹理。
  • → 访问 (amix-design.com)

===

BubbleKern2

  • 大曲都市开发的 glyphs 插件，可以根据西文字母生成一圈「bubble」轮廓，让轮廓边缘相交不重叠便可自动调整字偶间距，80-90% 的场景都可以自动适配。
  • → 访问 (github.com)

===

Tech

Liquid DOM

  • 在网页上还原 Liquid Glass 交互效果，需要开启 HTML-in-Canvas API。网页大 canvas 时代，上网本都得看看 GPU 实力了。
  • → 访问 (github.com)

===

Openvid

  • 又一款开源的网页视频编辑，带有录屏、 浏览器 mockup、3D 透视、缩放等效果。不过交互不是很流畅。
  • → 访问 (openvid.dev)

===

MetalForge

  • 提供了一些 shader，可以自定义调节参数，开通 pro 订阅后可以复制代码到自己的项目中。所以这个 editor 只是调节参数用，并非 Unicord Studio 可以叠加图层。
  • → 访问 (metalforge.xyz)

===

使用 round() 约束流式尺寸

  • 减少自适应布局时不符合预期的小数点尺寸，并按照给定的步长变化。也试用于设计预期的 layout 吸附。
  • → 访问 (ishadeed.com)

===

AudioMass

  • 开源的网页音频编译器。无后端依赖，可离线使用。
  • → 访问 (audiomass.co)

===

用自定义 Layout 化解 SwiftUI List 的行高与间距跳变

  • SwiftUI List 中 cell 高度默认不会随着内容一起平滑插值，而是忽略过渡会「跳变」。需要用 Animatable + Layout + LayoutValueKey + 自己维护一份 displayValue 状态机，来把高度和 spacing 都变成显式、可控的动画状态。全程没有用到 UIKit（摊手）。
  • → 访问 (fatbobman.com)

===

纯 CSS 实现元素之间连线效果

  • 用 anchor() 拿到端点位置，用 shape() 连接，想要额外的线条效果（比如曲线）可以用 if() 来控制。
  • → 访问 (css-tip.com)

===

Chrome 开发者工具 MCP

  • 可以通过运行 Lighthouse 审核来评估网站，模拟不同设备尺寸和调试 Chrome 扩展等。
  • → 访问 (developer.chrome.com)

===

网格加载动画生成器

  • 你在 agent "thinking" 时看到的最常见动画，现在可以定制成自己想要的样式。支持多种格式导出包括动画 SVG 和 lottie。
  • → 访问 (loaders.wtf)

===

AI

CC Switch

  • 我最近开始浅用 Codex，所以也装上了 CC Switch，开箱即用的 Provider 管理。
  • → 访问 (ccswitch.io)

===

Papers with Code

  • 除了可以看一些热门论文，减少噪音信息外，按照领域浏览集中展示了 benchmark 信息也很方便。
  • → 访问 (paperswithcode.co)

===

Maia-3

  • 开源的国际象棋模型，可以模仿各个分段的人类棋手行为。背后采用了 Chessformer 架构，基于 Transformer，只是将棋盘上的 64 个格子视为令牌，引入 Geometric Attention Bias 作为模拟国际象棋规则。和其他象棋、麻将模型追求的登峰造极不同，Maia-3 每步棋并非最优，它也可能会犯错。
  • → 访问 (lichess.org)

===

Prompt Brush 2.0

  • Prompt Brush 原本作为反 AI 生成内容的实验平台，写出 prompt 但是由真人生成简笔画。2.0 网站开放了 prompt 诶委托，任意用户可以帮别人画画了。在 /gallery 页面有详细的展示。
  • → 访问 (prompt-brush.com)

===

DeepSWE

  • 私家 benchmark，主打无污染题库、长任务，Prompt 比 SWE 少一半，手工用例验收，尽可能贴近真实任务环境。
  • → 访问 (deepswe.datacurve.ai)

===

FLUX Virtual Try-On

  • Flux 推出的虚拟换衣间在速度、成本和质量（一致性和细节）之间取得了不错的成果。支持多件衣服作为单张参考图来换衣生成。
  • → 访问 (flux-tools.bfl.ai)

===

DanmuAI

  • Windows 桌面弹幕工具：截取所选显示器全屏，调用视觉模型生成 5 条弹幕，并以 Qt 透明置顶浮层滚动展示。原作者说是适合主播生成隐私弹幕。但你是自己玩感觉也挺有意思的。弹幕是一个没曾想到的生层内容展现形式。
  • → 访问 (github.com)

===

Fun

url.town

  • 是同行！也是按照一定分类，搜集了 800 多个内容链接。复古的页面布局或许还有改进空间。
  • → 访问 (url.town)

===

The C64 Dead Test Font

  • Dead Test 是 C64 主机的诊断卡带，可以让机器进入 Ultimax 模式，只保留 4K RAM + I/O 区域功能。上面展示字符类似银行磁墨字元，每个字符按照 8*8 点阵展示。作者把这些完整字符提取了出来，还有片假名版本。
  • → 访问 (masswerk.at)

===

Current Rothko

  • 按照你的当地天气，展示符合主题的 Mark Rothko 一幅抽象作品。
  • → 访问 (rothko.joonas.wtf)

===

Other

100 years / 100 people

  • 2026 年是户外服装品牌 66°North 创立的百年，它们的营销活动是，按照年份（年龄）每年找 1 位用户拍摄他们穿着 66°North 衣服的照片。从百岁老人到初生牛犊，历史的厚重感凸显了品牌的传承。看似朴实无华的营销实则很有力量。
  • → 访问 (66north.com)

===

维生素 D 更像一种类固醇激素前体

  • 维生素 D 与雌激素、雄激素、糖皮质激素、甲状腺激素、视黄酸受体同类，都能与配体结合，对接特定DNA序列来改变基因。和水溶性维生素不同，过量服用有风险。谨遵医嘱。
  • → 访问 (empirical.health)
INFO

Design Fragments 绝大部分内容和服务都是免费的，但是你可以成为订阅会员来支持我。
订阅会员可通过使用 Algolia 的 MCP 在 LLM 对话中搜索和交流 Design Fragments 所有 2303 条信息。
详情请查看。

欢迎分享本文。敬请期待下周内容。

#ai #design #fun #other #tech