我如何使用 Google Gemini 重新设计我的作品集（以及 AI 真正让我失望的地方）

Source: Dev.to

背景

几个月前，我参加了 DEV 的“新年新你”作品集挑战，决定从零开始重建我的作品集。简要要求：使用 Google AI 工具，部署到 Cloud Run，并让它成为你的专属作品。

最终呈现的是一个“野兽派/工业风”作品集（原始提交帖）。这种美学刻意摒弃了大多数开发者作品集默认的干净、留白大量的外观。它展示了裸露的网格、使用 SCHABO 字体的粗重排版、随光标反应的背景格子，以及一个随滚动而组装和拆解的数学生成 DNA 螺旋。站点基于 Astro 并使用 React islands，动画由 GSAP 驱动，页脚的 metaballs 效果则使用 OGL（轻量级 WebGL 库）实现。

你可以在 观看实时作品集。

Gemini 集成

Pitch 生成器

• 粘贴任意职位描述。
• 工具会从我的工作结构化知识库中提取信息，生成一段量身定制的推介，说明我为何适合该职位。
• 这不是千篇一律的求职信，而是一段具体、对话式的推介。

交互式助理

• 一个终端风格的界面，回答关于我的技术栈的问题，并根据访客的需求推荐相关项目。
• 使用检索增强生成（RAG），以我的作品集数据为知识库，通过 Google Genkit 提供服务，使用 Zod 验证的流程，并通过 Astro 的 Node 适配器进行服务器端渲染。

这两个功能均运行在 Gemini 2.5 Flash 上，展示了在作品集中使用 AI 可以成为实用工具，而非普通的聊天机器人。

开发工作流程

• Refactoring: Antigravity 将原始的 Codegrid 模板（原始 HTML/CSS/JS，带有科幻主题）转换为 Astro 和 React 组件。
• DNA helix: 它帮助编写了螺旋动画的正弦波数学公式。
• Performance: 捕获了 WebGL 循环中的回归问题。

当提供明确且范围有限的问题时，例如“make this GSAP ScrollTrigger reversible on scroll‑up”，模型能够在第一次或第二次尝试时生成可用的代码。

设计挑战

最大的惊讶是 AI 在实际创意方向上的帮助非常有限。我有一个明确的概念（工业/野兽派、原始、以工程为先），但它提供的建议在技术上还算可以，却在美学上显得毫无生气：

• 适用于 SaaS 登录页面的渐变方案。
• “安全”配色方案。
• 可以从任何模板中得到的通用布局思路。

AI 并没有错；它只是缺乏对我所追求的视觉语言的理解。最终，我自己做出了所有设计决策，只使用 AI 来执行这些决策。

经验教训

• 明确交付内容 – 范围明确、规格清晰的工程问题最适合 AI 辅助。
• 保留开放式创意决策 – 口味和视觉方向仍然需要人为判断。

Pitch Generator 的早期输出虽然准确，却像模板化的文案（“Ore 是一名熟练的全栈工程师，拥有 X、Y、Z 方面的经验……”）。在优化系统提示和知识库模式后，结果开始更像我在对话中自我推介的方式。

Genkit 集成表现顺畅：使用 Zod 模式的类型安全流让构建生产级 AI 功能变得直接，且通过 Astro 的 Node 适配器进行服务器端渲染，能够在不使用尴尬变通方案的情况下保持 API 密钥的安全。

提示精准度

Gemini 奖励精准的提示。模糊的提示只能得到模糊的结果。提供关于语气、结构和重点的详细指示，显著提升了输出质量。然而，这种精准度前提是你已经知道“好”的标准是什么，也就是说模型无法取代品味——只能在品味定义后执行。

未来计划

• Pitch Generator – 添加后续模式，使访客能够要求强调我背景的特定方面，将其转变为来回交互的工具，而不是一次性输出。
• Interactive Assistant – 将静态 JSON 知识库迁移到正式数据库，以便在不重新部署的情况下进行更新。
• Project Search – 用嵌入向量取代关键词匹配，使用户能够描述他们想要构建的内容并获得相关的作品项目。
• 继续迭代 AI 辅助功能，同时保持我自行设计的工业美学。