用文字做造型:让它美起来
beginner~12 分钟0/4 步骤
用文字做造型:让它美起来
有个没人告诉你的秘密:vibe coding 的时候,你不是用代码做样式——而是用形容词。
你不需要背 CSS 属性。你像给设计师写需求一样描述想要的视觉效果:用感觉、形容词和参照物。「深色、玻璃质感、高级感——像一款音乐 App。」AI 会把这股氛围翻译成 class。
来看一个真实的例子。
你说:
「把我的个人资料卡片做成深色玻璃质感,圆角柔和,有高级感——像 Spotify 的正在播放界面。」
AI 产出:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
每个形容词都变成了 class:
- 深色 →
bg-gradient-to-br from-slate-950 to-indigo-950 - 玻璃质感 →
bg-white/10 backdrop-blur-md border border-white/20 - 高级感、柔和圆角 →
rounded-2xl p-8
这就是全部诀窍:形容词进,class 出。你的参照物越好(「像音乐 App」「像银行的落地页」「像霓虹街机厅」),结果就越好。
下面是你上节课的个人资料卡片——所有样式都被剥掉了。纯白背景、默认文字、零氛围。你的任务:一次描述一种造型,把它重新唤醒。
操作说明
1
给 <body> 加一个深色渐变背景——先在心里描述这股氛围:深邃、暗色、高级。然后加上对应的 class
提示： 试试:`<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
2
给卡片容器做造型:磨砂玻璃、柔和圆角、充足内边距——就是那种「玻璃质感、高级」的造型
3
把 CTA 链接变成渐变按钮——醒目、有色彩、让人没法忽视
4
加一个 hover 效果,让按钮在鼠标碰到时有所反应——小细节让东西显得鲜活
你的代码
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容，我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤：给 <body> 加一个深色渐变背景——先在心里描述这股氛围:深邃、暗色、高级。然后加上对应的 class
实时预览
实时预览