AI Inspiration WorldVibe Coding visual dictionary
82 Chinese prompts for building websites, each naming one layout, component, motion effect or visual style and spelling out how to use it.
- Author
- Adrian Punk ↗ (@AdrianPunk115)
- Models / tools
- Works with multiple models and tools
- License
- 未声明 · Excerpt
- Original language
- zh
- Purpose
- Web & Apps
为 Punk 的个人网站创建一个响应式卡片式布局， 项目区展示 6 张独立卡片，每张卡片包含项目封面、项目名称、两行简介、技术标签和“查看项目”按钮； 桌面端三列，平板端两列，手机端单列；Read the full prompt in the author’s original post ↗
Only an excerpt is shown here; full-text republication permission has not been verified.
Attribution required — keep the author’s name and original source when reusing this prompt. Author: Adrian Punk ｜ Original source ↗
How to use it
| Variable | What to enter | Example |
|---|---|---|
网站主人和 Logo | Site owner and logo（原文是 Punk） | — |
页面和项目内容 | Page and project content | — |
颜色、尺寸、断点、动画时长 | Colours, sizes, breakpoints, animation timing | — |
项目标签和联系方式 | Project tags and contact details | — |
Models / tools: Works with multiple models and tools
- Pick the one you need, swap Punk for your own site and content, and give it to the AI coding tool you use.
What it can do
This is a set of Chinese prompts Adrian Punk posted on X in two parts, called the "Vibe Coding visual dictionary": 41 in each part, 82 in all. Each one takes a common web design term, such as Bento Grid, Masonry, Sticky Navbar, Command Palette, Skeleton Screen, Glassmorphism or View Transition, and writes it up as a request you can hand straight to AI, using a personal portfolio site for someone called Punk as the example. The first part covers layouts and components; the second covers scrolling and loading states, visual styles and interactive effects, and each part ends with a prompt that pulls the whole site together. When you don't know what an effect is called, you can find its name and wording here first. Pick the one you need, swap Punk for your own site and content, and give it to the AI coding tool you use.
Who it is for
Designers and developers who build websites with AI and want to know how to describe different layouts and effects.
Before you use it
The author doesn't name a model, so any common AI coding tool is worth trying. "Custom Cursor" in the text means the mouse pointer style, not the Cursor editor. The sizes, breakpoints, colours and animation timings in the prompts are the author's examples; replace them with your own. The author has not stated a reuse licence, so we show only the first three lines of the first prompt; see the author's posts for all 82 and the sample images.
Follow the stated license. Do not use the output to replicate someone else’s work or a real person’s likeness.
Based on the author's public posts. Not tested by AI Inspiration World.