10月22日星期四
Skisso 把真实页上的 UI 改动收成 before/after CSS 差分交给编码 Agent;案例保留空状态双类拆分、多商户酒店小程序启动/骨架/键盘,以及宠物洗护完成页激励层级;工具侧带 App Canvas 状态地图与 Subframe 流程落稿;素材为 Keyline/Lucian 图标与 Atelier UI 动效过程。本版按新鲜度硬卡与同类压缩定稿。

Skisso:在真实页面上改 UI,把 before/after CSS 差分交给编码 Agent
10-16 Product Hunt 上线的免费 Chrome 扩展(无账号、本地跑)。在 localhost/预发/线上页点选元素,按页面 token/组件(含匹配现有样式的 shadcn kit)改间距、颜色、字体、布局与文案;一键复制 selector+属性 before/after,或经本地桥 `npx -y skisso` 用 MCP 让 Claude Code、Cursor Agent 等直接读改动。厂商自测差分约 380 tokens,相对整页粘贴约 25,700。
交互与体验3
-
空状态不是一种:首次无数据 vs 筛选后无匹配,文案与行动必须拆开
10-20 Derrick Kityo 用可交互项目列表示例对照两类「零条」:真无项目时应引导创建;已有四条却被「已归档」筛空时,正确动作是去掉筛选而非再建。文中强调先问清请求是否完成、是否成功、权限与筛选是否生效,再写说明;并把图表上的「0」与「尚无数据」区分开。
derrick.dk
-
多商户酒店小程序:启动页并行预取、骨架屏、软键盘与自定义导航
10-22 平芜编程栈复盘单体改多商户后的前端体验:首屏从白屏改为带 Logo 的启动页并并行拉 banner/城市/定位再进首页,避免 switchTab 闪 tabBar;详情页用与真实排版一致的骨架屏;搜索页关 adjustPosition 后在 focus 时滚动到目标,或把输入固定顶区+scroll-view。另给胶囊对齐的自定义导航高度公式,以及商户端优先小程序+H5 的取舍。
pwwt.cn -
宠物洗护预约小程序:任务完成页从冷通知改成庆祝+奖励层级
10-11 优设复盘线下猫狗洗护预约小程序的「任务完成页」:原版顶部常规勾选图标偏系统通知,奖励与社交佐证层级弱。改版把信息排成情绪大标题→「50 能量」主题色块→参与人数/头像热度;顶部换成欢呼 IP;主按钮沉底改平行四边形呼应能量。前后对比强调完成页是传递奖励喜悦与继续参与的关键面。
uisdc.com
AI 与创作2
-
App Canvas:开源画布让编码 Agent 从仓库铺出真实屏/状态/流程
10-18 Tom Tang 发布 MIT 开源 App Canvas。编码 Agent 读仓库:发现屏/组件/变体/导航,写 fixtures 与 render adapter,在可缩放画布上展示真实应用 UI(非另画 mock)。公开 demo:77 authored states、44 interactive flows、121 playable entries;支持 Browse/Interact/Demo 播放失败→草稿→重试等旅程。运行时不调模型、无需 API key。
tomtang3.ai 等 2 个来源
-
Subframe:Agent 用 Browser 点填滚并「流程→设计」,Windows 桌面+可变字重
10-16 Subframe changelog:桌面端 Agent 可开 Browser 标签点击、填表、滚动,人可旁观或接管;要求 capture a flow 时每步回落为设计稿。同日上线 Windows 桌面版、可变字体字重 1–1000(走 MCP),并修 Browser capture 对列表/表格/粘性头等的保真。前日(10-15)还有 MCP 工具更新后无需重连仍可继续工作。
subframe.com
工具与素材3
-
Keyline Icons v2.1.0:61 个新图标(显示器/希腊字母/立体形体)可进稿
10-20 Keyline Icons 发布 v2.1.0:新增 61 个图标,全集至 1,568 名;本批含 monitor-2 家族与屏上播放/投屏等状态、sigma/pi/lambda 等数学字母、cone/cuboid/cylinder/pyramid 等立体形体,以及燕尾旗/矢量节点等。每名仍提供 stroke/two-tone/duotone/fill 与圆角/锐角,合计 12,544 SVG;可经 React/Vue/Figma/shadcn registry 安装。
keylineicons.com -
Lucian Icons:211+ 个带悬停/点击状态的开源动效图标(MIT)
10-20 前后公开的 Lucian Icons:约 211~212 个为界面状态定制的 SVG 动效图标——如点赞心形填充、文件夹开合、下载进度转勾/失败态——并附 Claude Code/Codex 用 agent skill。站点称 100% 免费开源;What People Made/TAU 转载均写 MIT 可商用。
lucianlabs.dev 等 2 个来源
-
Atelier UI:WebGL 与 DOM 同屏的 React 组件库过程(Codrops)
10-21 Codrops 刊 Jérémie Nallet 教程:拆解 Atelier UI——固定全屏 R3F 画布+portal,用 WebglText/WebglImage 把 DOM 文字/图同步到 WebGL,Lenis+Motion 同钟防抖;示范 Fluid/Lens/Pixel 媒体效果、PixelTransition 路由遮罩与 SphereGallery。组件经 shadcn registry/MCP/CLI 拷贝进项目。
tympanus.net