前端 UI 界面 AI 提示词专业指南，手把手教你做出即好看又专业的UI界面

前端 UI 界面 AI 提示词专业指南

不会专业术语也能让 AI 做出"好看"的界面和动效——把"我要一个好看的页面"翻译成 AI 听得懂的专业描述。

目录

• 一、为什么你描述的"好看"，AI 做出来总是很丑
• 二、万能提示词公式（记住这一个就够了）
• 三、专业词汇速查表：把大白话翻译成"设计黑话"
• 四、分场景提示词模板（直接复制改改就能用）
• 五、动效提示词专项库
• 六、迭代修改类提示词：界面不好看时怎么"骂"AI
• 七、反面教材 vs 正确示范
• 八、动效参数速查卡
• 九、一页纸速查卡（收藏用）

一、为什么你描述的"好看"，AI 做出来总是很丑

大多数人是这样写提示词的：

❌ “帮我做一个好看的官网首页，要有动画效果。”

AI 收到这句话时，它不知道：

• "好看"是极简风、科技风、还是商务风？
• 主色调是什么？深色还是浅色？
• 动画是入场动画、悬停动画、还是滚动动画？
• 用什么技术栈实现？纯 CSS 还是动画库？

AI 不是做不好，是你给的信息不够。专业设计师和 AI 沟通时，会把"好看"拆解成：风格、配色、布局、字体、间距、阴影、动效参数——每一个维度都给明确的值。

这篇文章就是教你这套"翻译"方法。

二、万能提示词公式（记住这一个就够了）

角色 + 技术栈 + 页面类型 + 布局结构 + 视觉风格 + 配色方案 + 字体排版 + 组件细节 + 动效描述 + 交互行为 + 约束要求

不需要每次都写全，但写得越全，结果越可控。最低限度也要包含：技术栈 + 风格 + 配色 + 动效。

套用示例：

你是一名资深前端工程师兼 UI 设计师（角色）。请用 React + Tailwind CSS（技术栈）实现一个 SaaS 产品落地页的 Hero 区域（页面类型）：左侧文字右侧产品截图的两栏布局，居中对齐，最大宽度 1200px（布局结构）。整体风格为现代极简 + 轻玻璃拟态（视觉风格）。深色背景 #0F172A，主色为靛蓝 #6366F1，搭配一条从靛蓝到紫罗兰的渐变光带（配色方案）。标题字重 800、字号 64px、行高 1.1（字体排版）。主按钮圆角 12px，带柔和的弥散投影（组件细节）。页面加载时标题和按钮依次从下方淡入，间隔 150ms，缓动使用 ease-out，持续 600ms；按钮悬停时轻微上浮 4px 并加深阴影（动效描述）。鼠标悬停卡片时边框出现渐变描边效果（交互行为）。要求移动端自适应，不使用任何外部图片，渐变和图形全部用 CSS 实现（约束要求）。

对比一下，这和"做个好看的首页"出来的效果天差地别。

三、专业词汇速查表：把大白话翻译成"设计黑话"

不会术语没关系，把你想说的"大白话"在表里找到对应的专业词，塞进提示词即可。

3.1 视觉风格类

3.2 配色类

3.3 排版字体类

3.4 布局间距类

3.5 动效类（最重要的一张表）

四、分场景提示词模板（直接复制改改就能用）

使用方式：复制模板 → 替换【】里的内容 → 发给 AI。

4.1 落地页 / 官网首页 Hero 区

