diff --git a/.gitignore b/.gitignore
index 8c630a677..b8caff5ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ go.work
 
 .idea/
 *.wasm
+.worktrees/
diff --git a/docs/superpowers/plans/2026-03-30-sign-in-page.md b/docs/superpowers/plans/2026-03-30-sign-in-page.md
new file mode 100644
index 000000000..7703e0846
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-30-sign-in-page.md
@@ -0,0 +1,816 @@
+# Sign-In Page Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the approved `/sign-in` page in `spx-gui`, route unauthenticated users through it, and keep authentication on the existing Casdoor redirect flow with safe post-login return handling.
+
+**Architecture:** Add a small sign-in entry utility layer for safe `returnTo` normalization and provider-aware redirect parameters, then wire router and existing entry points through a new `/sign-in` page. Keep the new page visually rich but behaviorally thin by splitting presentation into hero and panel components while leaving redirect logic in the auth store layer.
+
+**Tech Stack:** Vue 3, TypeScript, Vue Router 4, scoped SCSS, Vitest, Vue Test Utils, Casdoor JS SDK
+
+---
+
+### Task 1: Sign-In Entry Utilities
+
+**Files:**
+- Create: `spx-gui/src/stores/user/sign-in-entry.ts`
+- Create: `spx-gui/src/stores/user/sign-in-entry.test.ts`
+- Modify: `spx-gui/src/utils/env.ts:16-22,53-57`
+- Modify: `spx-gui/src/stores/user/index.ts:1-7`
+- Modify: `spx-gui/src/stores/user/signed-in.ts:12-75`
+
+- [ ] **Step 1: Record the new env keys in the documented template**
+
+```ts
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  buildProviderParams,
+  getDefaultReturnTo,
+  getSignInRoute,
+  normalizeSafeReturnTo
+} from './sign-in-entry'
+
+describe('sign-in-entry', () => {
+  const originalLocation = window.location
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        origin: 'https://xbuilder.com',
+        pathname: '/project/alice/demo',
+        search: '?tab=play',
+        hash: '#runner'
+      }
+    })
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: originalLocation
+    })
+  })
+
+  it('keeps safe internal return targets', () => {
+    expect(normalizeSafeReturnTo('/editor/alice/demo?publish#share')).toBe('/editor/alice/demo?publish#share')
+  })
+
+  it('rejects unsafe return targets', () => {
+    expect(normalizeSafeReturnTo('https://evil.example')).toBe('/')
+    expect(normalizeSafeReturnTo('//evil.example')).toBe('/')
+    expect(normalizeSafeReturnTo('editor/alice/demo')).toBe('/')
+  })
+
+  it('builds the default return target from the current location', () => {
+    expect(getDefaultReturnTo()).toBe('/project/alice/demo?tab=play#runner')
+  })
+
+  it('builds a sign-in route with an encoded safe return target', () => {
+    expect(getSignInRoute('/project/alice/demo?tab=play#runner')).toBe(
+      '/sign-in?returnTo=%2Fproject%2Falice%2Fdemo%3Ftab%3Dplay%23runner'
+    )
+  })
+
+  it('returns null provider params when a provider is not configured', () => {
+    expect(buildProviderParams({ providerParamName: 'provider', providerValue: '' })).toBeNull()
+  })
+
+  it('builds provider params when name and value are configured', () => {
+    expect(buildProviderParams({ providerParamName: 'provider', providerValue: 'wechat' })).toEqual({
+      provider: 'wechat'
+    })
+  })
+})
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/stores/user/sign-in-entry.test.ts
+```
+
+Expected: FAIL with module-not-found errors for `sign-in-entry.ts` exports.
+
+- [ ] **Step 3: Write the minimal implementation**
+
+`spx-gui/src/stores/user/sign-in-entry.ts`
+
+```ts
+import {
+  casdoorProviderParamName,
+  casdoorQqProvider,
+  casdoorWeChatProvider
+} from '@/utils/env'
+
+export function getDefaultReturnTo() {
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`
+}
+
+export function normalizeSafeReturnTo(input: string | null | undefined) {
+  if (input == null || input === '') return '/'
+  if (!input.startsWith('/')) return '/'
+  if (input.startsWith('//')) return '/'
+  return input
+}
+
+export function getSignInRoute(returnTo: string = getDefaultReturnTo()) {
+  const safeReturnTo = normalizeSafeReturnTo(returnTo)
+  if (safeReturnTo === '/') return '/sign-in'
+  return `/sign-in?returnTo=${encodeURIComponent(safeReturnTo)}`
+}
+
+export function buildProviderParams(config: { providerParamName: string; providerValue: string }) {
+  if (config.providerParamName === '' || config.providerValue === '') return null
+  return { [config.providerParamName]: config.providerValue }
+}
+
+export function getWeChatProviderParams() {
+  return buildProviderParams({
+    providerParamName: casdoorProviderParamName,
+    providerValue: casdoorWeChatProvider
+  })
+}
+
+export function getQQProviderParams() {
+  return buildProviderParams({
+    providerParamName: casdoorProviderParamName,
+    providerValue: casdoorQqProvider
+  })
+}
+```
+
+`spx-gui/src/utils/env.ts`
+
+```ts
+export const casdoorProviderParamName = (import.meta.env.VITE_CASDOOR_PROVIDER_PARAM_NAME as string) || 'provider'
+export const casdoorWeChatProvider = (import.meta.env.VITE_CASDOOR_WECHAT_PROVIDER as string) || ''
+export const casdoorQqProvider = (import.meta.env.VITE_CASDOOR_QQ_PROVIDER as string) || ''
+```
+
+`spx-gui/src/stores/user/signed-in.ts`
+
+```ts
+import { getDefaultReturnTo, getQQProviderParams, getWeChatProviderParams, getSignInRoute } from './sign-in-entry'
+
+export function goToSignIn(returnTo: string = getDefaultReturnTo()) {
+  window.location.assign(getSignInRoute(returnTo))
+}
+
+export function initiateSignIn(returnTo: string = getDefaultReturnTo(), additionalParams?: Record<string, string>) {
+  const casdoorSdk = new Sdk({
+    ...casdoorConfig,
+    redirectPath: `${casdoorAuthRedirectPath}?returnTo=${encodeURIComponent(returnTo)}`
+  })
+  casdoorSdk.signin_redirect(additionalParams)
+}
+
+export function initiateWeChatSignIn(returnTo: string = getDefaultReturnTo()) {
+  initiateSignIn(returnTo, getWeChatProviderParams() ?? undefined)
+}
+
+export function initiateQQSignIn(returnTo: string = getDefaultReturnTo()) {
+  initiateSignIn(returnTo, getQQProviderParams() ?? undefined)
+}
+```
+
+`spx-gui/src/stores/user/index.ts`
+
+```ts
+export * from './sign-in-entry'
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/stores/user/sign-in-entry.test.ts
+```
+
+Expected: PASS with 6 passing tests and no import errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add \
+  spx-gui/src/utils/env.ts \
+  spx-gui/src/stores/user/index.ts \
+  spx-gui/src/stores/user/signed-in.ts \
+  spx-gui/src/stores/user/sign-in-entry.ts \
+  spx-gui/src/stores/user/sign-in-entry.test.ts
+git commit -m "feat: add sign-in entry helpers"
+```
+
+### Task 2: Route `/sign-in` Through Router and Add the Page Shell
+
+**Files:**
+- Create: `spx-gui/src/pages/sign-in/index.vue`
+- Create: `spx-gui/src/pages/sign-in/index.test.ts`
+- Modify: `spx-gui/src/router.ts:5,136-156,185-193`
+
+- [ ] **Step 1: Write the failing test**
+
+`spx-gui/src/pages/sign-in/index.test.ts`
+
+```ts
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const replace = vi.fn()
+const initiateWeChatSignIn = vi.fn()
+const initiateQQSignIn = vi.fn()
+const initiateSignIn = vi.fn()
+let signedInState = { isSignedIn: false, user: null as null | { username: string } }
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({ query: { returnTo: '/project/alice/demo' } }),
+  useRouter: () => ({ replace })
+}))
+
+vi.mock('@/stores/user', () => ({
+  useSignedInStateQuery: () => ({
+    isLoading: { value: false },
+    data: { value: signedInState }
+  }),
+  initiateWeChatSignIn,
+  initiateQQSignIn,
+  initiateSignIn
+}))
+
+import SignInPage from './index.vue'
+
+describe('sign-in page shell', () => {
+  beforeEach(() => {
+    replace.mockReset()
+    initiateWeChatSignIn.mockReset()
+    initiateQQSignIn.mockReset()
+    initiateSignIn.mockReset()
+    signedInState = { isSignedIn: false, user: null }
+  })
+
+  it('renders the three approved sign-in actions', () => {
+    const wrapper = mount(SignInPage)
+    expect(wrapper.text()).toContain('XBuilder')
+    expect(wrapper.text()).toContain('登录')
+    expect(wrapper.text()).toContain('使用微信登录')
+    expect(wrapper.text()).toContain('使用 QQ 登录')
+    expect(wrapper.text()).toContain('用户名密码登录')
+  })
+
+  it('redirects signed-in visitors away from /sign-in', async () => {
+    signedInState = { isSignedIn: true, user: { username: 'alice' } }
+    mount(SignInPage)
+    await flushPromises()
+    expect(replace).toHaveBeenCalledWith('/project/alice/demo')
+  })
+})
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/pages/sign-in/index.test.ts
+```
+
+Expected: FAIL because `src/pages/sign-in/index.vue` does not exist and `/sign-in` is not wired.
+
+- [ ] **Step 3: Write the minimal implementation**
+
+`spx-gui/src/pages/sign-in/index.vue`
+
+```vue
+<template>
+  <main class="page">
+    <section class="card">
+      <h1 class="title">{{ $t({ en: 'Sign in', zh: '登录' }) }}</h1>
+      <div class="brand">XBuilder</div>
+      <UIButton class="wechat" color="primary" @click="handleWeChat">
+        {{ $t({ en: 'Use WeChat to sign in', zh: '使用微信登录' }) }}
+      </UIButton>
+      <UIButton class="qq" color="white" variant="stroke" @click="handleQQ">
+        {{ $t({ en: 'Use QQ to sign in', zh: '使用 QQ 登录' }) }}
+      </UIButton>
+      <button class="password" type="button" @click="handlePassword">
+        {{ $t({ en: 'Sign in with username and password', zh: '用户名密码登录' }) }}
+      </button>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { UIButton } from '@/components/ui'
+import {
+  initiateQQSignIn,
+  initiateSignIn,
+  initiateWeChatSignIn,
+  normalizeSafeReturnTo,
+  useSignedInStateQuery
+} from '@/stores/user'
+import { usePageTitle } from '@/utils/utils'
+
+const route = useRoute()
+const router = useRouter()
+const signedInStateQuery = useSignedInStateQuery()
+const returnTo = computed(() => normalizeSafeReturnTo(route.query.returnTo as string | undefined))
+
+usePageTitle({ en: 'Sign in', zh: '登录' })
+
+watchEffect(() => {
+  const state = signedInStateQuery.data.value
+  if (state?.isSignedIn) router.replace(returnTo.value)
+})
+
+function handleWeChat() {
+  initiateWeChatSignIn(returnTo.value)
+}
+
+function handleQQ() {
+  initiateQQSignIn(returnTo.value)
+}
+
+function handlePassword() {
+  initiateSignIn(returnTo.value)
+}
+</script>
+```
+
+`spx-gui/src/router.ts`
+
+```ts
+import { getDefaultReturnTo, getSignInRoute, goToSignIn, isSignedIn, getUnresolvedSignedInUsername } from './stores/user'
+
+{
+  path: '/sign-in',
+  component: () => import('@/pages/sign-in/index.vue')
+},
+
+if (username == null) {
+  return getSignInRoute(`/editor/${encodeURIComponent(projectNameInput as string)}`)
+}
+
+router.beforeEach((to, _, next) => {
+  if (to.meta.requiresSignIn && !isSignedIn()) {
+    next(getSignInRoute(to.fullPath || getDefaultReturnTo()))
+  } else {
+    next()
+  }
+})
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/pages/sign-in/index.test.ts
+```
+
+Expected: PASS with page shell rendering and signed-in redirect behavior covered.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add \
+  spx-gui/src/router.ts \
+  spx-gui/src/pages/sign-in/index.vue \
+  spx-gui/src/pages/sign-in/index.test.ts
+git commit -m "feat: add sign-in route shell"
+```
+
+### Task 3: Build the Final Figma Layout and Sign-In Components
+
+**Files:**
+- Create: `spx-gui/src/components/sign-in/SignInHero.vue`
+- Create: `spx-gui/src/components/sign-in/SignInPanel.vue`
+- Create: `spx-gui/src/pages/sign-in/assets/sign-in-hero.svg`
+- Create: `spx-gui/src/pages/sign-in/assets/icon-wechat.svg`
+- Create: `spx-gui/src/pages/sign-in/assets/icon-qq.svg`
+- Modify: `spx-gui/src/pages/sign-in/index.vue`
+- Modify: `spx-gui/src/pages/sign-in/index.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Append these assertions to `spx-gui/src/pages/sign-in/index.test.ts`:
+
+```ts
+it('calls provider-specific helpers with the normalized return target', async () => {
+  const wrapper = mount(SignInPage)
+
+  await wrapper.find('[data-testid="sign-in-wechat"]').trigger('click')
+  await wrapper.find('[data-testid="sign-in-qq"]').trigger('click')
+  await wrapper.find('[data-testid="sign-in-password"]').trigger('click')
+
+  expect(initiateWeChatSignIn).toHaveBeenCalledWith('/project/alice/demo')
+  expect(initiateQQSignIn).toHaveBeenCalledWith('/project/alice/demo')
+  expect(initiateSignIn).toHaveBeenCalledWith('/project/alice/demo')
+})
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/pages/sign-in/index.test.ts
+```
+
+Expected: FAIL because the page does not yet expose the final test ids and split components.
+
+- [ ] **Step 3: Write the minimal implementation**
+
+`spx-gui/src/components/sign-in/SignInPanel.vue`
+
+```vue
+<script setup lang="ts">
+defineProps<{
+  logoSrc: string
+  wechatIconSrc: string
+  qqIconSrc: string
+  loading: null | 'wechat' | 'qq' | 'password'
+}>()
+
+defineEmits<{
+  wechat: []
+  qq: []
+  password: []
+}>()
+</script>
+
+<template>
+  <section class="sign-in-panel">
+    <div class="brand-block">
+      <img class="logo" :src="logoSrc" alt="" />
+      <div class="brand-name">XBuilder</div>
+    </div>
+
+    <div class="actions">
+      <UIButton data-testid="sign-in-wechat" class="wechat" color="primary" :loading="loading === 'wechat'" @click="$emit('wechat')">
+        <template #icon><img class="icon" :src="wechatIconSrc" alt="" /></template>
+        {{ $t({ en: 'Use WeChat to sign in', zh: '使用微信登录' }) }}
+      </UIButton>
+
+      <UIButton data-testid="sign-in-qq" class="qq" color="white" variant="stroke" :loading="loading === 'qq'" @click="$emit('qq')">
+        <template #icon><img class="icon" :src="qqIconSrc" alt="" /></template>
+        {{ $t({ en: 'Use QQ to sign in', zh: '使用 QQ 登录' }) }}
+      </UIButton>
+
+      <button data-testid="sign-in-password" class="password" type="button" :disabled="loading != null" @click="$emit('password')">
+        {{ $t({ en: 'Sign in with username and password', zh: '用户名密码登录' }) }}
+      </button>
+    </div>
+  </section>
+</template>
+```
+
+`spx-gui/src/components/sign-in/SignInHero.vue`
+
+```vue
+<script setup lang="ts">
+defineProps<{
+  heroSrc: string
+}>()
+</script>
+
+<template>
+  <section class="sign-in-hero">
+    <h1 class="title">{{ $t({ en: 'Sign in', zh: '登录' }) }}</h1>
+    <img class="illustration" :src="heroSrc" alt="" />
+  </section>
+</template>
+```
+
+`spx-gui/src/pages/sign-in/index.vue`
+
+```vue
+<template>
+  <main class="page">
+    <section class="card">
+      <SignInHero :hero-src="heroSrc" />
+      <SignInPanel
+        :loading="loading"
+        :logo-src="logoSrc"
+        :wechat-icon-src="wechatIconSrc"
+        :qq-icon-src="qqIconSrc"
+        @wechat="handleWeChat"
+        @qq="handleQQ"
+        @password="handlePassword"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import logoSrc from '@/assets/logo.svg'
+import heroSrc from './assets/sign-in-hero.svg'
+import wechatIconSrc from './assets/icon-wechat.svg'
+import qqIconSrc from './assets/icon-qq.svg'
+import SignInHero from '@/components/sign-in/SignInHero.vue'
+import SignInPanel from '@/components/sign-in/SignInPanel.vue'
+import {
+  initiateQQSignIn,
+  initiateSignIn,
+  initiateWeChatSignIn,
+  normalizeSafeReturnTo,
+  useSignedInStateQuery
+} from '@/stores/user'
+import { usePageTitle } from '@/utils/utils'
+
+const route = useRoute()
+const router = useRouter()
+const signedInStateQuery = useSignedInStateQuery()
+const returnTo = computed(() => normalizeSafeReturnTo(route.query.returnTo as string | undefined))
+
+const loading = ref<null | 'wechat' | 'qq' | 'password'>(null)
+
+usePageTitle({ en: 'Sign in', zh: '登录' })
+
+watchEffect(() => {
+  const state = signedInStateQuery.data.value
+  if (state?.isSignedIn) router.replace(returnTo.value)
+})
+
+function handleWeChat() {
+  loading.value = 'wechat'
+  initiateWeChatSignIn(returnTo.value)
+}
+
+function handleQQ() {
+  loading.value = 'qq'
+  initiateQQSignIn(returnTo.value)
+}
+
+function handlePassword() {
+  loading.value = 'password'
+  initiateSignIn(returnTo.value)
+}
+</script>
+```
+
+Use scoped SCSS in `index.vue`, `SignInHero.vue`, and `SignInPanel.vue` to match the approved Figma structure:
+
+```scss
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background:
+    radial-gradient(circle at top left, rgba(110, 151, 219, 0.22), transparent 42%),
+    radial-gradient(circle at bottom right, rgba(64, 186, 196, 0.2), transparent 38%),
+    #eff3fd;
+}
+
+.card {
+  width: min(100%, 1000px);
+  min-height: 600px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 16px 32px -12px rgba(64, 186, 196, 0.18);
+}
+
+@media (max-width: 960px) {
+  .card {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/pages/sign-in/index.test.ts
+```
+
+Expected: PASS with button click behavior covered after the component split.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add \
+  spx-gui/src/components/sign-in/SignInHero.vue \
+  spx-gui/src/components/sign-in/SignInPanel.vue \
+  spx-gui/src/pages/sign-in/assets/sign-in-hero.svg \
+  spx-gui/src/pages/sign-in/assets/icon-wechat.svg \
+  spx-gui/src/pages/sign-in/assets/icon-qq.svg \
+  spx-gui/src/pages/sign-in/index.vue \
+  spx-gui/src/pages/sign-in/index.test.ts
+git commit -m "feat: implement sign-in page UI"
+```
+
+### Task 4: Rewire Existing Entry Points and Harden the Callback
+
+**Files:**
+- Modify: `spx-gui/src/components/navbar/NavbarProfile.vue:3-10,82-90`
+- Modify: `spx-gui/src/components/community/home/banner/GuestBanner.vue:1-8`
+- Modify: `spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue:6-23`
+- Modify: `spx-gui/src/components/community/user/UserHeader.vue:35-57`
+- Modify: `spx-gui/src/pages/community/project.vue:358-378`
+- Modify: `spx-gui/src/utils/user.ts:1-21`
+- Create: `spx-gui/src/pages/sign-in/callback-utils.ts`
+- Create: `spx-gui/src/pages/sign-in/callback-utils.test.ts`
+- Modify: `spx-gui/src/pages/sign-in/callback.vue:7-24`
+
+- [ ] **Step 1: Write the failing test**
+
+`spx-gui/src/pages/sign-in/callback-utils.test.ts`
+
+```ts
+import { describe, expect, it } from 'vitest'
+import { getCallbackReturnTo } from './callback-utils'
+
+describe('getCallbackReturnTo', () => {
+  it('returns a normalized internal return target', () => {
+    expect(getCallbackReturnTo('?returnTo=%2Fproject%2Falice%2Fdemo')).toBe('/project/alice/demo')
+  })
+
+  it('falls back to / for unsafe return targets', () => {
+    expect(getCallbackReturnTo('?returnTo=https%3A%2F%2Fevil.example')).toBe('/')
+  })
+
+  it('falls back to / when returnTo is missing', () => {
+    expect(getCallbackReturnTo('')).toBe('/')
+  })
+})
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/pages/sign-in/callback-utils.test.ts
+```
+
+Expected: FAIL because `callback-utils.ts` does not exist.
+
+- [ ] **Step 3: Write the minimal implementation**
+
+Replace direct `initiateSignIn()` call sites with `goToSignIn()` or `getSignInRoute(...)`-based routing:
+
+```ts
+// NavbarProfile.vue
+import { goToSignIn } from '@/stores/user'
+@click="goToSignIn()"
+
+// GuestBanner.vue
+import { goToSignIn } from '@/stores/user'
+function handleJoin() {
+  goToSignIn()
+}
+
+// SignInTip.vue
+import { goToSignIn, isSignedIn } from '@/stores/user'
+<UIButton variant="flat" class="sign-in-btn" @click="goToSignIn()">
+
+// utils/user.ts
+import { goToSignIn, isSignedIn } from '@/stores/user'
+confirmHandler: () => goToSignIn()
+
+// UserHeader.vue
+import { goToSignIn, useSignedInUser } from '@/stores/user'
+await timeout(2000)
+goToSignIn()
+
+// community/project.vue
+function handleSignIn() {
+  goToSignIn(route.fullPath)
+}
+```
+
+`spx-gui/src/pages/sign-in/callback-utils.ts`
+
+```ts
+import { normalizeSafeReturnTo } from '@/stores/user/sign-in-entry'
+
+export function getCallbackReturnTo(search: string) {
+  const params = new URLSearchParams(search)
+  return normalizeSafeReturnTo(params.get('returnTo'))
+}
+```
+
+`spx-gui/src/pages/sign-in/callback.vue`
+
+```ts
+import { completeSignIn } from '@/stores/user'
+import { getCallbackReturnTo } from './callback-utils'
+
+try {
+  await completeSignIn()
+  const returnTo = getCallbackReturnTo(location.search)
+  window.location.replace(returnTo)
+} catch (e) {
+  console.error('failed to complete sign-in', e)
+  window.location.replace('/')
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run src/pages/sign-in/callback-utils.test.ts
+npm test -- --run src/stores/user/sign-in-entry.test.ts src/pages/sign-in/index.test.ts
+```
+
+Expected: PASS for callback safety and no regressions in the new sign-in page behavior.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add \
+  spx-gui/src/components/navbar/NavbarProfile.vue \
+  spx-gui/src/components/community/home/banner/GuestBanner.vue \
+  spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue \
+  spx-gui/src/components/community/user/UserHeader.vue \
+  spx-gui/src/pages/community/project.vue \
+  spx-gui/src/utils/user.ts \
+  spx-gui/src/pages/sign-in/callback-utils.ts \
+  spx-gui/src/pages/sign-in/callback-utils.test.ts \
+  spx-gui/src/pages/sign-in/callback.vue
+git commit -m "feat: route sign-in entry points through /sign-in"
+```
+
+### Task 5: Verify the End-to-End Baseline
+
+**Files:**
+- Modify: `spx-gui/.env` (documentation only, if new vars are not yet listed)
+- Verify only: `spx-gui/.env.development`, `spx-gui/.env.staging`, `spx-gui/.env.production`
+
+- [ ] **Step 1: Record the new env keys in the documented template**
+
+Add the new config keys to the documented `.env` template before any manual verification:
+
+```dotenv
+VITE_CASDOOR_PROVIDER_PARAM_NAME="provider"
+VITE_CASDOOR_WECHAT_PROVIDER=""
+VITE_CASDOOR_QQ_PROVIDER=""
+```
+
+- [ ] **Step 2: Run focused verification before the final suite**
+
+Run:
+
+```bash
+cd spx-gui
+npm run type-check
+npm test -- --run src/stores/user/sign-in-entry.test.ts src/pages/sign-in/index.test.ts src/pages/sign-in/callback-utils.test.ts
+```
+
+Expected: PASS on type-check and all new targeted tests.
+
+- [ ] **Step 3: Run the full test suite**
+
+Run:
+
+```bash
+cd spx-gui
+npm test -- --run
+```
+
+Expected: PASS with the project baseline still green.
+
+- [ ] **Step 4: Perform manual Figma verification**
+
+Checklist:
+
+```md
+- Open `/sign-in` on desktop and compare against the approved Figma node
+- Confirm the card is centered with the expected split layout
+- Confirm the WeChat button is visually primary and QQ is secondary
+- Confirm `用户名密码登录` routes to hosted Casdoor login
+- Confirm removing provider env values still allows WeChat and QQ buttons to sign in via the generic flow
+- Confirm visiting `/sign-in?returnTo=%2Fproject%2Falice%2Fdemo` after sign-in returns to `/project/alice/demo`
+- Confirm unsafe `returnTo` values such as `https://evil.example` fall back to `/`
+- Confirm narrow screens stack the panel above the illustration
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add spx-gui/.env
+git commit -m "docs: record sign-in provider env keys"
+```
diff --git a/docs/superpowers/specs/2026-03-30-sign-in-page-design.md b/docs/superpowers/specs/2026-03-30-sign-in-page-design.md
new file mode 100644
index 000000000..3ce14bf70
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-30-sign-in-page-design.md
@@ -0,0 +1,370 @@
+# Sign-In Page Design
+
+- Date: 2026-03-30
+- Status: Approved for planning
+- Scope: `spx-gui`
+
+## Summary
+
+Implement the Figma domestic sign-in screen as the new first-party `/sign-in` page in `spx-gui`.
+The page becomes the unified unauthenticated entry for routes and actions that require authentication.
+Actual authentication continues to be handled by Casdoor.
+
+The page provides three explicit entry points:
+
+1. WeChat sign-in
+2. QQ sign-in
+3. Username/password sign-in via the existing Casdoor-hosted login page
+
+The design must match the provided Figma screen closely on desktop, while degrading cleanly to a stacked mobile layout.
+The implementation must use the existing Vue 3 + TypeScript + scoped SCSS stack and existing UI primitives where practical.
+No Tailwind or parallel styling system will be introduced.
+
+## Goals
+
+- Add a real `/sign-in` page that matches the approved Figma design.
+- Route unauthenticated users to `/sign-in` instead of redirecting straight to Casdoor.
+- Preserve `returnTo` so users return to their intended in-app destination after sign-in.
+- Keep the authentication backend flow unchanged by continuing to use Casdoor PKCE redirect flow.
+- Support provider-specific WeChat and QQ entry points when configured.
+- Degrade WeChat and QQ buttons to generic Casdoor login when provider-specific config is unavailable.
+
+## Non-Goals
+
+- Build a first-party username/password form inside `spx-gui`.
+- Change the token exchange flow in `/sign-in/callback` beyond safe redirect validation and user feedback.
+- Rework unrelated auth, navbar, or community page visuals outside the sign-in entry flow.
+- Introduce Tailwind, CSS-in-JS, or a new component library.
+
+## Context
+
+Today, most sign-in entry points call `initiateSignIn()` directly and jump to Casdoor immediately.
+The current app has a callback page at `/sign-in/callback` and a token sign-in page at `/sign-in/token`, but no branded sign-in landing page.
+
+The approved Figma node is a desktop-first domestic login page with:
+
+- A soft blue atmospheric background
+- A centered white translucent panel with rounded corners and subtle shadow
+- A left illustration area
+- A right sign-in action panel with XBuilder branding
+- Three sign-in actions
+
+## Chosen Approach
+
+Create a new `/sign-in` route and page.
+Any sign-in-required flow in the app should send users to `/sign-in?returnTo=...`.
+The new page owns presentation and user choice of sign-in method.
+Once the user chooses a method, the page calls a store-level auth helper that redirects to Casdoor with the proper parameters.
+
+This keeps authentication behavior centralized and reusable while making the user-facing experience align with the Figma design.
+
+## User Experience
+
+### Desktop
+
+- The page fills the viewport.
+- A soft, layered, blue background sits behind the content.
+- A centered main card is rendered at desktop scale, targeting the Figma proportions:
+  - Width: approximately `1000px`
+  - Height: approximately `600px`
+  - Two equal columns
+  - Radius: `16px`
+  - Subtle turquoise-tinted shadow
+- Left side shows the illustration and page title.
+- Right side shows the XBuilder logo, brand name, primary and secondary provider buttons, and the username/password entry text button.
+
+### Mobile and Narrow Widths
+
+- The page collapses into a single-column stacked layout.
+- The sign-in panel is shown before the illustration.
+- The main card width becomes fluid with safe viewport padding.
+- The visual treatment remains branded, but layout prioritizes usability over strict desktop fidelity.
+
+### Interaction Rules
+
+- Clicking any login action puts that action into a short loading state and prevents duplicate submission.
+- Username/password entry redirects to the generic Casdoor-hosted login.
+- WeChat and QQ entry points try provider-specific redirect first, then fall back to generic Casdoor login when provider configuration is absent.
+
+## Route and Navigation Design
+
+## New Route
+
+- Add `/sign-in`
+- Component: `@/pages/sign-in/index.vue`
+- This route does not require sign-in.
+
+## Existing Routes
+
+- Keep `/sign-in/callback`
+- Keep `/sign-in/token`
+
+## Already Signed-In Visitors
+
+If a signed-in user navigates to `/sign-in` directly, the page should not remain visible.
+It should immediately redirect to the normalized `returnTo` target when present, otherwise `/`.
+
+## Redirect Flow
+
+When an unauthenticated user attempts an action or route that requires authentication:
+
+1. The app navigates to `/sign-in?returnTo=<encoded in-app path>`
+2. The user chooses a sign-in method
+3. The app redirects to Casdoor
+4. Casdoor returns to `/sign-in/callback?returnTo=...`
+5. The callback exchanges the code for tokens
+6. The callback safely redirects to `returnTo`, or `/` if unavailable or unsafe
+
+## Safe Redirect Rule
+
+`returnTo` must only allow an internal application path.
+
+Accepted:
+
+- `/`
+- `/editor/foo/bar`
+- `/project/a/b?x=1`
+- `/user/name#section`
+
+Rejected and replaced with `/`:
+
+- Absolute URLs such as `https://example.com`
+- Protocol-relative URLs such as `//evil.com`
+- Empty malformed values that do not begin with `/`
+
+## Component Architecture
+
+## Page Component
+
+File:
+
+- `spx-gui/src/pages/sign-in/index.vue`
+
+Responsibilities:
+
+- Read and normalize `returnTo`
+- Set page title
+- Bind click handlers for three sign-in actions
+- Coordinate loading state
+- Render the composed page
+
+## Sign-In Panel Component
+
+File:
+
+- `spx-gui/src/components/sign-in/SignInPanel.vue`
+
+Responsibilities:
+
+- Render logo, brand name, provider buttons, and username/password entry action
+- Emit `wechat`, `qq`, and `password` events
+- Accept loading flags from parent
+- Remain presentation-focused
+
+## Sign-In Hero Component
+
+File:
+
+- `spx-gui/src/components/sign-in/SignInHero.vue`
+
+Responsibilities:
+
+- Render the left-side title and illustration
+- Own only visual presentation
+
+## Assets
+
+The left illustration should be committed as a stable local asset under the sign-in page asset directory rather than reconstructed from many inline Figma fragments.
+
+Planned location:
+
+- `spx-gui/src/pages/sign-in/assets/`
+
+This avoids brittle code, removes dependency on expiring remote Figma asset URLs, and preserves predictable rendering.
+
+## Authentication Helper Design
+
+Store-level auth helpers remain the single source of truth for redirect behavior.
+
+Enhance the auth helper layer in or adjacent to:
+
+- `spx-gui/src/stores/user/signed-in.ts`
+
+Required public behaviors:
+
+- Generic hosted login redirect
+- WeChat login redirect with provider hint
+- QQ login redirect with provider hint
+
+Recommended helper API:
+
+```ts
+initiateSignIn(returnTo?: string, additionalParams?: Record<string, string>)
+initiateWeChatSignIn(returnTo?: string)
+initiateQQSignIn(returnTo?: string)
+goToSignIn(returnTo?: string)
+normalizeSafeReturnTo(input: string | null | undefined): string
+```
+
+`initiateSignIn` remains the base primitive.
+Provider-specific helpers wrap it and inject the configured Casdoor parameters.
+
+## Provider Configuration
+
+Provider hint values must not be hardcoded inside the page component.
+They should come from environment-backed config so deployment environments can vary safely.
+
+Add optional environment variables:
+
+- `VITE_CASDOOR_WECHAT_PROVIDER`
+- `VITE_CASDOOR_QQ_PROVIDER`
+- `VITE_CASDOOR_PROVIDER_PARAM_NAME`
+
+Behavior:
+
+- If both provider param name and provider value are present, use provider-specific redirect.
+- If either is missing, fall back to generic `initiateSignIn(returnTo)`.
+
+Default provider param name if unset:
+
+- `provider`
+
+This choice is explicit so the implementation is deterministic.
+If the backend expects a different name in a future environment, deployment config can override it without code changes.
+
+## Entry Point Changes
+
+Existing user-visible sign-in entry points should navigate to the new page instead of calling Casdoor directly.
+
+Priority targets:
+
+- Global route guard behavior in `router.ts`
+- Navbar sign-in button
+- Any explicit "please sign in" CTA in community or project surfaces
+
+Rule:
+
+- If the user must choose a login method, navigate to `/sign-in`
+- Do not redirect directly to Casdoor from ordinary UI buttons anymore
+
+Exception:
+
+- Low-level auth helpers remain available for the sign-in page and any special flows that intentionally bypass the chooser
+
+## Visual Design Translation
+
+## Styling System
+
+- Use scoped SCSS
+- Reuse existing CSS variables where they fit
+- Add local page-level custom properties only for values not already represented in the shared UI theme
+
+## Reuse of Existing UI Primitives
+
+- Reuse `UIButton` for the main provider buttons
+- Reuse `UIIcon` only when a matching icon already exists
+- Use local SVG or image assets for WeChat and QQ icons if the current icon set does not include them
+
+The login page may add wrapper classes around `UIButton` instances for width, radius, border, or typography alignment, but it must not change global button defaults in a way that affects unrelated pages.
+
+## Fidelity Priorities
+
+Priority order:
+
+1. Layout and spacing
+2. Button hierarchy and typography
+3. Card surface and background atmosphere
+4. Illustration fidelity
+5. Micro-details that would require invasive global UI changes
+
+## Accessibility
+
+- Buttons must remain semantic `<button>` elements or equivalent accessible controls
+- Visible focus states must be preserved
+- Decorative illustration assets must use empty alt text
+- The page title must remain text, not image
+- Color contrast for text and buttons must remain at or above current accessible expectations
+
+## Error Handling
+
+## Sign-In Page
+
+- If redirect initiation throws unexpectedly, show a user-facing error message and clear loading state
+- If provider config is missing, silently degrade to generic hosted sign-in instead of surfacing an error
+
+## Callback Page
+
+- If token exchange fails, redirect to `/` after logging the error
+- Before redirecting, validate `returnTo`
+- If `returnTo` is unsafe, redirect to `/`
+
+## Testing Strategy
+
+Testing follows the repository's current `vitest` style, focused on behavior rather than screenshot snapshots.
+
+## Required Tests
+
+### Auth Helper Tests
+
+- `normalizeSafeReturnTo` accepts valid internal paths
+- `normalizeSafeReturnTo` rejects external or malformed paths
+- `initiateWeChatSignIn` uses provider-specific params when configured
+- `initiateQQSignIn` uses provider-specific params when configured
+- Provider-specific helpers fall back to generic sign-in when config is missing
+
+### Router / Navigation Tests
+
+- Unauthenticated navigation that currently requires sign-in resolves to `/sign-in?returnTo=...`
+- Navbar sign-in click routes to `/sign-in` rather than redirecting directly to Casdoor
+
+### Page Behavior Tests
+
+- Clicking each entry action triggers the expected helper
+- Loading state prevents repeated clicks
+- Username/password action uses generic hosted sign-in
+
+## Manual Verification
+
+- Compare desktop rendering against the provided Figma screenshot
+- Verify button order, spacing, card proportions, and title placement
+- Verify mobile stacking behavior
+- Verify successful return to the original route after sign-in
+- Verify fallback behavior when provider env vars are removed
+
+## Rollout Notes
+
+- The new `/sign-in` page should be introduced first
+- Entry points should then be updated to route through it
+- `/sign-in/token` remains available and unchanged for token-based sign-in flows
+
+## Risks and Mitigations
+
+### Risk: Casdoor provider hint parameter does not match deployment reality
+
+Mitigation:
+
+- Make parameter name and values environment-driven
+- Fall back to generic hosted sign-in
+
+### Risk: Existing direct sign-in flows bypass the new chooser
+
+Mitigation:
+
+- Update known entry points and guard paths in the same implementation
+- Keep auth redirect logic centralized to avoid future drift
+
+### Risk: Figma illustration is expensive to reproduce with inline vector markup
+
+Mitigation:
+
+- Use committed local asset export for the hero artwork
+
+## Acceptance Criteria
+
+- `/sign-in` exists and matches the approved Figma design closely on desktop
+- The page is responsive and usable on narrow screens
+- Unauthenticated entry flows go through `/sign-in`
+- WeChat, QQ, and username/password actions all trigger a valid sign-in redirect
+- Provider-specific actions degrade safely to generic sign-in when config is absent
+- Post-login redirect returns users to a validated internal `returnTo`
+- Automated tests cover redirect parameter generation and safe redirect normalization
diff --git a/spx-gui/.env b/spx-gui/.env
index 50d6aa804..962882a93 100644
--- a/spx-gui/.env
+++ b/spx-gui/.env
@@ -43,6 +43,9 @@ VITE_CASDOOR_ENDPOINT=""
 VITE_CASDOOR_CLIENT_ID=""
 VITE_CASDOOR_APP_NAME=""
 VITE_CASDOOR_ORGANIZATION_NAME=""
+VITE_CASDOOR_PROVIDER_PARAM_NAME="provider"
+VITE_CASDOOR_WECHAT_PROVIDER=""
+VITE_CASDOOR_QQ_PROVIDER=""
 
 # Feature flags, all boolean (true/false), with default values set here.
 #
diff --git a/spx-gui/src/components/community/home/banner/GuestBanner.vue b/spx-gui/src/components/community/home/banner/GuestBanner.vue
index 3e1442feb..d9fdd103d 100644
--- a/spx-gui/src/components/community/home/banner/GuestBanner.vue
+++ b/spx-gui/src/components/community/home/banner/GuestBanner.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { initiateSignIn } from '@/stores/user'
+import { goToSignIn } from '@/stores/user'
 import { UIButton } from '@/components/ui'
 import CommunityCard from '../../CommunityCard.vue'
 
 function handleJoin() {
-  initiateSignIn()
+  goToSignIn()
 }
 </script>
 
diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
index 7ca1098b1..72e5d804d 100644
--- a/spx-gui/src/components/community/user/UserHeader.vue
+++ b/spx-gui/src/components/community/user/UserHeader.vue
@@ -6,7 +6,7 @@ import { useAvatarUrl } from '@/stores/user/avatar'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { timeout } from '@/utils/utils'
-import { initiateSignIn, useSignedInUser } from '@/stores/user'
+import { goToSignIn, useSignedInUser } from '@/stores/user'
 import { UIButton, UIImg, useMessage, useModal } from '@/components/ui'
 import CommunityCard from '@/components/community/CommunityCard.vue'
 import TextView from '../TextView.vue'
@@ -48,7 +48,7 @@ const handleUsernameUpdated = useMessageHandle(
       })
     )
     await timeout(2000)
