AI 摘要：本文深入探讨了前端开发中主题和颜色命名的设计实践及困惑，从流行 CSS 框架的色板设计现状、手动与程序化生成色板的方法谈起，剖析了颜色变量定义中的“语义命名”混乱，并提出了更灵活与语义化兼容的命名及管理方式，以支持更加多变且有辨识度的 Web 设计系统。

CSS-Tricks

Thinking Deeply About Theming and Color Naming | CSS-Tricks

Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

AI 摘要：本文是作者 Nic Chan 撰写的新网站构建系列的一部分，重点介绍了如何采用现代字体回退方法来优化网站性能，尤其是减少累计布局偏移（CLS）。作者详细阐述了利用在线工具调整 CSS 字体属性（如 size-adjust 等）以实现无缝字体切换的实践，并分享了新增艺术作品和工作展示区的设计与实现，包括使用 View Transitions 和容器查询来提升用户体验。

• 作者 Nic Chan 分享了此篇草稿延迟发布的原因，并感谢读者的支持。
• 介绍了网站新增的拖放功能（桌面端）和改进的窗口分层效果，强调了渐进增强（progressive enhancement）的应用，即在确保无 JS 可用性的基础上，通过 JavaScript 增强用户体验。
• 字体优化与回退 (Font Optimization & Fallbacks): 讨论了网站在字体加载时遇到的累计布局偏移（CLS）问题，特别是自定义字体 W95FA 较窄的特性。作者希望实现像素字体和抗锯齿字体之间的无缝切换。他利用了“Modern Font Stacks”提供的字体堆栈，并发现了一个名为“Font Fallback”的工具，通过调整 size-adjust、ascent-override 等 CSS 属性来创建视觉上无缝的字体回退效果，甚至为此修改了工具的源代码。
• 艺术作品展示 (Artwork Showcase): 作者决定在网站中添加艺术作品展示区，尽管这与专业无关。他受到 Josh Crain 网站的启发，并利用 View Transitions API 实现了窗口最大化时平滑的缩放和标题淡入效果，配合少量 JavaScript 进行状态管理和回退。
• 工作项目展示 (Work Projects Showcase): 面对多种图片尺寸和可选标题的复杂布局挑战，作者采取了非对称设计，并限制了三种核心布局模式，避免每次新增案例都需编写新样式。此处完美运用了容器查询（Container Queries）来适应可用窗口空间内的尺寸变化，并结合 CSS Grid 实现有趣的重叠布局和纹理效果。

AI 摘要：本文详细探讨了 Apple 在 WWDC 2025 上推出的全新设计美学“Liquid Glass”（液体玻璃），分析了其设计理念、技术特点以及引发争议的焦点。文章从 Apple 官方介绍、设计师和开发者的反馈、无障碍性问题到社区的实验和教程，全面梳理了 Liquid Glass 的影响与应用前景。作者中立看待这一设计，既对其创新性表示兴趣，又对其可读性和无障碍性表达了担忧，同时整理了大量相关资源和讨论，为读者提供了深入了解这一设计趋势的入口。

CSS-Tricks

Getting Clarity on Apple's Liquid Glass | CSS-Tricks

Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the context of Liquid Glass, as well as techniques for recreating…

AI 摘要： 本文通过对 100 多个开发者工具登陆页面进行深入研究，总结了 2025 年有效的设计与布局策略。作者 Anton Lovchikov（Evil Martians 设计负责人）分析了从 Linear 到 Vercel 等知名工具的页面，提炼出适用于早期产品的高效结构：包括英雄区、信任模块、功能展示、社交证明、支持模块和最终行动号召（CTA）。文章强调简洁设计、用户导向的故事叙述以及建立信任的重要性，同时提供了基于研究的开源模板，助力开发者快速构建登陆页面。

