Meta 案例研究 · 个人作品集 · 2026
This website.
一个通过与 Claude 和 Figma MCP 反复协作迭代构建的作品集网站。
Next.jsReactTailwind CSSCloudinaryVercelClaude + Figma MCP
yczhang.design
8
项目详情页
3
AI 工具
2
周完成构建
100%
Vibe coded
01 — AI 协作工作流
Claude + Figma MCP
主力设计转代码
在 Figma 中绘制流程图和组件，再通过 MCP 集成将设计直接导入 Next.js。Claude 实时处理布局、文案优化和组件逻辑。
Gemini
二次审查与验证
用于对比实现方案和边界情况检查。对比不同模型的输出能发现隐含假设，倒逼对设计决策进行更清晰的思考。
Codex
代码压力测试
对交互模式进行压力测试，探索多种实现变体。在确定最终方向之前，帮助评估同一功能的多种实现思路。
02 — 设计决策
每个案例研究末尾都有"下一个项目"跳转
每个项目页面末尾都有一个固定的下一项目链接，让读者保持阅读流状态，无需返回首页重新导航——降低跳出率，引导他们浏览更多作品。
Space Grotesk + DM Serif Display 字体组合
Space Grotesk 为正文和 UI 标签带来技术感与现代感；DM Serif Display 为主标题增添温度和分量——两者搭配在精准与个性之间取得平衡。
每个项目独立的视觉语言体系
每个案例研究都有自己的配色、组件风格和版式节奏。这让每件作品看起来经过深思熟虑，而非套用模板，同时也展示了跨设计场景的多元能力。
Cloudinary 管理媒体资源，Vercel 负责部署
Cloudinary 通过 CDN 分发和格式优化处理所有项目图片；Vercel 提供零配置部署，每次推送自动生成预览链接——让迭代循环保持高效。
03 — 项目反思
哪些做得好
- → Figma MCP 将设计到代码的交接成本降至近乎为零
- → 直接在代码中迭代细节，比在 Figma 中反复 Mock 更快
- → 多模型交叉审查发现了边界情况，提升了输出质量
- → Vibe coding 保持了项目动力——持续交付，而非过度规划
下次会做什么不同
- → 更早建立统一的设计 Token 体系
- → 生成代码前先写好组件契约
- → 从第一天起就将 Figma 文件与代码一起纳入版本控制
- → 更早搭建自动化视觉回归测试
Next Project返回所有项目