大家好，我是卡卡罗特。

如果你想从0开始做一个网站。

如果是你，怎么做才能又快、颜值又高呢？🤔

我觉得是“借鉴”🤔

先用AI复刻好看的页面，然后再根据你自己的业务规则去改。

今天给大家分享一些我经常用到的网站。

里面有很多前端页面的参考。

有了这个网站之后，结合AI，你就可以复刻里面的页面排版、UI样式，非常方便。

网站

✅网站：https://www.designprompts.dev

这个网站收录了 30 多种网页视觉风格，例如：

• Modern Dark：现代暗黑科技风
• SaaS：常见的软件产品官网风格
• Neo Brutalism：新粗野主义
• Bauhaus：包豪斯风格
• Swiss Minimalist：瑞士极简
• Newsprint：报纸编辑风
• Cyberpunk：赛博朋克
• Luxury：奢侈品牌风
• Sketch：手绘草图风

每个页面使用的内容和数据结构基本相同，是非常标准的SaaS网站，只是换了一套设计系统。

网站的布局如下，有导航、首屏Hero、产品展示、博客文章等。

页面
├── 顶部导航
├── 首屏 Hero
├── 数据指标
├── 产品展示
├── 产品介绍横幅
├── 核心功能
├── 博客文章
├── 使用流程
├── 产品优势
├── 用户评价
├── 价格方案
├── 常见问题
├── 底部行动按钮
└── 页脚

这样你能非常直观地看到：同一个网站，换一种视觉语言后会变成什么样。

官方页面也将它描述为“使用相同数据展示 31+ 种设计风格，并提供可供 AI 使用的提示词”。

你可以在左侧这里筛选不同风格的主题。

比如我在这里找到一个很好看的手绘风格的网站。

在中间这里把这个URL拷贝出来。designprompts.dev/sketch。

把整个网站截出来了，给大家看一下。可以看到这个网站，颜值还是很高的。

怎么用呢？

网站提供提示词，点击右上角的Get Prompt可以直接把提示词copy出来。

直接拷贝这个提示词，然后发给你的AI，我们这里以Codex为例。 我这里有一个通过文本生成手绘纸张图片的网站。
我让Codex利用5.6 Sol模型帮我生成了一个首页🤔。看着也还行，但是一股Codex的味道😂
接下来我直接使用上面的提示词，让Codex帮我优化一下。
都是一把直出的，整体还是挺令人满意的。大家觉得呢�* designprompts.dev/sketch 另一种风格
我又换了另外一种风格，整体会简洁一点，大气一点。

感觉整体还是不错的。大家感兴趣的话，可以拷贝这种提示词，去把自己网站的风格改一下。

---

我是卡卡罗特，持续分享对你有用的 AI 教程～

如果对你有用，点个赞加关注再走呗🥰