新年新我：UI/UX 设计与 Stitch

Source: Dev.to

概览

本教程演示如何使用 Stitch（Google 的 AI 驱动 UI 设计工具）来创建一个展示我的技能和项目的作品集网站。它是 新年，新我 作品集挑战系列的一部分：

• 设计： 使用 Stitch 进行 UI/UX 设计（本篇）
• 原型： 在 Google AI Studio 中进行 Vibe Coding（即将推出）
• 生产： 使用 Google Antigravity 进行 Agentic Engineering（即将推出）

本文重点在于从最初概念到 Stitch 中的 UI/UX 设计过程，以及将设计/代码导出到 Google AI Studio。

什么是 Stitch？

Stitch 是 Google Labs 推出的实验性 AI UI 设计工具，在 2025 I/O 开发者主题演讲上宣布。它可以根据自然语言或图像提示生成桌面和移动应用的 UI 设计以及前端代码，旨在：

• 加速应用创建
• 缩小设计与开发之间的鸿沟
• 实现快速迭代并导出为流行格式

设计流程

1. 灵感与草图

在深入使用 Stitch 之前，我先在 Canva 和 Adobe Express 上浏览模板，以确定想要的风格。随后在 GoodNotes 5 中快速绘制了一个数字草图——足以在两天挑战的截止时间内捕捉布局。虽然我有时会使用 Figma 或 Adobe XD 等高保真工具，但这次冲刺只需要一个粗略草图即可。

2. 在 Stitch 中启动

我在 启动了设计，并设定了目标：一种编辑式、时尚前卫的美感，能够体现我作为时装设计师和工程师的双重身份。

提示细节

• 模型： Gemini 3.0 Flash（因为我的草图是低保真而选择）
• 备选： Nano Banana Pro 更适合高保真 UI 或已有的截图

我提供了 New Year New You Portfolio Challenge 和我的 “2025 年回顾” 博客文章链接。Stitch 自动填充了一些项目信息，但我对标题和描述进行了微调，以获得更好的结果。

3. 交互迭代

在设计阶段，我添加了多个交互元素：

• 悬停显示项目描述
• 可展开/折叠的行控制
• 图像块保持 3:4 的一致宽高比
• 将整体布局从纵向切换为横向

4. 导出到 Google AI Studio

当对视觉和用户体验满意后，我导出了代码：

1. 点击 Export → 选择 AI Studio。
2. 点击 Build with AI Studio 在 Google AI Studio 中创建新项目。

生成的模型包含占位文本（通常是 “Lorem Ipsum” 或 AI 生成的乱码）。这是预期的——Stitch 充当视觉占位符，内容将在代码阶段进行清理。

后续步骤

• 在 Google AI Studio 中进一步完善作品集网站。
• 直接从 AI Studio 将最终站点部署到 Cloud Run。

敬请关注原型和生产阶段的更新！