zlbigger's BLog

怎么让AI 编程写出的页面不那么” AI 生成感”

18 11 月, 2025

https://mp.weixin.qq.com/s/Sl4v7chTP1gjN0YEeedubA

我们在用 AI 编程的时候，最常见的就是觉得各种设计风格丑，太 AI 刻板印象，但我们自己又不是什么牛逼设计师，没办法自己做，只能通过换提示词风格，或者模仿来实现。
比如我最爱的分享两个我 AI 编程爱的设计风格：新粗野主义+手绘笔记本风格，或者直接截图让 AI 照抄。
（强烈推荐我最爱的新粗野风格～你会爱上它的！）风格演示可以看我这个小程序：口袋相机
我分享一个我常用的制作模式，看大家能不能用得上。
这是我前几天再星球里分享的一个可以参考的设计、交互相关的网站列表：
我是这么「抄」的～
简约版：

分析下这个网站 https://zlbigger.com/ ，实现方式，交互，布局，颜色，设计风格，模仿做一个类似的，主题是把自己产品化，单页命名为test.html

复杂版：（但我不喜欢这种，我更喜欢简约版，我只有在装逼的时候才用这个）

1，分析下这个网站 https://网站域名.com/ ，提取实现方式，交互，布局，颜色，设计风格，需要模仿做一个类似的，主题是把自己产品化，帮我写一个完整的提示词。

2，就会输出一个比较全面的完整提示词：

参考 https://域名/ 的设计风格，创建一个高端创意设计机构的网站页面

参考来源

请仔细研究 https://域名/ 这个网站的设计风格，并模仿其：

  • 整体视觉风格和氛围
  • 排版层次和字体选择
  • 动画和交互效果
  • 布局结构和空间运用
  • 配色方案和细节处理

整体风格定位

创建一个极简主义、高端、现代的创意设计机构网站。整体氛围要体现专业、精致和艺术感，与 Fine Thought 的品牌调性保持一致。

