登录页（Auth Screen）是什么：效果预览与 AI 设计提示词

效果预览

让设计
更快落地

欢迎回来

邮箱地址

密码

登录

或

G⌘

适合用在哪

需要同时做品牌传达与转化的 B 端产品；纯工具类可用单栏居中版。

容易踩的坑

移动端仍保留左侧品牌栏，表单被挤到首屏以下，用户要先滚动才能登录。
密码框禁用粘贴或缺 autocomplete，密码管理器无法自动填充。
错误提示区分「账号不存在」和「密码错误」，会泄露账号是否已注册。

设计提示词 · Prompt

登录页（Auth Screen）：左右分栏，左栏 38-45% 宽、品牌渐变底、白字放一句价值主张（也可放客户 logo 墙或产品截图）；右栏白底、垂直居中，表单最大宽度 320-380px。表单自上而下：11.5px 加粗标题、可选一行副说明、邮箱字段、密码字段、一行「忘记密码」右对齐链接、深色整宽主按钮。之后是「或」分隔线（左右两条细线夹一个小字），再接第三方登录按钮组（Google / GitHub 等，白底细描边、各占一半或整宽）。字段要有可见的 label 或至少 placeholder + autocomplete 属性，便于密码管理器工作。

Auth Screen: a two-column split. The left column is 38-45% wide with a brand gradient background and a value proposition in white text (or a customer logo wall or product screenshot); the right column is white and vertically centered, with the form at a max width of 320-380px. The form, top to bottom: an 11.5px bold title, an optional subtitle line, an email field, a password field, a right-aligned "Forgot password" link, and a dark full-width primary button. Then an "or" divider (two thin lines flanking small text), followed by a group of third-party sign-in buttons (Google / GitHub etc., white background with thin border, half-width each or full-width). Fields must have visible labels, or at least placeholders plus autocomplete attributes, so password managers work.

常见搭配

同一页面里经常和「登录页」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

浮动标签输入Floating Label Input 内联校验状态Input Validation States 错误抖动Error Shake 加载态按钮Loading Button

演示 HTML 结构

<div class="s d-center">
  <div class="lc-auth">
    <div class="lc-auth__side">让设计<br>更快落地</div>
    <div class="lc-auth__form">
      <b>欢迎回来</b>
      <div class="lc-auth__f">邮箱地址</div>
      <div class="lc-auth__f">密码</div>
      <div class="lc-auth__go">登录</div>
      <div class="lc-auth__sep">或</div>
      <div class="lc-auth__soc"><i>G</i><i>⌘</i></div>
    </div>
  </div>
</div>