```json
{
"summary

```json
{
"summary": "优化流程化设计组件，通过连接线和进度指示增强视觉流程感",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"py-16 bg-white\">\n <div class=\"container mx-auto px-4 relative\">\n <!-- 流程连接线 -->\n <div class=\"hidden md:block absolute top-24 left-0 right-0 h-1 bg-gray-200 mx-16 z-0\"></div>\n \n <!-- 进度指示器 -->\n <div class=\"hidden md:flex justify-between absolute top-20 left-16 right-16 z-10\">\n <div class=\"w-6 h-6 rounded-full bg-blue-600 border-4 border-solid border-white\"></div>\n <div class=\"w-6 h-6 rounded-full bg-gray-200 border-4 border-solid border-white\"></div>\n <div class=\"w-6 h-6 rounded-full bg-gray-200 border-4 border-solid border-white\"></div>\n <div class=\"w-6 h-6 rounded-full bg-gray-200 border-4 border-solid border-white\"></div>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8 relative z-20\">\n <!-- 步骤1 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-blue-100 shadow-sm bg-blue-50 transform transition-all hover:scale-105\">\n <div class=\"w-14 h-14 flex items-center justify-center rounded-full bg-blue-600 text-white mb-5 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-7 w-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-xs font-bold text-blue-600 mb-1\">步骤 1</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">需求分析</h3>\n <p class=\"text-gray-600\">解析原始需求文档</p>\n </div>\n </div>\n \n <!-- 步骤2 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-gray-200 shadow-sm bg-white transform transition-all hover:scale-105\">\n <div class=\"w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mb-5 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-7 w-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-xs font-bold text-gray-500 mb-1\">步骤 2</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">用例生成</h3>\n <p class=\"text-gray-600\">智能匹配相似用例</p>\n </div>\n </div>\n \n <!-- 步骤3 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-gray-200 shadow-sm bg-white transform transition-all hover:scale-105\">\n <div class=\"w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mb-5 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-7 w-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-xs font-bold text-gray-500 mb-1\">步骤 3</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">用例优化</h3>\n <p class=\"text-gray-600\">人工校验与调整</p>\n </div>\n </div>\n \n <!-- 步骤4 -->\n <div class=\"flex flex-col items-center p-8 rounded-xl border border-solid border-gray-200 shadow-sm bg-white transform transition-all hover:scale-105\">\n <div class=\"w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 mb-5 shadow-md\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-7 w-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\" />\n </svg>\n </div>\n <div class=\"text-center\">\n <div class=\"text-xs font-bold text-gray-500 mb-1\">步骤 4</div>\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">关联管理</h3>\n <p class=\"text-gray-600\">建立需求-用例映射</p>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加步骤编号",
"增强交互效果",
"添加进度指示器",
"优化悬停动画",
"调整间距平衡"
]
}
```