Drawell这个网站是我最近做的最快的网站之一了，工作流也非常简单： 1. 首先当然是先把Drawell做完，然后在Codex里打开这个项目，告诉他我要做一个网站作为landing page，然后生成一张它认为可以合理展示的网站效果图 2. 跟Codex校正这张效果图，直到效果满意 3. 把网站效果图的具体元素拆解出来，比如分成关键页面的3-4张效果图 4. 把所有的参考图和背景图通通给Claude code 5. 有一些细节还原问题，我会倾向于发到Paper进行手动修改，效率更高，改完再发回Claude code，基本就完成了 整体时间大概在一天吧，其中很多内容包括FAQ，Privacy的内容都是让AI基于对项目的理解自己写的。当然前提也是我认为不需要在这个网站上投入很多精力，所以这种效果我能接受，就点到为止了。

说实话把Drawell发出来是一种释怀，手上同时进行的项目太多了，每发出一个就像心里有一块石头落地 但能发出来，很大的原因是因为我手动暂停了其他项目…这周，要开始全力推进我的个人网站了

☝️🤓 How to draw beautifully ? draw a beauty👌 前阵子有人问我要如何画好图 :多画美人吧 @Dottyyidi #RealisticDrawing# #PencilArt# #ArtTutorial# #DrawBeautifulWomen# #NSFWArt# #素描#

做交互做视频时，跟 AI Agent 描述半天动画效果也说不明白？-- 1 分钟认识 13 类常见 Motion 动效名称 “从右边快速滑入，停下时稍微回弹一下……” 为了让 Agent 做出想要的动画，你是否写了很长一段描述，结果它还是理解错了？ 很多时候，不是描述得不够详细，而是缺少双方都能准确理解的动效名称。与其反复解释动画长什么样，不如直接说出它的名字。 这段不到 1 分钟的视频整理并演示了 13 类常见 Motion 动画： 1. 页面与视图切换：Push Slide 2. 元素进入与退出：Staggered Entrance 3. 状态变化：State Morph 4. 操作反馈：Press + Ripple 5. 滚动动画：Scroll-driven Transform 6. 导航动画：Sliding Indicator + Drawer 7. 加载与等待：Spinner + Shimmer 8. 数据变化：Bar Growth 9. 布局重排：FLIP Reorder 10. 手势与物理运动：Drag + Spring 11. 引导与提示：Pulse + Popover 12. 品牌与装饰动画：Orbit + Assemble 13. 3D 与空间运动：3D Card Flip 每个片段都包含醒目的中英文名称和直观示例，帮助你快速理解动画的视觉表现与适用方向。 知道名字之后，你不仅能更快找到参考，也能更准确地向 Agent、设计师或开发者表达需求。少写一大段模糊描述，用一个明确的名称，让所有人更快理解你想要的动画。

Codex 生成视频配音的做法也令人虎躯一震，它并没有按照文档指引（剪映+讯飞配音）来操作，而是采用工程手段，找到了一条比较通用的配音方案。 1）分帧截屏，将多图按序合成为一张图片（8x4，共 32 帧)，统一交给 AI 理解故事线，理解好了之后，AI 会生成每一关键帧的解说台词。 2）语音生成，它用到了开源的 text-to-speech 服务 rany2/edge-tts（10k star，这里应该是用到了我给它的全局设定，尽量“拿来主义”），将中英文台词分别合成为逐句音频，并严格对齐到时间轴。 3）视频合成，这个阶段基于 imageio/imageio-ffmpeg 提供的内置 ffmpeg，用 adelay + amix 完成配音与原声混音，再通过 subtitles 和 drawtext 一次性烧录双语字幕与缓动水印（视频里的水印被我处理掉了）。 这个模式感觉也适合将国语内容直接转换成英文内容，😄

Gemini 的解释： 在过去，Canvas 只是“无脑”的像素画布。如果你想在 Canvas 里渲染一段 UI 或文字，你会失去浏览器原生自带的一切能力： • 没有屏幕阅读器支持（无障碍访问彻底瘫痪）。 • 无法原生长按选中文本。 • 无法处理复杂的多语言排版、连字和字体后备。 • 连最基础的点击侦测（Hit Testing），都需要开发者手写数学公式在底层模拟。 对于构建复杂生产力工具、AI 客户端界面或图形密集型应用来说，这意味着你要么在 Canvas 之上悬浮一层 DOM（容易出现同步错位和性能瓶颈），要么就像某些头部设计软件一样，咬牙从零开始用 WebGL 重写一整套文本和布局引擎。 HTML-in-Canvas 完美解决了这个痛点： 1.底层引擎分工：让 HTML 负责它最擅长的结构、语义、排版和原生交互；让 Canvas 和 GPU 负责极致的像素级特效渲染。 2.DOM 级着色器 (Shaders)：这是它爆火的核心原因。你现在可以直接将 WebGL 片段着色器应用到标准的 HTML 元素上。比如，让一个普通的 表单在打字时产生像素级的液化扭曲、扫描线切割，或者基于鼠标位置生成精确计算的 SDF (有向距离场) 动态光影。在经过 GPU 疯狂扭曲后，这个表单依然可以正常打字和响应事件。 3.3D 空间中的真实 UI：可以极其简单地将一个功能完整的 HTML 网页，当作纹理贴图完美附着在一个 3D 旋转的立方体表面，且依然可点可交互。 核心 API 原理 它的实现机制极其精简，主要依赖三个新的原语： • layoutsubtree 属性：加在 标签上。它允许 HTML 元素作为 Canvas 的子节点存在，并参与浏览器的正常 DOM 布局树计算，但默认不绘制到屏幕上。 • drawElementImage() 方法：将 DOM 元素捕获并绘制为 Canvas 像素。它会返回一个变换矩阵（Transform Matrix），在底层自动将真实的 DOM 物理坐标与画布上像素的渲染坐标保持完美同步。 • onpaint 事件：一个全新的响应式渲染机制。取代了传统极其消耗性能的 requestAnimationFrame 轮询，只有当子元素的渲染内容真正发生变化时，才会触发重绘。