作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
作者整理了 20 种与动画、物理、3D、声音及交付相关的开源技能与工具库，涵盖 Remotion、HyperFrames、Anime.js、React Spring、PixiJS、p5.js、Paper.js、Matter.js、Three.js、Rapier、OGL、tsParticles、glTF Transform、GL Transitions、OBS Studio、Chatterbox、Tone.js、faster-whisper、OpenCut 和 FFmpeg。每个工具附有简介和 GitHub 链接，覆盖从视频渲染、动画编排、图形绘制到配音、字幕转录和视频编码交付的完整创作流程。
作者分享了6个提示语技巧，用于消除DeepSeek和Codex生成代码动画/UI时的AI味。包括：删除重复无信息的文案、去掉多余的装饰框和阴影、为颜色分配固定用途、统一字号和图标对齐、一屏只讲一件事、优化动效使其服务于叙事和反馈。文中每个技巧都配有具体可用的提示语。作者还预告了正在开发的大剪辑Skill，能用DeepSeek剪出十分钟真人口播视频。
作者 Dilum Sanjaya 发布了一个交互式学习应用 learn-esp32.vercel.app，延续其此前的 Arduino 学习工具，将复杂的 ESP32 硬件知识拆解为一个个简单电路课程，帮助初学者逐步上手。该应用使用 Opus 5.5 构建。帖子引发众多网友好评，有人建议将其开源，作者表示考虑构建一个开源项目，让任何人都能贡献自己的电路创意。该工具展示了 AI 辅助开发在硬件教育领域的应用潜力。
作者开发了一个免费开源的雅思背单词网站「词光」，收录 7298 个雅思词汇，每个词配有原创插画、英音美音发音和例句真人配音（使用 ElevenLabs 生成）。网站无需注册即可使用，通过词汇星图点亮星星的互动方式增加学习趣味。文章发布后获得大量好评，网友建议包括做成 App、支持自定义每日单词量、优化字体、改善配图记忆技巧等，作者均积极回应并表示会跟进改进，还计划支持初高中词库和扩展到其他学习领域。
作者介绍了开源项目 AI Design Skills，目前提供 landing-page-design 技能，适用于 Claude Code、Cursor、Codex 等可读取规则文件的 AI 编程工具。它不是现成模板，而是一套从内容到视觉的制作规则：先明确产品定位与用户目标，再组织页面结构；统一字体、间距、配色和动效等视觉系统；并补齐按钮悬停、加载、空页面、报错、表单校验、移动端适配和无障碍等交付细节，避免 AI 生成千篇一律的默认样式。评论区还交流了表单校验保留已填内容等实用经验。
作者分享使用 Claude Code 配合 DeepSeek Flash 1017 模型制作两个 Remotion 视频的经历，总成本不到 3 元。一个视频作为个人介绍页的开屏动画，另一个是 52 秒的 Media Kit 视频。作者基本只负责描述想法，通过开启 xhigh 思考模式、配置 workflow 并挂载 remotion-best-practices skill，模型即可直接实现效果。文章还介绍了该 skill 的路由机制：平时只占一句描述的上下文，需要时才按需读取转场、字幕、音效等子文档。作者提到之前担心的缓存命中问题已不存在，命中率超过 98%。
OpenPencil 是号称全球首款 AI 原生的开源矢量设计工具，GitHub 已获 6400+ Stars，90.6% 代码由 Rust 编写。它实现了 Design-as-Code：通过提示词在实时画布上生成和修改 UI。核心亮点包括：并发智能体团队将页面拆解为多个子任务并行流式渲染；多模型智能适配（Claude、GPT-4o、Gemini、MiniMax 等）；可通过 MCP Server 集成到 Claude Code、Cursor 等终端工具；.op 设计文件为纯 JSON 格式、Git 友好，可一键导出 React + Tailwind 或 HTML + CSS 代码；支持 P2P 实时协作与冲突回放。适合前端开发者和独立创作者提升生产力。
文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max，包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合，并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill，并用其生成高端 AI SaaS 官网，解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
作者分享了使用 Opus 5.5 一次性生成 UI 空状态 SVG 插图的完整提示词模板。提示词详细规定了画布尺寸、底板斜纹、卡片样式、占位条、Remix icon 图标、强调色使用规则、深色模式配色（CSS 变量 + data-theme 自动切换）、构图约束（缩小版真实产品界面而非插画）及技术细节（阴影用滤镜拼装、id 加随机前缀防冲突、可选弹出动画）。只需将【场景】替换即可复用，大幅节省设计精力。
花叔开源的AI设计技能huashu-design发布3.0版本，该技能可让agent自动生成网页、PPT、App原型、信息图等设计。3.0主要改进：先出六个候选再挑三个成稿；现实参照改为同媒介并先截图；风格库从60种扩到84种（新增中文与东亚风格）；App原型采用有构图的展示板；新增本机记录系统（经验、外观账本、设计体检）实现越用越懂用户；坚持事实核实。作者分享了三轮迭代的过程，核心教训是：对agent应加选项而非禁令，禁令会让设计变得保守无聊，提供更多可见样例反而能激发更好的设计。
文章盘点了近期爆火的 5 个 Agent Skills 开源项目：Google Android 官方的安卓开发技能包 android/skills、K-Dense 的 177 项覆盖多学科的 AI 科学家技能库、rehan-remade 的万能游戏 Mod 工具、QingYunA 的一页式 HTML 回答方案，以及 oil-oil 的 UI 设计师技能。这些项目展示了 Skills 生态的爆发：官方下场教 AI 写安卓、Agent 变身科研专家、一句话改游戏、答案自带排版、AI 具备审美能力，标志着 Agent Skills 正成为下一代 AI 能力扩展标准。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
作者基于最新更新的 DeepSeek-V4.1-Flash-1017 模型，搭配 workbuddy 平台和 Anatomy 这个 Skill，用一句话需求分别制作了电动车工作原理和火箭原理两个中文交互式动画实验台，并部署到 Cloudflare。文章详细展示了制作过程：包括能量回收的负号读数、推力计算的模型假设等物理细节，也坦诚记录了脚本变量重复、部件遮挡冲突、满电回收测试失败等问题的排查与修复。作者强调「一句话开工」背后更需要制作、报错、修正和检查，并分享了从具体小需求出发使用 AI 工具的实践经验，主张通过动手交互验证 AI 产出是否可用。
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
作者分享了音效生成工具 Earshot v0.3 的使用体验，强调音效对动画质感的重要性。Earshot 内置 201 种全部由代码生成的音效，可一键生成整套音效包，且音效可精确到某一帧与动画完美同步，现已集成进 Cinetic 动效设计 Skill。作者认为 AI 不仅能做出漂亮动画，还能用代码精准控制声音，实现真正的声画合一。此外代码生成音效无版权风险，背景音乐也可用 strudel 制作。
本文介绍了一种轻量级数字人口型同步方案：作者为英语陪练 App 制作了 6 个虚拟老师，每个角色仅需一张图片加约 0.5MB 素材，无需 GPU。核心是利用 Kokoro TTS 合成语音时天然携带的音素时长信息，将 44 个英语音素按视觉相似度合并为 9 种嘴型（viseme），生成时间轴通过响应头传递给前端。文章详细讲解了音素与视位的映射、音量修正停顿、LivePortrait 生成待机视频和嘴型图、以及 canvas 统一渲染等技术细节，实测嘴型偏差中位数约 0.1 秒，60 帧不掉帧。
本文介绍用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，适合从零搭建或迭代优化个人网站时收藏使用。
作者以自媒体真实工作场景实测Google新发布的Gemini 4 Argon模型。通过鹈鹕骑自行车SVG动画、爆款视频拆解与提示词还原、公众号文章风格分析与选题生成、五道前端实战题（数据看板、3D宫殿、品牌官网、浏览器合成器等）进行评测。结论是该模型跑分第一，长视频理解和前端能力出色，写作能力介于Claude Opus和GPT之间，并提醒读者注意订阅档位和API优惠价截止时间。
本文是针对 Google 最新旗舰推理模型 Gemini 4 Argon 的保姆级使用教程。文章介绍了使用该模型的两种方式：一是通过 Antigravity 桌面版订阅会员直接使用；二是安装 Gemini CLI 并配合开源工具 CC-Switch 一键导入第三方中转站配置。教程覆盖 Mac 和 Windows 平台，从 Node.js 环境准备、CLI 安装、配置导入到最终提示词发送，全程无需编程基础。作者用一个完整的 3D 鹈鹕骑自行车网页游戏任务作为实战案例，展示 Argon 在空间想象力、几何结构推理和前端代码生成上的能力，并提供了在线试玩地址。
七年经验的产品经理总结了用 AI（豆包工作 + Skill）画原型的 8 种方法：对话直接出原型、手绘草图转原型、截图复刻再改、网址复刻再改、代码复刻原型、PRD 生成原型、通过 MCP 写入 Figma/Pencil/墨刀等设计工具、生图模型直接出效果图。文章按输入起点分类讲解各方法的适用场景与操作技巧，并给出按起点和场景的选择指南。相比传统设计工具拖拽画原型的流程，新方法将一个页面的绘制时间从半天压缩到几分钟，并可通过公开链接直接分享评审，大幅提升产品经理的效率。
作者用同样的 12 道题横向实测 Gemini 4 Argon、Claude Opus 5.5 与 GPT-6.1 Sol。Argon 在 Gemini 网页 App 中闭卷盲打，另两家则通过 Claude Code 与 Codex 命令行 Agent 拥有自测调试的工作流。结果 Argon 对 Opus 0 胜 5 平 7 负，对 GPT 2 胜 4 平 6 负。失分分两类：铁路、咖啡店、四季三题毁于作用域未定义、少打空格、404 地址等小错，补一两行即可运行，根源在 App 环境无法自测；而机械蝴蝶连杆伸缩、折纸裂开、书封视觉误读、西瓜过曝等属于硬伤。Argon 在视觉题与原创游戏上表现出色，Pro 额度也较充裕。
作者基于之前分享的地图动效 Skill，通过与 Agent 对话，仅用两三次对话、几千万 token 就开发出两个网页版产品：Map Motion Studio 可输入多个地点生成 3D 地形路线动效视频并支持下载；徒步星球则将全球 45 条经典徒步路线收进一个可交互的 3D 地球，支持按地貌、里程筛选，随机传送和沿线飞行视角，每条路线附距离、海拔、难度和途径点介绍。作者认为 AI Agent 的能力边界已几乎无法触及，什么软件都能实现，并计划继续探索 AI 的能力边界。
作者将此前「盲压浮雕」AI绘画概念做成无需AI的开源网页小工具「纸痕·盲压浮雕工坊」。导入照片后，工具可去除原色，通过亮边和阴影模拟纸面压痕浮雕效果，用户可调整纸色、压痕深浅、细节简化、侧光方向和纸纹，支持凸/凹切换和多种裁切比例，导出最高3200像素PNG。照片在浏览器本地处理，不上传服务器，无需登录和API，采用MIT许可证开源，适合制作人像配图、宠物纪念卡、壁纸等视觉素材。
作者受亦仁一条推文启发，开发了一款 Chrome 插件 x-follower-lens，用于在 X 上更真实地判断账号质量。插件不调 API、不发网络请求，仅读取页面已有数据，为账号添加七个标签：大 V、互关、疑似互粉号、新号老号、高互动低活跃等，通过粉丝关注比、互动率等指标识别互粉刷量账号。插件支持自定义显示样式和阈值，按粉丝量分五档颜色，并提供详情卡。从想法到可用插件仅用一个下午，作者借助 AI 完成开发，感慨技术门槛正在快速下降。插件已开源。
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
作者发布了一个纯网页小游戏站 NEON ARCADE，收录 6 款由 AI 参与创造的免费游戏，无需下载注册，浏览器即点即玩。游戏包括致敬红白机的《魂斗罗 2026》重制版（支持双人同屏和手机触屏）、12v12 据点争夺《星陨前线》、小队养成《智械前线》、霓虹生存《霓潮》、摩托竞速格斗《公路狂徒》以及以山海经神兽为 BOSS 的 3D 弹幕空战《雷霆战翼》。站内还设有「AI 放映厅」播放 AI 生成的 MV《千禧凝思》，站点将持续更新。
作者发布了免费开源的网页工具「纸境 Paperland」，可将普通照片转化为多层彩纸叠成的纸艺画效果。用户在浏览器中本地处理照片，无需登录或配置 API，可自行调整配色、纸层数（4-10 层）、形状概括程度、厚度和纸张纤维等参数，最终导出 PNG 图片。该工具适用于风景、人像、宠物、建筑等多种照片，可用于社交配图、壁纸、海报素材等场景，同时保护照片中的敏感个人信息。在线体验与源码均已公开。
本文介绍了如何利用国内流行的 AI Agent 产品 WorkBuddy，通过一段对话从零搭建个人作品集网站。作者以制作「糖果屋」作品集为例，详细讲解流程：明确需求并撰写提示词（特别强调要求 AI 不编造资料）、生成单文件网页、替换个人内容、利用 WorkBuddy 资料库作为小型服务器一键发布公开链接。文章还说明了发布后如何继续修改并保持原链接实时生效，最后给出验收清单：核对个人信息真实性、测试按钮跳转、检查手机排版、验证线上版本是否更新。
文章以模拟的Punk咖啡馆点单小程序为例，图文讲解15个常见交互名词：导航栏、TabBar、页内Tabs、卡片、单元格、按钮、点击热区、表单校验、选择器、轻提示、对话框、操作面板、骨架屏、空状态与错误状态、无障碍。沿“选咖啡→选规格→加入购物袋→确认订单”的完整点单路径，说明每一步页面应有的回应，如选中状态、数量与总价更新、加载与失败提示等。最后强调提交后要区分等待、失败和结果不明三种情况，结合服务端幂等防止重复下单，并给出用AI按业务补齐交互的模板。
