（小白视觉篇）让AI做成高级页面，必须知道提示词

风间 2026-08-05 44.6 KB 14.4K 57 𝕏 文章列表

本文介绍了如何通过具体的提示词指导AI生成具有高级感的网页设计。内容涵盖了CSS质感（如毛玻璃、轻阴影、Bento网格）、排版规则、克制动效以及3D空间感的营造，旨在帮助零基础用户避免设计平庸。

# （小白视觉篇）让AI做成高级页面，必须知道提示词 **作者**: 风间 **日期**: 2026-08-04T14:50:06.000Z **来源**: [https://x.com/sts81998850/status/2084653106944753931](https://x.com/sts81998850/status/2084653106944753931) --- ![图像](/doc/3809/image/img_c2c226b0d717.jpg) # 为什么AI做不出你说的"高级感"？你说的是感觉，它需要的是实现方式。你告诉AI的： "更高级一点" "更有设计感" "更好看" "更有科技感" AI实际听到的：抽象词 → 只能取所有数据的"平均值" → 安全、平庸、无差异结果就是：有设计，但没质感有结构，但不高级看起来像模板。🍚 通俗版：就像去餐厅点菜。你说"做好吃点"，厨师只能给你最标准的家常菜；你说"少油少盐、外皮要脆、牛排五分熟"，他才能做出你要的味道。AI不是听不懂"高级"，是"高级"这个词里没有做法。 # 第一层质感：CSS 是页面的"建材" 页面的质感底盘，CSS先定下来。 🏠 通俗版：同样的户型，毛坯房和精装修，价格差几倍。页面也一样——布局是户型，CSS是建材和装修。 ## 1. Backdrop Blur｜毛玻璃它是什么？毛玻璃就是让背景保持半透明，同时增加一层模糊效果。你还能隐约看到后面的内容，但前面的文字和按钮会更突出。它经常用在： - 顶部导航 - 弹窗 - 悬浮卡片 - 暗色科技页面通俗理解就像隔着一块磨砂玻璃看后面的东西。背景没有完全消失，但会变得更柔和。可以这样告诉 AI > 给顶部导航加入半透明背景和 backdrop blur 毛玻璃效果，让背景隐约可见，同时保证文字清晰。小白注意毛玻璃不要全页面乱用。如果所有卡片都是半透明玻璃，页面反而会显得混乱。只在需要突出层级的区域使用。 ![图像](/doc/3809/image/img_d6ef68393e88.jpg) ## 2. Soft Shadow｜轻阴影它是什么？轻阴影就是在卡片下面加一层很淡的影子，让卡片和背景产生一点距离。它的作用不是让卡片“飞起来”，而是帮助用户看清页面层级。通俗理解一张纸放在桌面上，会有一点自然的影子。正是这点影子，让你知道纸和桌面不是同一层。可以这样告诉 AI > 卡片使用轻柔的 soft shadow，阴影范围可以大一些，但颜色要淡，不要使用又黑又厚的阴影。注意阴影太重，是 AI 页面看起来廉价的常见原因。记住：阴影是用来分层的，不是用来抢注意力的。 ![轻阴影](/doc/3809/image/img_a989d6b25b09.jpg) 轻阴影 ## 3. Subtle Border｜细边框它是什么？细边框通常是一条很淡的 1px 线，用来划分卡片、输入框和内容区域。它比厚重阴影更克制，也更适合现代产品页面。通俗理解像给一张白纸加了一圈很淡的轮廓。你能看清边界，但不会觉得刺眼。可以这样告诉 AI > 卡片使用 1px 的低对比细边框，边框颜色保持柔和，不要使用明显的黑色描边。 ## 4. Noise Texture｜噪点纹理它是什么？噪点纹理是在纯色或渐变背景上，加一层非常细小的颗粒。用户不会明显注意到它，但页面会少一点塑料感，多一点真实材质感。通俗理解纯白背景像一块光滑的塑料板。加入一点细微纹理后，会更像纸张、胶片或磨砂材质。可以这样告诉 AI > 在背景上加入非常轻微的 noise texture，颗粒要细，透明度要低，只用于增加质感。注意如果一眼就能看见很多颗粒，说明噪点已经太重了。它更适合： - 品牌官网首屏 - 暗色背景 - 大面积渐变区域不建议放在大段正文后面，否则会影响阅读。 ## 5. Gradient Mesh｜渐变网格它是什么？普通渐变通常只有两种颜色，从一个方向慢慢过渡。渐变网格则像在背景里放了几个不同颜色的柔和光源，让颜色在多个位置自然融合。它可以让背景更有空间感，不会像一整块纯色那么单调。通俗理解普通渐变像把两种颜料混在一起。渐变网格更像房间里放了几盏不同颜色的灯，光线在空间里慢慢交融。可以这样告诉 AI > 背景使用克制的 gradient mesh，用两到三个低饱和颜色形成柔和光影，避免默认蓝紫渐变。 ![图像](/doc/3809/image/img_f8404b1e87b7.jpg) ## 6. Bento Grid｜便当盒网格它是什么？ Bento Grid 是一种卡片式布局。页面内容会被拆成大小不同的模块，像便当盒里的多个格子。每个格子放一种信息： - 一个核心功能 - 一组数据 - 一张产品截图 - 一个使用场景这样可以让复杂内容变得更清晰、更有秩序。通俗理解如果把米饭、蔬菜和肉全部堆在一个碗里，会显得很乱。便当盒把不同内容分开放，一眼就能看清主次。可以这样告诉 AI > 使用 Bento Grid 组织页面内容，重要功能放在大卡片中，次要信息放在小卡片中，保持统一对齐和充足留白。 ## 很多人只记住特效，却忘了排版毛玻璃、阴影、噪点和渐变，只能帮页面增加一些质感。真正决定页面是否舒服的，通常是下面三件事： ## 1. 字体层级标题、正文和辅助文字不能全部一样大。一个简单的字号层级可以是： - 主标题：48px - 小标题：24px - 正文：16px - 辅助文字：14px 数值不是固定的，重点是让用户一眼看出：哪里最重要，哪里是解释，哪里只是补充。可以这样告诉 AI > 建立清晰的字体层级，主标题明显大于正文，正文和辅助信息使用不同字号和颜色。 ## 2. 行高行高就是每行文字之间的距离。行高太小，文字会挤在一起；行高太大，段落又会显得松散。正文可以先使用： > 行高 1.6～1.8 例如正文是 16px，行高可以设置在 26px 左右。可以这样告诉 AI > 正文字号使用 16px，行高控制在 1.7 左右，让长文本保持舒适的阅读距离。 ## 3. 8pt 间距系统 8pt 间距系统的意思是：页面里的距离尽量使用 8 的倍数。例如： - 8px：图标和文字之间 - 16px：同一组内容之间 - 24px：卡片内部间距 - 32px：卡片之间 - 64px：大的页面区域之间你不需要记住所有数字。只需要避免页面里同时出现 13px、19px、27px 这种随意的间距。通俗理解衣柜里的衣服如果长短不一、间距混乱，看起来就会很廉价。把衣服统一挂齐，即使衣服本身不贵，也会显得整洁。网页也是一样：整齐，本身就是一种高级感。可以这样告诉 AI > 页面使用 8pt 间距系统，所有元素保持统一对齐，卡片内部使用 24px 间距，模块之间保留更大的留白。 # 零基础先记住一个公式页面质感不等于堆特效。更简单的做法是：细边框建立边界。轻阴影区分层级。统一间距保持整齐。充足留白让页面呼吸。毛玻璃、噪点和渐变，选择一到两种点缀就够了。 # 可以直接复制给 AI 的 Prompt > 请先优化页面的基础视觉质感，暂时不要加入复杂动画。页面需要有清晰的字体层级，主标题明显大于正文，正文行高控制在 1.7 左右。所有间距遵循 8pt 系统，元素保持统一对齐，并保留充足留白。卡片使用 1px 低对比细边框和非常轻的 soft shadow，不要使用厚重的黑色阴影。局部区域可以使用 backdrop blur 毛玻璃效果，但不要让所有卡片都变成玻璃。背景可以加入低饱和 gradient mesh 和非常轻微的 noise texture，用于增加层次，不要使用默认蓝紫渐变。使用 Bento Grid 组织内容，重要内容使用大卡片，次要信息使用小卡片，建立清晰的信息主次。整体效果要干净、克制、易读，像一个真实的现代产品，而不是堆满特效的模板页面。 # 第二层动效：让页面"会呼吸" 很多人一听到“网页动效”，第一反应是炫酷、复杂、很难实现。其实，好的动效并不是让页面一直动，而是让用户每次操作后，都能马上看到一个自然的反馈。你可以把它理解成电梯按钮。按下按钮后，按钮会亮起来。这个变化是在告诉你： “我已经收到你的操作了。” 网页动效也是一样。 ## 1. Hover Feedback｜悬停反馈它是什么？当鼠标移动到按钮或卡片上时，元素会发生一点变化。例如： - 卡片轻微向上移动 - 边框颜色变亮 - 阴影稍微加深 - 按钮颜色发生变化这些变化是在告诉用户： “这个地方可以点击。” 如果鼠标移上去后，页面完全没有反应，用户可能会不知道这里是否可以操作。可以这样告诉 AI： > 当鼠标悬停在卡片上时，卡片向上移动 4px，阴影轻微加深，动画保持平滑自然。scroll reveal 滚动渐显内容跟着滚动慢慢浮现，有节奏 ## 2. Micro-interactions｜微交互它是什么？微交互是用户进行一个小操作后，页面给出的即时反馈。例如： - 点击按钮时，按钮轻微缩小 - 点赞后，爱心从空心变成实心 - 提交成功后，出现“保存成功” - 打开开关时，圆点从左边滑到右边 - 输入错误时，输入框边框变红这些反馈看起来很小，却能让用户知道： “我的操作成功了吗？” 没有微交互的页面，就像按下一个没有灯光、没有声音的按钮，你很难确定它到底有没有生效。可以这样告诉 AI： > 按钮点击时轻微缩小，松开后恢复。提交成功后，在右上角显示一个简短的成功提示。 ## 3. Scroll Reveal｜滚动渐显它是什么？当用户向下滚动页面时，原本还没有出现的内容会慢慢进入视线。例如： - 标题从下方淡入 - 图片逐渐变清晰 - 卡片从下往上出现 - 数据数字慢慢显示出来它的作用不是单纯让页面更酷，而是帮助用户控制阅读节奏。如果所有内容一打开就同时出现在屏幕上，页面会显得很满，用户也不知道应该先看哪里。滚动渐显就像老师讲课，一次只展示一部分内容，让用户跟着页面往下看。可以这样告诉 AI： > 当内容进入屏幕可视区域时，从下方移动 20px 并逐渐淡入。动画只执行一次，不要反复闪烁。 ## 4. Stagger Animation｜错落出现它是什么？当页面里有多张卡片时，不要让它们在同一时间全部出现，而是按照顺序一张接一张出现。例如：第一张卡片先出现。间隔 0.1 秒后，第二张出现。再间隔 0.1 秒，第三张出现。这样页面会更有节奏，用户的视线也会自然地跟着内容移动。如果所有元素同时出现，就像一群人一起冲进房间，看起来会比较乱。错落出现更像排队进场，一张接一张，更自然。可以这样告诉 AI： > 三张卡片进入页面时依次出现，每张卡片间隔 0.1 秒，使用淡入和轻微上移动画。 ## 5. Easing Curve｜缓动曲线它是什么？缓动曲线决定一个动画是如何开始、如何移动、又如何停下来。听起来有点复杂，但可以用开车来理解。汽车启动时不会瞬间达到最高速度，停车时也不会突然静止，而是有一个加速和减速的过程。网页动画也是一样。如果一个卡片从左边移动到右边，全程速度完全相同，最后突然停下，会显得很机械。如果它开始时稍快，接近终点时慢慢停下来，看起来就会更自然。常见的几种感觉： - linear：全程匀速，比较机械 - ease-out：开始较快，结束较慢 - ease-in：开始较慢，后面加速 - ease-in-out：开始和结束都比较柔和零基础做网页时，不需要先研究复杂曲线。大多数情况下，可以直接使用： > ease-out 或 ease-in-out 可以这样告诉 AI： > 动画使用 ease-out 缓动，让元素快速进入，再自然减速停止，避免机械的匀速移动。 ## 6. Smooth Transition｜平滑过渡它是什么？当一个元素从一种状态变成另一种状态时，中间不要突然跳过去，而是自然地过渡。例如： - 按钮从灰色变成绿色 - 卡片从原位移动到上方 - 菜单从关闭变成打开 - 页面从浅色模式切换到深色模式如果没有平滑过渡，颜色、位置和大小会突然发生改变，看起来像页面卡了一下。加入过渡后，这些变化会在很短的时间内慢慢完成。可以这样告诉 AI： > 按钮的颜色、阴影和位置变化都加入 0.3 秒平滑过渡，避免状态突然跳变。 ## 零基础最容易犯的错误刚开始做动效时，很多人会觉得：动画越多，页面就越高级。但真实情况往往相反。如果标题在飞、背景在转、卡片在跳、按钮还在发光，用户就不知道应该看哪里。初学者只需要记住三个原则：一个页面最多使用两种主要动效。大部分动画控制在 0.2～0.4 秒。动效必须帮助用户理解操作，而不是单纯吸引注意力。例如，一个页面只使用： - 卡片悬停反馈 - 内容滚动渐显就已经足够让页面显得自然、有节奏。 ## 一段可以直接复制的动效 Prompt > 请为页面加入自然、克制的交互动效。卡片悬停时向上移动 4px，并轻微增强阴影；按钮点击时轻微缩小，松开后恢复。页面内容进入可视区域时，从下方移动 20px 并逐渐淡入；多张卡片依次出现，每张间隔 0.1 秒。动画时长控制在 0.2～0.4 秒，使用 ease-out 或 ease-in-out 缓动。所有颜色、位置和阴影变化都加入平滑过渡。动效只用于提示操作和控制阅读节奏，不使用夸张缩放、持续闪烁或大幅旋转。好的动效，不是让用户注意到动画本身。而是让用户在操作页面时，感觉一切都很自然。工具推荐：Motion（新手友好）｜GSAP（复杂品牌站） # 第三层：空间感 ## 3D 是页面的“舞台灯光” 3D 确实能让页面看起来更有空间感、更有科技感。但它也很容易翻车。很多人一提到“科技感”，就会让 AI 加满屏粒子、发光球体和漂浮模型。结果页面很炫，却看不清标题，也不知道产品到底是做什么的。你可以把 3D 理解成舞台上的灯光和烟雾： - 灯光负责营造气氛 - 烟雾负责增加空间感 - 演员才是观众真正要看的内容网页也是一样。文字、产品和功能是主角，3D 只是用来烘托氛围。 ## 1. Particle Field｜粒子场它是什么？粒子场就是在页面背景中加入许多细小的点、光斑或线条，让它们缓慢漂浮或连接。常见效果有： - 小光点缓慢移动 - 粒子跟随鼠标产生变化 - 相邻粒子之间出现细线 - 粒子从远处向屏幕靠近它能让原本静止的背景多一点生命力和空间感。通俗理解像舞台上漂浮的灰尘。平时不会特别注意，但灯光照过来之后，整个空间就有了层次。适合用在哪里？ - AI 工具官网 - 科技产品首屏 - 数据可视化页面 - 发布会或活动页面可以这样告诉 AI > 在首屏背景加入少量 particle field 粒子效果。粒子缓慢漂浮，透明度较低，只用于营造空间氛围，不遮挡文字和按钮。小白注意粒子不是越多越高级。粒子太大、太亮或移动太快，会让页面看起来像游戏登录界面。记住：粒子应该让人感觉到，但不应该抢先被人看到。 ## 2. 3D Orb｜3D 球体它是什么？ 3D Orb 通常是页面中一个具有立体感的球体。它可能带有： - 渐变颜色 - 发光边缘 - 金属或玻璃材质 - 缓慢旋转 - 鼠标跟随效果它通常会被放在首屏右侧，作为页面的主要视觉焦点。通俗理解就像发布会舞台中央的一件装置艺术。它不用解释具体功能，但能快速传递科技、未来或高端的感觉。适合用在哪里？ - AI 产品 - 云计算产品 - 数据平台 - 创意工作室官网 - 品牌发布页可以这样告诉 AI > 在首屏右侧加入一个简洁的 3D orb 球体，使用玻璃或金属材质，缓慢旋转。球体只作为视觉焦点，不遮挡标题和按钮。小白注意一个页面通常只需要一个主要 3D 物体。如果球体、模型、粒子和发光文字同时出现，视觉重点就会混乱。先确定一个主视觉，再添加少量背景元素。 ## 3. Shader Gradient｜流动渐变它是什么？ Shader Gradient 是一种会缓慢变化的动态渐变。普通渐变只是一张静态背景，而流动渐变中的颜色会不断移动、融合或变形。常见效果有： - 光线缓慢流动 - 不同颜色自然融合 - 背景像液体一样变化 - 球体表面的颜色不断变化通俗理解普通渐变像墙上刷好的颜色。流动渐变更像水面上的光，颜色会随着时间轻轻变化。适合用在哪里？ - 官网首屏背景 - 品牌视觉页面 - 音乐或创意产品 - 3D 球体表面 - 页面之间的过渡区域可以这样告诉 AI > 背景加入缓慢流动的 shader gradient，使用两到三个低饱和颜色，变化速度保持缓慢，不要出现刺眼的高亮发光。小白注意流动渐变很容易变成默认的蓝紫色 AI 风格。初学者建议： - 只使用两到三个颜色 - 降低颜色饱和度 - 移动速度保持缓慢 - 文字区域保持足够对比度背景可以动，但文字必须始终清楚。 ## 4. Floating Geometry｜漂浮几何体它是什么？漂浮几何体是在页面背景或主视觉周围，放置一些具有立体感的简单形状。例如： - 球体 - 方块 - 圆环 - 线框 - 半透明晶体这些元素会缓慢旋转或上下漂浮，帮助页面建立前后层次。通俗理解像橱窗里悬挂的装饰物。它们不是商品本身，但能让整个展示空间显得更丰富。适合用在哪里？ - 产品首屏 - 活动落地页 - 品牌官网 - 创意作品集 - 页面章节之间的装饰区域可以这样告诉 AI > 在主视觉周围加入少量 floating geometry 漂浮几何体，元素使用简单形状和低透明度，保持缓慢移动，不要遮挡主要内容。小白注意不要使用太复杂的模型。简单的球体、圆环和方块，往往比复杂角色或机械模型更容易与页面内容融合。如果每个物体都颜色鲜艳、大小相同，页面会显得杂乱。可以使用： - 一个较大的主要物体 - 两三个较小的辅助物体 - 不同的远近和透明度这样更容易形成空间深度。【配图建议：用前景、中景、背景三层几何体展示空间关系】 ## 5. Camera Parallax｜相机视差它是什么？相机视差是指鼠标移动或页面滚动时，背景和前景以不同速度移动。例如： - 鼠标向左移动，背景轻微向右偏移 - 前面的物体移动得快 - 后面的物体移动得慢 - 页面滚动时，图片与文字产生速度差这样会让平面的网页看起来更像一个有深度的空间。通俗理解坐在车里看窗外时：近处的树移动得很快，远处的山移动得很慢。这种速度差，就是视差。适合用在哪里？ - 官网首屏 - 产品展示区 - 作品集 - 品牌故事页面 - 需要沉浸感的页面可以这样告诉 AI > 为首屏背景加入轻微的 camera parallax 视差效果。鼠标移动时，前景和背景产生少量速度差，移动范围保持克制，不要造成眩晕。小白注意视差移动范围不要太大。如果鼠标轻轻一动，整个页面就大幅倾斜或旋转，用户会觉得难受，也会影响阅读。最好的视差，是用户能感受到空间变化，却不会被它打断。【配图建议：展示鼠标向右移动时，前景、中景、背景产生不同位移】 # 这五种效果，应该怎么选？零基础不需要全部使用。可以先根据页面目标进行选择。想做轻量科技感使用： > 少量粒子场＋低饱和流动渐变想做有视觉焦点的官网首屏使用： > 一个 3D 球体＋少量漂浮几何体想做更强的沉浸感使用： > 3D 主视觉＋轻微相机视差想做简单、不容易翻车的效果只使用： > 一个缓慢旋转的 3D 球体一到两种效果已经足够，不要把五种全部堆在同一屏。 # 用好 3D，一定要告诉 AI 这三句话很多 AI 生成的 3D 页面不好用，不是因为效果不够酷，而是因为没有告诉它限制条件。可以直接补充： > 3D 元素只作为背景或辅助视觉，不遮挡标题、正文和按钮。 > 优先保证页面加载速度与动画流畅度，在手机和普通电脑上也要稳定运行。 > 使用简单、低面数的模型，不要加入复杂场景和过多动态光效。这三句话分别解决三个问题： - 不遮挡内容：保证页面能看、能用 - 运行流畅：避免动画卡顿 - 控制复杂度：避免效果失控 # 工具怎么选？ ## Three.js Three.js 是网页 3D 的基础工具。它可以创建： - 3D 球体 - 粒子效果 - 灯光 - 相机 - 材质 - 鼠标交互可以把它理解成网页 3D 的“发动机”。适合原生 JavaScript 项目，或者需要自己控制大量细节的页面。 ## React Three Fiber React Three Fiber 是在 React 项目中使用 Three.js 的一种方式。如果你的网页本身使用 React、Next.js 或 Vite React，可以优先考虑它。可以把它理解成： > 用 React 更熟悉的写法控制 Three.js。零基础不需要先学习这两个工具的全部用法。只要在提示词里说明： > 使用 Three.js 或 React Three Fiber 实现轻量 3D 背景。 AI 就能知道该选择什么技术。 # 可以直接复制给 AI 的 3D Prompt > 请为网页首屏加入轻量、克制的 3D 空间效果。在首屏右侧放置一个简洁的 3D orb 球体，使用玻璃或金属材质，并保持缓慢旋转。背景加入少量、低透明度的 particle field 粒子，粒子缓慢漂浮，不遮挡文字。可以加入轻微 camera parallax 视差效果，鼠标移动时前景和背景产生少量速度差，但移动范围不要过大。3D 元素只用于营造氛围，标题、产品信息和操作按钮必须始终清晰可读。使用简单、低面数模型，减少粒子数量和复杂光效，保证桌面端与手机端运行流畅。手机端关闭复杂视差并减少粒子数量，必要时使用静态图片替代。整体风格保持干净、克制，不要满屏发光，不要让 3D 抢夺产品内容的注意力。 # 第四层：产品感 ## 从“临时拼出来”到“真的可以使用” 有些 AI 页面第一眼很好看，但仔细使用后，会发现很多问题： - 首页的按钮是圆角，弹窗里的按钮却是直角 - 有的卡片有阴影，有的卡片只有边框 - 点击按钮没有反馈 - 加载时页面一片空白 - 没有数据时不知道该显示什么 - 电脑上正常，手机上内容全部挤在一起这种页面更像一张展示图，而不像一个可以真实使用的产品。 ## 产品感到底是什么？你可以把网页组件理解成一家餐厅里的物品。路边摊可能每个碗、桌子和菜单都不一样。连锁店则会统一： - 菜单样式 - 店员服装 - Logo - 餐具 - 服务流程所以用户会觉得它更正规、更可靠。网页也是一样。按钮、输入框、卡片、弹窗和提示信息，都应该使用同一种设计语言。组件统一，页面才会有产品感。 ## 1. Design System｜设计系统它是什么？设计系统是一套页面设计规则。它会统一规定： - 使用哪些颜色 - 标题和正文分别多大 - 按钮使用什么圆角 - 卡片使用边框还是阴影 - 页面间距使用哪些数值 - 图标使用什么风格 - 各种组件应该怎样交互通俗理解设计系统就像一个国家的法律。没有规则时，每个人都按照自己的想法做，页面很容易越来越乱。有了统一规则之后，新增页面和功能时，只需要按照规则继续搭建。可以这样告诉 AI > 请先建立一套简单的 design system，统一页面颜色、字体层级、圆角、边框、阴影和间距。所有同类组件必须保持一致。小白注意设计系统不是先做一份很复杂的文档。零基础先统一下面五件事就够了： 1. 主色和辅助色 2. 标题、正文和辅助文字字号 3. 按钮和卡片圆角 4. 边框和阴影 5. 页面间距 ## 2. shadcn/ui｜现代组件库它是什么？ shadcn/ui 提供了很多常见的页面组件，例如： - Button 按钮 - Card 卡片 - Input 输入框 - Dialog 弹窗 - Tabs 标签页 - Dropdown 下拉菜单 - Toast 消息提示它已经帮你做好了基础结构和交互，但仍然可以修改颜色、圆角和样式。通俗理解它像一套已经做好基础结构的家具。你不用自己从木板开始制作，只需要根据房间风格调整颜色和材质。为什么适合 AI 编程？因为 AI 已经比较熟悉这些组件。你直接说： > 使用 shadcn/ui 的 Button、Card 和 Dialog。通常比只说“做一个高级按钮”更容易得到稳定结果。可以这样告诉 AI > 使用 shadcn/ui 构建按钮、卡片、输入框、弹窗和消息提示，并根据页面风格统一调整颜色、圆角和边框。小白注意组件库只是起点，不是最终风格。如果直接使用默认组件，页面仍然可能很像模板。需要继续统一： - 颜色 - 字体 - 间距 - 圆角 - 交互状态 ## 3. Radix Primitives｜无样式组件它是什么？ Radix 提供的是已经处理好交互逻辑的基础组件。例如弹窗需要处理： - 打开和关闭 - 键盘操作 - 焦点切换 - 点击外部关闭 - 无障碍支持 Radix 会处理这些复杂逻辑，但不会强制你使用某种视觉风格。通俗理解它像一套房子的水电系统。用户平时看不到，但它决定房子是否真的好用。适合什么时候使用？当你希望： - 交互稳定 - 样式完全自定义 - 不想从零处理复杂逻辑就可以使用 Radix。可以这样告诉 AI > 使用 Radix primitives 处理弹窗、下拉菜单和 Tooltip 等复杂交互，视觉样式根据当前设计系统自定义。小白注意零基础不需要同时研究 shadcn/ui 和 Radix。可以先记住： > shadcn/ui 负责快速搭建现成组件，Radix 负责提供底层交互能力。 ## 4. Tailwind CSS｜快速搭建样式它是什么？ Tailwind CSS 是一种直接在页面元素上组合样式的方式。例如可以直接控制： - 宽度 - 高度 - 颜色 - 字号 - 圆角 - 间距 - 响应式布局通俗理解传统 CSS 像先写一张装修说明书，再去装修房间。 Tailwind 更像直接在每件家具上贴标签： > 这里宽一点、那里加间距、这个改成灰色。为什么适合 AI？因为样式规则比较直接，AI 更容易快速生成和修改。例如你可以明确告诉 AI： > 将卡片内边距从 16px 改成 24px。它通常可以快速定位并修改。可以这样告诉 AI > 使用 Tailwind CSS 搭建响应式布局，统一使用 8pt 间距系统，并减少重复和随意的样式数值。 ## 5. Component Variants｜组件变体它是什么？一个按钮不应该只有一种样子。在不同场景下，它可能需要不同类型： - 主要按钮 - 次要按钮 - 文字按钮 - 危险操作按钮同一个按钮还需要不同状态： - 默认 - 鼠标悬停 - 点击 - 禁用 - 加载这些不同样式和状态，就叫组件变体。通俗理解同一个人参加不同场合，会穿不同衣服。但无论怎么换，仍然能看出是同一个人的风格。可以这样告诉 AI > 为 Button 建立 primary、secondary、ghost 和 destructive 四种变体，并补充 hover、active、disabled 和 loading 状态。小白注意不要给每个按钮单独设计一种颜色。一个页面通常只需要： - 一个主要按钮 - 一个次要按钮 - 一个弱化按钮 - 一个危险操作按钮类型太多，用户反而不知道哪个最重要。 # 页面不仅要好看，还要有完整状态真实产品不会永远停留在“数据正常、网络正常”的理想状态。你还需要告诉 AI 补充以下场景。 ## Modal｜弹窗适合确认操作、编辑内容或展示重要信息。例如： - 删除确认 - 登录 - 修改资料 - 创建项目 ## Toast｜消息提示用于告诉用户操作结果。例如： - 保存成功 - 上传失败 - 已复制链接 - 网络异常 ## Empty State｜空状态当页面没有内容时，不能只留一片空白。应该告诉用户： - 为什么这里是空的 - 接下来可以做什么 - 可以点击哪个按钮例如： > 还没有创建项目，点击下方按钮创建第一个项目。 ## Loading｜加载状态内容还没有出现时，需要告诉用户系统正在处理。常见形式： - 加载动画 - 骨架屏 - 按钮显示“处理中” - 页面局部加载 ## Error State｜错误状态当操作失败时，不要只显示“出错了”。需要告诉用户： - 哪里出错了 - 是否可以重试 - 下一步应该怎么做 # 四个产品感检查标准 ## 1. 组件要统一同类组件使用同一种风格。例如所有主要按钮都应该保持： - 相同颜色 - 相同圆角 - 相同高度 - 相同字体 - 相同悬停反馈 ## 2. 状态要完整至少补充： - Hover 悬停 - Disabled 禁用 - Loading 加载 - Empty 空状态 - Error 错误状态 ## 3. 层级要清晰用户一眼就应该知道： - 哪个是标题 - 哪个是正文 - 哪个是辅助说明 - 哪个按钮最重要 ## 4. 适配要到位页面需要考虑： - 桌面端 - 平板 - 手机端手机端不是简单地把电脑页面缩小。通常需要： - 多列改成单列 - 减小标题字号 - 调整左右间距 - 隐藏不重要装饰 - 简化复杂动画 # 可以直接复制的产品感 Prompt > 请把当前页面从展示稿完善成一个可以真实使用的产品界面。先建立统一的 design system，统一颜色、字体层级、圆角、边框、阴影和间距。使用 shadcn/ui 风格的 Button、Card、Input、Dialog、Tabs 和 Toast，所有同类组件保持一致。为按钮补充 primary、secondary、ghost 和 destructive 变体，并完善 hover、active、disabled 和 loading 状态。页面需要补充 Modal、Toast、Empty State、Loading State 和 Error State。使用 Tailwind CSS 构建响应式布局，保证桌面端、平板端和手机端都能正常使用。手机端将多列内容改成单列，减少装饰效果，并保证主要按钮容易点击。最终效果应该像一个完整、统一、可以上线使用的现代产品，而不是只有一张好看的静态页面。 ## 最后记住好看的页面，只能说明它完成了视觉设计。状态完整、组件统一、不同设备都能使用，才说明它开始像一个真正的产品。统一的组件语言，是“演示页面”和“真实产品”的分界线。 # 进阶：同一个“高级”，有四种不同写法高级感并不等于暗黑背景、蓝紫渐变和满屏粒子。同样是高级页面，也可以有完全不同的风格。你可以把它理解成装修房子。装修前需要先决定： - 日式原木 - 现代极简 - 工业风 - 奢华风确定方向后，才能继续选择颜色、字体、材质和家具。如果不先确定风格，只是不断堆高级关键词，最后很容易变成大杂烩。 ## 1. 暗黑科技风适合什么页面？ - AI 工具 - 开发者产品 - 数据平台 - 科技发布会 - Web3 产品视觉特点 - 深色背景 - 高对比文字 - 少量荧光色 - 玻璃卡片 - 粒子或光线背景 - Bento Grid 布局推荐配色 - 背景：#0A0A0A - 正文：#F5F5F5 - 辅助文字：#A1A1AA - 点缀色：#CCFF00 一句话 Prompt > 使用暗黑科技风，深黑背景搭配少量荧光绿点缀，使用低透明度玻璃卡片、细边框、Bento Grid 和克制的粒子背景。小白注意不要同时加入： - 大面积蓝紫渐变 - 强烈霓虹发光 - 满屏粒子 - 多个 3D 球体暗黑不等于全部发光。黑色背景越重，动效和点缀色越要克制。 ## 2. 极简白风适合什么页面？ - 效率工具 - 消费产品 - SaaS 官网 - 个人作品集 - 品牌官网视觉特点 - 大面积留白 - 黑白灰配色 - 清晰字体层级 - 轻阴影 - 细边框 - 少量低饱和点缀色推荐配色 - 背景：#FAFAFA - 标题：#1A1A1A - 正文：#52525B - 边框：#E4E4E7 - 点缀色：选择一个低饱和颜色一句话 Prompt > 使用现代极简白风格，大面积留白，黑白灰为主，配合细线边框、轻阴影和一个低饱和点缀色。小白注意极简不等于什么都不设计。真正的极简更依赖： - 字体层级 - 对齐 - 间距 - 图片质量 - 细节一致性页面元素越少，每个细节越容易被看见。 ## 3. 编辑杂志风适合什么页面？ - 设计师作品集 - 时尚品牌 - 摄影网站 - 媒体内容 - 创意工作室视觉特点 - 超大标题 - 衬线字体 - 不对称布局 - 图片裁切 - 黑白与高饱和色对比 - 强烈版式节奏推荐配色 - 背景：#F5F1EA - 标题：#171717 - 正文：#404040 - 点缀色：#E53935 一句话 Prompt > 使用编辑杂志风，奶油色背景搭配墨黑文字，使用超大衬线标题、不对称布局和少量高饱和红色点缀。小白注意不对称不等于随意摆放。虽然左右可能不完全一致，但内容仍然需要： - 对齐基准 - 清晰网格 - 大小对比 - 阅读顺序看似自由的排版，背后仍然需要规则。 ## 4. 奢华暗金风适合什么页面？ - 珠宝 - 高端酒店 - 奢侈品牌 - 美妆 - 高端商业服务视觉特点 - 深色背景 - 香槟金点缀 - 衬线标题 - 宽字距 - 大留白 - 缓慢而克制的动效推荐配色 - 背景：#111111 - 标题：#F5F1E8 - 金色：#C9A96A - 辅助文字：#A8A29E 一句话 Prompt > 使用克制的奢华暗金风，深黑背景搭配香槟金点缀，使用衬线标题、宽字距、大留白和缓慢淡入动效。小白注意金色使用太多，很容易变得俗气。更推荐： - 90% 黑白灰 - 10% 金色点缀金色适合用在： - 小标题 - 图标 - 细边框 - 按钮 - 少量装饰线 # 风格不要混着用常见错误是： - 暗黑科技背景 - 杂志风大标题 - 奢华金色按钮 - 可爱圆角卡片 - 蓝紫色发光球体每个元素单独看都没有问题，组合后却没有统一方向。零基础可以先记住： > 一种主风格＋一种辅助效果＋一个点缀颜色。例如： > 极简白风＋轻微滚动渐显＋低饱和蓝色。这样比堆满关键词更容易得到稳定结果。先定风格，再谈质感。方向错了，添加再多效果也没有用。 # 救场：AI 生成的页面不高级，应该怎么改？没有人的第一版页面是完美的。 AI 生成页面更像装修时的毛坯方案：第一版先搭结构，后面还需要不断调整。真正的高级感，通常是修改出来的。 ## 第一步：先让 AI 找问题不要一看到页面不好看，就马上说： > “整体再高级一点。” AI 仍然不知道具体要修改哪里。更好的方法是把页面截图发给它，让它先诊断问题。可以直接复制 > 你现在是一名挑剔的资深 UI 设计师。请从视觉层级、字体、颜色、间距、卡片、动效和产品完整度七个方面，找出这个页面最有模板感的五个地方。每个问题都说明为什么显得廉价，并给出具体、可执行的修改方案。暂时不要修改代码。先让 AI 说清楚问题，再开始调整。 ## 第二步：一次只修改一个问题错误说法： > 整体优化一下。这种指令范围太大。 AI 可能同时改变颜色、布局、字体和组件，最后连原来的结构也被破坏。正确说法： > 只调整卡片阴影，改成更轻、更自然的 soft shadow，其他颜色、布局和内容保持不变。或者： > 只调整首屏字体层级。放大主标题，减小辅助文字，提高标题和正文的对比，其他部分不要修改。通俗理解装修时，不应该一边砸墙、一边换地板、一边重新布线。一次只做一件事，出现问题时才知道原因。 ## 第三步：加入禁止指令告诉 AI 不要做什么，有时比告诉它做什么更有效。可以直接加入： > 不要使用默认蓝紫渐变。 > 不要使用 Emoji 代替专业图标。 > 不要所有卡片都使用大圆角。 > 不要使用厚重黑色阴影。 > 不要大面积添加霓虹发光。 > 不要把所有信息塞进首屏。 > 不要让装饰元素遮挡文字。 > 不要同时使用三种以上主动效。这些限制可以帮助 AI 排除最常见的模板感。 ## 第四步：给它一个参考方向 AI 不知道你脑海中的“高级”长什么样。最快的方法是提供视觉参考。方法一：发送截图 > 参考这张图片的内容布局、字体层级和留白方式，替换成我的产品内容。不要直接复制品牌元素和文字。方法二：说明参考产品 > 参考 Linear 官网干净、克制、产品化的视觉调性，但不要直接复刻页面。方法三：提供喜欢的代码 > 请分析这段 CSS 的颜色、圆角、边框和阴影规则，并把相同的设计语言延续到当前页面。方法四：同时说明保留什么 > 参考这张图的排版风格，但保留我现有的产品结构、文字内容和品牌色。这样可以避免 AI 把整个页面重新做一遍。 ## 第五步：按照顺序修改建议按照下面的顺序迭代：第一轮：先改结构检查： - 内容顺序是否合理 - 首屏重点是否清楚 - 信息是否太多 - 模块是否有主次第二轮：再改视觉检查： - 字体层级 - 颜色 - 间距 - 边框 - 阴影 - 留白第三轮：补交互与产品状态检查： - Hover - 点击反馈 - 加载状态 - 空状态 - 弹窗 - 手机适配不要第一轮就开始加粒子、3D 和复杂动效。如果结构本身混乱，加再多效果也只是把问题装饰起来。 # 一套可以直接复制的“页面救场 Prompt” > 请不要重新设计整个页面，先根据当前页面进行局部优化。第一步，分析页面最有模板感的五个问题，重点检查字体层级、留白、颜色、卡片样式、动效和组件一致性。第二步，按照影响程度排序，并说明每个问题为什么会让页面显得廉价。第三步，先只修改影响最大的一个问题，其他布局、内容和功能保持不变。修改时禁止使用默认蓝紫渐变、Emoji 图标、厚重阴影、大圆角堆叠、廉价发光和过度拥挤的信息布局。修改完成后说明具体调整了哪些数值，以及为什么这样调整。好页面不是一次生成出来的，而是一轮一轮改出来的。 # 万能 Prompt 模板 2.0 下面这份模板不需要全部填写。零基础先确定三个内容： 1. 页面是什么产品 2. 想使用哪一种风格 3. 页面需要包含哪些模块再把模板复制给 AI。 ## 页面目标 > 请帮我设计并实现一个现代产品网页。产品名称：[填写名称] > 产品用途：[用一句话说明产品解决什么问题] > 目标用户：[填写主要用户] > 页面类型：[官网首屏／落地页／后台系统／个人作品集] ## 风格定位 > 整体风格选择：[暗黑科技／极简白／编辑杂志／奢华暗金]页面主色：[填写色值] > 点缀色：[填写色值] > 背景色：[填写色值]标题字体：[填写字体或使用现代无衬线字体] > 正文字体：[填写字体或使用易读无衬线字体]整体气质要干净、克制、现代，不要堆叠过多装饰效果。 ## 页面结构 > 页面包含以下内容： > 顶部导航 > 首屏标题、产品介绍和主要按钮 > 核心功能介绍 > 产品截图或使用流程 > 数据或用户评价 > 行动引导区域 > 页脚使用 Bento Grid 组织核心功能，重要内容使用较大的模块，次要信息使用较小模块。保持清晰的信息层级和充足留白，不要把所有内容都塞进首屏。 ## 排版与间距 > 使用清晰的字体层级： > 主标题明显大于正文 > 小标题用于划分模块 > 辅助文字降低颜色对比正文行高控制在 1.6～1.8。页面使用 8pt 间距系统，元素保持统一对齐。卡片内部间距保持一致，页面模块之间保留更大的留白。 ## 视觉与质感 > 卡片使用 1px 低对比细边框和轻微 soft shadow。局部区域可以加入 backdrop blur 毛玻璃效果，但不要所有卡片都使用玻璃效果。背景可以加入低饱和 gradient mesh 和轻微 noise texture，用于增加层次。阴影、渐变和发光效果都要保持克制，不影响文字阅读。 ## 动效与交互 > 加入自然、克制的微交互： > 卡片悬停时轻微向上移动 > 按钮点击时提供即时反馈 > 内容进入可视区域时缓慢淡入 > 多张卡片依次出现动画时长控制在 0.2～0.4 秒。使用 ease-out 或 ease-in-out 缓动。一个页面最多使用两种主要主动效，不使用持续闪烁、大幅旋转和夸张缩放。 ## 3D 空间感（可选） > 可以使用 Three.js 或 React Three Fiber 加入轻量 3D 背景。可选择以下一种效果： > particle field 粒子场 > 3D orb 球体 > floating geometry 漂浮几何体 > shader gradient 流动渐变 > camera parallax 相机视差3D 只用于烘托氛围，不遮挡标题、正文和按钮。使用简单、低面数模型，减少复杂灯光和粒子数量，保证手机端和普通电脑运行流畅。手机端可以减少粒子、关闭视差，必要时使用静态图片替代。 ## 组件与产品感 > 使用统一的 design system，统一颜色、字体、圆角、边框、阴影和间距。使用 shadcn/ui 风格的组件： > Button > Card > Input > Dialog > Tabs > Toast > Empty State为按钮和输入框补充： > 默认状态 > Hover 状态 > 点击状态 > 禁用状态 > 加载状态 > 错误状态补充 Modal、Toast、Loading、Empty State 和 Error State，让页面像一个真实产品，而不是静态展示稿。 ## 响应式适配 > 使用 Tailwind CSS 构建响应式布局。桌面端可以使用多列布局。平板端减少列数和装饰元素。手机端改成单列布局，缩小标题字号，调整左右间距，并保证按钮容易点击。不要简单缩小桌面页面，要针对手机重新安排内容顺序。 ## 禁止项 > 禁止使用： > 默认蓝紫渐变 > Emoji 代替专业图标 > 所有卡片使用相同大圆角 > 厚重黑色阴影 > 廉价霓虹发光 > 满屏粒子和多个 3D 物体 > 信息全部堆在首屏 > 装饰元素遮挡文字 > 三种以上主要动效 > 只适配电脑端 ## 最终目标 > 最终页面应该具有清晰的信息层级、统一的组件语言、完整的交互状态和良好的响应式体验。让它看起来像一个可以真实上线使用的现代产品，而不是一张由模板和特效拼出来的展示页面。 # 最后的核心逻辑让 AI 做页面，不是把所有高级词汇一次性塞进去。正确顺序应该是：先确定风格。再搭建结构。然后统一排版和组件。最后加入少量动效与空间效果。你给 AI 一个模糊的形容词，它只能猜。你给它明确的设计方法、限制条件和修改顺序，它才更容易做出真正高级的页面。 ## 相关链接 - [@sts81998850](https://x.com/sts81998850) - [4,572](https://x.com/sts81998850/status/2084653106944753931/analytics) - [#0A0A0A](https://x.com/search?q=%230A0A0A&src=hashtag_click) - [#F5F5F5](https://x.com/search?q=%23F5F5F5&src=hashtag_click) - [#A1A1AA](https://x.com/search?q=%23A1A1AA&src=hashtag_click) - [#CCFF00](https://x.com/search?q=%23CCFF00&src=hashtag_click) - [#FAFAFA](https://x.com/search?q=%23FAFAFA&src=hashtag_click) - [#1A1A1A](https://x.com/search?q=%231A1A1A&src=hashtag_click) - [#52525B](https://x.com/search?q=%2352525B&src=hashtag_click) - [#E4E4E7](https://x.com/search?q=%23E4E4E7&src=hashtag_click) - [#F5F1EA](https://x.com/search?q=%23F5F1EA&src=hashtag_click) - [#E53935](https://x.com/search?q=%23E53935&src=hashtag_click) - [#F5F1E8](https://x.com/search?q=%23F5F1E8&src=hashtag_click) - [#C9A96A](https://x.com/search?q=%23C9A96A&src=hashtag_click) - [#A8A29E](https://x.com/search?q=%23A8A29E&src=hashtag_click) - [升级为 Premium](https://x.com/i/premium_sign_up) - [下午10:50 · 2026年8月4日](https://x.com/sts81998850/status/2084653106944753931) - [4,572 查看](https://x.com/sts81998850/status/2084653106944753931/analytics) --- *导出时间: 2026/8/5 13:37:56*