文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
文章介绍用AI生成网页时的7个基础设计规则：对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效，而来自这些基本功，并建议在使用AI/Codex时用具体的设计语言描述需求（如统一对齐、拉开层级、增加留白、限制主色等），能让生成结果更稳定好看。
作者分享了使用 Vibe Coding 进行 UI 设计的实践经验，总结了 7 个关键技巧：明确页面目标、具体化视觉描述、从产品提取视觉元素、使用参考图、描述交互流程、明确限制条件、多设备测试。这些方法能帮助 AI 生成更顺眼、更完整的产品级 UI。
作者分享了6个提示语技巧，用于消除DeepSeek和Codex生成代码动画/UI时的AI味。包括：删除重复无信息的文案、去掉多余的装饰框和阴影、为颜色分配固定用途、统一字号和图标对齐、一屏只讲一件事、优化动效使其服务于叙事和反馈。文中每个技巧都配有具体可用的提示语。作者还预告了正在开发的大剪辑Skill，能用DeepSeek剪出十分钟真人口播视频。
作者分享了使用 Opus 5.5 一次性生成 UI 空状态 SVG 插图的完整提示词模板。提示词详细规定了画布尺寸、底板斜纹、卡片样式、占位条、Remix icon 图标、强调色使用规则、深色模式配色（CSS 变量 + data-theme 自动切换）、构图约束（缩小版真实产品界面而非插画）及技术细节（阴影用滤镜拼装、id 加随机前缀防冲突、可选弹出动画）。只需将【场景】替换即可复用，大幅节省设计精力。
文章盘点了近期爆火的 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 能力扩展标准。
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
本文介绍用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，适合从零搭建或迭代优化个人网站时收藏使用。
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
作者指出AI构建的应用虽然强大，但界面千篇一律：相同的圆角卡片、柔和渐变和仪表盘布局。为此他制作了一个Claude Code技能来重新设计应用界面。该技能首先为应用寻找契合的视觉概念（如跑步应用围绕田径跑道），然后强制探索三个不同设计方向而非过早定稿，最后用iPhone真实分辨率渲染并进行自我批判，检测通用组件、层级弱化等AI生成特征。工作流为：概念→方向→设计→渲染→批判→优化。目标是让不同应用呈现不同世界，保留AI设计速度的同时避免AI感。
