AI赋能设计-个人网站从0到1的搭建

🔄 核心理念：AI作为创意副驾驶

在此项目中，我探索了AIGC在建筑与视觉设计之外的应用——前端开发。我的角色始终是导演与决策者：设定目标、把控审美、整合输出，而AI（Midjourney，GPT-4，gemini等）则充当了我的“副驾驶”，高效完成探索、草稿与代码实现，将我的构思加速转化为现实。

阶段 1：概念与风格探索

在编写任何代码之前，首先需要确立网站的视觉DNA。我使用 Midjourney 进行了高效的“视觉头脑风暴”。

操作： 输入如 “architect portfolio website, dark blue theme, glass morphism, bento grid layout, minimalist, futuristic, on dark background, professional” 的关键词组合。

目标：快速生成大量关于配色方案、版式感觉、材质氛围和组件风格的参考，从而锁定“玻璃态”这一设计方向。

阶段 2：资产生成与UI设计

方向确定后，AI转变为我的“私人图形素材库”。

• 辅助图形： 使用Midjourney生成了一些抽象的、具有建筑感的背景纹理和装饰性图形元素。
• 图片处理： 使用Photoshop Beta的“Generative Fill”功能，对部分项目实景照片进行背景扩展或瑕疵修补。
• UI整合： 在Figma中，我将AI生成的元素、确定的色彩系统与字体进行整合，搭建出高保真交互原型。AI插件帮助我快速生成了部分图标和布局建议。

阶段 3：智能开发：自然语言到代码

这是AIGC展现其颠覆性力量的环节。我使用 Cursor（内置GPT-4）作为核心开发助手。

• 代码生成： 通过自然语言描述，如“创建一个有悬停旋转效果的弯曲网格布局卡片”，AI能快速生成高质量的HTML/CSS代码块，我只需进行微调和集成。
• 问题调试： 当遇到响应式布局错位或JavaScript交互bug时，直接将错误代码和问题描述抛给AI，它能提供精准的修复方案和解释。
• 功能实现： 导航栏的平滑滚动、卡片悬停动画等交互功能，均在AI的辅助下高效完成。

阶段 4：内容、优化与工具栈

网站的血肉——文案内容，同样得益于AI的润色。

• 文案润色： 将粗略的项目描述输入deep seek或ChatGPT，指令其调整为“更专业、更简洁、更具冲击力的设计师口吻”。
• SEO优化： 让AI基于页面内容，生成适合的元描述和关键词建议。

🛠️ 我的AIGC网站开发工具栈