作者认为写代码对程序员来说不是难题，真正卡住人的是审美——界面丑到连自己都不想打开。他分享了偷懒招数：把顺眼的 UI 组件当积木，丢给 AI Agent 自己翻、挑并塞进项目。文章推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，链接可直接扔给 Claude Code、Codex 等编码 Agent，让它们自动扒组件、抠代码、调样式并集成到项目中。作者强调不需要懂设计，只要知道在哪里能淘到好看的组件就够了。
作者复盘了自己做过的40多个GitHub小项目（其中20个仍是0 Star），其中互动作品《清明上河图》获得5000多人次体验并得到OpenAI官方点赞。文章按项目类型详细分享了制作过程：清明上河图分段添加交互、邮票和夜景图像处理Skill、数学可视化页面、线上看展互动、口播动画等，讲述了灵感来源、与AI协作的提示方式、第一版后的迭代修改，以及从手稿、小流程、视觉规则到多端测试的七步可复用工作方法，鼓励持续做喜欢的小作品。
本文系统介绍了复古主义设计风格，阐述了怀旧情结在设计中的文化心理根源。作者梳理了不同年代的代表性复古风格：20-30年代的装饰艺术风格（Art Deco）以几何与奢华著称，50年代怀旧广告风格温馨亲切，70年代迷幻风格大胆张扬，80年代霓虹复古未来感，90年代复古科技与Y2K美学。文章还介绍了包豪斯、昭和复古等地区性风格，并区分了Vintage（真实老物件）与Retro（现代复古再创造）的概念差异。复古设计通过重现过去的美学符号唤起情感共鸣，在平面、UI和网页设计中被广泛应用。
本文翻译自 Polar 官方博客，介绍其新设计系统 Orbit 背后的思考。随着 LLM 和 Coding Agent 大量参与前端 UI 开发，传统基于 Tailwind 字符串的样式写法导致设计一致性难以保障。Orbit 的核心思路是：将设计规范从文档升级为代码约束——Token 按设计意图命名（如 background-card），通过 StyleX 构建类型安全的 Box 组件作为唯一样式入口，禁止直接使用原始 div，并在 CI 中以 Oxlint 规则强制执行，使偏离设计系统的代码在机制上无法通过。文章强调文档只是概率性建议，CI 才是确定性契约。
文章介绍用AI生成网页时的7个基础设计规则：对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效，而来自这些基本功，并建议在使用AI/Codex时用具体的设计语言描述需求（如统一对齐、拉开层级、增加留白、限制主色等），能让生成结果更稳定好看。
文章推荐了 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 实现落地。
作者以《清明上河图》为题材，用 Codex 辅助开发了一个可横向行走的交互插画项目。文章详细记录了从最初需求定义、视觉规则制定到技术选型的全过程：放弃 Three.js 改用 Canvas 2D 分层绘制，将鸟瞰式原画重构为适合人物行走的宋代街道，包含三个街区、141 位动态人物、虹桥过船和清明时雨等互动事件。开发中通过迭代修复遮挡、坐标、卡顿等问题，将帧率从 25 FPS 优化到 55 FPS，并配套 48 项自动测试，最终实现了用户可参与宋代街市生活的沉浸式体验。
作者在推特上分享了一套多领国（Duolingo）风格的 shadcn 组件库，其特点是游戏卡通风格。作者推荐喜欢这种设计风格的开发者不要错过，并附上了组件库的链接和展示图片。这是一条简短的前端 UI 组件资源分享内容，适合正在寻找特色设计组件库的前端开发者参考使用。
文章介绍如何解决AI生成网页时“不太对，再改一下”这类模糊修改意见难以落地的问题。作者拆解百灵 Ling-3.0-flash-VL 的官方演示，并提出用 Claude Code + Ling-3.0-flash-VL + Playwright MCP 的复现方案：VL 负责看参考图、生成代码和分析差异，Claude Code 负责读写文件和调用工具，Playwright 负责打开浏览器截图。关键细节是保持截图宽度一致，并让模型真正查看截图。作者建议从作品集首屏入手，通过截图对照迭代修改，让“看着不太对”变成可对照的图片差异。
JointJS 团队展示了一个基于 JointJS+ for React 构建的工作流画布模板，外观类似 n8n，但定位于帮助开发者在自己的产品中实现类似 n8n 的工作流 UI。该模板支持拖拽节点、连接端口、流畅平移数百个节点、撤销/重做、对齐辅助线以及导入导出功能，开发者只需编写工作流逻辑，画布部分由 JointJS 处理。在回复评论时，团队进一步说明其目的：随着越来越多应用集成 AI，为用户提供类似 n8n 的友好工作流界面，是超越简单聊天窗口的自然演进方向。
本文是 Vibe Coding 网页动效词典的下篇，从第 37 个词继续，涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效；数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效；布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例，最后介绍第四层 UX 规则（反馈、操作暗示等），帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
作者整理了 6 个品牌手册（Brand Guidelines）相关的收藏站点，帮助设计师解决品牌资料查找混乱的痛点。知名品牌案例库包括 Deck Gallery（提案与交付展示）、BrandGuidelines（全球品牌规范 PDF）、Branding Style Guides（可按多维筛选的规范档案库）；视觉应用类包括 Branding Website（快速建立视觉方向）、World Brand Design（品牌在包装、空间等真实媒介的应用展示）、Brand Archive（以品牌为单位的资产档案）。作者建议先明确需求再选择网站，并强调这些资产仅供研究学习，不可直接挪用。
作者从图形学视角拆解苹果折叠屏UI图标的设计原理。通过负空间、视觉重量平衡、邻近原则、黄金比例、斐波那契圆和黄金角等工具，分析了信号点大小与位置的设计巧思，指出苹果'主路径极致、兼容路径补偿'的设计哲学。文章还探讨了马赫带、侧抑制、视觉校正等人眼视觉原理，说明美感本质是图形适配大脑视觉算法，优秀的几何设计往往会自然收敛到黄金比例等规律，而AI难以取代的是对极端细节的视觉直觉。
本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
本文讲解 AI 绘图生成多人场景的方法论。指出多人图与单人图是不同的问题，需要回答三个核心问题：谁是第一主角、人物站位如何安排、人物之间是什么关系。文章提出多人图的五层结构（公共层、焦点层、身份卡、站位层、关系层、负面词），强调一张图只能有一个第一主角，信息量应按叙事权重分配而非平均分配。同时给出三角构图与景深分层的站位公式，并通过测骨台三人局、观礼台四人局两个完整案例，演示如何用 Prompt 实现清晰的主次关系与剧情感。
作者冰河推荐了三个能一键做出高级感设计的网站：Reactbits 提供160多个动画组件和滤镜工具，Animata 提供150多个MIT协议组件，VengenceUI 专注落地页和鼠标水波等效果。这些网站适合前端设计师快速提升作品颜值，强调信息差的价值。
作者分享用 AI 复刻页面时踩过的坑，搭建了渲染、截图、逐像素比对、模型诊断再修改的自动工作流。实测发现模型并非每轮都变好，有时越改越烂，最终保留历史最佳。作者总结三个关键坑：尺寸不一致、动画未播完、在坏版本上叠补丁，并给出三条规则：统一尺寸、固定渲染环境、每轮从历史最佳继续。
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻：高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻（WebGL+GLSL 技术栈）以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论，如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等，并分享核心提示词「一边参考原片一边修改直到近乎一样」，总结 AI 自查与人工定点反馈两种协作路径，附通用 Prompt 模板与止损建议，展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
作者以前端资源缩减为契机，从后端工程师视角亲自承担前端项目，总结了高密度页面的信息组织指南。文章指出 CRUD 页面只解决数据增删改查，却不回答用户先看什么、依据什么做决定。作者提出组织信息架构的三个核心问题：用户最该看到什么、需要哪些关联信息、完成后要做什么。并以 GitHub Projects、Notion 为例，对比表格、看板、日历等'表达骨架'的适用场景，给出卡片网格、看板、日历排期、仪表盘、层级树、状态墙等 19 种信息呈现方式的参考表。指南还可直接交给 Agent 用于检查和改造前端页面，让 AI 辅助但由人把握业务判断。
作者作为探索 AI 与设计工程化的设计师，复盘了三次搭建自有设计组件库的尝试：第一次直接基于 shadcn/ui 纯 vibe 开发，因现成视觉规范黑盒与覆盖负担而放弃；第二次回到 Figma 定义颜色、变量与基础组件，通过 Figma MCP 交给 AI 批量转换代码，并按视觉骨架将组件分类，但自搭预览环境成为维护包袱；第三次引入 Base UI 无头组件库接管行为结构、以语义 Token 命名视觉规则、用 Storybook 建立反馈回路，一天完成组件库开发。文章总结出关键经验：把设计判断抽象为可命名的 Token 契约、选用无审美包袱的无头底座、用切片沙箱建立反馈回路，为后续 Design Harness 打下稳固基石。
作者受苹果 iPhone Duo 官网折叠手机交互动效吸引，借助 Codex 复刻并拆解其实现原理。通过网页源码和网络请求证据，确认核心是实时 3D 渲染（Lotus 架构封装 Three.js），而非视频或图片序列。文章讲解了模型、贴图、场景配置、渲染引擎的组成，滑块 0 到 1 数值如何驱动铰链折叠与运镜，以及弹簧回弹、端点磁吸等物理拟真细节带来的「苹果高级感」，并分享了用 AI 辅助翻源码、复现交互和排错的完整学习方法。
作者推荐两个网页设计灵感平台：Motionsites 和 landbook。Motionsites 设计非常漂亮，自媒体博主常以其作品为模板，用户只需替换素材并用 Seedance 2.5 制作简单动效，一个 Prompt 即可生成自己的风格作品。Landbook 类别更全，涵盖落地页、注册、支付、电商等场景，设计感稍逊但覆盖制作平台或 APP 的方方面面。作者还提到可以直接录屏让 Astra 复刻设计，强调活学活用、值得收藏。
作者正在开发一款硬件设计工具，被称为“硬件领域的 Figma”。本文是第 6 天的构建日志，重点研究了透明外壳设计：探讨外壳厚度、折射、色调、磨砂玻璃、光学层以及从小开口到凸透镜等多种窗口形状对设备内部可视性的影响。目标是让透明度也实现参数化，让设计者可以控制硬件展示内部组件的方式，使设备内部成为设计的一部分。整个工具完全在网页端实时运行，未来还将包含发布等更多功能，不仅是美学工具。
文章讨论了 AI 生成前端页面虽然速度极快，但产出常带有模板味的问题。作者建议通过浏览 Layers 网站来提升界面高级感。与过去 Dribbble 上流行无法落地的概念稿不同，Layers 上吸引人的是克制的真实产品细节，如字形切换的微动效、干净的间距节奏和组件状态变化的自然过渡。作者认为，AI 把写界面的门槛降到地板上后，细节反而更加刺眼，一个产品看起来像粗糙玩具还是成熟软件，差异往往不在于功能结构，而在于那几处带品味的手感判断。
作者Emily Lai花3天时间、使用180+个提示词，借助多个前沿AI模型从零构建个人网站。工具栈包括：Grok用于研究个人网站参考和品牌方向，Claude Fable 5/5.1负责设计稿、代码和UX优化，GPT 6 Astra用于3D渲染和速度优化，Aside浏览器作为harness驱动屏幕，Wispr Flow语音转提示词。作者详细分享了从设计概念、品牌技能对比（如Impeccable、taste-skill）、BRAND.md创建，到内容整理的完整工作流。最终选择了'The Desk'记事本风格UI设计，包含工作、健康实验和公开学习内容。
作者分享了一个开源项目 M3E Canvas：可在浏览器中拖拽 Material 3 Expressive UI 组件，设计多个页面和交互流程，然后一键生成 Prompt，交给 Claude Code、Codex、Gemini CLI 或 Cursor 直接生成 App 代码。它支持 Android / Web 平台、多页面跳转、主题、动画和组件编排，实现了从“画 UI”到“AI 写代码”的高效衔接。针对“低代码编排”的质疑，作者认为借助 AI 能力，这一方式比以往更强大。
本文介绍了一套借助 AI 完成网站前端设计与实现的标准化工作流，面向没有代码基础的设计师和小白。作者强调先判断输入材料（仅有网页链接或有 GitHub 仓库），分路线让 AI 读项目、跑起来；通过黑盒走查梳理页面清单和用户任务路径，用 Mermaid 画页面地图；按影响范围排序设计（全局壳层→P0主流程→异常状态→辅助页面→细节打磨）；拆分结构、视觉、状态、细节四轮迭代让 AI 修改并浏览器验收。文章还附带多个可直接使用的提示词模板，并推荐了灵感与素材网站，帮助读者以低成本高效交付前端项目。
本文是字体图鉴下册，介绍第 21-40 种适合杂志、海报与 AI 生图的英文字体，涵盖无衬线（Graphik、Circular、GT America、Bebas Neue、DIN Condensed 等）、手写（Biro Script、Caveat、Sacramento）、书法与签名（Allura、SignPainter、Mrs Saint Delafield）等风格。每种字体附类型说明、适用场景和可直接复制的 AI 生图提示词。文末给出三层字体搭配方法论：高级衬线主标题 + 极简无衬线正文 + 手写点缀，并提供完整可复制的 AI 海报字体提示词模板。
