主题 · 产品 · 入门

登录 / 注册

登录页 = 左右分栏布局，一侧品牌面板、一侧简短表单，而不是孤零零的居中卡片。

怎么向 AI 描述它

Build a sign-in screen in the split layout of Linear — a brand panel beside a white form.

STYLE
- Split: left panel ~42% dark gradient (#1b2550 → #0b1020) with an indigo radial glow; right panel white
- Right form: neutral ink #1f2430, hairline borders #e2e6ee, 8px radii
- Keep it airy; the form is not crammed

LAYOUT
- Left: wordmark, two-line display pitch, one supporting line
- Right: two SSO buttons (Continue with Google / GitHub) with provider marks, an "or" divider, Email + Password fields, a solid "Sign in" button, a "Forgot password?" link

COMPONENTS
- Brand panel with logo, pitch headline, subcopy
- Two SSO buttons with icons
- Email and password fields
- Primary "Sign in" button
- "Forgot password?" link

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the form half of this sign-in screen.

CHANGES
- Reduce the fields to email and password only
- Move Forgot password to the right of the label row
- Add inline validation that fires on blur, not on keystroke

DO NOT
- Do not restyle the brand panel
- Do not change the split proportions

Build a production sign-in screen in the split layout of Linear.

STYLE
- Left brand panel: deep #08090a with a subtle grid and one quote
- Right form panel: pure white, 8px radii, hairline inputs
- One indigo accent #5e6ad2, neutrals everywhere else

LAYOUT
- 50/50 split, with the brand panel collapsing below 900px
- Form column capped at 360px, vertically centred
- SSO buttons above a divider, email fields below it

COMPONENTS
- Input, button, checkbox, link, alert, icon button
- Show and hide password toggle sits inside the field

STATES
- Error: inline under the field, plus a page-level alert on auth failure
- Loading: the button label swaps to a spinner and the fields disable
- Validation fires on blur, never on keystroke

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Autofocus the email field and label every input

MOTION
- Form: 200ms ease-out fade on first paint.
- Error: one 200ms shake from the top, never looping.
- Submit button: spinner swaps in at 150ms and holds the label width.
- No background parallax on a sign-in screen. prefers-reduced-motion: no shake.

修改类 Prompt 只动目标，不碰页面其余部分。

提示

两栏视觉要平衡。紧凑卡片视图下隐藏 SSO 行，让邮箱/密码表单保持好点。

另见

组件

输入框→按钮→

风格

极简→

主题

音乐播放器→订阅候补落地页→

Build a sign-in screen in the split layout of Linear — a brand panel beside a white form. STYLE - Split: left panel ~42% dark gradient (#1b2550 → #0b1020) with an indigo radial glow; right panel white - Right form: neutral ink #1f2430, hairline borders #e2e6ee, 8px radii - Keep it airy; the form is not crammed LAYOUT - Left: wordmark, two-line display pitch, one supporting line - Right: two SSO buttons (Continue with Google / GitHub) with provider marks, an "or" divider, Email + Password fields, a solid "Sign in" button, a "Forgot password?" link COMPONENTS - Brand panel with logo, pitch headline, subcopy - Two SSO buttons with icons - Email and password fields - Primary "Sign in" button - "Forgot password?" link TECHNICAL - React - Tailwind CSS - shadcn/ui

登录 / 注册

提示

另见

组件

动画

风格

主题

Prompt

术语

反模式