1. 引言与研究背景
• 介绍了研究的目的：帮助开发者工具创建者避免设计中的常见错误，快速构建有效的登陆页面。
• 研究对象为 100 多个开发者工具页面，涵盖从早期初创公司到成熟产品的案例。
• 提供了一个基于研究的开源模板，供快速部署使用。

2. 总体布局注意事项
• 核心原则：避免过度销售，注重简洁与巧妙设计。
• 大多数页面采用居中布局与最大宽度容器，确保可读性与开发速度。
• 少数页面采用全宽设计以突出高端感，但执行难度较高。

3. 英雄区（Hero Section）
• 设计趋势：居中布局，带有静态或动态产品展示及引人注目的 CTA。
• 视觉元素类型：动态 UI 演示、静态 UI 截图、可切换的多产品 UI、实时嵌入产品、代码片段或抽象插图。
• 附加元素：眉毛文本（Eyebrows）用于突出新发布或融资信息；顶部横幅传递更长信息。
• CTA 策略：主 CTA 醒目且具体，次 CTA（如查看文档）视觉上区分开。

4. 信任模块（Trust Block）
• 目标：通过展示客户 logo 或用户数据快速建立信誉。
• B2B 产品：展示知名客户 logo 或客户评价，常使用自动滚动轮播。
• 个人用户产品：突出数据指标（如 GitHub 星级、使用量）或奖项。

5. 功能展示模块（Feature Block）
• 核心：聚焦用户痛点与解决方案，而非单纯列举功能。
• 叙事方式：功能列表、任务导向故事、问题导向故事、大胆声明、使命陈述式叙事。
• 布局形式：全屏截图、棋盘式布局、图标文本、全宽卡片带、便当式网格、选项卡分组、步骤流程、富卡片设计、视频教程。
• 附加支持：包括“工作原理”说明、使用案例、兼容性与集成展示。

6. 社交证明模块（Social Proof Block）
• 策略：精选用户评价，注重相关性与正面反馈，通常位于页面底部。
• 呈现方式：简洁引用，包含用户头像、姓名及公司 logo。
• 创新模式：将用户评价与功能模块结合，增强上下文相关性。

7. 支持模块（Supporting Blocks）
• 非必需但常见模块：包括 FAQ、对比表格、定价信息、博客或更新日志预览。
• FAQ：以折叠式设计解答常见问题。
• 对比表格：突出产品优势，适用于竞争激烈的市场。
• 定价：简洁展示不同计划，常链接至单独页面。

8. 最终行动号召（Final CTA）
• 设计：醒目且独立的全宽模块，使用对比背景色与简短激励信息。
• 目的：抓住未在早期点击的访客，提供最后转化机会。
• 创新案例：嵌入日历小部件，便于直接预约沟通。

9. 快速部署工具
• 提供基于研究的无冗余模板，适用于开发者产品，支持 Webflow 和静态 HTML 版本。
• 鼓励读者免费获取并快速应用。

evilmartians.com

We studied 100 dev tool landing pages—here’s what really works in 2025—Martian Chronicles, Evil Martians’ team blog

While designing a landing page template for dev tool startups, we reviewed 100+ real product sites. Along the way, we uncovered practical insights—here’s what’s worth knowing if you’re building one yourself.

Adrian (@uiuxadrian): Bad typography kills good app design.
Most designers guess font sizes instead of using proven standards.
Here's the ultimate guide to UI font sizes for mobile apps (iOS):

🧵 Thread • FixupX

Adrian (@uiuxadrian)

Bad typography kills good app design.

Most designers guess font sizes instead of using proven standards.

Here's the ultimate guide to UI font sizes for mobile apps (iOS):

AI 摘要：本文详细介绍了 Figma 的 Dev Mode MCP Server（目前处于开放测试阶段）的功能、使用方法和最佳实践。Dev Mode MCP Server 通过 Model Context Protocol 提供了一个标准接口，使 AI 代理能够与 Figma 设计文件交互，直接将设计转化为代码，并提取设计上下文和组件信息。文章涵盖了如何启用服务器、配置客户端、提示工具使用以及优化设计文件和提示以获得更好的代码生成效果，旨在帮助开发者和设计团队更高效地进行设计到代码的工作流程。