你是一名资深前端工程师。请用【React + Tailwind CSS】实现一个 SaaS 产品的官网 Hero 区，要求： 【布局】 - 单栏居中布局，容器最大宽度 1100px，垂直方向 padding 120px - 结构自上而下：顶部小标签 badge → 主标题 → 副标题 → 两个按钮（主+次）→ 下方产品界面预览图（用 CSS 绘制的模拟浏览器窗口替代） 【风格与配色】 - 深色科技风，背景 #0A0A0B，叠加一个从顶部中心发散的径向渐变光晕（颜色 rgba(99,102,241,0.15)） - 主标题 64px / 字重 800 / 字间距 -0.02em，其中关键词使用靛蓝到紫罗兰的渐变文字（background-clip: text） - 副标题 18px，颜色 slate-400，行高 1.7，最大宽度 600px 【组件细节】 - 主按钮：渐变背景（#6366F1 → #8B5CF6），圆角 10px，padding 14px 28px，带弥散光晕阴影 - 次按钮：透明背景 + 1px 边框（rgba(255,255,255,0.15)），文字 slate-300 - badge：圆角胶囊形，半透明背景 + 细边框，内含一个小圆点呼吸闪烁 【动效】 - 页面加载时，badge → 标题 → 副标题 → 按钮组 → 预览图 依次 fade-up 入场（translateY 24px → 0，opacity 0 → 1），每个间隔 120ms，时长 700ms，缓动 cubic-bezier(0.22, 1, 0.36, 1) - 主按钮 hover：上浮 2px + 光晕增强，过渡 250ms - 预览图 hover：轻微放大 scale(1.02)，过渡 400ms - 背景光晕做极缓慢的位置漂浮动画（20s 循环） 【约束】 - 完全响应式，移动端标题降为 36px，按钮改为纵向排列 - 不使用外部图片，预览窗口用纯 CSS 模拟

4.2 后台管理系统 Dashboard

请用【React + Tailwind CSS】实现一个数据看板 Dashboard 页面： 【布局】 - 经典后台布局：左侧固定侧边栏（宽 240px）+ 顶部栏 + 主内容区 - 主内容区：4 个 KPI 指标卡片一行 → 下方 2:1 比例的图表区 + 侧栏列表 → 底部数据表格 - 使用 8px 间距体系，卡片间距 24px，页面 padding 32px 【风格与配色】 - 浅色简洁风，背景 #F8FAFC，卡片纯白 + 1px 边框 #E5E7EB + 圆角 12px + 极淡阴影 - 主色 #6366F1，数据上涨用 emerald-500，下跌用 rose-500 - 侧边栏深色（#0F172A），当前选中项有左侧 3px 主色高亮条 + 半透明背景 【组件细节】 - KPI 卡片：图标（圆角方形浅色底）+ 指标名（slate-500, 14px）+ 数值（28px, 字重 700, tabular-nums）+ 同比变化小标签（带上下箭头） - 表格：斑马纹行，表头 sticky，行 hover 背景 #F1F5F9 - 图表用【Recharts】，折线带渐变填充区域，网格线极淡 【动效】 - 页面加载：KPI 卡片 stagger 淡入（间隔 80ms） - 数字用 count-up 滚动动画（1s，ease-out）从 0 增长到目标值 - 侧边栏菜单项 hover：背景淡入 + 文字右移 4px，过渡 200ms - 表格行 hover 过渡 150ms - 卡片 hover：阴影轻微加深 + 上浮 2px 【约束】 - 侧边栏在移动端收起为抽屉 - 所有交互状态（hover/focus/active）完整

4.3 卡片列表 / 产品展示

请用【React + Tailwind CSS】实现一个产品卡片网格： 【布局】 - 响应式网格：桌面 3 列、平板 2 列、手机 1 列，间距 24px - 卡片结构：顶部 16:9 封面区（用渐变占位）→ 标题 → 两行描述（超出省略号 line-clamp-2）→ 底部标签 + 价格/按钮 【风格】 - 白底卡片，圆角 16px，1px 边框 #E5E7EB - 封面区使用从【靛蓝到青色】的 135deg 渐变，叠加微妙的网格纹理 【动效】 - 卡片 hover：translateY(-6px) + 阴影从 shadow-sm 过渡到 shadow-xl，时长 300ms，ease-out - 封面渐变在 hover 时缓慢位移（background-position 动画，600ms） - 底部按钮在 hover 时从透明淡入（移动端始终显示） - 列表首次进入视口时卡片 stagger 入场（fade-up，间隔 60ms） 【约束】 - 卡片内所有过渡使用 GPU 友好属性（transform / opacity），不要动画 width/height