-    initiateSignIn()
+    goToSignIn()
   },
   {
     en: 'Failed to redirect after username update',
diff --git a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
index 11181305d..71f2c506f 100644
--- a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
+++ b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
@@ -3,7 +3,7 @@ import { onMounted } from 'vue'
 
 import type { Round } from '@/components/copilot/copilot'
 
-import { initiateSignIn, isSignedIn } from '@/stores/user'
+import { goToSignIn, isSignedIn } from '@/stores/user'
 import { UIButton } from '@/components/ui'
 
 const props = defineProps<{
@@ -19,7 +19,7 @@ onMounted(() => {
 <template>
   <div class="sign-in-container">
     <div class="message">{{ $t({ en: 'Please sign in to continue.', zh: '请先登录并继续' }) }}</div>
-    <UIButton variant="flat" class="sign-in-btn" @click="initiateSignIn()">
+    <UIButton variant="flat" class="sign-in-btn" @click="goToSignIn()">
       {{ $t({ en: 'Sign in', zh: '登录' }) }}
     </UIButton>
   </div>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index 794a25f04..75ffe2b42 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -6,7 +6,7 @@
       class="sign-in-button"
       color="secondary"
       :disabled="!isOnline"
-      @click="initiateSignIn()"
+      @click="goToSignIn()"
       >{{ $t({ en: 'Sign in', zh: '登录' }) }}</UIButton
     >
   </div>
@@ -86,7 +86,7 @@ import { useNetwork } from '@/utils/network'
 import { useMessageHandle } from '@/utils/exception'
 import { getUserPageRoute } from '@/router'
 import { AssetType } from '@/apis/asset'
-import { initiateSignIn, signOut, useSignedInStateQuery } from '@/stores/user'
+import { goToSignIn, signOut, useSignedInStateQuery } from '@/stores/user'
 import { useAvatarUrl } from '@/stores/user/avatar'
 import { UIButton, UIDropdown, UIMenu, UIMenuGroup, UIMenuItem, UITooltip } from '@/components/ui'
 import { useAssetLibraryManagement } from '@/components/asset'
diff --git a/spx-gui/src/components/sign-in/SignInHero.vue b/spx-gui/src/components/sign-in/SignInHero.vue
new file mode 100644
index 000000000..60bd58f9a
--- /dev/null
+++ b/spx-gui/src/components/sign-in/SignInHero.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+defineProps<{
+  heroSrc: string
+}>()
+</script>
+
+<template>
+  <section class="sign-in-hero">
+    <h1 class="title">{{ $t({ en: 'Sign in', zh: '登录' }) }}</h1>
+    <div class="illustration-frame">
+      <img class="illustration" :src="heroSrc" alt="" />
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.sign-in-hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 600px;
+  padding: 72px 28px 48px 36px;
+}
+
+.title {
+  margin: 0;
+  color: #24292f;
+  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Noto Sans SC', sans-serif;
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 1.15;
+}
+
+.illustration-frame {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 0 0;
+}
+
+.illustration {
+  width: min(100%, 472px);
+  height: auto;
+  user-select: none;
+}
+
+@media (max-width: 960px) {
+  .sign-in-hero {
+    min-height: auto;
+    gap: 24px;
+    padding: 32px 24px 0;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .illustration {
+    max-width: 360px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/sign-in/SignInPanel.vue b/spx-gui/src/components/sign-in/SignInPanel.vue
new file mode 100644
index 000000000..78e73f54a
--- /dev/null
+++ b/spx-gui/src/components/sign-in/SignInPanel.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { UIButton } from '@/components/ui'
+
+defineProps<{
+  logoSrc: string
+  wechatIconSrc: string
+  qqIconSrc: string
+  loading: null | 'wechat' | 'qq' | 'password'
+}>()
+
+defineEmits<{
+  wechat: []
+  qq: []
+  password: []
+}>()
+</script>
+
+<template>
+  <section class="sign-in-panel">
+    <div class="brand-block">
+      <div class="logo-shell">
+        <img class="logo" :src="logoSrc" alt="" />
+      </div>
+      <div class="brand-name">XBuilder</div>
+    </div>
+
+    <div class="actions">
+      <div class="primary-actions">
+        <UIButton
+          data-testid="sign-in-wechat"
+          class="action wechat"
+          color="primary"
+          size="large"
+          variant="flat"
+          :loading="loading === 'wechat'"
+          @click="$emit('wechat')"
+        >
+          <template #icon>
+            <img class="icon" :src="wechatIconSrc" alt="" />
+          </template>
+          {{ $t({ en: 'Use WeChat to sign in', zh: '使用微信登录' }) }}
+        </UIButton>
+
+        <UIButton
+          data-testid="sign-in-qq"
+          class="action qq"
+          color="white"
+          size="large"
+          variant="stroke"
+          :loading="loading === 'qq'"
+          @click="$emit('qq')"
+        >
+          <template #icon>
+            <img class="icon" :src="qqIconSrc" alt="" />
+          </template>
+          {{ $t({ en: 'Use QQ to sign in', zh: '使用 QQ 登录' }) }}
+        </UIButton>
+      </div>
+
+      <button
+        data-testid="sign-in-password"
+        class="password"
+        type="button"
+        :disabled="loading === 'password'"
+        @click="$emit('password')"
+      >
+        <span>{{ $t({ en: 'Sign in with username and password', zh: '用户名密码登录' }) }}</span>
+      </button>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.sign-in-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 64px;
+  min-height: 600px;
+  padding: 72px 84px;
+  border-left: 1px solid #e0e7ef;
+}
+
+.brand-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 7px;
+  background: #24292f;
+}
+
+.logo {
+  width: 23px;
+  height: 22px;
+}
+
+.brand-name {
+  color: #24292f;
+  font-family: 'HarmonyOS Sans', 'PingFang SC', 'Noto Sans SC', sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  align-items: center;
+  width: min(100%, 330px);
+}
+
+.primary-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.action {
+  width: 100%;
+  --ui-button-height: 48px;
+  --ui-button-radius: 8px;
+  --ui-button-gap: 12px;
+}
+
+.action :deep(.content) {
+  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Noto Sans SC', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.wechat {
+  --ui-button-bg-color: #0bc0cf;
+  --ui-button-shadow-color: #0bc0cf;
+}
+
+.wechat :deep(.content) {
+  color: #ffffff;
+}
+
+.qq {
+  --ui-button-bg-color: #ffffff;
+  --ui-button-color: #24292f;
+  --ui-button-stroke-color: #eaeff3;
+}
+
+.icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.password {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #6e7781;
+  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Noto Sans SC', sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin-top: 1px;
+    border-top: 1.75px solid currentColor;
+    border-right: 1.75px solid currentColor;
+    transform: rotate(45deg);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+}
+
+@media (max-width: 960px) {
+  .sign-in-panel {
+    min-height: auto;
+    gap: 40px;
+    padding: 40px 24px 48px;
+    border-left: none;
+    border-top: 1px solid #e0e7ef;
+  }
+
+  .actions {
+    width: 100%;
+    max-width: 360px;
+  }
+}
+</style>
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 051dd6751..f179e5b81 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
 import { useIsLikingProject, useLikeProject, useUnlikeProject } from '@/stores/liking'
@@ -12,7 +12,7 @@ import { ownerAll, recordProjectView, stringifyProjectFullName, stringifyRemixSo
 import { listProject } from '@/apis/project'
 import { listReleases } from '@/apis/project-release'
 import { SpxProject, type CloudProject } from '@/models/spx/project'
-import { useSignedInUser, useUser, isSignedIn, initiateSignIn } from '@/stores/user'
+import { useSignedInUser, useUser, goToSignIn, isSignedIn } from '@/stores/user'
 import { getOwnProjectEditorRoute, getProjectEditorRoute, getUserPageRoute } from '@/router'
 import {
   UIIcon,
@@ -46,6 +46,7 @@ const props = defineProps<{
   nameInput: string
 }>()
 
+const route = useRoute()
 const router = useRouter()
 const {
   data: project,
@@ -151,7 +152,7 @@ const needsSignInToRun = computed(
 )
 
 function handleSignIn() {
-  initiateSignIn()
+  goToSignIn(route.fullPath)
 }
 
 const handleRun = useMessageHandle(
diff --git a/spx-gui/src/pages/sign-in/assets/icon-qq.svg b/spx-gui/src/pages/sign-in/assets/icon-qq.svg
new file mode 100644
index 000000000..4c6f36c84
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/assets/icon-qq.svg
@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18.8364 22.4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Union">
+<ellipse id="Ellipse 23" cx="9.52872" cy="8.32007" rx="5.33328" ry="1.81332" fill="var(--fill-0, #F9AE0A)"/>
+<path id="Vector" d="M9.41885 22.1427C7.46778 22.1427 5.67675 21.4897 4.5237 20.5144C3.93805 20.6894 3.18894 20.9708 2.71636 21.32C2.31156 21.6186 2.36217 21.9231 2.43503 22.0459C2.75508 22.5861 7.92612 22.3909 9.41885 22.2227V22.1427ZM9.41885 22.1427C11.3702 22.1427 13.1611 21.4897 14.3143 20.5144C14.8997 20.6894 15.6489 20.9708 16.1217 21.32C16.5261 21.6186 16.4757 21.9231 16.4027 22.0459C16.0826 22.5861 10.9117 22.3909 9.41885 22.2227V22.1427Z" fill="var(--fill-0, #F9AE0A)"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M16.1096 9.56398C15.2346 9.80307 12.6522 10.4269 9.43009 10.4487H9.4063C6.1026 10.4261 3.47169 9.77134 2.66375 9.54654C2.49767 9.50014 2.4069 9.40441 2.4069 9.40441C2.40594 9.37513 2.39352 8.88009 2.39352 8.62447C2.39352 4.3229 4.42427 0.000154665 9.41825 0C14.4123 0.000154665 16.4429 4.32274 16.4429 8.62463C16.4429 8.87993 16.4304 9.37513 16.4296 9.40457C16.4296 9.40457 16.3182 9.50686 16.1096 9.56398ZM17.4375 11.9201C17.7136 12.64 17.9862 13.3895 18.186 14.0323C19.1384 17.0974 18.8297 18.3659 18.5949 18.3944C18.0907 18.4553 16.6323 16.087 16.6323 16.087C16.6323 18.4936 14.4596 22.1886 9.48428 22.2226H9.35228C4.3768 22.1886 2.20408 18.4936 2.20408 16.087C2.20408 16.087 0.745857 18.4553 0.241632 18.3943C0.0067224 18.3659 -0.301978 17.0975 0.650588 14.0323C0.850315 13.3897 1.1229 12.64 1.39907 11.9201C1.39907 11.9201 1.58525 11.9084 1.67959 11.9356C2.45282 12.1588 3.27644 12.3567 4.11297 12.5221C3.97051 13.4049 3.88907 14.4973 3.96603 15.7877C4.17089 19.2192 6.20884 21.3764 9.35452 21.4075H9.48219C12.628 21.3764 14.6658 19.2192 14.8709 15.7877C14.9479 14.4971 14.8664 13.405 14.7238 12.5222C15.575 12.3537 16.4131 12.1518 17.1982 11.9237C17.2787 11.9005 17.4375 11.9201 17.4375 11.9201ZM14.7238 12.5222C12.8893 12.8853 10.993 13.0933 9.43009 13.0744H9.4063C7.84354 13.0931 5.94729 12.8851 4.11297 12.5221C4.12038 12.4761 4.12795 12.4306 4.13574 12.3857C5.96303 12.746 7.84978 12.9521 9.40588 12.9334H9.42972C10.9861 12.9524 12.8735 12.746 14.701 12.3856C14.7088 12.4305 14.7163 12.4761 14.7238 12.5222ZM6.34916 4.63292C6.38558 5.61414 6.96441 6.38582 7.64189 6.35515C8.3189 6.32496 8.83809 5.50438 8.80103 4.52274C8.76428 3.5412 8.18567 2.76983 7.50893 2.80019C6.83145 2.83086 6.31241 3.65142 6.34916 4.63292ZM11.1959 6.35515C11.8734 6.38582 12.4522 5.61398 12.4885 4.63292C12.5254 3.65142 12.0063 2.83086 11.3288 2.80019C10.652 2.76999 10.0735 3.54135 10.0367 4.5229C9.99974 5.50438 10.5187 6.3248 11.1959 6.35515ZM9.4303 6.89317C11.6874 6.89317 13.5108 7.33994 13.6917 7.74079C13.7002 7.75855 13.7048 7.77813 13.7049 7.79781C13.7047 7.82559 13.696 7.85263 13.68 7.8753C13.5274 8.0978 11.5029 9.19652 9.4303 9.19652H9.40598C7.3332 9.19652 5.30869 8.09748 5.1561 7.8753C5.14021 7.85269 5.13152 7.82575 5.1312 7.79813C5.13136 7.77834 5.13589 7.75882 5.14442 7.74095C5.32549 7.33994 7.14872 6.89317 9.40598 6.89317H9.4303Z" fill="var(--fill-0, black)"/>
+<path id="Vector_3" d="M8.47384 4.64752C8.50483 5.03515 8.29219 5.37952 7.99966 5.41701C7.70654 5.45472 7.4442 5.17104 7.41311 4.78342C7.38244 4.39547 7.59476 4.05116 7.88681 4.01377C8.18041 3.9758 8.44318 4.2599 8.47384 4.64752ZM10.3351 4.77707C10.395 4.66976 10.8027 4.10577 11.6469 4.3111C11.8688 4.36513 11.9714 4.44454 11.993 4.47569C12.0249 4.52177 12.0338 4.58742 12.0013 4.67584C11.9371 4.85115 11.8046 4.84635 11.7313 4.81206C11.6838 4.78998 11.0958 4.39798 10.5541 4.98283C10.5168 5.02288 10.4501 5.03669 10.3871 4.98907C10.3237 4.94112 10.2977 4.84432 10.3351 4.77707Z" fill="var(--fill-0, black)"/>
+<path id="Vector_4" d="M4.99814 12.6463V16.0233C4.99814 16.0233 6.54506 16.3353 8.09496 16.1192V13.0043C7.11311 12.9487 6.05424 12.825 4.99814 12.6463Z" fill="var(--fill-0, #EA1C27)"/>
+<path id="Vector_5" d="M16.4294 9.40503C16.4294 9.40503 13.4202 10.3549 9.42988 10.3819H9.40605C5.42224 10.3551 2.41694 9.40812 2.4067 9.40503L1.39885 11.9204C3.91964 12.6804 7.04372 13.1701 9.40605 13.1416H9.42988C11.7922 13.1701 14.9161 12.6804 17.4373 11.9204L16.4294 9.40503Z" fill="var(--fill-0, #E91D27)"/>
+</g>
+</svg>
diff --git a/spx-gui/src/pages/sign-in/assets/icon-wechat.svg b/spx-gui/src/pages/sign-in/assets/icon-wechat.svg
new file mode 100644
index 000000000..eccc3365a
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/assets/icon-wechat.svg
@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 23.5996 19.3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Union">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7803 5.8865C16.5122 5.85433 16.2442 5.83289 15.9761 5.83289C12.0089 5.83289 8.878 8.81367 8.878 12.4699C8.878 13.0811 8.9745 13.6708 9.13533 14.2284C8.878 14.2498 8.60994 14.2606 8.35261 14.2606C7.4945 14.2606 6.77507 14.1146 5.95947 13.9491C5.78653 13.914 5.60927 13.878 5.42544 13.8424L2.509 15.3113L3.34533 12.7916C1.2545 11.3227 0 9.43555 0 7.13028C0 3.14161 3.7635 0 8.35261 0C12.4592 0 16.0512 2.509 16.7803 5.8865ZM12.5236 4.61055C12.5236 3.98867 12.0089 3.474 11.387 3.474C10.7544 3.474 10.2504 3.97794 10.2504 4.61055C10.2504 5.24317 10.7544 5.74711 11.387 5.74711C12.0196 5.74711 12.5236 5.24317 12.5236 4.61055ZM4.41756 4.61055C4.41756 5.23244 4.93222 5.74711 5.55411 5.74711C6.176 5.74711 6.67994 5.24317 6.69067 4.61055C6.69067 3.98867 6.176 3.474 5.55411 3.474C4.9215 3.474 4.41756 3.97794 4.41756 4.61055Z" fill="var(--fill-0, white)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5996 12.3734C23.5996 9.01739 20.2543 6.28322 16.5015 6.28322C12.5236 6.28322 9.40339 9.01739 9.40339 12.3734C9.40339 15.7295 12.5343 18.4637 16.5015 18.4637C17.3378 18.4637 18.1742 18.2492 19.0105 18.0455L21.3051 19.3L20.6724 17.2092C22.3451 15.9439 23.5996 14.2713 23.5996 12.3734ZM13.3599 10.4863C13.3599 11.0117 13.7781 11.4406 14.3034 11.4406C14.8288 11.4406 15.2577 11.0117 15.247 10.4863C15.247 9.96094 14.8288 9.53205 14.3034 9.53205C13.7781 9.53205 13.3599 9.96094 13.3599 10.4863ZM17.9597 10.4863C17.9597 11.0117 18.3779 11.4406 18.9033 11.4406C19.4287 11.4406 19.8468 11.0117 19.8468 10.4863C19.8468 9.96094 19.4287 9.53205 18.9033 9.53205C18.3779 9.53205 17.9597 9.96094 17.9597 10.4863Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>
diff --git a/spx-gui/src/pages/sign-in/assets/sign-in-hero.png b/spx-gui/src/pages/sign-in/assets/sign-in-hero.png
new file mode 100644
index 000000000..0e8cdc47c
Binary files /dev/null and b/spx-gui/src/pages/sign-in/assets/sign-in-hero.png differ
diff --git a/spx-gui/src/pages/sign-in/assets/sign-in-logo.svg b/spx-gui/src/pages/sign-in/assets/sign-in-logo.svg
new file mode 100644
index 000000000..786e18ceb
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/assets/sign-in-logo.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.49959 18.7317L6.49275 18.7395L7.02595 19.262L7.03279 19.2542L7.21443 19.4319L5.19685 20.5862L3.31013 21.4505C3.06777 21.5608 2.81687 21.3145 2.93025 21.0774L3.81209 19.2317L4.98689 17.2522L6.49959 18.7317ZM20.0162 7.24148L8.02693 18.9661C8.02427 18.9687 8.02133 18.971 8.01814 18.9729L7.88728 19.0471L7.56599 18.7327L19.6627 6.89578L20.0162 7.24148ZM19.1295 6.37429L7.03279 18.2102L5.37947 16.593L5.45564 16.4651C5.45764 16.4617 5.45968 16.4581 5.46248 16.4553L17.4508 4.73074L19.1295 6.37429Z" fill="#0BC0CF"/>
+  <path d="M17.9106 4.27464L18.4156 3.73952C19.1021 3.01208 19.9552 2.90822 20.9011 3.73981C21.9999 4.76588 21.5872 5.64687 20.9008 6.37421L20.4664 6.76643L17.9106 4.27464Z" fill="#0BC0CF"/>
+  <path d="M17.9106 4.27464L18.4156 3.73952C19.1021 3.01208 19.9552 2.90822 20.9011 3.73981C21.9999 4.76588 21.5872 5.64687 20.9008 6.37421L20.4664 6.76643L17.9106 4.27464Z" fill="#0BC0CF"/>
+  <path d="M21.4706 18.4759C22.1764 19.1677 22.1764 20.289 21.4706 20.9808C20.7644 21.6727 19.6192 21.6727 18.913 20.9808L7.2626 9.56672L9.82218 7.06281L21.4706 18.4759ZM10.4159 2.52375C10.4544 2.4909 10.5126 2.49229 10.5487 2.52766L11.6288 3.58528C11.8145 3.76724 11.8143 4.06236 11.6288 4.24445L9.28702 6.5384L9.28897 6.54035L6.7294 9.04426L4.96573 10.7728C4.77989 10.9546 4.47866 10.9547 4.29288 10.7728L2.13956 8.66242C1.95373 8.48034 1.95372 8.18532 2.13956 8.00324L7.01358 3.22785C7.03906 3.20289 7.07688 3.19387 7.11124 3.20442C7.43906 3.30654 7.78893 3.36164 8.15128 3.36164C9.01929 3.36157 9.81221 3.04513 10.4159 2.52375Z" fill="#0BC0CF"/>
+</svg>
diff --git a/spx-gui/src/pages/sign-in/callback-utils.test.ts b/spx-gui/src/pages/sign-in/callback-utils.test.ts
new file mode 100644
index 000000000..32136e6ad
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/callback-utils.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { getCallbackReturnTo } from './callback-utils'
+
+describe('getCallbackReturnTo', () => {
+  it('returns a normalized internal return target', () => {
+    expect(getCallbackReturnTo('?returnTo=%2Fproject%2Falice%2Fdemo')).toBe('/project/alice/demo')
+  })
+
+  it('falls back to / for unsafe return targets', () => {
+    expect(getCallbackReturnTo('?returnTo=https%3A%2F%2Fevil.example')).toBe('/')
+  })
+
+  it('falls back to / when returnTo is missing', () => {
+    expect(getCallbackReturnTo('')).toBe('/')
+  })
+})
diff --git a/spx-gui/src/pages/sign-in/callback-utils.ts b/spx-gui/src/pages/sign-in/callback-utils.ts
new file mode 100644
index 000000000..2465db76f
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/callback-utils.ts
@@ -0,0 +1,6 @@
+import { normalizeSafeReturnTo } from '@/stores/user/sign-in-entry'
+
+export function getCallbackReturnTo(search: string) {
+  const params = new URLSearchParams(search)
+  return normalizeSafeReturnTo(params.get('returnTo'))
+}
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index 123b6ac91..0fbf5a697 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -6,18 +6,15 @@
 <script setup lang="ts">
 import { usePageTitle } from '@/utils/utils'
 import { completeSignIn } from '@/stores/user'
+import { getCallbackReturnTo } from './callback-utils'
 
 const title = { en: 'Signing in...', zh: '登录中...' }
 
 usePageTitle(title)
 
 try {
-  const params = new URLSearchParams(location.search)
-
   await completeSignIn()
-
-  const returnTo = params.get('returnTo')
-  window.location.replace(returnTo != null ? returnTo : '/')
+  window.location.replace(getCallbackReturnTo(location.search))
 } catch (e) {
   console.error('failed to complete sign-in', e)
   window.location.replace('/')
diff --git a/spx-gui/src/pages/sign-in/index.test.ts b/spx-gui/src/pages/sign-in/index.test.ts
new file mode 100644
index 000000000..02d4f65eb
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/index.test.ts
@@ -0,0 +1,112 @@
+import { defineComponent, h } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import expectedLogoSrc from './assets/sign-in-logo.svg'
+
+const { replace, initiateWeChatSignIn, initiateQQSignIn, initiateSignIn } = vi.hoisted(() => ({
+  replace: vi.fn(),
+  initiateWeChatSignIn: vi.fn(),
+  initiateQQSignIn: vi.fn(),
+  initiateSignIn: vi.fn()
+}))
+
+let signedInState = { isSignedIn: false, user: null as null | { username: string } }
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({ query: { returnTo: '/project/alice/demo' } }),
+  useRouter: () => ({ replace })
+}))
+
+vi.mock('@/stores/user', () => ({
+  normalizeSafeReturnTo: (value: string | undefined) => value ?? '/',
+  useSignedInStateQuery: () => ({
+    isLoading: { value: false },
+    data: { value: signedInState }
+  }),
+  initiateWeChatSignIn,
+  initiateQQSignIn,
+  initiateSignIn
+}))
+
+vi.mock('@/components/ui', () => ({
+  UIButton: defineComponent({
+    name: 'UIButton',
+    emits: ['click'],
+    setup(_, { slots, attrs, emit }) {
+      return () =>
+        h(
+          'button',
+          {
+            ...attrs,
+            onClick: () => emit('click')
+          },
+          slots.default?.()
+        )
+    }
+  })
+}))
+
+vi.mock('@/utils/utils', () => ({
+  usePageTitle: vi.fn()
+}))
+
+import SignInPage from './index.vue'
+
+describe('sign-in page shell', () => {
+  beforeEach(() => {
+    replace.mockReset()
+    initiateWeChatSignIn.mockReset()
+    initiateQQSignIn.mockReset()
+    initiateSignIn.mockReset()
+    signedInState = { isSignedIn: false, user: null }
+  })
+
+  it('renders the three approved sign-in actions', () => {
+    const wrapper = mount(SignInPage, {
+      global: {
+        mocks: {
+          $t: (value: { en?: string; zh?: string }) => value.zh ?? value.en ?? ''
+        }
+      }
+    })
+    expect(wrapper.text()).toContain('XBuilder')
+    expect(wrapper.text()).toContain('登录')
+    expect(wrapper.text()).toContain('使用微信登录')
+    expect(wrapper.text()).toContain('使用 QQ 登录')
+    expect(wrapper.text()).toContain('用户名密码登录')
+    expect(wrapper.get('.logo').attributes('src')).toBe(expectedLogoSrc)
+  })
+
+  it('redirects signed-in visitors away from /sign-in', async () => {
+    signedInState = { isSignedIn: true, user: { username: 'alice' } }
+
+    mount(SignInPage, {
+      global: {
+        mocks: {
+          $t: (value: { en?: string; zh?: string }) => value.zh ?? value.en ?? ''
+        }
+      }
+    })
+
+    await flushPromises()
+    expect(replace).toHaveBeenCalledWith('/project/alice/demo')
+  })
+
+  it('calls provider-specific helpers with the normalized return target', async () => {
+    const wrapper = mount(SignInPage, {
+      global: {
+        mocks: {
+          $t: (value: { en?: string; zh?: string }) => value.zh ?? value.en ?? ''
+        }
+      }
+    })
+
+    await wrapper.find('[data-testid="sign-in-wechat"]').trigger('click')
+    await wrapper.find('[data-testid="sign-in-qq"]').trigger('click')
+    await wrapper.find('[data-testid="sign-in-password"]').trigger('click')
+
+    expect(initiateWeChatSignIn).toHaveBeenCalledWith('/project/alice/demo')
+    expect(initiateQQSignIn).toHaveBeenCalledWith('/project/alice/demo')
+    expect(initiateSignIn).toHaveBeenCalledWith('/project/alice/demo')
+  })
+})
diff --git a/spx-gui/src/pages/sign-in/index.vue b/spx-gui/src/pages/sign-in/index.vue
new file mode 100644
index 000000000..c9922730b
--- /dev/null
+++ b/spx-gui/src/pages/sign-in/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <main class="page">
+    <section class="card">
+      <SignInHero :hero-src="heroSrc" />
+      <SignInPanel
+        :loading="loading"
+        :logo-src="logoSrc"
+        :wechat-icon-src="wechatIconSrc"
+        :qq-icon-src="qqIconSrc"
+        @wechat="handleWeChat"
+        @qq="handleQQ"
+        @password="handlePassword"
+      />
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import SignInHero from '@/components/sign-in/SignInHero.vue'
+import SignInPanel from '@/components/sign-in/SignInPanel.vue'
+import {
+  initiateQQSignIn,
+  initiateSignIn,
+  initiateWeChatSignIn,
+  normalizeSafeReturnTo,
+  useSignedInStateQuery
+} from '@/stores/user'
+import { usePageTitle } from '@/utils/utils'
+import heroSrc from './assets/sign-in-hero.png'
+import qqIconSrc from './assets/icon-qq.svg'
+import logoSrc from './assets/sign-in-logo.svg'
+import wechatIconSrc from './assets/icon-wechat.svg'
+
+const route = useRoute()
+const router = useRouter()
+const signedInStateQuery = useSignedInStateQuery()
+const returnTo = computed(() => normalizeSafeReturnTo(route.query.returnTo as string | undefined))
+const loading = ref<null | 'wechat' | 'qq' | 'password'>(null)
+
+usePageTitle({ en: 'Sign in', zh: '登录' })
+
+watchEffect(() => {
+  const state = signedInStateQuery.data.value
+  if (state?.isSignedIn) router.replace(returnTo.value)
+})
+
+function handleWeChat() {
+  loading.value = 'wechat'
+  initiateWeChatSignIn(returnTo.value)
+}
+
+function handleQQ() {
+  loading.value = 'qq'
+  initiateQQSignIn(returnTo.value)
+}
+
+function handlePassword() {
+  loading.value = 'password'
+  initiateSignIn(returnTo.value)
+}
+</script>
+
+<style scoped lang="scss">
+.page {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  overflow: hidden;
+  background: radial-gradient(circle at 16% 15%, rgba(134, 168, 228, 0.26) 0%, transparent 34%),
+    radial-gradient(circle at 81% 82%, rgba(111, 214, 221, 0.2) 0%, transparent 32%),
+    linear-gradient(135deg, #f4f7ff 0%, #eff3fd 42%, #e8f7fb 100%);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -12%;
+    pointer-events: none;
+  }
+
+  &::before {
+    background: repeating-radial-gradient(circle at 16% 15%, rgba(133, 163, 220, 0.22) 0 1px, transparent 1px 12px),
+      repeating-radial-gradient(circle at 82% 83%, rgba(86, 194, 202, 0.18) 0 1px, transparent 1px 12px);
+    opacity: 0.36;
+  }
+
+  &::after {
+    background: radial-gradient(circle at 52% 52%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 58%);
+    opacity: 0.9;
+  }
+}
+
+.card {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 1000px);
+  min-height: 600px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.52);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 16px 32px -12px rgba(64, 186, 196, 0.18);
+  backdrop-filter: blur(14px);
+}
+
+@media (max-width: 960px) {
+  .page {
+    padding: 20px;
+  }
+
+  .card {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .page {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index 6b4000d30..7f31e1167 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -2,7 +2,7 @@ import type { App } from 'vue'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { searchKeywordQueryParamName } from '@/pages/community/search.vue'
 import type { ExploreOrder } from './apis/project'
-import { initiateSignIn, isSignedIn, getUnresolvedSignedInUsername } from './stores/user'
+import { getDefaultReturnTo, getSignInRoute, isSignedIn, getUnresolvedSignedInUsername } from './stores/user'
 
 export function getProjectEditorRoute(ownerName: string, projectName: string, publish = false) {
   ownerName = encodeURIComponent(ownerName)
@@ -140,12 +140,15 @@ const routes: Array<RouteRecordRaw> = [
       // Route with `redirect` will not trigger the global `beforeEach` guard,
       // so we need to check sign-in status here.
       if (username == null) {
-        initiateSignIn()
-        throw new Error('User not signed in') // prevent router from redirecting
+        return getSignInRoute(to.fullPath || `/editor/${encodeURIComponent(projectNameInput as string)}`)
       }
       return getProjectEditorRoute(username, projectNameInput as string)
     }
   },
+  {
+    path: '/sign-in',
+    component: () => import('@/pages/sign-in/index.vue')
+  },
   {
     path: '/sign-in/callback',
     component: () => import('@/pages/sign-in/callback.vue')
@@ -185,7 +188,7 @@ const router = createRouter({
 export const initRouter = (app: App) => {
   router.beforeEach((to, _, next) => {
     if (to.meta.requiresSignIn && !isSignedIn()) {
-      initiateSignIn()
+      next(getSignInRoute(to.fullPath || getDefaultReturnTo()))
     } else {
       next()
     }
diff --git a/spx-gui/src/stores/user/index.ts b/spx-gui/src/stores/user/index.ts
index ede9a5871..ca2ea4815 100644
--- a/spx-gui/src/stores/user/index.ts
+++ b/spx-gui/src/stores/user/index.ts
@@ -4,6 +4,7 @@ import * as apis from '@/apis/user'
 import { getUserQueryKey } from './query-keys'
 
 export * from './signed-in'
+export * from './sign-in-entry'
 
 const staleTime = 5 * 60 * 1000 // 5min
 
diff --git a/spx-gui/src/stores/user/sign-in-entry.test.ts b/spx-gui/src/stores/user/sign-in-entry.test.ts
new file mode 100644
index 000000000..aab159635
--- /dev/null
+++ b/spx-gui/src/stores/user/sign-in-entry.test.ts
@@ -0,0 +1,57 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { buildProviderParams, getDefaultReturnTo, getSignInRoute, normalizeSafeReturnTo } from './sign-in-entry'
+
+describe('sign-in-entry', () => {
+  const originalLocation = window.location
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        origin: 'https://xbuilder.com',
+        pathname: '/project/alice/demo',
+        search: '?tab=play',
+        hash: '#runner'
+      }
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: originalLocation
+    })
+  })
+
+  it('keeps safe internal return targets', () => {
+    expect(normalizeSafeReturnTo('/editor/alice/demo?publish#share')).toBe('/editor/alice/demo?publish#share')
+  })
+
+  it('rejects unsafe return targets', () => {
+    expect(normalizeSafeReturnTo('https://evil.example')).toBe('/')
+    expect(normalizeSafeReturnTo('//evil.example')).toBe('/')
+    expect(normalizeSafeReturnTo('editor/alice/demo')).toBe('/')
+  })
+
+  it('builds the default return target from the current location', () => {
+    expect(getDefaultReturnTo()).toBe('/project/alice/demo?tab=play#runner')
+  })
+
+  it('builds a sign-in route with an encoded safe return target', () => {
+    expect(getSignInRoute('/project/alice/demo?tab=play#runner')).toBe(
+      '/sign-in?returnTo=%2Fproject%2Falice%2Fdemo%3Ftab%3Dplay%23runner'
+    )
+  })
+
+  it('returns null provider params when a provider is not configured', () => {
+    expect(buildProviderParams({ providerParamName: 'provider', providerValue: '' })).toBeNull()
+  })
+
+  it('builds provider params when name and value are configured', () => {
+    expect(buildProviderParams({ providerParamName: 'provider', providerValue: 'wechat' })).toEqual({
+      provider: 'wechat'
+    })
+  })
+})
diff --git a/spx-gui/src/stores/user/sign-in-entry.ts b/spx-gui/src/stores/user/sign-in-entry.ts
new file mode 100644
index 000000000..d77a5e35d
--- /dev/null
+++ b/spx-gui/src/stores/user/sign-in-entry.ts
@@ -0,0 +1,37 @@
+import { casdoorProviderParamName, casdoorQqProvider, casdoorWeChatProvider } from '@/utils/env'
+
+export function getDefaultReturnTo() {
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`
+}
+
+export function normalizeSafeReturnTo(input: string | null | undefined) {
+  if (input == null || input === '') return '/'
+  if (!input.startsWith('/')) return '/'
+  if (input.startsWith('//')) return '/'
+  return input
+}
+
+export function getSignInRoute(returnTo: string = getDefaultReturnTo()) {
+  const safeReturnTo = normalizeSafeReturnTo(returnTo)
+  if (safeReturnTo === '/') return '/sign-in'
+  return `/sign-in?returnTo=${encodeURIComponent(safeReturnTo)}`
+}
+
+export function buildProviderParams(config: { providerParamName: string; providerValue: string }) {
+  if (config.providerParamName === '' || config.providerValue === '') return null
+  return { [config.providerParamName]: config.providerValue }
+}
+
+export function getWeChatProviderParams() {
+  return buildProviderParams({
+    providerParamName: casdoorProviderParamName,
+    providerValue: casdoorWeChatProvider
+  })
+}
+
+export function getQQProviderParams() {
+  return buildProviderParams({
+    providerParamName: casdoorProviderParamName,
+    providerValue: casdoorQqProvider
+  })
+}
diff --git a/spx-gui/src/stores/user/signed-in.ts b/spx-gui/src/stores/user/signed-in.ts
index 19d3573a8..c9b8c3921 100644
--- a/spx-gui/src/stores/user/signed-in.ts
+++ b/spx-gui/src/stores/user/signed-in.ts
@@ -6,6 +6,7 @@ import { useQueryWithCache, useQueryCache, useQuery, composeQuery } from '@/util
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/user'
 import { getUserQueryKey } from './query-keys'
+import { getDefaultReturnTo, getQQProviderParams, getSignInRoute, getWeChatProviderParams } from './sign-in-entry'
 
 export type SignedInUser = apis.SignedInUser
 
@@ -58,15 +59,25 @@ function handleTokenResponse(resp: TokenResponse) {
   userState.username = decodeUsernameFromAccessToken(resp.access_token)
 }
 
-export function initiateSignIn(
-  returnTo: string = window.location.pathname + window.location.search + window.location.hash
-) {
+export function goToSignIn(returnTo: string = getDefaultReturnTo()) {
+  window.location.assign(getSignInRoute(returnTo))
+}
+
+export function initiateSignIn(returnTo: string = getDefaultReturnTo(), additionalParams?: Record<string, string>) {
   // Workaround for casdoor-js-sdk not supporting override of `redirectPath` in `signin_redirect`.
   const casdoorSdk = new Sdk({
     ...casdoorConfig,
     redirectPath: `${casdoorAuthRedirectPath}?returnTo=${encodeURIComponent(returnTo)}`
   })
-  casdoorSdk.signin_redirect()
+  casdoorSdk.signin_redirect(additionalParams)
+}
+
+export function initiateWeChatSignIn(returnTo: string = getDefaultReturnTo()) {
+  initiateSignIn(returnTo, getWeChatProviderParams() ?? undefined)
+}
+
+export function initiateQQSignIn(returnTo: string = getDefaultReturnTo()) {
+  initiateSignIn(returnTo, getQQProviderParams() ?? undefined)
 }
 
 export async function completeSignIn() {
diff --git a/spx-gui/src/utils/env.ts b/spx-gui/src/utils/env.ts
index 6496854d7..99766f663 100644
--- a/spx-gui/src/utils/env.ts
+++ b/spx-gui/src/utils/env.ts
@@ -20,6 +20,9 @@ export const casdoorConfig = {
   organizationName: import.meta.env.VITE_CASDOOR_ORGANIZATION_NAME as string,
   appName: import.meta.env.VITE_CASDOOR_APP_NAME as string
 }
+export const casdoorProviderParamName = (import.meta.env.VITE_CASDOOR_PROVIDER_PARAM_NAME as string) || 'provider'
+export const casdoorWeChatProvider = (import.meta.env.VITE_CASDOOR_WECHAT_PROVIDER as string) || ''
+export const casdoorQqProvider = (import.meta.env.VITE_CASDOOR_QQ_PROVIDER as string) || ''
 
 /**
  * If we should disable features that rely on AIGC service.
diff --git a/spx-gui/src/utils/user.ts b/spx-gui/src/utils/user.ts
index 9c2da085b..0df34f321 100644
--- a/spx-gui/src/utils/user.ts
+++ b/spx-gui/src/utils/user.ts
@@ -1,4 +1,4 @@
-import { initiateSignIn, isSignedIn } from '@/stores/user'
+import { goToSignIn, isSignedIn } from '@/stores/user'
 import { useI18n } from './i18n'
 import { useConfirmDialog } from '@/components/ui'
 import { Cancelled } from './exception'
@@ -16,7 +16,7 @@ export function useEnsureSignedIn() {
         zh: '你需要先登录才能执行此操作。你想现在登录吗？'
       }),
       confirmText: t({ en: 'Sign in', zh: '登录' }),
-      confirmHandler: () => initiateSignIn()
+      confirmHandler: () => goToSignIn()
     })
     throw new Cancelled('redirected to sign in')
   }