用 Google AI Studio 打造部落格：從 Prompt 到完整網站架構，从 0 到上线只要一篇

大家好呀 👋

今天想和大家分享，我是如何利用 Google AI Studio 来辅助设计整个博客网站的架构与视觉风格。

身为开发者，我们常常会陷入一个困境：脑中有想法，但不知道该如何具体化成视觉设计。

这时候，AI 工具就成了很好的「设计思考伙伴」🎨

🤔 为什么选择 Google AI Studio？

在众多 AI 工具中，我选择 Google AI Studio 的原因很简单：

免费且稳定：Gemini 模型的免费额度对个人开发者很友善
多模态支持：可以生成文字、理解图片、甚至给出结构化建议
Prompt 灵活度高：能够根据详细需求给出定制化建议
整合方便：未来如果要串接 API，也能无缝转移

对于想要快速验证想法的开发者来说，它真的是个很实用的工具。

🏗️ 我的博客结构规划

在开始设计之前，我先定义了网站的核心页面：

Home（首页） - 展示最新文章、个人简介摘要
About Me（关于我） - 个人介绍、技术栈、工作经验
Articles（文章列表） - 所有文章的分类与检索
Gallery（作品集） - 展示个人项目、side projects
Contact（联系方式） - 社群链接、email 等信息

这个架构既经典又实用 —— 不会太复杂，但该有的功能都有了。

💬 我给 Google AI Studio 的 Prompt

这里分享一下我实际使用的 Prompt 范例：

我正在设计一个个人技术博客，使用 Angular + Tailwind CSS + ng-zorro 开发。

网站需要包含以下页面：
- Home：展示最新 3 篇文章、个人简短介绍、快速导航
- About Me：自我介绍、技术栈（Angular、Java Spring、Cloudflare Workers）、工作经验时间轴
- Articles：文章列表页，支持分类筛选、标签过滤、搜索功能
- Gallery：作品集展示，包含项目截图、简短描述、技术标签、GitHub 链接
- Contact：社群媒体链接（GitHub、LinkedIn、Email）

设计风格要求：
- 现代简约风格
- 深色主题为主（dark mode）
- 重视排版与留白
- 适合技术内容阅读
- 响应式设计（RWD）

请为每个页面提供：
1. 页面布局建议（Layout structure）
2. 主要 UI 组件清单
3. ng-zorro 可以使用的相关组件
4. Tailwind CSS 风格建议
5. 用户体验考量点（UX considerations）

选择Framework

输入Prompt

🎨 Google AI Studio 给我的回应

AI 生成的部落格网站非常的详细：

我已为您设计并实现了这个现代简约风格的个人技术博客。为了确保最佳性能并遵循 Angular 的最新实践（如 Zoneless 和无动画模块限制），我使用了 Tailwind CSS 4 结合 Angular 19 的独立组件（Standalone Components）进行开发。
页面设计方案与实现细节

1. Home (首页)
- 布局建议：采用 Editorial (Recipe 2) 风格。顶部使用超大字号的标题（Massive Typography）建立视觉冲击力，下方紧跟最新文章网格。
- UI 组件：Hero 欢迎区、文章预览卡片、快速导航按钮。
- Tailwind 风格：使用 text-[12vw] 实现响应式超大标题，配合 emerald-500 作为点缀色。
- UX 考量：通过极简的文案和清晰的 CTA（呼吁操作）按钮，让访客第一时间了解您的技术定位。

2. About Me (关于我)
- 布局建议：采用 Split Layout (Recipe 11)。左侧为个人简介，右侧为技术栈和工作经验。
- UI 组件：技能标签云（Skill Chips）、自定义时间轴（Custom Timeline）。
- 实现方式：由于禁用了动画模块，我使用纯 Tailwind CSS 构建了一个带发光效果的垂直时间轴。
- UX 考量：将技术栈以药丸状标签展示，方便快速扫描；时间轴记录职业成长路径。

3. Articles (文章列表)
- 布局建议：Technical Dashboard (Recipe 1) 风格。左侧侧边栏用于分类和标签筛选，右侧为文章流。
- UI 组件：带图标的搜索框、分类列表、文章摘要卡片。
- 功能支持：实时搜索过滤（基于 Angular Signals 逻辑）。
- UX 考量：重视排版，文章标题使用 font-semibold，摘要使用 font-light，确保长文列表的阅读舒适度。

4. Gallery (作品集)
- 布局建议：采用 Bento Grid 布局。每个项目卡片在悬停时会有轻微的缩放和亮度变化。
- UI 组件：项目封面图、技术标签、GitHub 源码链接图标。
- Tailwind 风格：利用 group-hover 实现平滑的缩放效果（scale-105）。
- UX 考量：所有图片均添加了 referrerpolicy="no-referrer" 以确保外部资源加载稳定。

5. Contact (联系我)
- 布局建议：Minimalist Utility (Recipe 8)。居中对齐的大图标按钮，强调直接联系。
- UI 组件：社交媒体卡片、大号邮箱链接。
- UX 考量：社交卡片采用大面积点击区域，提升移动端交互体验。

技术说明
- 样式系统：完全基于 Tailwind CSS 4，移除了对 ng-zorro 动画模块的依赖，以符合项目的严格限制。
- 字体方案：主字体使用 Inter，技术数据使用 JetBrains Mono。
- 配色方案：深色背景（zinc-950），文字（zinc-100），强调色（emerald-500）。

您现在可以通过导航栏在各个页面之间切换，查看完整的响应式设计效果。