审美提升(下)：硅谷设计师都在用的10个UI组件工具库
作者精选10个设计师宝藏资源，覆盖配色（Coolors）、字体、图标、插画、动效、3D设计、图片、CTA按钮、品牌视觉管理和AI交互模式等领域。文章强调审美提升靠日复一日的浸泡，每个资源都附推荐理由与使用建议，帮助读者建立自己的资源库与判断标准，逐步将好设计运用到作品中。
全部文档 / 标签: 动效
19 篇
Huashu-motion正式发布：一键直出商业级产品宣传片的Skill
花叔开源了Huashu-motion，一个让Claude Code、Codex等coding agent一键生成商业级产品宣传片的skill。项目对标Apple、Google、Anthropic的发布片水准，通过分析21支真实发布片和142支高互动动效片，提炼出导演规则。用户只需一句话，agent就会读产品、出三个设计方向、写节奏单、自动配乐配音效，最后在浏览器编辑器中支持点选修改。作者一天内用它制作了约二十支宣传片，成本极低（约2元/支）。项目已在GitHub开源，附带20种运动语言、10个模板和完整方法文档。
从0搭建个人网站：8大类60+UI设计必备清单
本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
Apple Design：提升 AI 界面设计品味的 Skill 合集推荐
作者分享在开发 APP 时使用的 Apple Design Skill，它将 Apple WWDC 设计分享中的界面与动效原则整理成 AI 指导，帮助改善界面层级、反馈和整体连贯性，效果接近苹果原生 App 风格。该 Skill 来自 Linear 设计师 Emil Kowalski 开源的 AI Agent Skills 项目（GitHub Star 近 4w），还包括设计工程总则、动画制作与审查、原型方案生成、移动端网页优化、Swift 编写、UI 组件库选择等多个实用 Skill，适合前端与设计开发场景使用。
Remotion小白裁缝秘诀Ⅰ：组件和案例演示
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
用 Astra 高保真复刻视觉动效的 4 个实操案例与提示词秘诀
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻：高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻（WebGL+GLSL 技术栈）以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论，如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等，并分享核心提示词「一边参考原片一边修改直到近乎一样」，总结 AI 自查与人工定点反馈两种协作路径，附通用 Prompt 模板与止损建议，展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
video-shotcraft：用 Claude Code 自动生成产品宣传片的开源项目
文章介绍了一个 6.4k star 的开源 AI Agent Skill 项目 video-shotcraft，安装后可让 Claude Code 或 Codex 像动效工作室一样制作产品宣传片。丢入产品页面后，它能自动分镜、做动画、配音效，通过 Remotion 渲染出电影感宣传视频，包含真实页面截图、2.5D 运镜和卡点剪辑。项目提供 152 张分镜配方卡、209 个动效预览、36 秒成片模板、149 个电影级音效及 5 首可商用 BGM。分镜配方来自对 Notion、Figma 等大厂宣传片逐帧拆解。成片还可直接导出剪映工程继续编辑，Apache-2.0 开源。
前端 UI/UX 设计：一套从灵感到落地的资源地图
作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
三号设计周刊 Vol.33｜Figma 设计经验封装与 AI 工作流
本期周刊探讨了 Figma Agent Skills 生态成型，设计经验现可被封装复用；Figma 实验证明 AI 能提速 20%。此外涵盖 iOS 27 视觉更新、Instagram 换标风波、DeepSeek Harness 发布，以及多款动效与素材工具推荐，最后分析了 AI 原生 UI 组件库与交互细节。
用Codex手搓个人网页：我的AI协作实战经验
作者学习了Punk大佬的网页系列教程，利用周末两天时间，通过Codex独立完成了一个个人网页的开发并成功上线。文章分享了三个核心经验：1. 开发前需与AI充分沟通设计方案，确保方案清晰可执行；2. 迭代时可将对标网页的动效录屏给AI，通过拆帧理解并复述确认；3. 若无法清晰描述动效，可让ChatGPT生成布局图，再交给Codex实现。作者强调与AI交互的重要性，并计划继续优化网页。
（小白视觉篇）让AI做成高级页面，必须知道提示词
本文介绍了如何通过具体的提示词指导AI生成具有高级感的网页设计。内容涵盖了CSS质感（如毛玻璃、轻阴影、Bento网格）、排版规则、克制动效以及3D空间感的营造，旨在帮助零基础用户避免设计平庸。
一个让 Codex 直接变成产品视频导演的开源 Skillvideo-shotcraft
开发者Hailey发布了开源项目video-shotcraft，将Codex转化为产品视频导演。该项目能自动完成视觉定调、分镜设计、动画实现等流程，内置104套镜头配方、161种动效预览和149个音效，帮助非专业人士制作SaaS、App等产品的电影感宣传片。
开源HTML PPT项目Bento：动效炫酷，支持AI修改
Bento是一个开源的HTML PPT项目，动效炫酷，仅需一个HTML文件即可实现核心功能，支持文本编辑、全屏播放和多人协作。文档采用明文JSON格式，便于AI修改迭代。
如何让你的 App 质感提升 10 倍（速查表）
文章分享了提升应用质感的 9 个关键技巧：优化引导流程、添加有意义的动效、精心设计空状态、增加触觉反馈、统一图标风格、提升响应速度、使用人性化文案、研究优秀应用案例，以及寻求专业设计团队支持。强调通过细节打磨而非单纯增加功能来改善用户体验。
都说 Kimi 审美好，实测 7 个 Skills 来找出它的最佳搭配
文章通过实测 7 个不同的设计 Skill 与 Kimi K3 模型的搭配效果，评估其在网页设计、动效和交互方面的表现。测试发现，design-taste-frontend 和 Impeccable 表现最佳，而 Kimi K3 自身的审美能力已相当出色。Skill 的作用更像是更换创意总监，而非简单的加分升级，优秀的 Skill 应为模型提供指引而非限制。
Vibe Coding 顶级审美 拯救你的网页
文章推荐了多个优质网站，如Landing Love、Land-book、Awwwards等，帮助开发者提升网页审美和动效设计，解决界面丑陋问题，适合前端开发者和设计师参考。
ChatCut 安装、初始化与使用教程
本文介绍了ChatCut视频剪辑工具的运行逻辑、安装配置方法及实际使用流程。ChatCut通过Codex代理调用云端服务完成剪辑、配音、字幕和动效生成，支持可视化编辑与导出。文章详细解析了从需求输入到成片输出的全过程，并评价了其优缺点。
1分钟认识13类常见Motion动效名称
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
保姆级教程：AI视频动效系统
作者介绍了一套自研的视频动效系统，旨在利用AI技术辅助视频制作。该系统通过GitHub开源，用户只需三步即可生成专业视频动效：安装系统、修改文案数字、渲染下载。此外，该系统可与Codex结合，甚至喂给本地Agent（如Cola）进行动效管理。