功能与适用范围：
• Dev Mode MCP Server 目前为开放测试版，适用于 Professional、Organization 和 Enterprise 计划的 Dev 或 Full 座位用户。
• 需使用支持 MCP Servers 的代码编辑器（如 VS Code、Cursor、Windsurf、Claude Code）以及 Figma 桌面应用。
• 主要功能包括从 Figma 帧生成代码、提取设计上下文（如变量、组件、布局数据）以及通过 Code Connect 提高代码输出质量和一致性。

使用步骤：
• 步骤 1：启用 MCP Server - 在 Figma 桌面应用中通过 Preferences 启用 Dev Mode MCP Server，服务器本地运行于 http://127.0.0.1:3845/sse 。
• 步骤 2：设置 MCP 客户端 - 根据不同代码编辑器（如 VS Code、Cursor、Windsurf、Claude）配置 MCP 服务器连接，涉及在设置中添加服务器 URL 并确保连接成功。
• 步骤 3：提示 MCP 客户端 - 通过选择 Figma 中的帧或层，或使用链接，提供设计上下文给 AI 客户端，并通过提示生成代码或提取信息。

工具与用法建议：
• get_code - 用于生成代码，支持 React + Tailwind 默认输出，可通过提示自定义框架（如 Vue、HTML+CSS、iOS）或使用特定组件。
• get_variable_defs - 返回所选内容中使用的变量和样式（如颜色、间距、字体），帮助生成代码时引用设计令牌。
• get_code_connect_map - 提供 Figma 节点 ID 与代码库中对应组件的映射，确保设计到代码的无缝转换。
• get_image - 截取所选内容的屏幕截图以保留布局保真度，可在设置中启用或使用占位符。

Dev Mode MCP Server 设置：
• 提供额外的偏好设置，如启用 get_image 工具、使用占位符、启用 Code Connect 以重用代码库组件。

MCP 最佳实践：
• 结构化 Figma 文件 - 使用组件、变量、语义化命名、自动布局和注解以提供清晰的设计意图，确保生成的代码一致且符合设计系统。
• 编写有效的提示 - 清晰的提示可指导 AI 输出符合框架、文件结构或特定路径的代码，示例包括指定框架（如 SwiftUI、Chakra UI）或组件路径。
• 触发特定工具 - 如结果不理想，可在提示中明确指定工具（如 get_code 或 get_variable_defs ）以获取更准确的上下文。
• 添加自定义规则 - 设置项目级指导规则（如布局优先级、文件组织、命名模式）以保持输出一致性，减少重复提示。
• 分解大型选择 - 将大屏幕拆分为小组件或逻辑块以提高生成速度和可靠性，避免上下文过多导致的错误或不完整响应。

注意事项：
• 由于处于测试阶段，功能和设置可能不完整，可能遇到 bug 或性能问题。
• 用户可通过 Figma 内的反馈表单提供意见，帮助改进功能。

jhey ʕ•ᴥ•ʔ (@jh3yy)：keypad w/ CSS + <img> layers 🧑‍🍳
.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }
use keycap images as a mask for the container that they translate in ✨
bonus: clip-path to clip the hit area + filter to style the keys 🤙

AI 摘要：本文详细探讨了在 CSS、Android、iOS、Figma 和 Sketch 等多个平台和设计工具中实现一致的阴影效果（drop shadow）的问题。作者通过对比不同平台的阴影渲染差异，指出模糊半径（blur radius）的处理方式是导致不一致的主要原因，并提供了具体的缩放因子（scale factors）来调整模糊半径，以实现跨平台的视觉一致性。文章还深入分析了各平台的渲染机制和技术细节，为设计师和开发者提供了实用的转换公式和指导。

