AI灵感世界Vibe Coding 视觉词典
82 条做网站的中文提示词，一条讲一种布局、组件、动效或视觉风格，写清楚每个名词该怎么用。
- 作者
- Adrian Punk ↗ (@AdrianPunk115)
- 适用模型／工具
- 适合多个模型／工具
- 许可
- 未声明 · 摘录
- 原文语言
- zh
- 用途
- 网页与 App
为 Punk 的个人网站创建一个响应式卡片式布局， 项目区展示 6 张独立卡片，每张卡片包含项目封面、项目名称、两行简介、技术标签和“查看项目”按钮； 桌面端三列，平板端两列，手机端单列；去作者原帖看完整提示词 ↗
全文转载许可尚未核实，本站只展示摘录。
署名要求：复用时请保留作者名和原作出处。 作者: Adrian Punk ｜ 原作出处 ↗
怎么用
| 变量名 | 填什么 | 示例 |
|---|---|---|
网站主人和 Logo | 网站主人和 Logo | — |
页面和项目内容 | 页面和项目内容 | — |
颜色、尺寸、断点、动画时长 | 颜色、尺寸、断点、动画时长 | — |
项目标签和联系方式 | 项目标签和联系方式 | — |
适用模型／工具: 适合多个模型／工具
- 挑出你要的那一条，把 Punk 换成你自己的网站和内容，交给你用的 AI 编程工具。
它能做什么
这是 Adrian Punk 在 X 上分两篇发的一套中文提示词，叫“Vibe Coding 视觉词典”，上下篇各 41 条，一共 82 条。每一条拿一个做网页常用的名词举例，比如 Bento Grid、Masonry、Sticky Navbar、Command Palette、Skeleton Screen、Glassmorphism、View Transition，写成一段能直接交给 AI 的需求，都以一个叫 Punk 的个人作品网站为例。上篇讲布局和组件，下篇讲滚动和加载状态、视觉风格和交互特效，两篇最后各有一条把前面内容串起来的整站提示词。不知道某种效果叫什么的时候，可以先在这里找到名字和写法。挑出你要的那一条，把 Punk 换成你自己的网站和内容，交给你用的 AI 编程工具。
适合谁
用 AI 做网站、想知道各种布局和效果该怎么描述的设计者和开发者。
使用前提
作者没写具体用哪个模型，常见的 AI 编程工具都可以试。正文里的 Custom Cursor 指的是鼠标光标样式，不是 Cursor 编辑器。提示词里的尺寸、断点、颜色和动画时长都是作者举的例子，要换成你自己的。作者没有声明转载许可，本站只展示第一条的前 3 行，完整 82 条和样图请看作者原帖。
请遵守所列许可，不要用生成内容复刻他人作品或真人肖像。
以上根据作者公开发布的内容整理，本站没有实际测试。