登录注册页
Login / Sign-up Page
布局模式也叫：登录页、注册页、登录框、Sign In、Sign Up
一句话：用户登录或注册账号的页面，中间一张窄小的表单卡片，只保留账号、密码和提交按钮等必要元素，常配品牌插图。
详细解释
登录注册页是用户进入产品的第一道门，常见两种排法：一种是整页浅色背景，正中间一张宽约 360~400px 的卡片；另一种是左右分屏，左边是品牌插图或宣传语，右边是表单。表单从上到下是 Logo 和标题、账号输入框、密码输入框、「忘记密码」链接、主按钮「登录」，下面是第三方登录图标和「还没有账号？去注册」。
它的原则是少打扰：不放全站导航，不放无关推荐，让用户专心完成登录。注册页字段也要尽量少，头像、昵称这类信息可以登录后再补。
细节上要注意：密码框提供显示和隐藏切换；错误提示写清原因（「密码错误」而不是「操作失败」）；登录按钮提交时显示加载状态，防止重复点击；支持按回车提交。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
做一个登录页：左右分屏，左侧是灰色品牌插图和一句宣传语，右侧居中放宽 360px 的表单，从上到下是 Logo、标题「欢迎回来」、手机号输入框、带显示/隐藏切换的密码框、「忘记密码」链接、全宽「登录」按钮、第三方登录图标和「去注册」入口。支持回车提交，错误提示显示在输入框下方，手机上隐藏插图。
结构与适用场景
结构描述
页面中央（或右半边）一张窄表单卡片，从上到下是 Logo 和标题、账号密码输入框、主按钮、第三方登录和注册入口；左半边可放品牌插图。
适用场景
- 用户需要输入账号密码或验证码进入产品时
- 注册只需要少量必填信息、一屏就能完成时
- 希望用户专注完成登录、不被其他内容干扰时
不适用场景
- 注册需要填写大量资料、分几个阶段完成时（应该用分步向导）
- 已登录用户修改密码、换绑手机等账号安全操作（应该放在设置页）
- 页面目标是介绍产品、说服陌生访客时（应该用落地页）
常见坏用法
- 注册页一上来就要求填写十几项资料
- 登录失败只提示「操作失败」，不说明是账号不存在还是密码错误
- 登录按钮点击后没有加载状态，用户连点几次造成重复提交
- 保留全站导航和各种推荐，表单被挤在角落里
识别特征
- 页面正中或右半边有一张窄小的表单卡片
- 只有两三个输入框和一个全宽主按钮
- 旁边或背景是大面积品牌插图，页面没有其他导航
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
form:has(input[type="password"])