我拖延了多年才完成我的Portfolio。AI在2小时内完成。

Source: Dev.to

概览

鞋匠悖论：鞋匠为全村人做最好的鞋，却让自己的孩子赤脚。

我已经做了十多年的软件工程师，为企业客户构建高性能系统并领导工程团队。然而，整整十年我都没有自己的作品集网站。每次想动手时，我都会陷入细枝末节——过度设计技术栈、对 CSS 感到厌倦，或在忙碌的工作周后“带宽”耗尽。我掉进了完美主义的经典陷阱。

今天我终于打破了这个循环。我把 Claude（AI）当作我的初级开发者，而不是代码生成器，专注于提示工程和架构设计。结果如何？从空白页面到部署上线、交互式的“双世界”作品集，仅用了 约 2 小时。

开发者使用 AI 时最大的错误

常见的陷阱是请求代码片段（例如，“写一个 React 导航栏组件”）。要构建完整的产品，需要像资深工程师一样思考：定义 系统，而不是语法。

Prompt 1 – 项目设置与架构

目标： 采用现代、性能优先的工具，避免遗留负担。

Next.js 16+ (App Router)
TypeScript (Strict Mode)
Tailwind CSS v4
Framer Motion (for complex animations)
Biome (for linting)

Action: Create a clean, modular folder structure for a single‑page portfolio application. Ensure the architecture supports a “feature‑sliced” design pattern.

Prompt 2 – 设计概念：“双世界界面”

Design Concept: 'The Dual-World Interface'
Layout: Split‑screen desktop view.
- Left Side: Clean, minimalist typography. Timeline of experience and projects.
- Right Side: A 'Sticky Phone Simulator' (3D device frame).

Interaction (Crucial):
- Hero Section → Phone shows my App splash screen.
- Projects Section → Phone simulates an interactive app demo of that project.
- Contact Section → Phone shows a 'Messages' UI.

Vibe: Dark mode, cyan accents, glassmorphism. Make it look premium.

Prompt 3 – 移动端响应式

On mobile devices (phones/tablets), hide the 3D phone simulator entirely (it takes too much space).
Collapse the layout to a clean, single‑column vertical scroll.
Add a hamburger menu with a smooth slide‑out drawer for navigation.

Prompt 4 – 将内容与代码分离

src/config/content.ts
- Profile Bio & Titles
- Social Links (GitHub, LinkedIn, StackOverflow)
- Experience Timeline Data
- Projects Data (including links to GitHub/Live Demos)
- SEO Metadata

硬编码的文本会成为技术债务；将关注点分离后，我以后可以在不触碰 React 组件的情况下更新站点。

Prompt 5 – 主题、导航与动画

Theme: Add a light/dark mode toggle (floating action button).
Smooth Scroll: Ensure clicking nav links scrolls smoothly to the section.
Active State: Nav links should highlight as I scroll past their sections.
Animations: Use Framer Motion to stagger the entry of list items.

结果

• 总耗时： ~2 小时
• 手动编写的 UI 代码行数： 0
• 编辑的配置行数： ~50（只需粘贴我的简历）
• 成本： $0（部署在 Vercel）

我把时间花在微调动画时长和文案上，而不是调试 z‑index 或与 CSS Grid 对齐作斗争。

如果你在想，“等我有时间学习完美的动画库再做作品集”，请停下来。对每个 “ 的写作自豪感会成为发布的障碍。你的职业故事值得被讲述，无论代码是你写的还是由 LLM 完成的。

资源

• 在线演示：
• GitHub 仓库： (feel free to fork)
• LinkedIn：

完全在 Claude 的 AI 辅助下构建。