4.4 表单页

请用【React + Tailwind CSS】实现一个【用户注册】表单： 【布局】 - 居中卡片布局，卡片宽 440px，圆角 16px，padding 40px，白底 + 弥散阴影 - 页面背景为极淡的渐变（#F8FAFC → #EEF2FF） 【组件细节】 - 输入框：圆角 10px，边框 #D1D5DB，padding 12px 16px，label 悬浮在输入框上方 14px slate-700 - focus 状态：边框变主色 #6366F1 + 外发光 ring（rgba(99,102,241,0.2)），过渡 200ms - 错误状态：边框 rose-500 + 下方错误提示文字 13px，带轻微左右抖动动画（shake，400ms） - 密码强度条：4 段式，随输入实时变色（红→黄→绿），宽度过渡 300ms - 提交按钮：主色渐变，宽度 100%，带 loading 状态（spinner 旋转 + 文字变"提交中..."） 【动效】 - 输入框 focus 时 label 轻微上移变色（浮动标签效果） - 按钮 hover 上浮 1px + 阴影加深；active 时 scale(0.99) - 提交成功后按钮变为对勾 ✓ 图标 + 绿色背景，打勾路径用 stroke-dasharray 绘制动画（500ms） 【约束】 - 表单验证实时进行，错误提示不抖动布局（预留空间或用 absolute）

4.5 登录页（带视觉冲击力）

请实现一个左右分屏的登录页： 【布局】 - 左侧 55% 为品牌展示区，右侧 45% 为登录表单；移动端隐藏左侧 - 左侧：深色渐变背景（#0F172A → #1E1B4B），叠加缓慢流动的极光渐变光斑（3 个径向渐变 blob，blur 80px，各自做 15–25s 的漂浮路径动画） - 左侧内容：Logo + 一句大字 slogan（40px, 字重 700）+ 底部客户 logo 墙（灰度） 【表单区】 - 居中，最大宽度 380px - 输入框与按钮风格同【4.4 模板】 - 第三方登录按钮：白底 + 边框 + 图标，hover 时背景变淡灰 【动效】 - 页面加载：右侧表单整体从右侧滑入淡入（translateX 30px → 0，700ms，ease-out） - 左侧 slogan 文字逐行 fade-up（stagger 200ms） - 极光 blob 持续漂浮，互不同步

4.6 导航栏

请实现一个顶部导航栏： 【布局与风格】 - 高度 64px，内容最大宽度 1200px 居中：左 Logo + 中导航链接 + 右按钮组 - 初始透明背景，向下滚动超过 10px 后变为玻璃拟态（backdrop-blur-xl + 半透明白底 + 底部 1px 细线），背景过渡 300ms 【动效】 - 导航链接 hover：文字颜色过渡到主色 + 下方出现 2px 下划线从左到右展开（scaleX 0 → 1，origin-left，250ms） - 移动端：汉堡菜单图标点击后三线变形为 X（线条 rotate + translate 过渡 300ms），菜单面板从顶部滑下（translateY + opacity，350ms，ease-out），菜单项 stagger 淡入 - 向下滚动时导航栏隐藏（translateY -100%），向上滚动时显示，过渡 300ms

4.7 弹窗 / 抽屉 / Toast

请实现一套完整的浮层组件动效规范： 【Modal 弹窗】 - 遮罩：rgba(0,0,0,0.5) + backdrop-blur-sm，淡入 200ms - 弹窗本体：scale(0.95) + translateY(10px) + opacity 0 → 初始态，过渡到 scale(1) + translateY(0) + opacity 1，时长 250ms，缓动 cubic-bezier(0.22, 1, 0.36, 1) - 关闭时反向播放，时长 200ms，ease-in - 圆角 16px，阴影 shadow-2xl，宽度 480px 【抽屉 Drawer】 - 从右侧滑入：translateX(100%) → 0，时长 300ms，ease-out；遮罩同步淡入 - 宽度 400px，圆角仅左侧 16px 【Toast 通知】 - 从顶部居中位置滑入 + 淡入（translateY(-16px) → 0），300ms - 停留 3s 后向上滑出淡出 - 多条 Toast 堆叠时，下方的平滑下移让位（位置过渡 300ms） - 成功绿 / 错误红 / 警告黄，左侧 4px 色条 + 对应图标 【约束】 - 所有浮层支持 ESC 关闭、点击遮罩关闭 - 进场动画用 ease-out，退场用 ease-in（符合自然直觉）

