Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件
文章针对 AI 做网页时指令模糊的问题，提出了“视觉词典”概念。通过拆解页面布局、结构、导航和组件四个层级，提供了 26 个具体的网页设计模式（如 Bento Grid、Masonry Layout、Sticky Navbar）。每个词条包含概念说明、适用场景及可直接复制给 AI 的提示词，旨在帮助用户更精准地指挥 AI 生成高质量的网页设计。
技术 / 前端
125 篇
React Bits：适合作品集和视觉官网的动画组件库
React Bits 是一个包含140+免费组件的动画组件源码库，支持复制源码或通过 shadcn CLI 安装。它适合制作产品官网、作品集等需要强视觉效果的页面，可与 shadcn/ui 搭配使用，但需注意部分组件对性能的影响。
电商详情页设计：三列布局与高级视觉呈现
文章探讨了电商详情页设计的常见误区，建议采用三列布局将用户问题拆解，提升页面的专业感。左列展示产品与口感，中列解释成分与功效，右列对比差异与风味。通过统一的标题、图标和留白系统，保持旗舰级视觉效果。同时提供了生成高端茶饮品牌详情页的详细提示词。
电商详情页设计：冰淇淋产品页的视觉策略
文章探讨冰淇淋产品电商详情页的设计策略，建议每个模块使用一种主风味色以引导用户，通过圆形拼盘展示多口味，利用波浪形高饱和色块增加页面高潮。结合GPT提示词，强调高品质视觉和结构严谨性，打造既活泼又有序的详情页。
Media Effects & Overlays
本文介绍了 HyperFrames 的两项新功能：Media Effects 和 Media Overlays。前者通过确定性着色器处理视频或图像像素，后者提供可编辑的 HTML/CSS/GSAP 覆盖层。文章详细解释了两者的区别、安装方法、实现代码及使用技巧，强调如何通过命令行或 Studio 界面高效应用这些视觉特效。
Coding your color grade
文章介绍了 HyperFrames 平台新增的调色功能，提供专业的调色套件，包括色轮、RGB曲线、HSL选择、示波器和自定义LUT等。支持通过CLI命令或自然语言交互对视频和图像进行像素级调色处理，所见即所得，并详细说明了实现原理、代码集成方式及最佳实践。
用代码做视频：HyperFrames 和 Remotion 选型指南
文章对比了 HyperFrames 和 Remotion 两个代码生成视频框架。HyperFrames 基于 HTML/GSAP，零构建、AI 友好，适合从零构建的动画和 AI 自动化管线；Remotion 基于 React，支持视频导入叠加和批量渲染，适合在已有视频素材上合成。作者建议根据底层是否含视频、AI 参与度等场景按需选型。
开源HTML PPT项目Bento：动效炫酷，支持AI修改
Bento是一个开源的HTML PPT项目，动效炫酷，仅需一个HTML文件即可实现核心功能，支持文本编辑、全屏播放和多人协作。文档采用明文JSON格式，便于AI修改迭代。
邮票式模块网格：解决信息型海报设计问题
文章介绍了一种名为“邮票式模块网格”的设计风格，结合了邮票视觉和便当盒网格，通过有序的模块布局解决信息型海报内容多易乱的问题，提升设计的秩序感和收藏感。
使用AI和Three.js构建交互式3D机械Web应用
作者分享了利用AI结合Three.js和WebGL技术，将运动、机械和对称性转化为交互式3D体验的开发流程。通过提供过往代码和参考，AI生成新应用的概念和UI设计，最终实现了包含齿轮、陀螺仪等结构的Web应用。
如何让你的 App 质感提升 10 倍（速查表）
文章分享了提升应用质感的 9 个关键技巧：优化引导流程、添加有意义的动效、精心设计空状态、增加触觉反馈、统一图标风格、提升响应速度、使用人性化文案、研究优秀应用案例，以及寻求专业设计团队支持。强调通过细节打磨而非单纯增加功能来改善用户体验。
网页上线：最快路径，不从域名开始
本文介绍了个人网页上线的最小闭环路径。针对静态网页，作者建议直接使用 GitHub Pages 部署，无需域名、DNS 和备案。文章厘清了 GitHub、Vercel、域名及备案的关系，指出非商业项目可暂用平台网址，按需后续升级。
Bolt开源bolt-slides：让每一页PPT变成动态网页
Bolt开源了AI PPT项目bolt-slides，将每页幻灯片转化为可运行的网页组件，支持实时数据、3D场景和产品原型嵌入，解决传统AI PPT的通用模板和静态问题。
用 Skills 给 AI Agent 注入设计品味
介绍了开源技能库 emilkowalski/skills，它能为 AI 编程 Agent 注入设计品味，解决 AI 生成 UI 动画和交互时缺乏质感的问题。文章详解了其核心功能、安装方法、实操流程，并对比了 Taste-Skill、Hallmark 等类似工具的差异。
Vibe Coding 顶级审美 拯救你的网页
文章推荐了多个优质网站，如Landing Love、Land-book、Awwwards等，帮助开发者提升网页审美和动效设计，解决界面丑陋问题，适合前端开发者和设计师参考。
前端设计技能指南：拒绝 AI 烂俗审美
本文是一份前端设计系统技能指南，旨在创造具有鲜明视觉特征的生产级界面。文章强调从理解上下文、坚持极端艺术指导、发明标志性元素入手，严格规定字体、色彩、布局、动效及材质的硬性规则，要求摒弃 Inter 字体、紫色渐变等常见 AI 烂俗审美。同时明确了无障碍访问、响应式设计、性能优化及错误处理等生产要求，确保叙事一致性。
1分钟认识13类常见Motion动效名称
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
10分钟上线网站：Vercel保姆级教程，含部署失败排坑指南
本文是建站系列的第四篇，提供了详细的 Vercel 部署教程。文章介绍了 Vercel 的免费额度与商业模式，涵盖了注册流程、单文件及 Fork 模板项目的部署步骤。重点讲解了如何配置框架预设和环境变量，并提供了利用 AI 辅助排查部署失败问题的方法。最后，针对国内访问 Vercel 不稳定的问题，作者给出了绑定自定义域名等解决方案。
前端设计新工具：Taste-Skill 与 Impeccable
GitHub 上两个前端设计项目爆火，旨在提升 AI 的设计审美。Taste-Skill 作为视觉自查系统，能纠正配色和布局问题；Impeccable 提供核心命令和避坑指南，解决布局逻辑和动效难题。两者结合可显著提升前端开发效率与设计质量。
中国传统配色538种现已开源
小小东整理了538种中国传统配色并开源至GitHub，项目中包含颜色展示、配色建议、颜色知识及用途示例。用户可在项目页面批量下载资源包，作者表示后续将补充缺失颜色并计划开发成实用网站。
前端动画王者GSAP发布官方Skill，赋能AI实现Apple级动效
前端动画库GSAP官方推出了全新的gsap-skills工具包。该工具支持Cursor、Claude Code等主流AI Agent，内置25+高级实战案例，涵盖Timeline、ScrollTrigger等核心技能。GSAP现全部免费开源，支持React、Vue等全框架，结合AI可瞬间生成流畅、专业的Apple级网页动效。
HTML 做 PPT 与社交媒体卡片生成器
作者 Leo Xiang 乘着“HTML 做 PPT”的热潮，开发了一款“好看卡片”生成器。该工具支持一键生成小红书、即刻、X 等平台的社交媒体卡片，提供 11 个主题及 8000+ 设计语言组合，并包含信息图效果。
在 Luffa SuperBox 上做一本「互动书」保姆级操作指南
这是一份关于如何将书籍转化为小程序互动书的实战指南。文章以《金融周期》为例，详细拆解了从内容设计（核心数学框架、反预期事件）到技术实现（Luffa 注册、数学验证、页面开发、数据代理）的全流程。作者强调AI负责代码实现，人类负责内容把关，并特别指出API密钥安全、数学公式验证及模拟器设计的关键点，旨在帮助非技术人员或AI Coder用户快速上线高质量的互动学习产品。
用 AI 写前端界面生成风格千篇一律
文章指出了利用 AI 编写前端界面时风格单一、提示词难以精确描述的问题。作者推荐了 'Awesome Design Skills' 合集，该合集包含 67 套设计系统技能文件，涵盖毛玻璃、极简等多种风格。用户只需一条命令即可引入这些规范，适配 Claude Code 等工具，从而让 AI 按照既定标准生成界面，极大提升了开发效率和风格的可控性。
基于 HyperFrames 构建 LLM 驱动的视频生成应用
文章介绍了如何利用 HyperFrames 和 LLM（大语言模型）构建低成本的视频生成系统。作者对比了传统图像生成模型（高昂成本、易产生幻觉）与基于代码生成（HTML）的方法，展示了如何以极低成本（低至 $0.02）生成可编辑的视觉故事。文章详细阐述了技术栈（Next.js, Vercel, AI SDK）和应用场景，如动画日志、数据视频化等。
有趣的交互式科学应用创意 Part 2
文章展示了作者开发的系列交互式科学应用 Demo，包括黑洞时空扭曲可视化、达芬奇扑翼机机制实现以及科幻彗星探测器等。作者结合了 GPT Images、Nano Banana 2 进行设计，并使用 Gemini 3.1 Pro 编写代码。文章还分享了设计灵感和前端控件交互示例，旨在打造儿时向往的科学杂志风格的互动体验。
Image-to-Code：构建优质前端的新工作流
文章指出直接让 AI 生成前端代码往往平庸，提出了一种“图生码”的工作流。该方法主张先使用 ChatGPT Images 2.0 等工具分块生成高质量的设计图，确立视觉风格、布局和素材，再交由编码 Agent 逐段还原实现。作者详细阐述了如何通过精准的风格词汇、分区域生成及素材提取来提升网站品质，将设计决策与代码实现解耦，从而获得比直接提示编程更美观、更专业的界面效果。
DESIGN.md：网页设计的极致工作流升级
文章介绍了一种通过创建 DESIGN.md 文件来规范 AI 辅助网页设计工作流的方法。作者指出，直接使用 AI 生成不同页面（如定价页、着陆页）时，往往会导致风格不统一。解决方法是将字体、配色、动画时间轴、布局规则等提取到 DESIGN.md 中，并将其作为上下文提供给 Claude Design。这样生成的所有页面都能保持一致的视觉风格（如 Liquid Glass 风格），从而实现从“逐个提示”到“系统化构建整个站点”的效率飞跃。
如何用 AI 构建价值 5000 美元的落地页
文章作者 Prajwal Tomar 分享了如何利用 AI 工具（主要是 Lovable）和精准的提示词，打造出一个具有电影级滚动效果、3D 模型和 Shader 动效的高端落地页。文章的核心观点是：AI 生成的页面之所以显得平庸，是因为提示词缺乏具体性。作者详细展示了从 Hero 区域的 3D 倾斜、Spline 3D 模型集成、WebGL 特效到滚动驱动的层级堆叠架构的实现过程，强调了具体参数、代码片段引用以及空间架构定义的重要性。
Top YC 公司着陆页的通用结构解析
文章分析了 5 家顶尖 YC 孵化公司（如 Resend, Deel 等）的着陆页设计，发现其结构惊人一致。核心模式包括：一行式标题配产品截图、首屏展示社会认同、单一的重复性 CTA、展示创始人照片以建立信任、公开透明的定价信息、精选 3-6 个核心功能，以及以行动号召结尾。这种结构符合用户“是什么-谁在用-怎么用-多少钱”的决策心理，能有效提升转化率。
