前端 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 视觉风格类你想说的专业说法直接抄进提示词看起来干净、不花哨极简风格Minimalist大量留白generous whitespace像苹果官网那样现代极简大字号排版精致产品图参考 Apple 官网设计语言磨砂玻璃那种半透明玻璃拟态Glassmorphismbackdrop-blur 半透明白色背景细边框像 iOS 控制中心玻璃拟态高斯模糊微妙内阴影很科技、很酷深色科技风深色背景霓虹渐变网格/光晕装饰像 Notion / Linear 那种Linear 风格深色紫色渐变光晕细线边框小字号精致排版像一块块卡片拼起来Bento Grid 布局便当盒网格大小不一的卡片组成的网格凸起凹陷的立体感新拟物Neumorphism柔和内外阴影营造浮雕感很商务、很正式企业商务风白底蓝色主色规整栅格克制的阴影3.2 配色类你想说的专业说法主色调蓝色主色primary#3B82F6配中性灰色阶slate/zinc 色板颜色和谐一点使用单色系配色monochromatic或类似色配色analogous突出重点按钮强调色accent color与主色形成对比仅用于 CTA 按钮和关键数据深色模式Dark mode背景 #0A0A0B / #111827文字用 slate-100弱化纯白渐变背景使用从 X 到 Y 的线性渐变linear-gradient角度 135deg那个发光的效果弥散光晕glowbox-shadow: 0 0 40px rgba(99,102,241,0.4)看起来很高级低饱和度配色大量中性色一个点缀色避免高饱和大色块3.3 排版字体类你想说的专业说法标题大一点醒目标题 48–72px字重 700–800行高 1.1–1.2层次分明建立清晰的字号层级如 48 / 32 / 24 / 16 / 14px字别太挤正文行高 1.6–1.8段落间距 ≥ 16px数字要好看数字使用等宽/表格数字tabular-nums / font-variant-numeric有点设计感标题用负字间距letter-spacing: -0.02em大字号收紧字距3.4 布局间距类你想说的专业说法别顶到边容器最大宽度 1200px左右内边距padding24px居中元素之间松一点使用 8px 间距体系8 / 16 / 24 / 32 / 48 / 64px区块间距 64–96px两栏布局桌面端grid-cols-2移动端堆叠为单列卡片圆角圆角border-radius12–16px大卡片可用 20–24px卡片有悬浮感柔和弥散阴影shadow: 0 8px 30px rgba(0,0,0,0.08)卡片之间有细线1px 边框颜色 rgba(255,255,255,0.08)深色或 #E5E7EB浅色3.5 动效类最重要的一张表你想说的专业说法慢慢出现淡入fade inopacity 0 → 1从下面冒上来上滑淡入fade-uptranslateY(20px) → 0 opacity 0 → 1一个一个出来交错动画stagger每个元素延迟 100–150ms 依次执行别那么生硬缓动函数用 ease-out 或 cubic-bezier(0.22, 1, 0.36, 1)弹一下弹簧动画springstiffness 300, damping 20或 ease-out-back鼠标放上去有反应hover 过渡transition时长 200–300mstransform shadow 变化点下去有反馈active 状态scale(0.98)时长 100ms滚动时跟着动滚动驱动动画scroll-driven / scroll-triggered animation背景跟着鼠标动视差效果parallax/ 鼠标跟随光晕加载中那个灰色块骨架屏skeleton 闪烁动画shimmer四、分场景提示词模板直接复制改改就能用使用方式复制模板 → 替换【】里的内容 → 发给 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圆角 10pxpadding 14px 28px带弥散光晕阴影 - 次按钮透明背景 1px 边框rgba(255,255,255,0.15)文字 slate-300 - badge圆角胶囊形半透明背景细边框内含一个小圆点呼吸闪烁【动效】 - 页面加载时badge → 标题 → 副标题 → 按钮组 → 预览图依次 fade-up 入场translateY 24px → 0opacity 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 滚动动画1sease-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→ 底部标签价格/按钮【风格】 - 白底卡片圆角 16px1px 边框 #E5E7EB - 封面区使用从【靛蓝到青色】的 135deg 渐变叠加微妙的网格纹理【动效】 - 卡片 hovertranslateY(-6px) 阴影从 shadow-sm 过渡到 shadow-xl时长 300msease-out - 封面渐变在 hover 时缓慢位移background-position 动画600ms - 底部按钮在 hover 时从透明淡入移动端始终显示 - 列表首次进入视口时卡片 stagger 入场fade-up间隔 60ms 【约束】 - 卡片内所有过渡使用 GPU 友好属性transform / opacity不要动画 width/height4.4 表单页请用【React Tailwind CSS】实现一个【用户注册】表单【布局】 - 居中卡片布局卡片宽 440px圆角 16pxpadding 40px白底弥散阴影 - 页面背景为极淡的渐变#F8FAFC → #EEF2FF 【组件细节】 - 输入框圆角 10px边框 #D1D5DBpadding 12px 16pxlabel 悬浮在输入框上方 14px slate-700 - focus 状态边框变主色 #6366F1 外发光 ringrgba(99,102,241,0.2)过渡 200ms - 错误状态边框 rose-500 下方错误提示文字 13px带轻微左右抖动动画shake400ms - 密码强度条4 段式随输入实时变色红→黄→绿宽度过渡 300ms - 提交按钮主色渐变宽度 100%带 loading 状态spinner 旋转文字变提交中... 【动效】 - 输入框 focus 时 label 轻微上移变色浮动标签效果 - 按钮 hover 上浮 1px 阴影加深active 时 scale(0.99) - 提交成功后按钮变为对勾 ✓ 图标绿色背景打勾路径用 stroke-dasharray 绘制动画500ms 【约束】 - 表单验证实时进行错误提示不抖动布局预留空间或用 absolute4.5 登录页带视觉冲击力请实现一个左右分屏的登录页【布局】 - 左侧 55% 为品牌展示区右侧 45% 为登录表单移动端隐藏左侧 - 左侧深色渐变背景#0F172A → #1E1B4B叠加缓慢流动的极光渐变光斑3 个径向渐变 blobblur 80px各自做 15–25s 的漂浮路径动画 - 左侧内容Logo 一句大字 slogan40px, 字重 700 底部客户 logo 墙灰度【表单区】 - 居中最大宽度 380px - 输入框与按钮风格同【4.4 模板】 - 第三方登录按钮白底边框图标hover 时背景变淡灰【动效】 - 页面加载右侧表单整体从右侧滑入淡入translateX 30px → 0700msease-out - 左侧 slogan 文字逐行 fade-upstagger 200ms - 极光 blob 持续漂浮互不同步4.6 导航栏请实现一个顶部导航栏【布局与风格】 - 高度 64px内容最大宽度 1200px 居中左 Logo 中导航链接右按钮组 - 初始透明背景向下滚动超过 10px 后变为玻璃拟态backdrop-blur-xl 半透明白底底部 1px 细线背景过渡 300ms 【动效】 - 导航链接 hover文字颜色过渡到主色下方出现 2px 下划线从左到右展开scaleX 0 → 1origin-left250ms - 移动端汉堡菜单图标点击后三线变形为 X线条 rotate translate 过渡 300ms菜单面板从顶部滑下translateY opacity350msease-out菜单项 stagger 淡入 - 向下滚动时导航栏隐藏translateY -100%向上滚动时显示过渡 300ms4.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) - 关闭时反向播放时长 200msease-in - 圆角 16px阴影 shadow-2xl宽度 480px 【抽屉 Drawer】 - 从右侧滑入translateX(100%) → 0时长 300msease-out遮罩同步淡入 - 宽度 400px圆角仅左侧 16px 【Toast 通知】 - 从顶部居中位置滑入淡入translateY(-16px) → 0300ms - 停留 3s 后向上滑出淡出 - 多条 Toast 堆叠时下方的平滑下移让位位置过渡 300ms - 成功绿 / 错误红 / 警告黄左侧 4px 色条对应图标【约束】 - 所有浮层支持 ESC 关闭、点击遮罩关闭 - 进场动画用 ease-out退场用 ease-in符合自然直觉五、动效提示词专项库界面好看一半靠设计一半靠动效。以下是高频动效的描述话术直接拼接进任何提示词。5.1 入场动画- fade-up 淡入上移opacity 0 → 1translateY(20px) → 0时长 600msease-out - 交错入场stagger列表项依次执行入场动画每项延迟 80–120ms - 模糊入场初始 filter: blur(8px) → blur(0)配合 opacity适合大图和 Hero - 裁剪揭示用 clip-path 从下到上揭示内容适合标题和封面图 - 缩放入场scale(0.9) → 1 opacity适合弹窗和卡片5.2 悬停微交互- 按钮 hovertranslateY(-2px) box-shadow 加深过渡 200ms - 卡片 hovertranslateY(-4~8px) 阴影扩大可选的边框渐变亮起 - 图片 hoverscale(1.05)容器 overflow-hidden过渡 500ms - 链接 hover下划线动画scaleX 0 → 1origin-left - 图标 hover旋转 15deg 或颜色填充过渡 - 磁吸按钮按钮随鼠标位置轻微偏移transform 跟随spring 回弹 - 3D 倾斜卡片卡片随鼠标位置产生 perspective rotateX/rotateY 倾斜最大 8deg配合 glare 高光移动5.3 加载与反馈- 骨架屏灰色块 shimmer 扫光动画渐变光带从左到右1.5s 循环 - 按钮 loading文字替换为 spinner按钮禁用且宽度不变 - 数字滚动count-up 动画从 0 增长到目标值1–1.5sease-out保留小数位 - 进度条宽度过渡 500ms ease-out可带条纹流动动画 - 成功反馈对勾路径绘制动画stroke-dashoffset500ms - 错误反馈输入框 shake 抖动translateX ±6px3 次衰减400ms5.4 滚动与页面级动画- 滚动揭示元素进入视口时触发 fade-upIntersectionObserverthreshold 0.2只触发一次 - 视差滚动背景层移动速度为前景的 0.5 倍 - 滚动进度条顶部 3px 渐变进度条随页面滚动比例增长 - 固定→变形头部滚动时 Hero 大标题缩小并固定到导航栏 - 横向滚动画廊垂直滚动驱动内容横向移动scroll-timeline5.5 页面切换- 视图切换旧内容 fade-out150ms ease-in→ 新内容 fade-up300ms ease-out - Tab 切换内容区 crossfade 指示条滑动到目标位置宽度与位置同时过渡 300ms - 手风琴展开高度动画用 grid-template-rows: 0fr → 1fr避免 height auto 无法过渡300ms5.6 氛围型动画提升高级感- 极光背景3–4 个大尺寸径向渐变 blobblur 60–100px透明度 0.3–0.5各自做 15–30s 的缓慢路径漂浮互不同步 - 渐变文字流动背景渐变 background-position 循环动画3–5sbackground-clip: text - 网格呼吸背景网格图案的 opacity 做极缓慢的明暗呼吸8s - 光晕跟随卡片内光晕跟随鼠标位置移动radial-gradient 的 center 跟随 - 打字机效果文字逐字出现光标闪烁适合 slogan六、迭代修改类提示词界面不好看时怎么骂AI第一版出来不满意别说不好看重做——那等于没说。用下面这些精准修改话术你的感受有效的修改提示词感觉很挤“增大留白区块间距改为 96px卡片内边距改为 32px正文行高提到 1.8”感觉很廉价“去掉所有生硬阴影改为柔和的弥散阴影0 8px 30px rgba(0,0,0,0.06)边框颜色降到 #E5E7EB圆角统一为 12px”颜色很土“降低饱和度改用 slate 中性色系为主主色仅用于按钮和关键数据背景改为 #FAFAFA 而非纯白”没有层次感“建立字号层级标题 48/32/24正文 16辅助文字 14 且用 slate-400标题字重 700正文字重 400”动画很生硬“所有过渡缓动改为 cubic-bezier(0.22, 1, 0.36, 1)入场动画时长提到 600ms列表项加 100ms 的 stagger 延迟”像十年前的网站“参考 Linear / Vercel 官网的设计语言重做深色背景、细线边框、渐变光晕、小字号精致排版”按钮没感觉“按钮 hover 加上浮 2px 阴影加深背景亮度提升过渡 200msactive 时 scale(0.98)”手机上看乱了“检查响应式移动端导航改抽屉、多列网格改单列、字号按 0.75 倍缩放、横向 padding 改为 16px”万能迭代句式保持现有结构和功能不变只调整【某个维度】 - 具体问题【描述你看到的毛病】 - 期望效果【用上面的专业词描述目标】 - 不要改动【列出怕被破坏的部分】七、反面教材 vs 正确示范案例 1做一个登录页❌反面教材帮我做一个好看的登录页面要现代化一点。✅正确示范用 React Tailwind 做一个左右分屏登录页。左侧深色渐变背景#0F172A → #1E1B4B 3 个缓慢漂浮的极光渐变光斑blur 80px右侧白色表单区输入框圆角 10pxfocus 时边框变 #6366F1 并带淡蓝外发光过渡 200ms。主按钮全宽、主色渐变、hover 上浮 1px 加深阴影。页面加载时表单从右侧滑入淡入translateX 30px → 0700msease-out。移动端隐藏左侧表单全宽。案例 2加一个动画❌反面教材给列表加个动画让它动起来好看点。✅正确示范列表项进入视口时依次执行 fade-up 入场动画opacity 0 → 1、translateY(16px) → 0时长 500ms缓动 ease-out每项之间延迟 80msstagger用 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参考场景推荐时长按钮/链接 hover150–250ms卡片 hover、输入框 focus200–300ms弹窗/抽屉进出250–350ms页面元素入场500–800ms数字滚动 count-up1000–1500ms氛围动画极光、光晕漂浮15–30s 循环缓动函数easing参考效果缓动通用入场最推荐cubic-bezier(0.22, 1, 0.36, 1)元素进场ease-out元素退场ease-in来回移动悬浮、呼吸ease-in-out回弹感cubic-bezier(0.34, 1.56, 0.64, 1)ease-out-back或 spring 动画黄金法则写进提示词约束里很加分动画只使用transform和opacity属性避免触发布局重排进场用 ease-out退场用 ease-in交互反馈 ≤ 300ms装饰动画可以更慢多个元素入场用 60–120ms 的 stagger 间隔尊重prefers-reduced-motion为敏感用户提供减弱动效的选项九、一页纸速查卡收藏用写 UI 提示词前先回答这 6 个问题技术栈React/Vue/HTML Tailwind/CSS动画要不要库Framer Motion / GSAP风格极简 / 玻璃拟态 / Bento / 深色科技 / 商务参考谁Apple / Linear / Vercel配色深浅模式主色给具体色值中性色系布局几栏容器宽度间距用 8px 体系动效入场方式fade-upstagger 间隔hover 反馈时长和缓动约束响应式断点不用外部图片性能要求万能填空模板用【技术栈】实现一个【页面/组件】。布局【结构容器宽度间距】。风格【风格关键词参考对象】。配色【背景色主色色值文字色】。排版【标题字号字重正文行高】。动效入场【fade-up/stagger 参数】hover【反馈描述】缓动【cubic-bezier 值】。约束【响应式要求性能/资源限制】。使用建议把第三章的词汇表和第四、五章的模板存成自己的提示词库每次写页面时拼积木——选好风格词、填好色值、挂上动效描述AI 产出的 UI 质量会有质的飞跃。

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

相关推荐

Unity脚本基石：从Component到MonoBehaviour的继承链深度解析

产品经理开会纪要：2026年3款带免费额度录音转会议纪要工具推荐

PHP自动化重构终极指南：3步实现代码现代化升级

更多资讯

docker-minecraft-server 完整指南：3 个环境变量，10 分钟上线可玩的 Minecraft 服务器

SadTalker语音驱动人脸动画零基础实战：5分钟跑通第一个结果的完整避坑指南

子比主题全能插件：性能优化与功能增强实战

Assignment de Web-Dev-For-Beginners: Cómo Explorar y Evaluar Herramientas Modernas de Desarrollo Web

DeepSeek Harness实战：从零搭建AI Agent完整指南

自适应信号处理在通信系统中的原理与实践

今日更新

SpacetimeDB C++ 模块库实战：用 C++20 在数据库内构建 WebAssembly 模块

别踩雷！不是所有 AI 写作工具都靠谱，2026 高校认可工具精选

SSM+MySQL幼儿园管理系统源码解析：从部署到优化

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？