我们在用 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://域名/ 网站，观察其：

独特的视觉语言和设计语法
动画的速度和缓动曲线
留白和间距的比例关系
任何特殊的交互细节
整体的情绪和氛围营造
然后创建一个在精神和执行层面都与之相似的网站。

模仿的页面：
演示地址：

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

演示地址：

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


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

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

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

来源：把自己产品化