- 博客(2170)
- 收藏
- 关注
RSS订阅原创 动效预设怎样成为组件契约：单位、默认值与破坏性变更
两个组件都写 duration:0.3，一个适配器按秒读取，另一个按毫秒读取。曲线名称相同，体验却完全不同。动效预设要成为组件契约，先解决单位与默认值，再讨论“轻盈”“坚定”这类命名。DTCG 格式中有 duration 与 cubicBezier 类型；自定义弹簧参数不能冒充它已经定义的通用弹簧标准。可以把弹簧放进项目扩展，但要说明质量、刚度、阻尼、速度的量纲与消费方式。本文不再推导求解器，只检查契约如何被读取。
2026-10-30 13:17:56
148
原创 3D 贴图小了，显存为什么还大：把下载、转码、上传分开测
贴图文件从几兆缩到几百 KB，预览页的内存却没有按同样比例下降。原因往往在于比较了不同东西：网络传输的是压缩文件，CPU 可能同时保留解码或转码结果，GPU 又按自己的纹理格式和层级分配资源。KTX2Loader 的官方文档明确包含能力检测与转码流程。它不是“显存直通”的同义词，也不保证不产生临时副本。10 月 Chrome 的 WebGPU 更新增加了相关能力说明，仍不能代替当前适配器的实际检测。
2026-10-30 13:15:29
138
原创 AI 生成组件怎样使用设计 Token：让硬编码颜色先过审阅
AI 生成的按钮看起来用了品牌绿色，代码里却直接写着一个十六进制色值。今天颜色碰巧相同，明天主题切换或错误态出现，就不再知道它代表什么。Token 的价值首先是保留设计意图，不是把颜色字符串换一种写法。10 月 Figma agent 官方文章提到把颜色映射到 Token、发现硬编码值的工作流。我们可以把它落到一件小事：生成结果先提交语义引用，缺少引用或用了不允许的语义时进入审阅，而不是静默替换。
2026-10-30 13:13:40
192
原创 AI 短剧预览页怎样降级：从多路视频到只看一帧
审片页同时摆出六个镜头，很容易让“对照”变成六路视频一起播放。用户只想看第二镜头的表情，其他解码、声音和动效却仍在争抢注意力。降级不一定意味着糊掉画面，也可以是只播放当前片，其余保留静帧与字幕。生成模型文档负责说明素材如何产生，预览页负责控制如何查看。本文不调用模型、不猜测设备温度，也不根据硬件并发数承诺可以同时解码多少路视频。先提供显式选择，再用真实观测决定是否增强。
2026-10-30 13:11:00
86
原创 设计系统的结构之美，先从一个可追溯的间距 Token 开始
一张卡片里的 gap:16px 看上去很简单。设计稿改成紧凑模式后，页面里同时出现 12、16、20；没人知道哪项是临时覆盖，哪项代表全局意图。结构之美可以先从这一个间距开始，而不必借历史宣言替代码背书。我想让评审能沿着一条线走回去：卡片间距来自哪个语义 Token，语义 Token 指向哪个基础尺寸，紧凑模式覆盖了哪一层，最终 CSS 读到了什么。数值一致只是表象，可追溯才让后续修改有依据。
2026-10-30 13:09:33
127
原创 AI 3D 资产从哪来、改过什么：给网页预览补一张来源卡
一个网页模型经过 AI 生成、人工修网格、压贴图和导出，最后界面却只写“AI 一键生成”。这会抹掉真正影响质量的步骤，也让后续维护者不知道该回到哪份源文件。10 月的 Figma Specs 把设计意图与实现说明放在同一工作背景下。对 3D 预览，我想补一张同样可追溯的来源卡：它不是工具排行榜，而是告诉接手的人，这份资产从哪里来、经过哪些处理、哪些信息仍然未知。
2026-10-29 22:26:01
116
原创 把组件禁用条件写进 Skill：让 Agent 先解释违反了哪条设计规则
这个按钮为什么不能用红色？”如果 Agent 只把它改成蓝色，设计规则仍然没有被理解。下次生成加载态，它可能再次放入同样的冲突。比自动修正更有用的是：指出违反哪条规则，展示原因，再给用户一个可选方案。10 月 22 日 Anthropic 宣布将 Agent Skills 捐赠给 AAIF。治理变化是背景，组件规则本身仍要写清。当前规范的最小 Skill 是带有 YAML frontmatter 的 SKILL.md；文件格式不会自动赋予规则执行能力，也不会证明某个平台一定遵守它。
2026-10-29 22:24:28
174
原创 弹簧解析解生成关键帧，最容易漏掉的是初值与中断
弹簧解析解常被用来生成关键帧。公式看上去很完整，实际接入却可能在 t=0 就改了用户传入的速度，或在动画第一次经过目标点时提前停下。先验证初值，比先给曲线起一个情绪名称更重要。这里研究相对目标的位移 x，方程为 m·x''+c·x'+k·x=0，时间单位秒，速度单位为位移单位每秒。目标改变时，先求出当前的位置和速度，再把相对新目标的位移作为下一段初值。解析解解决的是这个模型，不自动保证界面手感。
2026-10-29 22:22:51
159
原创 水波可以启发动效，不能证明动效：用三段对照说明节奏
水波的起伏可以启发通知出现的节奏，却不能证明某条弹簧曲线最适合阅读。界面里真正需要交代的是：消息何时完整可读、操作何时可用、用户能否关闭，以及关闭后还能否找回重要信息。用同一句“已保存，可以继续编辑”做三种方案：瞬显、轻移、复杂回弹。保持文字、位置和按钮不变，先比较时序，再讨论风格偏好。下面的数字是教学配置，既不是用户研究结果，也不是所有通知都应遵循的时限。
2026-10-29 22:21:24
167
原创 AI 写的 Shader 怎样入库：编译通过之外还要验什么
AI 写出一段流体背景 Shader，编译通过，画面也动起来了。下一步如果直接加入资产库，调用者可能在某个参数组合下得到全白、NaN 或持续闪烁的背景。编译检查只回答语言层面的问题，视觉资产还需要自己的使用契约。10 月的 Figma Weave 工作流展示了可生成的视觉效果；Chrome 的 WebGPU 更新则说明能力仍在变化。例如 155—156 更新页对 fragment_depth 有临时停用警告。
2026-10-29 22:19:36
121
原创 glTF 体检报告要分三层：格式错误、设备预算与视觉问题
一个 GLB 通过格式校验，手机仍可能装不下；一个贴图超过团队预算，也不一定违反 glTF 规范。把这些结果压成一个“健康分”，会让使用者看不出应该修资产、调预算，还是补视觉检查。Khronos 的 glTF-Validator 能输出包含问题与统计的 JSON 报告。它检查规范相关问题，不负责证明当前手机不会 OOM，更不负责判断商品材质是否好看。体检页面应保留这条边界。
2026-10-28 09:19:51
91
1
原创 AI 生成页面的可访问性，怎样从一次审查变成组件状态矩阵
AI 审查一张页面截图，指出按钮对比不足，这是有用的建议。但截图没有显示弹窗打开后的焦点、错误提示出现后的阅读顺序，也没有显示加载中重复点击会怎样。一次“审查通过”，无法覆盖组件的所有状态。10 月 6 日 Figma 官方介绍了 Agent 对设计系统文档、Token 与组件审查的用法。它提供了工作流背景；供应商的质量评价不等于自己的可访问性验收。实际交付更适合落成一张组件状态矩阵。
2026-10-28 09:18:57
163
原创 AI 短剧改一处，预览怎样保留其余镜头：版本树与回退设计
只改第二个镜头的天气，其他都保留。”这句话是编辑意图，不是结果保证。模型返回新视频后，人物、时长或构图仍可能变化。预览页如果直接替换当前片段，就把“提出修改”变成了“接受修改”。我会把请求、候选结果和已采纳版本分开。旧版始终可回看，候选先进入并排对照。Gemini Omni 与 Runway 的相关文档提供生成和多镜头流程背景，但本文没有调用这些服务，也不据此承诺局部修改不会影响其他内容。
2026-10-28 09:17:51
165
原创 年轻前端怎样练审美：每周只改一个可验证的问题
练界面审美时，我很容易同时换字体、配色、圆角和动效。最后有了一个“更像参考图”的版本，却说不清究竟哪项改动解决了问题。对年轻前端来说，先把变化缩小，反而更容易建立判断。一周只保留同一张组件卡片：文案不换，视口不换，字体不换。先选一个问题，例如说明与按钮挤在一起；只改它们之间的间距。这个练习不保证审美提升多少，也没有用户实验数据，它训练的是观察和解释。
2026-10-28 09:16:43
79
原创 让示波器真的跟着声音走：Canvas 波形的数据链与生命周期
画一条随时间摆动的正弦线并不难，难的是让它诚实地对应输入。随机噪声可以做装饰，却不能被命名为“正在分析用户声音”。示波器式界面应先交代数据来源，再谈荧光与拖尾。Web Audio 的 AnalyserNode 能提供时域与频域数据。波形要读时域采样，频谱柱要读频域数据，两者的纵轴意义不同。下面先用合成测试音检查映射，再给出不请求麦克风的浏览器示例。
2026-10-28 09:14:28
82
原创 让 AI 帮你调商品光照：先固定材质、曝光和参考图
让 AI 把商品调得“更高级”，很容易一次改掉环境图、材质粗糙度、曝光和相机。结果确实不同，却难以解释是哪项变化起作用。审阅时如果只能说“第二张更好看”，这条建议很难复用。10 月 1 日 Figma Weave 的官方工作流文章，用虚构博物馆案例展示了设计系统参考与生成流程的连接。它可以启发如何给建议补上下文，不能充当真实商品光照效果的证明。对网页 3D，我会把 AI 的输出限制为可读的光照提案，让材质与曝光保持不变。
2026-10-27 21:52:59
153
原创 Agent 的进度条为什么容易骗人：把计划、执行和结果分开显示
Agent 写出五步计划，界面马上显示“五项任务”。随后一条动画把进度推到 100%，但其中两项只收到请求回执，还没有可查看的改动。这不是动效细节，而是界面把意图当成了结果。10 月的 Figma agent 与 Specs 官方材料，把设计说明、组件语境和执行工作联系得更紧。功能越能跨越多个步骤，越需要说明当前到底完成了什么。官方描述可以作为问题背景，不能据此替自己的产品宣布成功率。
2026-10-27 21:52:22
144
原创 全息卡片不用每个人都晃手机：指针、姿态与静态模式的三条路径
卡片随手机轻轻倾斜，可以是一种装饰，但不该成为读清价格或点击按钮的前提。尤其是用户拒绝传感器权限时，页面不能把“不开启就无法继续”当成默认流程。这里把三条路径分开：指针移动驱动视觉倾斜；用户主动开启后，设备姿态数据驱动同一装饰层；静态模式完整呈现内容。姿态数据描述设备在空间中的朝向，不等同于屏幕横竖屏切换。名称相近的 API，不能混写成一个能力。
2026-10-27 21:51:30
214
原创 审片时怎样找回同一角色：镜头对照板的标注与版本设计
审片时说一句“这里不像同一个人”，下一次打开却不知道指的是哪个版本、哪一帧、哪个部位。问题并非缺少一个更大的评分面板，而是标注没有和具体画面绑定。多镜头生成文档说明了组织镜头的方式，不能保证角色在所有镜头里自动一致。这里不讨论模型评测抽样，只设计负责人的查看、标注、回看与接受操作。生成能力是素材来源，审阅记录是另一份需要管理的内容。
2026-10-27 20:07:23
131
原创 少一层抽象之前，先画出状态：一次动效模块重构该留哪些证据
动效模块从三层封装改成一层，代码确实少了。可如果取消拖动后仍显示“正在拖动”，或者卸载后还有回调改样式，这次重构就没有完成。行数能够描述改动规模，不能证明行为保持正确。我会先画出按下、拖动、松开、回稳和销毁这几种状态，再决定哪层抽象可以删除。视觉上的克制也需要证据：少一个中间对象，究竟让责任更清楚，还是把清理逻辑藏进了调用方？
2026-10-27 20:05:42
153
原创 多人临时改同一份文档，不用先建账号：Rustpad分享链接后即可进入同一页面实时协作
有些协作场景并不需要一整套文档系统。临时开会记几条内容、两个人一起改一段文字、共享一份代码片段，真正需要的只是“打开同一份文档马上一起写”，而不是先注册账号、建空间、配权限。Rustpad正适合这种轻量协作。文档通过随机码区分，参与者拿到Share Link以后就可以直接进入同一页面编辑；用户名可以临时修改，也不需要额外建立账户体系。这篇使用极空间通过Docker部署汉化版Rustpad，既保留Docker Compose方式，也保留docker run方式。
2026-10-26 21:35:11
11475
3
原创 生成式 UI 一边生成一边变，怎样让焦点和布局保持稳定
用户正在填写地址，旁边的建议卡片继续生成。如果新分片让表单重新挂载，输入可能被重置，焦点也可能跳到页面开头。画面更丰富了，操作反而中断了。10 月 7 日 OpenAI 的 Intelligent UI 公告介绍了原生、可流式呈现的组件库与编译器。这说明“逐步显示界面”已经是明确的产品方向；公告并没有向开发者交付同名公共 SDK。这里讨论自己的前端如何保护正在进行的操作，不声称复刻其内部实现。
2026-10-26 21:34:11
158
原创 磁性 Dock 的命中区别跟着跳：固定布局与弹簧装饰怎么配合
磁性 Dock 最容易让人忽略的不是弹簧参数，而是鼠标正在瞄准什么。如果每帧改按钮宽度，再读取新的中心坐标计算放大，目标会跟着效果移动。光标静止时，布局变化也可能改变边界事件；Pointer Events Level 3 对这类情况有专门说明。我更愿意先固定一排按钮，把放大和上浮交给按钮内部的装饰层。这样视觉可以有弹性，点击位置和 Tab 顺序仍由同一组原生按钮承担。下面先验证几何关系，再给出完整的静态结构。
2026-10-26 21:33:14
160
原创 界面留白能测到什么：用容器宽度、行长和焦点顺序讨论布局
把卡片的左右 padding 从 16 调到 32，看起来也许更舒展，却可能把长标题挤成四行。留白不是一个脱离内容的审美分数；它影响的是可用宽度、信息分组和操作位置。我会先固定同一份内容，再讨论三个容器。这样能明确说出哪里发生了变化，也能避免把未经核实的建筑语录拿来证明某个间距“必然高级”。视觉传达训练可以提供观察方式，工程判断仍要落在页面里。
2026-10-26 21:32:05
376
原创 AI 短剧的字幕不能随便铺：做一个可检查的竖屏预览层
竖屏短剧里，一句字幕可能同时压住嘴型、衣服上的线索和底部播放按钮。生成出视频不等于审片完成；字幕是否可读、人物表情有没有被挡住，是预览页应该暴露的问题。Gemini Omni 文档提供了视频生成相关流程，但本文没有调用模型，也不评价其中文对白准确率。这里使用人工标注的画面区域，把“字幕放哪里”做成可以检查的布局决策。WebVTT 负责时间对齐文本轨，不会自动理解人物表情，更不会替你制定平台安全区。
2026-10-26 21:30:56
327
原创 让设计 Agent 先给差异再改页面：确认面板的四个状态
让Agent一次修改十个组件，真正困难的未必是“确认”按钮放在哪里，而是用户确认的范围有没有在点击之前变化。预览看的是圆角，执行时却多改了颜色；这种错位再配上流畅动画，也只是更难发现。10月Figma Specs把设计意图、引用与协作讨论放到同一画布，适合用来说明变更范围。这里进一步提出一条前端约束：确认针对的是一份具体差异清单，不是某个可能继续变化的任务。
2026-10-25 14:06:10
41
原创 AI 生成的商品拆解图，怎样避免把想象画成结构事实
AI能很快画出一张像样的拆解图：外壳分开，线圈悬浮，排线顺着漂亮曲线展开。问题在于，画面越像工程图，人就越容易把里面的结构当成真。网页前端可以帮忙守住这个边界。模型节点负责可见几何；可信结构资料负责部件事实；AI给的标签和展开顺序先作为建议。三者关联，但不相互替代。本文使用自己构造的外壳、支架、后盖三个部件，不对应任何真实商品。
2026-10-25 14:04:56
170
原创 CRT 复古滤镜先从视频纹理做起：别把网页 DOM 当成现成贴图
复古CRT效果的曲面、扫描线和色散很好玩，但先要回答一个朴素问题：滤镜正在处理哪一张图？在网页上盖一层透明Canvas，并不会自动得到下面DOM的实时纹理。更可靠的起点是明确输入：一个已有权限的视频元素、一张图像，或另一张Canvas。本文只实现桶形畸变的采样核，用一小块像素数据检查坐标；它不是完整WebGL后处理器，更没有把任意网页截图为纹理。
2026-10-25 14:03:47
155
原创 AI 短剧分镜板怎么做：把镜头时长、角色和版本放进同一张卡
生成一段有故事的视频”是一句愿望；“这个镜头四秒，人物拿起哪件道具，沿用哪个参考版本”才是可以审阅的输入。短剧工具的前端，不妨先把这两种表达分开。Runway官方Multi-Shot配方文档提供auto与custom两种入口，并说明镜头清单、时长合计和固定工作流版本。它可以作为接口样例，不代表任意长短剧都能一键生成。文档中的行为版本也不是本月发布日期，不能把旧配方包装成十月新发布。
2026-10-25 14:02:34
187
原创 动效里的阻尼不是形容词：用一条曲线检查积分误差
这段动效像水”可以是一种观察，不能成为求解器正确的证据。水的形态可以启发节奏；代码里的质量、阻尼、时间步长，仍要各自有定义。尤其在后台恢复或主线程遇到长任务时，一次积分跨过的时间可能变长。此时元素突然飞远，并不一定是弹簧参数不够“温柔”，也可能是离散算法在该步长下积累了误差。下面用同一个方程比较，避免换了初值又比较观感。
2026-10-25 14:01:21
190
原创 AI 改过的代码怎样看清：为设计工程师做一张变更审阅界面
AI 改了一个按钮，你却要在几百行 diff 里猜它对应哪个画面。这个问题不需要界面先“读懂注意力”，而需要稳定的关联：哪份补丁、哪个组件、哪个预览状态，以及接受后还能不能撤回。Figma 在 2026 年 10 月 15 日宣布 code layers 进入开放测试，强调把可运行原型放回共同画布评审。产品入口变化提供了一个提醒：代码生成之后，设计者仍需要看见差异、试用状态、表达取舍。以下是自己设计的审阅数据核，不是 Figma 内部实现，也不调用它的服务。
2026-10-24 23:12:17
1077
原创 3DGS 网页预览先验收什么：从椭圆投影到排序与透明合成
把一份点云放进网页，能转动、颜色也漂亮，距离“可以交付”还有几步。先别从百万点性能开始；把场景缩到一颗高斯，再放入两颗相互遮挡的高斯，投影与合成的问题反而更容易看清。3D Gaussian Splatting 的原始工作发表于 2023 年。论文中的训练方法、数据和原生渲染结果，不能直接当作浏览器成绩。10 月 15 日更新的 Chrome WebGPU 文档也仍在逐项说明可选特性及限制。这里做的是一个不依赖 GPU 的数学检查核，不宣称实现了完整 3DGS 渲染器。
2026-10-24 23:11:20
1323
原创 视频端点停用了，审片界面怎样解释旧任务和替代选项
一条视频生成通道停用了，审片工具最容易犯的错误，是把整个项目都画成红色失败。事实上，已经保存的片段可能还可以看，旧任务状态可能暂时查不到，新任务也可能需要重新选择通道。这三件事不应挤在同一个“重试”按钮里。Google官方视频文档注明：Gemini API列出的Veo 3.1 Preview端点于2026年10月22日关闭。这个事实有明确渠道和型号范围，不等于所有Veo服务停用。下面只讨论界面怎样帮助用户判断和选择，不展开供应商适配或服务端任务协议。
2026-10-24 23:10:24
1438
原创 1024 写给做界面的程序员：把审美判断写成可检查的交付条件
1024适合谈技术，也适合把自己的判断说得具体一点。看到一张卡片，我们可以说它太挤、反馈太乱、按钮不够清楚；但如果交付给另一位开发者，最好再加一句：在哪个宽度、哪种状态、哪项操作里出现了什么问题。视觉传达训练让我习惯先看关系：标题与正文的轻重，字段与提示的距离，动作与反馈的节奏。技术文章要把这种关系落成别人能检查的条件，而不是用“高级感”替讨论收尾。这里拿一张保存资料的卡片作教学例子，不借未经确认的项目故事或十年经历证明结论。
2026-10-24 23:09:24
1363
原创 Canvas 旋钮怎样保留原生 range 的操作能力
旋钮可以有拉丝、高光和刻度，数值输入却不能只剩一张可拖拽的画布。画布上的指针不是浏览器认识的滑块；如果把键盘、触屏辅助技术和数值读出全都重写，工作量很快超过画旋钮本身。我更愿意保留可见的原生，让Canvas成为同一数值的装饰。这样看得见的旋钮和真正可操作的控件都有明确职责，不需要假装已经实现了Shader流体或物理弹簧。
2026-10-24 23:08:22
1771
原创 双 11 3D 展厅网格动态减面：基于边折叠算法的运行时网格简化引擎
每年双 11 大促前夕，3D 互动前端团队面临最严苛的挑战往往不是渲染管线的着色器复杂度，而是海量商家自主上传的 3D 商品模型资产。在中低端移动设备上，一个由未经过专业三维建模拓扑优化的工艺首饰或机械腕表模型，面数动辄高达五万至二十万面。当十余个商品在同一个虚拟展厅货架上协同加载时，巨额的顶点属性显存开销会瞬间击穿移动端 iOS Safari 与低端 Android 浏览器的 WebGL 上下文内存上限，直接诱发 GPU 上下文丢失或严重掉帧。
2026-10-23 22:09:54
1027
1
原创 提升电商转化率的行为驱动微交互：基于滚动阻尼与状态机的自适应悬浮操作栏设计
加购转化率（ATC）提升 11.4%：在“犹豫态”下适时唤醒的呼吸动效有效承接了用户的注意力，缩短了决策迟疑时长；页面跳出率降低 3.2%：高速扫视期组件的主动退缩让屏占比提升，使得用户能无干扰地浏览商品深度图文，提升了整体浏览深度；主线程调度开销为 0：整套算法依托平滑窗口与轻量时钟，无高频 DOM 读取与样式强制重排，完美达成 120FPS 丝滑跟手体验。
2026-10-23 22:08:56
1339
原创 1024 极客微交互组件库（二）：矩阵数字雨与代码下坠瀑布动效的物理阻尼封装
在程序员的视觉文化图腾中，诞生于经典科幻片《黑客帝国》（The Matrix）的绿色荧光字符下坠雨，是数字世界具象化美学的最高符号。当无数十六进制操作码、Unicode 字符与片假名在黑色虚空中像雨滴一样倾泻而下时，冰冷的代码逻辑展现出了犹如流体瀑布般的生命节律。然而，在很多前端开源社区的粗糙实现中，矩阵雨通常只是几十行用配合 Canvas 随机填色的简易脚本：字符下坠速度恒定僵硬，拖尾重影依赖全局的粗暴刷屏，且缺乏与鼠标或触控的任何物理微交互，极易在大促页面或极客活动主页引起严重的主线程卡顿与视觉疲劳。
2026-10-23 22:08:12
1238
原创 双 11 赛博朋克霓虹流光背景：基于 Signed Distance Fields 符号距离场的 GPU 动态排版光晕
在双 11 狂欢夜与主会场视觉搭建中，视觉设计师往往追求强烈的赛博朋克霓虹氛围：极具未来感的几何晶格、沿着版面边缘川流不息的能量光导流光、以及与品牌主标题深度融合的弥散辉光。在以往的工程实践中，前端团队大多依赖 UI 团队切出的大尺寸高清 WebP/PNG 静态位图或几兆大小的预渲染视频。
2026-10-23 22:07:31
1245
原创 1024 前夜随笔：在西湖的冷雨中，重读高德纳的文学化编程与字体排印艺术
在软件工程演进的数十年里，我们习惯了将代码视为“命令机器执行的指令序列”，而将注释视为“迫不得已的补丁说明”。我们使用短促的缩写、隐晦的条件分支与急功近利的架构补丁，把代码库变成了一座座难以攀登的巴别塔。而高德纳在 1984 年提出的文学化编程哲学，彻底颠覆了这种机器本位的傲慢：“让我们改变传统的态度：我们不应该集中注意力在‘教计算机怎么做’上，而应该集中精力向‘人类解释我们希望计算机做什么’。在文学化编程的语境下，程序是一篇逻辑严谨、文笔优雅的散文或交响乐章。
2026-10-23 22:06:35
1243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人