把 AI 的 UI 设计能力推到极限
文章探索用 AI 生成高质量界面设计的边界，介绍让 Agent 做界面设计的方法：先按品类和品牌推出设计方向，生成多套可对比的方案，再通过实际截图进行迭代，避免直接套用模型的默认审美模板。作者还开源了 oil-ui 项目，展示如何把 AI 的 UI 设计能力推到极限。
全部文档 / 标签: 前端
122 篇
How to Stop Making your Apps Look Like AI Slop
作者指出AI构建的应用虽然强大，但界面千篇一律：相同的圆角卡片、柔和渐变和仪表盘布局。为此他制作了一个Claude Code技能来重新设计应用界面。该技能首先为应用寻找契合的视觉概念（如跑步应用围绕田径跑道），然后强制探索三个不同设计方向而非过早定稿，最后用iPhone真实分辨率渲染并进行自我批判，检测通用组件、层级弱化等AI生成特征。工作流为：概念→方向→设计→渲染→批判→优化。目标是让不同应用呈现不同世界，保留AI设计速度的同时避免AI感。
我构建了一个去除 AI slop 风格界面的 Skill
作者开发了一个 Claude Skill，用于解决 AI 生成应用界面千篇一律、缺乏个性的问题（如相同的卡片、渐变和模板化布局）。该 Skill 强迫 Claude 采用不同思路：先确立真实视觉概念，探索 3 个设计方向，选定一致的设计语言，按 iPhone 尺寸渲染界面，扫描明显的 AI slop 模式，最后进行批评与迭代优化。作者免费发放该 Skill，用户需转发并评论 'stop slop' 即可获取。其核心理念是：当所有人都在做 AI slop 应用时，你的产品必须与众不同才能成功。
用AI做小程序，先看懂这12个前端名词（附避坑指南）
文章以模拟做一个咖啡馆点单小程序为例，系统讲解微信原生小程序开发的12个核心前端概念。作者从WXML（页面结构）、WXSS（样式布局）、JavaScript/TypeScript（交互逻辑）、JSON（配置文件）四个分工入手，逐一解释Page页面注册、生命周期回调（onLoad/onShow/onHide等）、Component自定义组件、数据绑定（双花括号与wx:for/wx:if）以及事件绑定（bindtap与data-*传参）等名词。通过菜单、饮品规格、购物袋、确认订单四个页面的完整点单流程，让不熟悉前端的读者理解AI生成的小程序代码各自的作用，并提供了常见问题的避坑排查指南。
人人都是 UI 设计师：20 条设计军规讲透 UI 设计
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
从设计稿到真实代码：高保真还原的工程闭环
本文介绍了一套将 Figma 设计稿高保真还原到既有前端工程的 Agent 自动化流程。作者总结了五类高频还原问题：设计语义丢失、多页面样式不统一、标注与真实界面混淆、素材导出策略模糊、旧页面局部改造被全量覆写。解决方案包括：通过项目级规范、知识索引和错误情况补充构建实现约束层；采用双层组件映射（语义判断 + 真实 API 确认）提升组件复用率至接近 100%；推行标注前缀协议与三类素材标签；引入时间戳版本快照机制避免循环中重复拉取设计数据以降低成本；并建立统一视口、状态流转、固定数据等五重比对前提，形成六步视觉闭环流程，最终差异率低于 0.15 阈值，还原度超过 90%。
Building a design system for coding agents
文章介绍为编码 Agent 构建设计系统的实践：由于仓库中存在多个版本的相同控件，Agent 会复制混乱并放大问题。作者正在开发 design.how，提供可安装、可直接交给 Agent 使用的设计系统与六个免费 Skill：build-design-system 从现有应用构建语义 token、规范组件与校验规则；migrate-design-system 用多 Agent 协作迁移全应用并设置预算；token-mapping 按用途映射设计值；component-docs 生成组件文档；design-review 检查截图无法覆盖的交互状态。每个 Skill 附带 TESTS.md 与适配提示，可替换为团队自定义规则。
实测 Claude Sonnet 5.5，做 AI 代码动画这块断档领先 gpt6 但 3D 拉了
作者实测 Anthropic 新发布的 Claude Sonnet 5.5，与 Opus 5.5 对比其在代码动画、HTML PPT、3D 网页和写作等场景的表现。结果显示 Sonnet 5.5 价格便宜 50%、速度快 30%，代码动画效果领先 gpt6，执行力强、交付完整，但 3D 建模不如 Opus 5.5，且缺少 Opus 那种“创意溢出”。写作方面 Sonnet 5.5 节奏感甚至优于 Opus。作者总结其定位为及格线以上的执行模型，适合批量改 bug、文档整理等任务，建议与 Opus 5.5 组合使用以降本提速。
PDE 爆火，年薪最高 22w，普通人如何上车？【附完整路线】
文章介绍了新兴职业 PDE（Product Design Engineer，产品设计工程师），该岗位集产品思维、设计与开发于一身，美国高级岗位年薪可达 22 万美元。作者为普通人提供了一条 7 天上手路线：准备 v0、Cursor、GitHub、Vercel、Supabase 五个工具；用公式选择 7 天能完成的小项目；用一页需求卡收敛需求；用 v0 生成第一版原型；找 3 个真实用户测试并迭代；用 Cursor 接管代码、按需接入 Supabase；通过 Vercel 发布上线并整理作品集。最后给出求职关键词与简历写法建议，强调从第一个有人真正使用的产品开始转型。
我把《红楼梦》里的大观园，做成了一个能走进去的 3D 世界
作者将《红楼梦》中的大观园重建为可在浏览器中漫游的三维世界，把文本与空间放进同一窗口。项目整理了二十处景致，涵盖五十九回原文、三十三首诗词和一百五十八位人物。读者可点选景致查看对应原文与诗笺，跟随第十七回贾政游园路线导览，或在漫步模式中自由行走，并可切换四季、昼夜与天气共三十六种环境状态。整个项目依据原著游园路线与北京大观园复建格局推定，最终打包为约 2.7 MB 的 HTML 文件，离线也能体验，成为一份可交互、可行走的阅读批注。
做独立站或 AI 产品最耗时往往不是后端而是磨一个高转化落地页
作者分享了一套 Landing Page 高效工作流：先用 saaslandingpage.com 灵感库浏览数百个顶级 SaaS 产品的真实落地页，学习 Hero Section 和价值主张的设计；再借助 website-rebuild-skill（基于 Claude Code / AI Agent 的网站复刻工具）以像素级精度抓取结构、样式并重构干净代码。工作流为：选定对标案例，用 Skill 自动化重构基础骨架，替换自己的文案与品牌资产，可节省约 90% 前端排版时间，将原本一天的页面打磨工作大幅压缩，同时保证高质量还原。
我用 Codex 复现了 Opus 5.5 的动画玩法
作者因 Claude 账号被封，无法使用 Opus 5.5 的代码动画玩法，于是尝试用 Codex 复现该路线：将参考视频交给 Codex 分析画法、编写剧本、拆分镜，最终用 p5.js 和 Canvas 生成动画并导出带中文旁白、配乐的 MP4。作者还将做法整理成开源 Skill（wtt-code-animation-studio），支持剧本编写、十种画风推荐与选择、配音、渲染导出等全流程，并验证了同一角色在扁平、沙画、粒子等画法下的多种组合，以及随机三种风格混合的新故事测试片。
「闪电.skill」发布！Anthropic两周提速3倍的方法，拿来给自己用
作者介绍Anthropic用两周时间将claude.ai核心体验提速3倍的方法论：先量化指标、用指令数稳定测量、设置棘轮防止性能回退，并在150多个并行线程中由Claude找问题、人做取舍。作者照此方法让agent优化自己的4个网站并整理成「闪电.skill」，其中公众号排版器打开到能打字的耗时从2238毫秒降至209毫秒，减少90.7%。文章还分享了优化过程中的踩坑经验，如旧草稿覆盖风险、测量干扰等，并提供skill的安装方式供读者使用。
做了很多很多 0 Star 的小项目以后，我的作品被 OpenAI 点赞了
作者复盘了自己做过的40多个GitHub小项目（其中20个仍是0 Star），其中互动作品《清明上河图》获得5000多人次体验并得到OpenAI官方点赞。文章按项目类型详细分享了制作过程：清明上河图分段添加交互、邮票和夜景图像处理Skill、数学可视化页面、线上看展互动、口播动画等，讲述了灵感来源、与AI协作的提示方式、第一版后的迭代修改，以及从手稿、小流程、视觉规则到多端测试的七步可复用工作方法，鼓励持续做喜欢的小作品。
实测 GPT6 Sol 和 Luna 和 Claude Opus 5.5，我们再不用愁额度少和速度慢了
作者对 GPT-6 Sol、GPT-6 Luna 和 Claude Opus 5.5 三款新模型进行横向实测。价格方面，GPT-6 系列比 GPT5.6 便宜 50%，Opus 5.5 速度提升 30%、成本降低 40%。通过鹈鹕骑单车、可互动饺子网页、前端动效设计、写作 skill 生成、Blender 3D 建模复现舞蹈等多个案例对比，作者发现 Opus 5.5 在终端编程和前端能力上依然领先，细节表现惊艳；GPT-6 Sol 速度极快且能力不俗；Luna 则适合简单批量 Agent 任务。总体来看三款新模型在性能与成本上均有显著进步。
项目启动前沟通文档目录：AI Agent 开发规范模板
作者宣布启动一个小项目，并分享了正式进入开发阶段前与团队/Agent 沟通完毕的项目文档目录结构。该目录包含 AGENTS.md（协作与代码规范）、README、DESIGN、CHANGELOG、TODO，以及 docs 目录下的项目规格、架构、组件规范、页面结构、开发流程、组件注册分发和 Cloudflare 部署等文档。作者建议读者可以参考这套模板，或直接将其提供给 Agent 梳理使用，为 AI 辅助开发项目提供标准化的文档组织方式。
Polar: 如何让 LLM 写出的 UI 不偏离设计系统
本文翻译自 Polar 官方博客，介绍其新设计系统 Orbit 背后的思考。随着 LLM 和 Coding Agent 大量参与前端 UI 开发，传统基于 Tailwind 字符串的样式写法导致设计一致性难以保障。Orbit 的核心思路是：将设计规范从文档升级为代码约束——Token 按设计意图命名（如 background-card），通过 StyleX 构建类型安全的 Box 组件作为唯一样式入口，禁止直接使用原始 div，并在 CI 中以 Oxlint 规则强制执行，使偏离设计系统的代码在机制上无法通过。文章强调文档只是概率性建议，CI 才是确定性契约。
想让AI能做出好看网页，先记住这7个设计基础规则
文章介绍用AI生成网页时的7个基础设计规则：对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效，而来自这些基本功，并建议在使用AI/Codex时用具体的设计语言描述需求（如统一对齐、拉开层级、增加留白、限制主色等），能让生成结果更稳定好看。
手把手教你用WorkBuddy做HTML视频
本文介绍了如何用 AI Agent 工具 WorkBuddy 结合 HyperFrames 制作 HTML 动画讲解视频的完整工作流。流程分四步：撰写适合可视化的口播稿、录制并剪辑配音、用剪映生成并校对 SRT 字幕、将配音/SRT/视觉参考图交给 WorkBuddy 生成 HTML 画面并渲染成 MP4。核心技巧在于利用 SRT 字幕的时间戳为画面精确"排期"，避免 AI 猜测页面节奏导致的音画不同步。生成满意后可将 HTML 作为模板复用，后续只需替换音频和字幕即可持续产出风格统一的视频，适合知识讲解、产品介绍等不露脸口播场景。
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，适合前端与设计开发场景使用。
8 个提升 UI/Web 设计审美的灵感网站
文章推荐了 8 个适合 UI/Web 设计师收藏的灵感网站：getlayers.ai 提供 3D 场景与渐变背景素材，supahero.io 专注 Hero Section 参考，cta.gallery 研究按钮与 CTA 设计，loadmo.re 收集冲击力强的移动端网站，60fps.design 精选微交互与网页动画，recent.design 每日更新最新设计趋势，posts.design 提供社交媒体视觉参考，navbar.gallery 专注导航栏设计。作者还分享了个人工作流程：找参考、拆视觉、拆动效、AI 生成，最后用 Codex 实现落地。
Rico MD 更新：新增 7 套公众号排版，接入 gzh-design-skill 主题体系
作者介绍了其公众号 Markdown 编辑器 Rico MD 的一次重大更新：接入开源排版 SKILL「gzh-design-skill」的主题体系，新增 7 套公众号排版主题（如摸鱼绿、红白色系、石墨极简风等），支持自定义封面模板字段、文末互动卡、文档与图片打包导出、标题正文行高间距自定义等功能。文章还说明了主题版权与 AGPL-3.0 许可处理方式，以及适配中舍弃的部分。该工具支持左侧 Markdown 编辑、右侧实时预览、一键复制到公众号后台，在线版与开源仓库均已提供。
多领国风格 shadcn 组件库推荐
作者在推特上分享了一套多领国（Duolingo）风格的 shadcn 组件库，其特点是游戏卡通风格。作者推荐喜欢这种设计风格的开发者不要错过，并附上了组件库的链接和展示图片。这是一条简短的前端 UI 组件资源分享内容，适合正在寻找特色设计组件库的前端开发者参考使用。
Vibe Coding 网页动效词典（下篇）：组件反馈、布局过渡与页面转场
本文是 Vibe Coding 网页动效词典的下篇，从第 37 个词继续，涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效；数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效；布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例，最后介绍第四层 UX 规则（反馈、操作暗示等），帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
Remotion小白裁缝秘诀Ⅰ：组件和案例演示
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
Vibe Coding 网页动效词典（上篇）：教你准确描述页面怎么动
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
越改越烂！为什么 AI 自动修改 UI 总是翻车？「附终极解法」
作者分享用 AI 复刻页面时踩过的坑，搭建了渲染、截图、逐像素比对、模型诊断再修改的自动工作流。实测发现模型并非每轮都变好，有时越改越烂，最终保留历史最佳。作者总结三个关键坑：尺寸不一致、动画未播完、在坏版本上叠补丁，并给出三条规则：统一尺寸、固定渲染环境、每轮从历史最佳继续。
个人网站上线指南｜域名、部署和上线 一次讲清
本文是一篇面向新手的个人网站上线教程，用通俗语言讲解从本地项目到线上访问的完整流程。文章分为四部分：先解释GitHub、Vercel、域名、DNS等概念及平台选择；再以GitHub+Vercel为例，手把手演示创建仓库、上传代码、导入部署、查看结果；接着介绍购买域名、配置DNS解析、绑定自定义网址；最后说明后续更新流程和费用构成。作者强调理解流程的重要性，并提供了可发给AI Agent的提示词模板，帮助读者在遇到问题时能定位排查。
用 Astra 高保真复刻视觉动效的 4 个实操案例与提示词秘诀
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻：高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻（WebGL+GLSL 技术栈）以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论，如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等，并分享核心提示词「一边参考原片一边修改直到近乎一样」，总结 AI 自查与人工定点反馈两种协作路径，附通用 Prompt 模板与止损建议，展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
高密度页面怎么组织：一份信息呈现指南
作者以前端资源缩减为契机，从后端工程师视角亲自承担前端项目，总结了高密度页面的信息组织指南。文章指出 CRUD 页面只解决数据增删改查，却不回答用户先看什么、依据什么做决定。作者提出组织信息架构的三个核心问题：用户最该看到什么、需要哪些关联信息、完成后要做什么。并以 GitHub Projects、Notion 为例，对比表格、看板、日历等'表达骨架'的适用场景，给出卡片网格、看板、日历排期、仪表盘、层级树、状态墙等 19 种信息呈现方式的参考表。指南还可直接交给 Agent 用于检查和改造前端页面，让 AI 辅助但由人把握业务判断。
