想让AI能做出好看网页,先记住这7个设计基础规则
文章介绍用AI生成网页时的7个基础设计规则:对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效,而来自这些基本功,并建议在使用AI/Codex时用具体的设计语言描述需求(如统一对齐、拉开层级、增加留白、限制主色等),能让生成结果更稳定好看。
文章介绍用AI生成网页时的7个基础设计规则:对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效,而来自这些基本功,并建议在使用AI/Codex时用具体的设计语言描述需求(如统一对齐、拉开层级、增加留白、限制主色等),能让生成结果更稳定好看。
七条设计基础规则浅显易懂、结构清晰且附带AI提示词示例,实用性高,但内容为基础设计常识,缺乏深度论证和前沿信息。
作者基于 10 年 UI/UX 设计经验,结合 AI 工具实践,总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill:UI UX Pro Max(自动匹配行业风格)、Taste Skill(原创设计方向)、Impeccable(逐块打磨去 AI 味)、Emil Kowalski Skills(动效细节)、Hallmark(上线前检查),并配以场景演示。作者还分享了 8 条可复用的设计原则,包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等,强调工具在变但好的设计判断力依然无法被 AI 替代。
文章基于《Refactoring UI》一书,精选出 20 条实用的 UI 设计黄金军规,配合前后对比图讲解。作者指出在 AI 编码工具(Claude Code、Cursor 等)抹平写代码门槛后,UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖:为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则,帮助开发者补齐 UI 设计这块最后拼图。
作者介绍了开源项目 AI Design Skills,目前提供 landing-page-design 技能,适用于 Claude Code、Cursor、Codex 等可读取规则文件的 AI 编程工具。它不是现成模板,而是一套从内容到视觉的制作规则:先明确产品定位与用户目标,再组织页面结构;统一字体、间距、配色和动效等视觉系统;并补齐按钮悬停、加载、空页面、报错、表单校验、移动端适配和无障碍等交付细节,避免 AI 生成千篇一律的默认样式。评论区还交流了表单校验保留已填内容等实用经验。
作者分享了用 AI(Claude/Codex)通过 Mac 连接 Android 平板,几句话完成系统清理的实用技巧。提供的提示词涵盖五个方面:关闭广告和推广入口、按分类保留有用通知、更换带促销装饰的应用图标、停用无用预装应用(保留基础服务)、整理桌面布局。整个过程无需 root,适合优化新买的 Android 设备或帮家人清理手机。评论区还讨论了 WiFi 调试、iPhone Air + 安卓小平板的搭配,以及国内安卓系统广告难以关闭的现状。
文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max,包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合,并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill,并用其生成高端 AI SaaS 官网,解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词,用于提升界面视觉设计。内容涵盖:移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画(ease-out 250ms)、限制字号不超过 4 种(最小 12px)、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友:0.5px 边框在老旧或低分屏设备上可能不适用,提示偏个人经验;另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
本文是 Codex-OpenPencil 插件的快速上手教程,以设计一个服装购物 APP 为例,完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改,到图片生成与搜索、保存设计资产,再到设计稿转代码的全流程。插件免费开源,提供支持平移缩放的无限画布,Codex 负责理解需求并调用工具,OpenPencil 负责设计展示与编辑,可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
作者认为大量阅读 AI 论文是入门 AI 领域的极佳方式,并以朋友韭二老师爆肝 60 篇论文后入职盛大 evermind 为例。同时指出在 X 上分发论文解读是一种起号方式,该赛道仍有空白。针对论文小白,作者推荐一体化 AI 科研工作台 Open-Science:内置科研 skills 的 Agent 可检索文献、梳理方法并输出报告;支持灵活接入 Codex、Claude 等模型;研究过程可回溯审核;支持动手复现论文计算与分析。复现 5 篇以上即可深入掌握 AI 领域知识,项目已开源。
作者面对 PCB 固件逆向 5000 元、全新设计 3-5 万的报价,决定用 AI 自己动手。投入约 1176 元购买 J-LINK、电烙铁等工具,在 Codex 的指导下先抄板逆向电路原理图(通过反馈测试结果让 AI 结合芯片数据手册还原设计),修复了原板 JTAG 布线的奇葩设计后成功读出固件,并完成 100% 原理图还原。整个复刻过程约 3 天,作者认为 AI 大幅降低了硬件逆向门槛,让个人可以完成过去团队数月的工作。
作者整理了 10 个面向自媒体视频制作的优质 Codex Skill,涵盖风格化短片、手绘与漫画风、资讯解说、图书带货等方向,每个都附 GitHub 地址和原帖链接,装上即可用 AI 不露脸出片,多个案例达到百万播放、快速涨粉的效果。文章还补充了金句图片、文案生成等图文类 Skill,以及古风武侠英语剧、AI 治愈号等爆款账号拆解。同时给出安装提醒:不要一次全装避免 context 膨胀、注意模型和视频生成的费用成本、使用前看清开源许可协议避免商用风险。
作者分享了利用 AI 工具在 Blender 中制作蜘蛛侠 CG 短片的完整流程。借助 Hi3D Agent 通过对话生成城市模型,从 Sketchfab 下载带骨架的蜘蛛侠角色,用 Mixamo 提供跑步、下坠、摆荡等动作素材,再通过 Blender MCP 让 Codex Astra 读取场景并执行 Python 操作完成素材导入、摆放与动画,配合 Rokoko 插件做动作重定向,最后设计镜头并用 Cycles 渲染、FFmpeg 合成视频。作者认为 AI 赋能为 3D 创作带来技术平权,即使低配显卡也能按此流程制作出不错的效果。