1. 引言与问题背景
• 介绍了跨平台阴影效果不一致的问题，通过图片对比展示了 CSS、Android 和 iOS 渲染相同阴影参数时的差异（例如 Y 偏移 24px，模糊半径 24px 的阴影在各平台呈现不同）。
• 指出 Android 使用 setShadowLayer 而非 Material elevation，CSS 和 Android 阴影虽接近但仍有细微差异（Android 更模糊）。

2. 浏览器间的阴影一致性
• 讨论了 CSS 阴影在不同浏览器（Safari、Firefox、Chrome）中的表现，发现 box-shadow 在这些浏览器中渲染效果基本一致，截图以 Safari 为主。

3. 设计工具与 CSS 的对比
• 指出 CSS、Sketch 和 Figma 的阴影效果一致，但背景模糊（background blur）不在本文讨论范围内，仅聚焦于阴影效果。

4. 模糊半径的差异分析
• 阴影的参数中，位置偏移和颜色在各平台表现一致，唯独模糊半径的处理方式不同。
• 作者通过重新排列模糊测试结果，发现模糊半径存在 1×、2× 和 3× 的缩放模式，阴影主要集中在 1× 和 2× 范围内。

5. 缩放因子与技术细节
• 解释了 CSS 规范中模糊半径的标准差为模糊半径的一半，而 iOS 的模糊半径是 CSS 的两倍，因此 CSS 到 iOS 的缩放因子为 0.5×。
• Android 使用 Skia 渲染，模糊半径缩放涉及 1 / sqrt(3) 的因子，与 CSS 不完全一致（部分原因是早期 Safari 的影响）。
• 提供了详细的缩放因子表格，用于在 CSS、Sketch、Figma、Android 和 iOS 之间转换模糊半径，例如 CSS 到 Android 为 0.866×，iOS 到 CSS 为 2.0×。
• 通过调整后的对比图和色调分离（posterising）结果，展示了缩放后的阴影效果非常接近，尽管由于渲染方法和代码差异无法完全一致。

6. 应用与结论
• 研究目的是为 Pinwheel 工具导出 Android 和 iOS 阴影代码时提供正确的缩放因子，确保跨平台一致性。
• 总结了实现近似一致阴影的可行性，并感谢 Kit Grose 在审稿中提供的 Skia 代码注释支持。

Bjango

Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.

UI Cards Hover Collection ™

Aleks(@aleksliving): quick tip for nested radii → your corners will look a lot better if you set the outer radius to the sum of the inner radius + padding

Filip Zrnzevic 精心重现了 Braun 玻璃钟的外观和功能。在预览模式下按下 H 键，即可打开设置面板，调整时钟的内部运作。

Jordan Delcros 重建了个人作品集，展示其 WebGL、动画和交互式开发方面的最佳项目和技能，标志着其作为自由职业开发者的全新旅程。

AI 摘要：本文详细介绍了一种利用 GSAP 和 CSS clip-path 技术实现的创意产品网格到全预览的悬停交互效果。作者受到设计伙伴的灵感启发，通过简化和视觉错觉的方式，将复杂的动画效果分解为多个步骤实现，包括布局设置、clip-path 动画、产品卡片移动、预览图像缩放以及图片画廊效果等。教程不仅展示了技术实现，还强调了简化和优化代码的重要性，同时关注了可用性和可访问性问题，适合对前端动画和交互设计感兴趣的开发者学习。

AI 摘要：本文探讨了在现代化网页设计中重新审视图像映射（Image Maps）技术的可行性。作者通过为艾美奖作曲家 Mike Worth 设计复古风格网站的项目，对比了传统图像映射与 SVG 结合现代 CSS/HTML 技术的优劣，最终提出了一种更灵活、可访问且响应式的替代方案。

