前端提示词

通用 Vibe Prompt,覆盖布局、交互与动效。

布局空间 Vibe

让页面会呼吸,先处理信息密度、留白和空间层级。

6

响应式卡片网格

01

高端杂志式网格,大留白、微层级、移动端单列。

全屏极简英雄区

02

极简渐变、巨大标题、视觉重心按钮。

现代工作空间侧边栏

03

粘性侧边栏、柔和分隔线、玻璃态内容卡片。

移动端产品故事详情

04

图片与文字交替,垂直滚动带故事感。

电商瀑布流商品列表

05

轻微透视与柔和圆角,购物氛围轻松。

单栏极简登录页

06

居中表单、轻动效纹理、安静专注。

交互反馈 Vibe

让操作有灵魂,覆盖按钮、下拉、表单、模态、分页和加载。

6

高级按钮状态

07

hover、active、disabled 都有优雅反馈。

丝滑下拉菜单

08

自然展开、hover 高亮、选中项品牌色点缀。

浮动标签表单反馈

09

聚焦渐变边框,有效勾选,无效轻提示。

柔和模态框

10

缩放出现、背景渐暗、关闭按钮悬浮。

轻量分页器

11

简洁数字、当前页圆点、hover 轻放大。

舒缓骨架屏

12

骨架屏加轻微脉动,等待体验不突兀。

动画过渡 Vibe

用 60fps 的轻量过渡塑造切换、滚动和状态反馈。

6

滚动视差淡入

13

标题和卡片依次淡入上移,曲线自然。

Tab 横向轻扫切换

14

内容轻扫淡入,下划线渐变动画。

亮暗模式平滑切换

15

颜色和缩放同时过渡,像系统级切换。

成功提示滑入弹跳

16

从下方滑入,轻微弹跳后自动淡出。

图片懒加载淡入

17

模糊到清晰,避免突兀加载。

回到顶部按钮

18

滚动后淡入,点击平滑回到顶部。

颜色与排版 Vibe

用克制色彩、字号、行高和图标统一高级感。

4

中性灰品牌排版

19

中性灰加品牌强调色,标题字重与行高明确。

卡片文字层级

20

动态行高、品牌点缀和低饱和灰形成层次。

低饱和渐变

21

柔和过渡,避免廉价彩虹渐变。

统一线性图标

22

线条风格一致,hover 到品牌色。

组件状态与细节 Vibe

补齐空状态、错误页、表格、导航这些容易模板化的位置。

4

温暖空状态

23

柔和插图、大标题、轻副标题和行动按钮。

友好错误页面

24

轻幽默插图、清晰指引、返回按钮。

舒适数据表格

25

斑马纹、hover 高亮、固定表头。

毛玻璃导航栏

26

Logo 居左、菜单下划线、移动端折叠。

整体氛围 Vibe

为整页定调,控制技术感、节日感、后台感和作品集感。

4

温暖科技感整页

27

暖灰背景、冷调强调色、现代而亲切。

轻快节日营销页

28

活力留白、圆润元素、柔和动画。

企业级深色后台

29

深色优先、清晰层级、极简按钮。

极简艺术作品集

30

大图、极致留白、画廊式悬浮交互。