大家好我是卡卡罗特。如果你想从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 教程如果对你有用点个赞加关注再走呗