五、动效提示词专项库

界面好看一半靠设计，一半靠动效。以下是高频动效的"描述话术"，直接拼接进任何提示词。

5.1 入场动画

- fade-up 淡入上移：opacity 0 → 1，translateY(20px) → 0，时长 600ms，ease-out - 交错入场（stagger）：列表项依次执行入场动画，每项延迟 80–120ms - 模糊入场：初始 filter: blur(8px) → blur(0)，配合 opacity，适合大图和 Hero - 裁剪揭示：用 clip-path 从下到上揭示内容，适合标题和封面图 - 缩放入场：scale(0.9) → 1 + opacity，适合弹窗和卡片

5.2 悬停微交互

- 按钮 hover：translateY(-2px) + box-shadow 加深，过渡 200ms - 卡片 hover：translateY(-4~8px) + 阴影扩大 + 可选的边框渐变亮起 - 图片 hover：scale(1.05)，容器 overflow-hidden，过渡 500ms - 链接 hover：下划线动画（scaleX 0 → 1，origin-left） - 图标 hover：旋转 15deg 或颜色填充过渡 - 磁吸按钮：按钮随鼠标位置轻微偏移（transform 跟随，spring 回弹） - 3D 倾斜卡片：卡片随鼠标位置产生 perspective rotateX/rotateY 倾斜（最大 8deg），配合 glare 高光移动

5.3 加载与反馈

- 骨架屏：灰色块 + shimmer 扫光动画（渐变光带从左到右，1.5s 循环） - 按钮 loading：文字替换为 spinner，按钮禁用且宽度不变 - 数字滚动：count-up 动画从 0 增长到目标值，1–1.5s，ease-out，保留小数位 - 进度条：宽度过渡 500ms ease-out，可带条纹流动动画 - 成功反馈：对勾路径绘制动画（stroke-dashoffset），500ms - 错误反馈：输入框 shake 抖动（translateX ±6px，3 次衰减，400ms）

5.4 滚动与页面级动画

- 滚动揭示：元素进入视口时触发 fade-up（IntersectionObserver，threshold 0.2，只触发一次） - 视差滚动：背景层移动速度为前景的 0.5 倍 - 滚动进度条：顶部 3px 渐变进度条随页面滚动比例增长 - 固定→变形头部：滚动时 Hero 大标题缩小并固定到导航栏 - 横向滚动画廊：垂直滚动驱动内容横向移动（scroll-timeline）

5.5 页面切换

- 视图切换：旧内容 fade-out（150ms ease-in）→ 新内容 fade-up（300ms ease-out） - Tab 切换：内容区 crossfade + 指示条滑动到目标位置（宽度与位置同时过渡 300ms） - 手风琴展开：高度动画用 grid-template-rows: 0fr → 1fr（避免 height auto 无法过渡），300ms

5.6 氛围型动画（提升高级感）

- 极光背景：3–4 个大尺寸径向渐变 blob（blur 60–100px，透明度 0.3–0.5），各自做 15–30s 的缓慢路径漂浮，互不同步 - 渐变文字流动：背景渐变 + background-position 循环动画（3–5s），background-clip: text - 网格呼吸：背景网格图案的 opacity 做极缓慢的明暗呼吸（8s） - 光晕跟随：卡片内光晕跟随鼠标位置移动（radial-gradient 的 center 跟随） - 打字机效果：文字逐字出现 + 光标闪烁，适合 slogan

