```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"container mx-auto px-4 py-8\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-800 mb-2\">人员信息对比</h2>\n <p class=\"text-gray-600\">直观比较两位团队成员的核心信息</p>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n <!-- 人员1 -->\n <div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg\">\n <div class=\"p-6\">\n <div class=\"flex items-center mb-6\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/01.jpeg\" alt=\"人员1\" class=\"w-20 h-20 rounded-full object-cover border-4 border-white shadow-md\">\n <div class=\"absolute bottom-0 right-0 w-6 h-6 bg-blue-500 rounded-full border-2 border-white\"></div>\n </div>\n <div class=\"ml-4\">\n <h3 class=\"text-xl font-bold text-gray-800\">张明</h3>\n <p class=\"text-gray-600\">高级产品经理</p>\n </div>\n </div>\n \n <div class=\"space-y-4\">\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">工作经验</span>\n <span class=\"text-gray-800 font-semibold\">8年</span>\n </div>\n \n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">专业领域</span>\n <span class=\"text-gray-800 font-semibold\">SaaS产品设计</span>\n </div>\n \n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">技能评级</span>\n <div class=\"flex\">\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-gray-300\">★</span>\n </div>\n </div>\n \n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">项目完成率</span>\n <span class=\"text-green-600 font-semibold\">94%</span>\n </div>\n \n <div class=\"flex justify-between items-center\">\n <span class=\"text-gray-500 font-medium\">核心能力</span>\n <div class=\"flex flex-wrap justify-end gap-2 max-w-[60%]\">\n <span class=\"px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full\">用户研究</span>\n <span class=\"px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full\">原型设计</span>\n <span class=\"px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full\">数据分析</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- 人员2 -->\n <div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg\">\n <div class=\"p-6\">\n <div class=\"flex items-center mb-6\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/02.jpeg\" alt=\"人员2\" class=\"w-20 h-20 rounded-full object-cover border-4 border-white shadow-md\">\n <div class=\"absolute bottom-0 right-0 w-6 h-6 bg-purple-500 rounded-full border-2 border-white\"></div>\n </div>\n <div class=\"ml-4\">\n <h3 class=\"text-xl font-bold text-gray-800\">李华</h3>\n <p class=\"text-gray-600\">技术负责人</p>\n </div>\n </div>\n \n <div class=\"space-y-4\">\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">工作经验</span>\n <span class=\"text-gray-800 font-semibold\">10年</span>\n </div>\n \n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">专业领域</span>\n <span class=\"text-gray-800 font-semibold\">全栈开发</span>\n </div>\n \n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">技能评级</span>\n <div class=\"flex\">\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n <span class=\"text-yellow-400\">★</span>\n </div>\n </div>\n \n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-gray-500 font-medium\">项目完成率</span>\n <span class=\"text-green-600 font-semibold\">98%</span>\n </div>\n \n <div class=\"flex justify-between items-center\">\n <span class=\"text-gray-500 font-medium\">核心能力</span>\n <div class=\"flex flex-wrap justify-end gap-2 max-w-[60%]\">\n <span class=\"px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full\">架构设计</span>\n <span class=\"px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full\">性能优化</span>\n <span class=\"px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full\">DevOps</span>\n <span class=\"px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full\">团队管理</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"mt-10 text-center\">\n <button class=\"px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-300\">\n 生成对比报告\n </button>\n </div>\n</div>"
},
"next": ["添加更多属性","增加切换人员功能","添加数据可视化","支持PDF导出","添加筛选条件"],
"summary": "已创建响应式人员信息对比组件，使用卡片布局展示两人详细信息，包含头像、职位、工作经验等核心数据。支持移动端适配，添加了悬停效果和对比按钮。"
}
```
推理
我们正在实现一个人员信息对比组件，左右显示两个人的信息。
设计思路：
1. 整体布局：使用flex布局，在中等屏幕以上（md:）并排显示两个人物信息，小屏幕下（默认）堆叠显示（flex-col）。
2. 每个人物信息卡片：包含头像、姓名、职位、以及一系列对比的属性（比如年龄、工作经验等）。
3. 对比属性：每个属性一行，左侧显示属性名称，中间和右侧分别显示两个人的该属性值，这样方便对比。
4. 为了突出对比，可以在两个人物信息中间添加一条垂直分隔线（在大屏幕时显示），小屏幕时可能不需要。
我们将使用以下结构：
- 外层容器：flex flex-col md:flex-row，并设置间隙（gap）
- 每个人物信息区域：flex-1，这样两个人各占一半宽度（在大屏幕时）
- 在两个人物的中间，我们在大屏幕时添加一个垂直分隔线：使用绝对定位，在中间放置一条竖线。或者使用伪元素？但是tailwind不支持伪元素内容，所以我们用一个div来模拟。
另一种方案：使用网格布局grid grid-cols-2，但是为了在小屏幕下堆叠，我们可以用md:grid-cols-2。
考虑到对比时属性要一一对应，我们使用一个表格形式来展示属性。但这里不是表格，而是用flex或者grid。
具体到每个属性的展示：
每个属性一行，分为三列：
- 第一列：属性名称（比如“年龄”），左对齐
- 第二列：第一个人的属性值，居中对齐
- 第三列：第二个人的属性值，居中对齐
这样，在大屏幕下，两个人物信息并排，每个信息区域内部都有这样的一组属性行。
但是这样有个问题：当属性很多时，两个区域需要滚动同步？或者我们固定高度？用户没有要求，我们不做复杂交互。
因此，我们可以这样设计：
外层：grid grid-cols-1 md:grid-cols-2 gap-8（左右间隔）
每个人物区域：用卡片形式，包含头像、姓名、职位，然后下面是一个属性列表。
属性列表的每一行：使用flex，分成三个部分，分别对应属性名、人物1的属性值、人物2的属性值。但是注意，在一个人物区域里，我们只显示该人物的属性值，所以实际上我们不需要在一个卡片里同时显示两个人的值。
然而，用户要求的是左右两个人对比，所以应该是同时看到两个人的同一个属性。因此，我们改变结构：
整体结构应该是：
一个大的表格，每一行是一个属性，然后一行里有两列，分别显示两个人的该属性值。
但是这样不符合左右分开的卡片形式。
所以，我们采用另一种方式：将属性名称放在中间，左右分别是两个人的值。这样，每一行都是一个属性的对比。
结构如下：
<div class="flex flex-col space-y-4"> <!-- 所有属性行的容器 -->
<div class="flex items-center">
<div class="flex-1 text-right">人物1的属性值</div>
<div class="w-24 text-center">属性名称</div> <!-- 固定宽度，确保对齐 -->
<div class="flex-1 text-left">人物2的属性值</div>
</div>
... 其他属性行
</div>
但是这样在移动端看起来可能不太方便，因为一行要显示三个部分。
或者，我们可以将属性名称放在上面，然后左右并排显示两个人的值，这样在小屏幕下也可以并排（因为值比较短）。但是这样在移动端一行显示两个值可能会挤。
考虑到移动端，我们可以这样：
属性名称单独一行，然后下面一行左右并排显示两个人的值。
结构：
<div class="flex flex-col">
<div class="text-center">属性名称</div>
<div class="flex justify-between">
<div>人物1的值</div>
<div>人物2的值</div>
</div>
</div>
但这样每个属性占两行，如果属性多会很长。
权衡之后，我们采用第一种方式（一行三列）在移动端也保持一行，因为移动端屏幕窄，我们可以通过调整字体大小和间距来适应。
因此，我们这样设计：
外层容器（整个组件）：container mx-auto（如果用户没有要求全屏，我们默认加container，这样不会全屏宽）
标题：可以有一个组件的标题，比如“人员信息对比”，居中显示。
对比区域：使用flex，在移动端是垂直排列（flex-col），在md以上是水平排列（flex-row）。
每个人物卡片：包含头像、姓名、职位，然后下面是一个属性列表（用上面的三列布局）。
但是，注意：用户要求左右显示两个人，所以我们不需要把属性名称重复放在两个卡片里，而是应该将两个人的同一个属性放在同一行。
因此，我们调整：整个对比区域不分成两个卡片，而是用一个区域，里面是多个属性行，每行显示一个属性的两个人对比。
这样更符合对比的需求。
所以我们设计：
整个组件：container mx-auto px-4 py-8
标题：<h2 class="text-2xl font-bold text-center mb-8">人员信息对比</h2>
对比区域：一个列表，每个列表项是一个属性的对比。
每个列表项：flex flex-row items-center justify-between py-2 border-b border-gray-200
左边：人物1的值（flex-1 text-right pr-4）
中间：属性名称（text-gray-500 或者 加粗，根据设计）
右边：人物2的值（flex-1 text-left pl-4）
但是这样在大屏幕时，两个值离得很远，中间属性名称在中间，看起来比较分散。
另一种：使用网格，三列，第一列是人物1的值，第二列是属性名称，第三列是人物2的值。这样我们可以控制每列的宽度。
考虑到美观，我们可以让属性名称列宽度固定，左右两列等宽。
使用grid grid-cols-3，然后每列分别设置对齐。
结构：
<div class="grid grid-cols-3 gap-4 py-2 border-b border-gray-200">
<div class="text-right">人物1的值</div>
<div class="text-center font-medium text-gray-700">属性名称</div>
<div class="text-left">人物2的值</div>
</div>
这样在移动端小屏幕上，三列可能会挤，我们可以通过媒体查询在小屏幕时调整字体大小，或者换行？但是换行会破坏对齐。
我们决定在小屏幕时（默认）使用较小的内边距和字体，如果内容很长，可以考虑换行（用break-all或者省略号），但用户没有提供具体内容，我们先按正常处理。
另外，我们还可以在顶部显示两个人的头像和姓名，这样不需要在每个属性行都重复姓名。
所以，我们在对比区域的上方，显示两个人的基本信息：
整体：grid grid-cols-3 gap-4 同样使用三列布局，这样对齐。
第一列：人物1的头像和姓名，靠右对齐
第二列：空（或者放一个VS之类的，但也可以不放）
第三列：人物2的头像和姓名，靠左对齐
头像使用圆形，大小统一。
结构：
<div class="grid grid-cols-3 gap-4 items-center mb-8">
<div class="flex flex-col items-end">
<img src="/assets/images/avatar/01.jpeg" alt="人物1" class="rounded-full w-16 h-16 object-cover">
<h3 class="font-bold">张三</h3>
<p class="text-gray-500">产品经理</p>
</div>
<div class="text-center">
<span class="text-2xl font-bold text-gray-500">VS</span>
</div>
<div class="flex flex-col items-start">
<img src="/assets/images/avatar/02.jpeg" alt="人物2" class="rounded-full w-16 h-16 object-cover">
<h3 class="font-bold">李四</h3>
<p class="text-gray-500">UI设计师</p>
</div>
</div>
然后下面是属性对比列表。
考虑到用户可能没有提供具体数据，我们使用示例数据。
属性列表示例：
属性：年龄、工作经验、所在地、技能、教育背景等。
最后，我们给整个组件一个最大宽度，避免在大屏幕上过宽（使用container已经有限制）。
响应式：在小屏幕下（小于md），我们的三列布局可能会拥挤，所以我们可以调整：
在属性行，如果内容很长，我们可以让左右两列换行？或者使用省略号？但是为了简单，我们假设内容不会太长。
另外，在小屏幕下，我们可以将头像和姓名的布局调整为上下结构，但是这样会破坏网格。我们可以在小屏幕时改用flex垂直布局，但在三列布局中，我们暂时保持网格，因为只有三列，在小屏幕时自动调整列宽。
由于时间关系，我们先按上述设计实现。
代码实现：
注意：图片使用占位符，我们使用头像图片01和02。
根据以上设计，我们生成代码。
设计思路：
1. 整体布局：使用flex布局，在中等屏幕以上（md:）并排显示两个人物信息，小屏幕下（默认）堆叠显示（flex-col）。
2. 每个人物信息卡片：包含头像、姓名、职位、以及一系列对比的属性（比如年龄、工作经验等）。
3. 对比属性：每个属性一行，左侧显示属性名称，中间和右侧分别显示两个人的该属性值，这样方便对比。
4. 为了突出对比，可以在两个人物信息中间添加一条垂直分隔线（在大屏幕时显示），小屏幕时可能不需要。
我们将使用以下结构：
- 外层容器：flex flex-col md:flex-row，并设置间隙（gap）
- 每个人物信息区域：flex-1，这样两个人各占一半宽度（在大屏幕时）
- 在两个人物的中间，我们在大屏幕时添加一个垂直分隔线：使用绝对定位，在中间放置一条竖线。或者使用伪元素？但是tailwind不支持伪元素内容，所以我们用一个div来模拟。
另一种方案：使用网格布局grid grid-cols-2，但是为了在小屏幕下堆叠，我们可以用md:grid-cols-2。
考虑到对比时属性要一一对应，我们使用一个表格形式来展示属性。但这里不是表格，而是用flex或者grid。
具体到每个属性的展示：
每个属性一行，分为三列：
- 第一列：属性名称（比如“年龄”），左对齐
- 第二列：第一个人的属性值，居中对齐
- 第三列：第二个人的属性值，居中对齐
这样，在大屏幕下，两个人物信息并排，每个信息区域内部都有这样的一组属性行。
但是这样有个问题：当属性很多时，两个区域需要滚动同步？或者我们固定高度？用户没有要求，我们不做复杂交互。
因此，我们可以这样设计：
外层：grid grid-cols-1 md:grid-cols-2 gap-8（左右间隔）
每个人物区域：用卡片形式，包含头像、姓名、职位，然后下面是一个属性列表。
属性列表的每一行：使用flex，分成三个部分，分别对应属性名、人物1的属性值、人物2的属性值。但是注意，在一个人物区域里，我们只显示该人物的属性值，所以实际上我们不需要在一个卡片里同时显示两个人的值。
然而，用户要求的是左右两个人对比，所以应该是同时看到两个人的同一个属性。因此，我们改变结构：
整体结构应该是：
一个大的表格，每一行是一个属性，然后一行里有两列，分别显示两个人的该属性值。
但是这样不符合左右分开的卡片形式。
所以，我们采用另一种方式：将属性名称放在中间，左右分别是两个人的值。这样，每一行都是一个属性的对比。
结构如下：
<div class="flex flex-col space-y-4"> <!-- 所有属性行的容器 -->
<div class="flex items-center">
<div class="flex-1 text-right">人物1的属性值</div>
<div class="w-24 text-center">属性名称</div> <!-- 固定宽度，确保对齐 -->
<div class="flex-1 text-left">人物2的属性值</div>
</div>
... 其他属性行
</div>
但是这样在移动端看起来可能不太方便，因为一行要显示三个部分。
或者，我们可以将属性名称放在上面，然后左右并排显示两个人的值，这样在小屏幕下也可以并排（因为值比较短）。但是这样在移动端一行显示两个值可能会挤。
考虑到移动端，我们可以这样：
属性名称单独一行，然后下面一行左右并排显示两个人的值。
结构：
<div class="flex flex-col">
<div class="text-center">属性名称</div>
<div class="flex justify-between">
<div>人物1的值</div>
<div>人物2的值</div>
</div>
</div>
但这样每个属性占两行，如果属性多会很长。
权衡之后，我们采用第一种方式（一行三列）在移动端也保持一行，因为移动端屏幕窄，我们可以通过调整字体大小和间距来适应。
因此，我们这样设计：
外层容器（整个组件）：container mx-auto（如果用户没有要求全屏，我们默认加container，这样不会全屏宽）
标题：可以有一个组件的标题，比如“人员信息对比”，居中显示。
对比区域：使用flex，在移动端是垂直排列（flex-col），在md以上是水平排列（flex-row）。
每个人物卡片：包含头像、姓名、职位，然后下面是一个属性列表（用上面的三列布局）。
但是，注意：用户要求左右显示两个人，所以我们不需要把属性名称重复放在两个卡片里，而是应该将两个人的同一个属性放在同一行。
因此，我们调整：整个对比区域不分成两个卡片，而是用一个区域，里面是多个属性行，每行显示一个属性的两个人对比。
这样更符合对比的需求。
所以我们设计：
整个组件：container mx-auto px-4 py-8
标题：<h2 class="text-2xl font-bold text-center mb-8">人员信息对比</h2>
对比区域：一个列表，每个列表项是一个属性的对比。
每个列表项：flex flex-row items-center justify-between py-2 border-b border-gray-200
左边：人物1的值（flex-1 text-right pr-4）
中间：属性名称（text-gray-500 或者 加粗，根据设计）
右边：人物2的值（flex-1 text-left pl-4）
但是这样在大屏幕时，两个值离得很远，中间属性名称在中间，看起来比较分散。
另一种：使用网格，三列，第一列是人物1的值，第二列是属性名称，第三列是人物2的值。这样我们可以控制每列的宽度。
考虑到美观，我们可以让属性名称列宽度固定，左右两列等宽。
使用grid grid-cols-3，然后每列分别设置对齐。
结构：
<div class="grid grid-cols-3 gap-4 py-2 border-b border-gray-200">
<div class="text-right">人物1的值</div>
<div class="text-center font-medium text-gray-700">属性名称</div>
<div class="text-left">人物2的值</div>
</div>
这样在移动端小屏幕上，三列可能会挤，我们可以通过媒体查询在小屏幕时调整字体大小，或者换行？但是换行会破坏对齐。
我们决定在小屏幕时（默认）使用较小的内边距和字体，如果内容很长，可以考虑换行（用break-all或者省略号），但用户没有提供具体内容，我们先按正常处理。
另外，我们还可以在顶部显示两个人的头像和姓名，这样不需要在每个属性行都重复姓名。
所以，我们在对比区域的上方，显示两个人的基本信息：
整体：grid grid-cols-3 gap-4 同样使用三列布局，这样对齐。
第一列：人物1的头像和姓名，靠右对齐
第二列：空（或者放一个VS之类的，但也可以不放）
第三列：人物2的头像和姓名，靠左对齐
头像使用圆形，大小统一。
结构：
<div class="grid grid-cols-3 gap-4 items-center mb-8">
<div class="flex flex-col items-end">
<img src="/assets/images/avatar/01.jpeg" alt="人物1" class="rounded-full w-16 h-16 object-cover">
<h3 class="font-bold">张三</h3>
<p class="text-gray-500">产品经理</p>
</div>
<div class="text-center">
<span class="text-2xl font-bold text-gray-500">VS</span>
</div>
<div class="flex flex-col items-start">
<img src="/assets/images/avatar/02.jpeg" alt="人物2" class="rounded-full w-16 h-16 object-cover">
<h3 class="font-bold">李四</h3>
<p class="text-gray-500">UI设计师</p>
</div>
</div>
然后下面是属性对比列表。
考虑到用户可能没有提供具体数据，我们使用示例数据。
属性列表示例：
属性：年龄、工作经验、所在地、技能、教育背景等。
最后，我们给整个组件一个最大宽度，避免在大屏幕上过宽（使用container已经有限制）。
响应式：在小屏幕下（小于md），我们的三列布局可能会拥挤，所以我们可以调整：
在属性行，如果内容很长，我们可以让左右两列换行？或者使用省略号？但是为了简单，我们假设内容不会太长。
另外，在小屏幕下，我们可以将头像和姓名的布局调整为上下结构，但是这样会破坏网格。我们可以在小屏幕时改用flex垂直布局，但在三列布局中，我们暂时保持网格，因为只有三列，在小屏幕时自动调整列宽。
由于时间关系，我们先按上述设计实现。
代码实现：
注意：图片使用占位符，我们使用头像图片01和02。
根据以上设计，我们生成代码。
角色
assistant
content