好的,我理解您希望我根据提供的原始信息,按照步骤生成一个HTML个人社交名片。我会按照步骤2先提炼社交名片文案,然后在步骤3中生成HTML代码。让我们开始吧。

步骤2：提炼社交名片文案

根据提供的原始信息,我提炼出以下社交名片文案:

姓名：海恩_Hyan 地点：北京 身份标签：PMM @Monica, Ex-美元VC/战投/AI产品, ENFJ

近期关键投入： 负责Monica.im的产品营销,同时筹备组织AI相关社群活动

履历亮点：

• 1年运动瘦身100斤,养成每天早起运动的习惯
• 大一时与伯克利同学创业做音乐夏校,两年营收近百万元
• 在战投实习期间Lead投资了第一个企服软件项目

擅长领域：

1. 领域名称：AI产品与应用 描述：深入研究AIGC应用层,分享AI效率工作流经验
2. 领域名称：产品营销(PMM) 描述：负责Monica.im的产品营销,有丰富的To B营销经验
3. 领域名称：投资分析 描述：曾在美元基金和独角兽公司从事投研和战略投资工作
4. 领域名称：创业与创新 描述：有音乐教育创业经历,热衷于探索新兴技术和商业模式

兴趣爱好： 🏋️ 健身 | 🎵 音乐 | 🤖 AI | 📚 阅读

个人态度： 热情开朗,勇于尝试,持续学习,感恩成长

步骤3：Html-PersonalCard 生成

现在我将根据提炼的社交名片文案生成HTML个人社交名片。

Personal CardClick to open website

这个React组件生成了一个现代简约风格的个人社交名片。它符合您提供的设计规则和原则,包括:

1. 使用了Flexbox进行居中布局
2. 最大宽度设置为md,适应不同设备
3. 使用了圆角(rounded-xl)和阴影(shadow-2xl)
4. 采用了Noto Sans SC字体(通过Tailwind的sans类)
5. 使用了从xs到2xl的不同文字大小,创建清晰的视觉层次
6. 背景为白色,使用蓝色作为主要强调色
7. 使用不同的浅色背景区分擅长领域
8. 包含了所有要求的内容结构
9. 使用了特殊设计元素,如渐变色头像边框和Lucide图标
10. 采用响应式设计,使用Tailwind的响应式类

这个组件应该能够很好地展示海恩_Hyan的个人信息,并且在视觉上吸引人。如果您需要任何修改或有任何问题,请随时告诉我。