个人网页设计建议：留白、突出重点与个人风格
作者针对小伙伴们个人网页普遍内容过满、缺乏重点的问题，结合自身 UI 设计经验提出九条建议：一是留出空白，让首屏清晰传达“你是谁、做什么”；二是把成熟项目和成果前置；三是配色先确定风格，强调色克制使用；四是重视字体对气质的影响，区分字号字重；五是让 AI 少用千篇一律的卡片布局；六是融入个人小巧思；七是广泛浏览设计参考积累审美；八是动效克制并注意移动端适配；九是可加轻量音效彩蛋。核心观点是个人网页应体现个人风格，删繁就简。
相关文档
审美提升(下)：硅谷设计师都在用的10个UI组件工具库
作者精选10个设计师宝藏资源，覆盖配色（Coolors）、字体、图标、插画、动效、3D设计、图片、CTA按钮、品牌视觉管理和AI交互模式等领域。文章强调审美提升靠日复一日的浸泡，每个资源都附推荐理由与使用建议，帮助读者建立自己的资源库与判断标准，逐步将好设计运用到作品中。
GPT2 中式窗景美学提示词：婉约与豪放版
文章分享了作者受苏州园林启发的“中式窗景美学”GPT提示词，包含婉约派和豪放派两个版本。提示词旨在通过留白、框景与排版设计，将诗词意境转译为具有东方美学的海报，强调克制的视觉张力和高级的质感。
AI 设计词典（中篇）｜怎么准确描述视觉效果
本文是 AI 设计词典系列的中篇，系统整理了 AI 设计中高频的视觉词汇，帮助用户更精确地控制 AI 生成的视觉效果。文章分为五大维度：字体（衬线/无衬线、字重、字距、行距）、颜色（色相、饱和度、明度、主色/强调色）、形状（几何/有机、圆角/直角、描边）、材质与效果（纹理、渐变、透明度、光影）、风格（极简主义、瑞士风格、粗野主义、编辑设计等）。作者强调不必背诵术语，而应把这些词当作「视觉旋钮」，用「风格名称+具体规则」的方式替代模糊的主观描述，让 AI 输出更符合预期的设计。
想让网页动起来，读这 9 篇：交互、像素艺术与 HTML 动画
作者尖沙咀小霸王精选了九篇关于网页动效的中文 X 长文进行推荐。内容涵盖 Punk 的动效词典（上中下三篇），系统讲解缓动、滚动叙事、鼠标交互、按钮反馈等动效术语与制作方法；爻火基于 Omarchy 拆解的 21 种像素 Logo 动效；Punk 的前端设计工作流与视觉词典，覆盖页面布局、结构与整体风格描述；Russell 的 PPT as Code 演示文稿方案；以及万象 AI 实验室用 HyperFrames、GSAP 将长文转化为手绘动画的方法。文章旨在帮助读者用准确的语言描述动效需求，提升网页设计的表现力。
How fonts can sound
文章探讨了字体与音效之间的跨模态对应关系：大脑会自然地将声音、形状等不同感官体验联系起来，高细音对应轻盈锐利的形态，低沉音对应厚重圆润的形态。作者指出音效设计不能机械匹配字体特征，而要结合字体在屏幕上的动画方式（速度、方向、节奏）来选择声音。文中提出一个简单框架：先解读字体特性，再观察动画运动，最后选择同时支持二者的音效。好的音效设计能赋予视觉重量感与真实感，提升整体沉浸感，让观众感受到动画而非仅仅看到动画。
人人都是 UI 设计师：20 条设计军规讲透 UI 设计
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
把游戏设计里的631原理，转化成可以复用的提示词结构
文章介绍了源自游戏美术与场景设计的631原理（60%空间基底、30%叙事陈设、10%视觉锚点），并将其迁移到AI图像与视频生成中。作者通过车站、霓虹街区等多个AI生成对照案例，讲解如何在配色、光照、细节密度上建立视觉主次关系，避免画面杂乱无焦点。文章还结合《布达佩斯大饭店》《沙丘》《寄生虫》等电影场景，拆解空间底盘、人物生活、剧情重点三个功能层次，最后给出可直接复用的场景提示词结构模板，帮助读者写出有主次、易调整的文生图提示词。
想让AI能做出好看网页，先记住这7个设计基础规则
文章介绍用AI生成网页时的7个基础设计规则：对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效，而来自这些基本功，并建议在使用AI/Codex时用具体的设计语言描述需求（如统一对齐、拉开层级、增加留白、限制主色等），能让生成结果更稳定好看。
Vibe Coding 网页动效词典（下篇）：组件反馈、布局过渡与页面转场
本文是 Vibe Coding 网页动效词典的下篇，从第 37 个词继续，涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效；数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效；布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例，最后介绍第四层 UX 规则（反馈、操作暗示等），帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
Vibe Coding 网页动效词典（中篇）：视差滚动、磁吸按钮与鼠标跟随
本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。
Vibe Coding 网页动效词典（上篇）：教你准确描述页面怎么动
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
一面97米长的壁画，画了290位神祇，为什么看起来不乱？
作者借助AI拆解东方壁画的构图秩序，回答为何《朝元图》等大型壁画容纳数百人物却不显杂乱。文章提炼三种方法：群像层级——以主像为锚点，人物按大中小分级并分组生成；空间纵深——前景给尺度、中景给事件、远景给世界，靠遮挡与信息递减建立层次；夜景留白——保留大面积低信息区域，只允许一处最高亮度焦点。文中附有可直接复用的AI绘图提示词与自检方法，强调分区生成、逐区检查的重要性。
