5 个小众网站
帮你做出有设计感的网页
Five niche galleries for better-looking web pages, plus one prompt that turns a screenshot into a design brief.
首屏、价格、导航、行动按钮、页脚——一个区块一个参考网站，再加一段把截图变成设计说明的提示词。阅读 6 分钟。
这份教程讲什么 /intro
用 AI 做网页，最常见的问题不是不会写代码，而是做出来的页面都长一个样。这份教程整理了 5 个我自己常逛的小众设计参考网站，分别对应网页里最关键的 5 个区块：首屏、价格、导航、行动按钮和页脚。每个网站我都写了怎么逛、看什么；最后附上一段我一直在用的提示词，把一张截图变成 Claude 能照着做的设计说明。
“做得好看一点”，不是一个需求 /why
AI 做出来的页面普通，往往是因为我们说不清自己想要什么。你脑子里有画面，但没有词。
“好看一点”谁都听不懂；“大标题左对齐、占半屏，下面一行小字，右边一张产品图，背景只用一个浅色”——这才是能被执行的需求。
下面这几个网站，每个只收集一种区块，一收就是几百个。你一路往下刷，刷到让你停下来的那个，就有了描述它的词。
💡 一个区块只挑一个参考就够了。参考越多，风格越打架，拼出来的页面就像借来的。
1 · 首屏 🎬 /hero
几百个真实网站的首屏合集。首屏决定别人会不会继续往下看，所以这里值得花最多时间。
2 · 价格 💳 /pricing
专门收集价格方案区块，很多是干净利落的苹果风。价格区最容易做乱，因为大家总想用文字解释，而不是让排版自己去对比。
4 · 行动按钮 🎯 /cta
收集“点这里”的区块，有模板，也有来自真实网站的参考——可以点进原网站，看它放在什么上下文里。
把截图变成一份设计说明 /prompt
直接丢一张图给 Claude 说“照这个做”，只会得到一个模糊的仿品。更好的做法是：先让它用自己的话把参考描述一遍，你确认无误，再开始写代码。
我会附上一张【首屏 / 价格 / 导航 / 行动按钮 / 页脚】的截图作为参考。 先别写代码，请把它描述成一份设计说明： 1. 布局和对齐方式，大概留了多少空白 2. 文字：用了几种字号、大概多大、哪些字重 3. 配色：列出色值，并指出哪个是强调色 4. 它刻意没有放什么 然后告诉我：这个参考里哪些地方和我网站的其他部分不搭，你打算怎么改。 等我确认这份说明后，再用我的内容和我的配色来做，不要照搬参考里的。
🌱 把 Claude 写回来的那段说明存下来。之后做每个新区块时，都先把它贴在最前面——整页就会延续同一种设计语言。