Vibe Coding 做 UI 的 7 个实用技巧
作者分享了使用 Vibe Coding 进行 UI 设计的实践经验，总结了 7 个关键技巧：明确页面目标、具体化视觉描述、从产品提取视觉元素、使用参考图、描述交互流程、明确限制条件、多设备测试。这些方法能帮助 AI 生成更顺眼、更完整的产品级 UI。
相关文档
Codex-OpenPencil 快速上手篇
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
人人都是 UI 设计师：20 条设计军规讲透 UI 设计
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
Vibe Coding 网页动效词典（上篇）：教你准确描述页面怎么动
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
自学Vibe Coding，这3个免费开源项目就够了，别买课
文章基于作者的Token消费经验，推荐了三个免费开源项目（Easy-Vibe、vibe-coding-cn、awesome-vibe-coding）作为学习Vibe Coding的替代方案，无需购买昂贵的课程。文章详细介绍了各项目的特点，提供了从入门到接单的详细学习路径，并分析了开源学习在更新速度、内容深度和社区支持上的优势。
产品开发从灵感到落地只需这套全栈开发 Agent
本文介绍了一套基于 Claude Code 的全栈开发 Agent 工作流，旨在帮助零基础小白将碎片化想法转化为专业的开发施工蓝图。该系统通过包含产品经理、需求分析师、技术架构师等在内的六个 AI 角色协作，引导用户完成需求文档、技术架构、界面设计等五份标准文档的产出。文章详细解析了 V3 版本的更新内容、目录结构、实操指令及多模型互检的开发流程，为非技术人员提供了一套低门槛、规范化的 AI 编程解决方案。
设计师指南：如何通过 Vibe Coding 快速构建精美的初创公司落地页
本文由设计师 clear 分享了如何利用 AI (Vibe Coding) 在 4-6 小时内构建高质量初创公司落地页的完整工作流。文章详细介绍了技术栈的选择（Cursor、Claude Code、Tailwind CSS、Framer Motion 等），并重点强调了分步构建的策略：从结构搭建、设计系统应用到内容填充，再到最后的细节打磨和移动端适配。作者指出，具体的提示词、参照现实设计案例以及保持视觉一致性是区分“Vibe Code”成品与垃圾代码的关键。
画过10,000+张 UI 高保真，我的设计审美心得（1）：8 条原则 + 5 个常用 AI 设计 Skill
作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
分享6个新提示语去掉DeepSeek新模型和codex的AI味
作者分享了6个提示语技巧，用于消除DeepSeek和Codex生成代码动画/UI时的AI味。包括：删除重复无信息的文案、去掉多余的装饰框和阴影、为颜色分配固定用途、统一字号和图标对齐、一屏只讲一件事、优化动效使其服务于叙事和反馈。文中每个技巧都配有具体可用的提示语。作者还预告了正在开发的大剪辑Skill，能用DeepSeek剪出十分钟真人口播视频。
Claude 改版为什么激怒了忠实用户？品牌升级里，最忌讳动这 3 样东西
文章分析 Claude 桌面端改版引发老用户不满的原因。作者认为设计团队追求工整规范，却抹掉了产品的独特质感。作者总结品牌升级三大禁忌：一是动了用户已习惯的感官直觉，把有辨识度的个性误当不规范，导致产品同质化；二是用内部生产效率代替用户实际收益，只强调3周快速上线却未说明对用户的具体好处；三是把'做出来了'当成'证明有效了'，缺乏真实任务中的行为数据验证。作者提出改版前应自问：用户心中的感官词是否被磨平、新收益能否覆盖学习成本、哪些特色必须保留。真正的升级是修掉硬伤、留住特色。
用 Claude Code + DeepSeek 1017 低成本制作 Remotion 视频
作者分享使用 Claude Code 配合 DeepSeek Flash 1017 模型制作两个 Remotion 视频的经历，总成本不到 3 元。一个视频作为个人介绍页的开屏动画，另一个是 52 秒的 Media Kit 视频。作者基本只负责描述想法，通过开启 xhigh 思考模式、配置 workflow 并挂载 remotion-best-practices skill，模型即可直接实现效果。文章还介绍了该 skill 的路由机制：平时只占一句描述的上下文，需要时才按需读取转场、字幕、音效等子文档。作者提到之前担心的缓存命中问题已不存在，命中率超过 98%。
Codex 终于有自己的 UIUX 设计外挂了
文章介绍了 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 One Shot 生成高质量空状态 SVG 插图
作者分享了使用 Opus 5.5 一次性生成 UI 空状态 SVG 插图的完整提示词模板。提示词详细规定了画布尺寸、底板斜纹、卡片样式、占位条、Remix icon 图标、强调色使用规则、深色模式配色（CSS 变量 + data-theme 自动切换）、构图约束（缩小版真实产品界面而非插画）及技术细节（阴影用滤镜拼装、id 加随机前缀防冲突、可选弹出动画）。只需将【场景】替换即可复用，大幅节省设计精力。
