「AI」网站模版，效果如何？
<p><strong>十年码农经验，都感觉当下的AI编程，强的离谱。</strong></p><h1 id="一简介">一、简介</h1>
<p>最近在开发产品的二期，就是做楼里App的网站版，但是会在整个过程中实践AI的能力，面对的第一个问题就是：前端的代码工程和网站模板。</p>
<p>带着这个问题，直接开始各种AI工具的尝试，半天的时间，就得到预期的效果了。</p>
<p>对于网站布局和结构，想要参考的布局和风格都有预期，所以直接开始调研，先用大模型做出网页模板，整体看一下视觉效果，再去创建代码工程优化细节。</p>
<h1 id="二风格提示词">二、风格提示词</h1>
<p>网站就包括首页、AI工具、知识库，这三个模块，自己喜欢的风格是GitHub、OpenAI、HuggingFace这三款，此处使用GPT5模型。</p>
<p>这里的想法是，把喜欢的网站风格分析出来，加到自己的提示词中，然后由大模型输出网站模板。</p>
<pre><code class="language-markdown">从前端编程的专业角度，分析下面网站的布局，视觉，色调，分别做共性总结即可，每一点在100字以内，不必逐个分析。
GitHub：https://github.com/
Apache：https://github.com/apache
HuggingFace：https://huggingface.co/
OpenAI：https://openai.com/
</code></pre>
<p>分别生成粗略和细致的两版描述，之前说过一个实践经验，提示词太细致容易影响AI发挥，所以这里选择两个版本的提示词。</p>
<ul>
<li>
<p><strong>100字描述</strong></p>
<ul>
<li><strong>布局</strong>：均采用响应式网格布局，首页信息分区明确，顶部导航固定，内容层次清晰，兼顾桌面和移动端体验。</li>
<li><strong>视觉</strong>：整体风格简洁现代，强调内容可读性，使用大块留白和卡片式展示，交互元素反馈明显，突出核心功能和入口。</li>
<li><strong>色调</strong>：主色偏中性或科技感蓝灰色系，搭配少量强调色，整体视觉统一且不抢内容，传达专业、可信赖和现代感。</li>
</ul>
</li>
<li>
<p><strong>200字描述</strong></p>
<ul>
<li><strong>布局</strong>： 网站采用响应式网格布局，首页顶部固定导航栏便于快速访问核心模块，信息分区清晰，内容呈现层次分明。主要内容区域通过卡片式或分块式布局展示功能或产品，强调核心入口和交互点，同时兼顾桌面和移动端的适配。整体结构简洁，减少干扰元素，突出用户关注的核心信息，确保页面快速加载和易用性。</li>
<li><strong>视觉</strong>： 整体视觉风格简约现代，强调内容可读性和信息层次。广泛使用留白和分隔线，增强视觉呼吸感。关键功能或交互元素采用明显的按钮或高亮样式，提供即时反馈。图标与图像风格统一，文字排版清晰，视觉重点集中在核心操作和重要信息上，整体设计传达科技感和专业感。</li>
<li><strong>色调</strong>： 主色调多为中性或冷色系，如蓝灰色、白色和黑色，辅以少量强调色用于按钮或链接，突出交互和重要信息。色彩搭配统一且低干扰，既保证内容可读性，又传达专业、可信赖和现代感。整体色彩策略注重视觉一致性，避免花哨和杂乱，营造高端、科技化的用户体验。</li>
</ul>
</li>
</ul>
<h1 id="三大模型生成">三、大模型生成</h1>
<p>先基于几款自己常用的大模型生成，主要是DeepSeek，KimiK2，智谱清言，在多轮尝试的过程中，也有不错的模板，但是离预期的结构和视觉，始终差点意思。</p>
<h2 id="31-简版提示词">3.1 简版提示词</h2>
<p>从几款模型的输出效果看，并没有获得比较满意的网站模板，并且AI味赛博风格非常明显</p>
<pre><code class="language-markdown">一、网站核心模块
① 首页-简介 + 产品/功能概览
② 广场页-基于大模型的实用工具集合（卡片网格，每卡片含 “使用/文档/记录” 三要素）
③ 知识库-AI 实践经验文章集合，按分类可过滤，支持文章预览
二、关键要求
布局：均采用响应式网格布局，首页信息分区明确，顶部导航固定，内容层次清晰，兼顾桌面和移动端体验。
视觉：整体风格简洁现代，强调内容可读性，使用大块留白和卡片式展示，交互元素反馈明显，突出核心功能和入口。
色调：主色偏中性或科技感蓝灰色系，搭配少量强调色，整体视觉统一且不抢内容，传达专业、可信赖和现代感。
现在，请基于上述要求生成单文件 HTML，并确保页面在移动与桌面端都能良好展示。
</code></pre>
<p><img alt="1" loading="lazy" src="https://img2024.cnblogs.com/blog/1691717/202509/1691717-20250919105839461-629860643.png" class="lazyload"></p>
<h2 id="32-复杂版提示词">3.2 复杂版提示词</h2>
<p>这一段提示词，跑出一款还算可以的模板，整体的效果有点接近自己的预期，不过还是差点感觉。</p>
<pre><code class="language-markdown">你是资深产品设计顾问兼前端工程师。任务：基于要求生成单文件 HTML，并确保页面在移动与桌面端都能良好展示。
一、网站核心模块
① 首页-简介 + 产品/功能概览
② 广场页-基于大模型的实用工具集合（卡片网格，每卡片含 “使用/文档/记录” 三要素）
③ 知识库-AI 实践经验文章集合，按分类可过滤，支持文章预览
二、开发要求
布局： 网站采用响应式网格布局，首页顶部固定导航栏便于快速访问核心模块，信息分区清晰，内容呈现层次分明。主要内容区域通过卡片式或分块式布局展示功能或产品，强调核心入口和交互点，同时兼顾桌面和移动端的适配。整体结构简洁，减少干扰元素，突出用户关注的核心信息，确保页面快速加载和易用性。
视觉： 整体视觉风格简约现代，强调内容可读性和信息层次。广泛使用留白和分隔线，增强视觉呼吸感。关键功能或交互元素采用明显的按钮或高亮样式，提供即时反馈。图标与图像风格统一，文字排版清晰，视觉重点集中在核心操作和重要信息上，整体设计传达科技感和专业感。
色调： 主色调多为中性或冷色系，如蓝灰色、白色和黑色，辅以少量强调色用于按钮或链接，突出交互和重要信息。色彩搭配统一且低干扰，既保证内容可读性，又传达专业、可信赖和现代感。整体色彩策略注重视觉一致性，避免花哨和杂乱，营造高端、科技化的用户体验。
</code></pre>
<p><img alt="2" loading="lazy" src="https://img2024.cnblogs.com/blog/1691717/202509/1691717-20250919105843604-1656011164.png" class="lazyload"></p>
<h2 id="33-提示词重构">3.3 提示词重构</h2>
<p>上面的内容普遍都是AI赛博风，考虑会不会是提示词有问题，于是用专业的PromptPerfect工具，重新优化了一版提示词。</p>
<pre><code class="language-markdown">需求是开发个人AI网站，网站核心布局如下：
1、首页，简介和产品的概览；
2、广场页，基于大模型，开发实用的工具；
3、知识库，记录AI实践过程中有价值的内容，形成分类文章。
分析下面网站的布局，视觉，色调，作为个人网站的开发要求。
色调参考-GitHub：https://github.com/
广场页参考-Apache：https://github.com/apache
知识库参考-HuggingFace：https://huggingface.co/
首页参考-OpenAI：https://openai.com/
基于上面需求，设计提示词工程，可以直接用来生成代码。
</code></pre>
<p>下面的提示词结构，末尾的一句要求是自己加入的，可以直接预览。从执行的效果看，AI味依旧明显，但是赛博风格弱化了很多，有点类似常规的小破站了。</p>
<pre><code class="language-markdown">开发个人AI网站，包含以下页面：
1. 首页：
a. 简介和产品概览
b. 顶部导航栏，包括"首页"、"广场"、"知识库"、"联系我们"等链接
c. 一个吸引人的主内容区域，包含网站简介、产品功能图示（可以使用图标或图片）
d. 脚注区域，列出版权信息和社交媒体链接
2. 广场页：
a. 展示各种实用工具，侧重于AI模型应用
b. 每个工具以卡片形式展示，包括标题、简短描述和操作按钮
c. 顶部导航和侧边栏，用于快速访问其他工具或分类
3. 知识库页：
a. 记录AI实践过程中的内容，形成分类文章
b. 分类列表和文章预览，文章包括标题、简短描述和链接到详细内容页
c. 顶部导航和侧边栏，用于快速浏览文章分类和最近更新
4. 通用设计元素：
a. 色调：基于白色为背景色，结合蓝色、灰色、黑色等辅助色，以突出内容和功能
b. 使用现代的响应式设计，确保在不同设备上的流畅体验
c. 清楚的排版结构，使用简洁的字体和适当的空白区域
5. 示例代码：
a. HTML5结构化标签如header、nav、section和footer等元素
b. CSS用于布局和样式，包括flexbox和grid实现响应式设计
c. JavaScript用于交互功能，如下拉菜单、动态内容加载等
请生成上述个人AI网站的完整代码，包括HTML、CSS和JavaScript部分，代码放在单个HTML文件中，可以直接预览。
</code></pre>
<p><img alt="3" loading="lazy" src="https://img2024.cnblogs.com/blog/1691717/202509/1691717-20250919105846689-1220297905.png" class="lazyload"></p>
<h1 id="四智能体生成">四、智能体生成</h1>
<p>上面几组提示词的效果，始终不符合自己的感觉，再次细化提示词结构，指定每个页面参考的网站地址，然后直接用<strong>智能体</strong>执行提示词。</p>
<pre><code class="language-markdown">需求是开发个人AI网站，网站核心布局如下：
1、首页，包含3个模块，产品简介，热门应用，精选内容。
布局和视觉参考1：https://github.com/
布局和视觉参考2：https://openai.com/
2、广场页，基于大模型，开发实用的工具，会进行一级分类，使用网格布局，填充3个分类10条数据；
布局和视觉参考：https://github.com/apache
3、知识库，记录AI实践过程中有价值的内容，形成文章，会进行一级分类，使用网格布局，填充3个分类10条数据；
布局和视觉参考：https://huggingface.co/
4、网站的页脚自由发挥，结构整体协调即可。
基于Vue3框架，HTML、CSS、JS等编程语言，开发前端代码工程即可，要求可以直接预览。
</code></pre>
<p>不得不说复杂的任务，还得是智能体好用，<strong>Manus</strong>的第一版除了色调有点花，其它地方基本满意，做了一版优化之后，就确定了网站的基础模板。最后一版由其它智能体工具实现，布局和视觉也非常不错。</p>
<p><strong>Manus预览地址</strong>：<code>https://aiproduct-94oax8.manus.space/knowledge</code></p>
<p><img alt="4" loading="lazy" src="https://img2024.cnblogs.com/blog/1691717/202509/1691717-20250919105850183-1257129050.png" class="lazyload"></p>
<p>事实上在之前就写过几篇Manus的实践案例，网站模板也可以首先使用Manus生成，之所以选择最后尝试，其中一个原因是想多尝试各种大模型的能力，另一个关键原因：Manus贵有贵的道理。</p>
<h1 id="五写在最后">五、写在最后</h1>
<p>下载<strong>Manus的</strong>代码工程源文件，导入本地后可以正常运行，技术栈也符合提示词的要求，但是AI味和一部分细节需要优化，下一篇内容再来详细说这个方面。</p>
</div>
<div id="MySignature" role="contentinfo">
互联网十年民工，现在转身独立开发者。<b> | </b> 公众号-主页<b> | </b>小红书-主页<b> | </b>抖音-主页<b> | </b> Git仓库-主页 <b> | </b><br><br>
来源：https://www.cnblogs.com/cicada-smile/p/19100402
頁:
[1]