配色方案

  • 背景色：纯黑色 (#0a0a0a) 或深灰色 (#0f0f0f)
  • 主要文字：纯白色 (#ffffff)
  • 次要文字：半透明白色（opacity: 0.6-0.7）
  • 边框/分割线：极浅的半透明白色（rgba(255, 255, 255, 0.1)）
  • 悬停状态：更亮的半透明白色（rgba(255, 255, 255, 0.3)）
  • 如果 Fine Thought 网站使用了强调色，请保持一致

排版要求

  • 字体：使用系统无衬线字体（-apple-system, BlinkMacSystemFont, ‘Segoe UI’, Helvetica, Arial），或与 Fine Thought 相似的字体
  • 主标题：80px，字重 300（极细），字母间距 -2px
  • 副标题：48px，字重 300，字母间距 -1px
  • 正文：16-20px，字重 300，字母间距 1px
  • 小标题/标签：14px，字重 300-400，字母间距 2px，可使用大写
  • 保持与参考网站相同的排版节奏感

布局结构

1. 导航栏

  • 固定在页面顶部
  • 半透明背景（rgba(10, 10, 10, 0.8)）+ 毛玻璃效果（backdrop-filter: blur(10px)）
  • 左侧：品牌 Logo，字母间距宽（letter-spacing: 2px）
  • 右侧：横向导航链接，间距 40px
  • 内边距：30px 60px
  • 悬停效果：透明度降低到 0.6
  • 参考 Fine Thought 的导航栏设计细节

2. Hero 区域（首屏）

  • 全屏高度（100vh）
  • 居中对齐的大标题和副标题
  • 背景：深色 + 动态装饰效果（如 Fine Thought 使用的视觉元素）
  • 动态线条或其他装饰：5-6条垂直细线，缓慢从上到下移动（20秒循环），或使用 Fine Thought 类似的动态效果
  • 线条样式：渐变（从透明到白色再到透明），opacity: 0.1
  • 标题动画：淡入 + 向上滑动效果（1秒，ease-out）
  • 副标题延迟 0.3 秒出现
  • 整体感觉要与 Fine Thought 的首屏视觉冲击力一致

3. 作品展示区域

  • 标题：左对齐，48px
  • 布局：2列网格（grid-template-columns: repeat(2, 1fr)），如果 Fine Thought 使用不同布局请调整
  • 间距：40px
  • 每个项目卡片：
    • 宽高比 16:10（或参考 Fine Thought 的比例）
    • 背景：#1a1a1a
    • 圆角：8px（或与 Fine Thought 一致）
    • 底部渐变遮罩，显示项目标题和描述
    • 悬停效果：向上移动 10px + 添加白色阴影（box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1)）
    • 悬停时显示从左上到右下的渐变高光（opacity 从 0 到 1）
    • 过渡时间：0.5s ease
    • 模仿 Fine Thought 的项目展示方式和交互细节

4. 服务区域

  • 背景：比主背景稍亮（#0f0f0f）
  • 布局：3列网格（或参考 Fine Thought 的服务展示布局）
  • 间距：60px
  • 每个服务卡片：
    • 边框：1px solid rgba(255, 255, 255, 0.1)
    • 圆角：8px
    • 内边距：40px
    • 顶部：编号（01, 02, 03），小号字体，低透明度
    • 中间：服务标题，24px
    • 底部：服务描述，16px，行高 1.6
    • 悬停效果：边框亮度增加到 0.3
    • 参考 Fine Thought 的服务展示风格

5. Footer 页脚

  • 顶部边框：1px solid rgba(255, 255, 255, 0.1)
  • 内边距：80px 60px 40px
  • 上半部分：3列布局（联系方式、社交媒体、地址）
  • 每列包含：
    • 小标题（14px，全大写，字母间距 2px，opacity 0.4）
    • 列表项（16px，字重 300）
  • 底部：版权信息，居中，14px，opacity 0.4
  • 顶部分割线
  • 与 Fine Thought 的页脚风格保持一致

动画和交互效果

  • 所有过渡：0.3-0.5 秒，使用 ease 或 ease-out
  • 链接悬停：透明度降低到 0.6
  • 卡片悬停：transform: translateY(-10px)
  • 淡入动画：从 opacity: 0, translateY(30px) 到 opacity: 1, translateY(0)
  • 页面滚动流畅，元素渐进显示
  • 特别注意模仿 Fine Thought 网站的微交互细节和动效节奏

响应式设计

  • 移动端（<768px）：
    • 导航和内容内边距减少到 30px
    • 主标题缩小到 40px
    • 所有网格布局改为单列
    • Footer 改为垂直堆叠
  • 确保在不同设备上都有与 Fine Thought 相似的体验

技术要求

  • 使用纯 HTML + CSS（或 React + Tailwind）
  • 使用 CSS Grid 和 Flexbox 布局
  • 使用 CSS 动画和过渡
  • 确保在现代浏览器中完美显示
  • 代码要清晰、有组织性

内容示例

  • Hero 标题：”创造非凡 / 思考细节”（或类似 Fine Thought 风格的双行标题）
  • Hero 副标题：”我们是一个创意设计工作室，专注于品牌、数字体验和视觉设计”
  • 项目类型：品牌重塑、数字体验、包装设计、动态设计
  • 服务类型：品牌策略、数字设计、视觉传达
  • 可以参考 Fine Thought 网站的文案风格和内容结构

整体氛围

  • 极简但不单调
  • 优雅且专业
  • 微妙的动效增加生动感
  • 留白充足，呼吸感强
  • 细节精致，每个像素都经过考虑
  • 核心要求：整体视觉和感觉要与 https://域名/高度一致

关键提示

请在开始设计前，仔细浏览 https://域名/ 网站，观察其：

  1. 独特的视觉语言和设计语法
  2. 动画的速度和缓动曲线
  3. 留白和间距的比例关系
  4. 任何特殊的交互细节
  5. 整体的情绪和氛围营造

然后创建一个在精神和执行层面都与之相似的网站。

模仿的页面：

演示地址：

https://zlbigger.com/ai/test1.html

演示地址：

https://zlbigger.com/ai/test5.html

总结一下，就是用”参考案例”代替”设计能力”，其实就两个关键点，

1，输入端～你得知道，或者建立你自己的风格库，比如前面那个跟设计交互有关的网站，或者你自己收藏的模仿对象。

2，执行端～你得会指挥 AI，让它听得懂你的命令帮你做你做不到的事儿。就是不用那么死板，也没有什么一槌定音的所谓提示词，你需要在对话的过程中进行微调。

https://mp.weixin.qq.com/s/Sl4v7chTP1gjN0YEeedubA