1. 项目背景与设计挑战
• 为作曲家 Mike Worth 设计具有 90 年代复古风格的网站，需兼顾现代技术标准（可访问性、响应式等）。
• 目标：避免简单模仿，而是通过现代代码实现复古的“表达性设计”（expressive design）。

2. 90 年代网页设计回顾
• 典型案例：华纳兄弟《空中大灌篮》（1996）网站，任天堂、Cheestrings 等品牌的主页设计。
• 特点：图形化导航、品牌与内容融合，但依赖表格切片或图像映射技术。

3. 图像映射技术分析
• 基础语法：通过 <map> 和 <area> 定义图像可点击区域，支持圆形、矩形、多边形坐标。
• 优点：轻量、无需 JavaScript、语义化（配合 ARIA）、跨浏览器兼容。
• 缺点：绝对坐标难以响应式适配，缺乏视觉反馈，维护成本高。

4. 实际应用尝试
• 为 Mike 的网站设计交互式地图，初期尝试图像映射：
• 使用工具生成坐标（如 PathToPoints 转换 SVG 路径）。
• 通过 JavaScript 动态缩放坐标以实现响应式。
• 局限性：无法实现不规则形状悬停效果，代码冗余。

5. 现代替代方案：SVG 内联锚点
• 在 SVG 中创建透明路径作为可点击区域。
• 内嵌 <a> 标签包裹路径，支持悬停动画和丰富内容（如图片、文字预览）。
• 优势：原生响应式（基于 viewBox）、视觉反馈灵活、易于维护。

6. 设计哲学总结
• 图像映射虽曾重要，但现代项目需权衡工具适用性。
• 核心目标：用当代技术（SVG/CSS）复现 90 年代设计的表达力，同时保障性能与可访问性。

CSS-Tricks

Revisiting Image Maps | CSS-Tricks

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

AI 摘要（注：重复多次的内容会手动删一下）：本期 Frontend Focus 涵盖前端领域多项重要动态，包括浏览器默认样式更新、桌面应用开发框架对比、AI 对开发者角色的影响，以及最新的工具和教程资源。核心内容涉及 H1 元素样式变更、Tauri 与 Electron 的对比、CSS 新特性实践指南，以及 Astro 5.7 等工具更新。

1. 社区动态
• H1 元素默认样式变更：浏览器正在调整嵌套标题的默认样式，开发者需关注兼容性问题（Simon Pieters）。
• Edge 134 性能显著提升，Opera Mini 浏览器集成 AI 助手。
• 🙁 和许多其他人一样，我们很遗憾地听到 Adam Argyle 不再在 Google 工作。 多年来，他一直是 Chrome 的 CSS 开发者代言人，是一股重要的正义力量。
• Astro 5.7 发布: 引入了 SVG 组件、实验性字体 API 支持、错误修复等。

2. 博文与工具
• Item Flow 本文解释了什么是 Item Flow，以及它对 Flexbox 和 Grid 的影响。 #css
• CSS shape() 函数：创建自适应比例的形状（Simon Fraser）。
• 在 2025 中使用 currentColor: 当然，自定义属性也可以做同样的事情，但 Chris 着眼于这个关键字替代方案的效用。
• 无障碍暗色模式设计：优化暗色主题的对比度与可读性，如何制作适合所有人的深色模式的指南（Alex Williams）。 #设计。
• 一个好的副业的幸福禅 —— “享受探索可能性的自由，并愉快地追随任何引人注目的奇思妙想——这就是一个好的副业的幸福禅意。”
• 使用 Chrome 的（预览版）Prompt API 进行数据汇总
• 减小网站上 HTML 文件大小的五种方法 #性能优化 #html
• 设计师 Noah Davis 批评细字体对可用性的负面影响。
• Tailwind CSS 速查表：覆盖 v3/v4 的实用类检索工具（kombai）。

MDN Web Docs

Default styles for h1 elements are changing | MDN Blog

Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.