六、迭代修改类提示词：界面不好看时怎么"骂"AI

第一版出来不满意？别说"不好看，重做"——那等于没说。用下面这些精准修改话术：

万能迭代句式：

保持现有结构和功能不变，只调整【某个维度】： - 具体问题：【描述你看到的毛病】 - 期望效果：【用上面的专业词描述目标】 - 不要改动：【列出怕被破坏的部分】

七、反面教材 vs 正确示范

案例 1：做一个登录页

❌反面教材：

帮我做一个好看的登录页面，要现代化一点。

✅正确示范：

用 React + Tailwind 做一个左右分屏登录页。左侧深色渐变背景（#0F172A → #1E1B4B）+ 3 个缓慢漂浮的极光渐变光斑（blur 80px）；右侧白色表单区，输入框圆角 10px，focus 时边框变 #6366F1 并带淡蓝外发光（过渡 200ms）。主按钮全宽、主色渐变、hover 上浮 1px 加深阴影。页面加载时表单从右侧滑入淡入（translateX 30px → 0，700ms，ease-out）。移动端隐藏左侧，表单全宽。

案例 2：加一个动画

❌反面教材：

给列表加个动画，让它动起来好看点。

✅正确示范：

列表项进入视口时依次执行 fade-up 入场动画：opacity 0 → 1、translateY(16px) → 0，时长 500ms，缓动 ease-out，每项之间延迟 80ms（stagger），用 IntersectionObserver 触发且只播放一次。卡片 hover 时上浮 4px 并加深阴影，过渡 250ms。动画只用 transform 和 opacity，保证性能。

案例 3：改风格

❌反面教材：

这个页面太丑了，做得高级一点。

✅正确示范：

保持结构不变，把视觉风格调整为 Linear 风格：背景改深色 #0A0A0B；卡片用 1px 半透明边框 rgba(255,255,255,0.08) 替代阴影；主色改为紫色系 #8B5CF6，仅点缀使用；标题加字间距 -0.02em；页面顶部加一个径向渐变光晕 rgba(139,92,246,0.12)；所有过渡时长统一 200–300ms。

八、动效参数速查卡

写动效提示词时，带上参数 = 专业 + 可控。

时长（duration）参考：

缓动函数（easing）参考：

黄金法则（写进提示词约束里很加分）：

• 动画只使用transform和opacity属性，避免触发布局重排
• 进场用 ease-out，退场用 ease-in
• 交互反馈 ≤ 300ms，装饰动画可以更慢
• 多个元素入场用 60–120ms 的 stagger 间隔
• 尊重prefers-reduced-motion，为敏感用户提供减弱动效的选项

九、一页纸速查卡（收藏用）

写 UI 提示词前，先回答这 6 个问题：

1. 技术栈：React/Vue/HTML + Tailwind/CSS？动画要不要库（Framer Motion / GSAP）？
2. 风格：极简 / 玻璃拟态 / Bento / 深色科技 / 商务？参考谁（Apple / Linear / Vercel）？
3. 配色：深浅模式？主色（给具体色值）？中性色系？
4. 布局：几栏？容器宽度？间距用 8px 体系？
5. 动效：入场方式（fade-up）？stagger 间隔？hover 反馈？时长和缓动？
6. 约束：响应式断点？不用外部图片？性能要求？

万能填空模板：

用【技术栈】实现一个【页面/组件】。 布局：【结构 + 容器宽度 + 间距】。 风格：【风格关键词 + 参考对象】。 配色：【背景色 + 主色色值 + 文字色】。 排版：【标题字号字重 + 正文行高】。 动效：入场【fade-up/stagger 参数】，hover【反馈描述】，缓动【cubic-bezier 值】。 约束：【响应式要求 + 性能/资源限制】。

📌使用建议：把第三章的词汇表和第四、五章的模板存成自己的提示词库，每次写页面时"拼积木"——选好风格词、填好色值、挂上动效描述，AI 产出的 UI 质量会有质的飞跃。