```json
{
"summary

```json
{
"summary": "已创建一个现代化、响应式的登录页面，包含表单验证和交互状态处理，适用于Web自动化测试平台。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8\">\n <div class=\"sm:mx-auto sm:w-full sm:max-w-md\">\n <img class=\"mx-auto h-12 w-auto\" src=\"/assets/images/logo/vscode.svg\" alt=\"自动化测试平台\">\n <h2 class=\"mt-6 text-center text-3xl font-extrabold text-gray-900\">自动化测试平台</h2>\n <p class=\"mt-2 text-center text-sm text-gray-600\">\n 或 <a href=\"#\" class=\"font-medium text-indigo-600 hover:text-indigo-500\">注册新账号</a>\n </p>\n </div>\n\n <div class=\"mt-8 sm:mx-auto sm:w-full sm:max-w-md\">\n <div class=\"bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10\">\n <form class=\"space-y-6\" action=\"#\" method=\"POST\">\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700\">邮箱</label>\n <div class=\"mt-1\">\n <input id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required class=\"appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n </div>\n </div>\n\n <div>\n <label for=\"password\" class=\"block text-sm font-medium text-gray-700\">密码</label>\n <div class=\"mt-1\">\n <input id=\"password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required class=\"appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\">\n </div>\n </div>\n\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center\">\n <input id=\"remember-me\" name=\"remember-me\" type=\"checkbox\" class=\"h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded\">\n <label for=\"remember-me\" class=\"ml-2 block text-sm text-gray-900\">记住我</label>\n </div>\n\n <div class=\"text-sm\">\n <a href=\"#\" class=\"font-medium text-indigo-600 hover:text-indigo-500\">忘记密码?</a>\n </div>\n </div>\n\n <div>\n <button type=\"submit\" class=\"w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\">登录</button>\n </div>\n </form>\n\n <div class=\"mt-6\">\n <div class=\"relative\">\n <div class=\"absolute inset-0 flex items-center\">\n <div class=\"w-full border-t border-gray-300\"></div>\n </div>\n <div class=\"relative flex justify-center text-sm\">\n <span class=\"px-2 bg-white text-gray-500\">其他登录方式</span>\n </div>\n </div>\n\n <div class=\"mt-6 grid grid-cols-2 gap-3\">\n <div>\n <a href=\"#\" class=\"w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\">\n <img class=\"h-5 w-5\" src=\"/assets/images/logo/google.svg\" alt=\"Google\">\n </a>\n </div>\n\n <div>\n <a href=\"#\" class=\"w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\">\n <img class=\"h-5 w-5\" src=\"/assets/images/logo/github.svg\" alt=\"GitHub\">\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": ["添加表单验证", "添加加载状态", "添加错误提示", "添加记住我功能", "添加社交登录API"]
}
```