diff --git a/apps/ai-game-creator-shell/package.json b/apps/ai-game-creator-shell/package.json
index 74f901d6f..a646241ab 100644
--- a/apps/ai-game-creator-shell/package.json
+++ b/apps/ai-game-creator-shell/package.json
@@ -21,9 +21,11 @@
     "vite": "^6.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
     "@tauri-apps/cli": "^2.11.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.14",
     "typescript": "~5.8.2"
   }
 }
diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index e42f5e595..df134d4ff 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -23,14 +23,16 @@ import {
   Image,
   LogOut,
   MessageSquare,
-  Plus,
   Settings,
-  Sparkles,
-  Upload,
   User,
-  X,
   Zap,
 } from 'lucide-react';
+import HomeView, {
+  type HomeAgentMode,
+  type HomeAgentModeItem,
+  type HomeAttachmentDraft,
+  type HomeShowcaseResource,
+} from './view/home';
 
 import type {
   AuthEntryResponse,
@@ -105,13 +107,6 @@ type LauncherView =
   | 'contact'
   | 'news'
   | 'project-development';
-type HomeAgentMode = 'game' | 'art' | 'doc';
-
-type HomeAttachmentDraft = {
-  id: string;
-  file: File;
-};
-
 type LauncherImportedAttachment = {
   fileName: string;
   mediaType: string;
@@ -149,7 +144,7 @@ type PendingNonEmptyProject =
       projectPath: string;
     };
 
-type EditorShowcaseResource = {
+type EditorShowcaseResource = HomeShowcaseResource & {
   resourceId: string;
   showcaseId?: string | null;
   label?: string | null;
@@ -1267,13 +1262,7 @@ function listClientShowcaseResources() {
   );
 }
 
-const homeAgentModeItems: Array<{
-  mode: HomeAgentMode;
-  label: string;
-  placeholder: string;
-  emptyPrompt: string;
-  icon: typeof Gamepad2;
-}> = [
+const homeAgentModeItems: HomeAgentModeItem[] = [
   {
     mode: 'game',
     label: '做游戏',
@@ -3189,10 +3178,6 @@ export function WorkspaceLauncher({
   const recentProjectRows = projectRows
     .filter((project) => project.canOpen)
     .slice(0, 3);
-  const activeHomeMode =
-    homeAgentModeItems.find((item) => item.mode === homeAgentMode) ??
-    homeAgentModeItems[0]!;
-  const ActiveHomeModeIcon = activeHomeMode.icon;
   const currentAgentChatAgent = selectedLauncherAgentChatAgent();
   const currentAgentChatLlmWarning = getCurrentAgentChatLlmWarning(
     currentAgentChatAgent,
@@ -3407,171 +3392,29 @@ export function WorkspaceLauncher({
         </div>
 
         {launcherView === 'home' ? (
-          <>
-            <section className="launcher-hero" aria-label="首页输入">
-              <div className="launcher-hero-title">
-                <span className="launcher-hero-logo">
-                  <ActiveHomeModeIcon size={18} aria-hidden="true" />
-                </span>
-                <div>
-                  <h1>陶泥儿 GameAgent</h1>
-                  <p>{activeHomeMode.placeholder}</p>
-                </div>
-              </div>
-              <div className="launcher-model-pills" aria-label="Agent 分类">
-                {homeAgentModeItems.map((item) => {
-                  const ModeIcon = item.icon;
-                  return (
-                    <button
-                      type="button"
-                      key={item.mode}
-                      className={
-                        item.mode === homeAgentMode
-                          ? 'launcher-pill-active'
-                          : ''
-                      }
-                      onClick={() => setHomeAgentMode(item.mode)}
-                    >
-                      <ModeIcon size={14} aria-hidden="true" />
-                      {item.label}
-                    </button>
-                  );
-                })}
-              </div>
-              <form className="launcher-prompt-card" onSubmit={handleHomeSubmit}>
-                <textarea
-                  aria-label="创作想法"
-                  placeholder={activeHomeMode.placeholder}
-                  value={homePrompt}
-                  onChange={(event) => setHomePrompt(event.currentTarget.value)}
-                />
-                {homeAttachments.length > 0 ? (
-                  <div className="launcher-attachment-queue" aria-label="附件队列">
-                    {homeAttachments.map((attachment) => (
-                      <span key={attachment.id}>
-                        {attachment.file.name}
-                        <button
-                          type="button"
-                          aria-label={`移除附件 ${attachment.file.name}`}
-                          onClick={() => removeHomeAttachment(attachment.id)}
-                        >
-                          <X size={12} aria-hidden="true" />
-                        </button>
-                      </span>
-                    ))}
-                  </div>
-                ) : null}
-                <div className="launcher-prompt-actions">
-                  <input
-                    ref={homeAttachmentInputRef}
-                    className="launcher-file-input"
-                    type="file"
-                    multiple
-                    onChange={handleHomeAttachmentSelection}
-                  />
-                  <button
-                    type="button"
-                    aria-label="上传素材"
-                    onClick={() => homeAttachmentInputRef.current?.click()}
-                  >
-                    <Upload size={15} aria-hidden="true" />
-                  </button>
-                  <span>{status}</span>
-                  <button
-                    type="submit"
-                    aria-label="开启创作"
-                    disabled={homeCreationBusy}
-                  >
-                    <Plus size={16} aria-hidden="true" />
-                  </button>
-                </div>
-              </form>
-            </section>
-
-            <section className="launcher-project-list" aria-label="最近项目">
-              <header>
-                <div>
-                  <h2>最近项目</h2>
-                  <p className="launcher-project-status">{status}</p>
-                </div>
-                <div className="launcher-project-list-actions">
-                  <button
-                    type="button"
-                    onClick={() => setLauncherView('projects')}
-                  >
-                    查看全部 〉
-                  </button>
-                </div>
-              </header>
-              {recentProjectRows.length > 0 ? (
-                <div className="launcher-project-grid">
-                  {recentProjectRows.map((project) => (
-                    <article
-                      className="launcher-project-card"
-                      key={project.path}
-                    >
-                      <button
-                        type="button"
-                        className="launcher-project-card-main"
-                        disabled={!project.canOpen}
-                        onClick={() => {
-                          setProjectPath(project.path);
-                          void openProject(project.path, 'open');
-                        }}
-                      >
-                        <span>{project.name.slice(0, 2)}</span>
-                        <strong>{project.name}</strong>
-                        <small>{project.path}</small>
-                        <small>{project.status}</small>
-                      </button>
-                    </article>
-                  ))}
-                </div>
-              ) : (
-                <div className="launcher-project-list-empty">
-                  <FolderKanban size={22} aria-hidden="true" />
-                  <strong>暂无最近项目</strong>
-                  <button
-                    type="button"
-                    onClick={() => setLauncherView('projects')}
-                  >
-                    去项目组
-                  </button>
-                </div>
-              )}
-            </section>
-            <section className="launcher-showcase" aria-label="灵感推荐">
-              <header>
-                <div className="launcher-section-title">
-                  <span>
-                    <h2>灵感推荐</h2>
-                    <Sparkles size={15} aria-hidden="true" />
-                  </span>
-                  <p>{showcaseStatus}</p>
-                </div>
-              </header>
-              {showcaseResources.length > 0 ? (
-                <div className="launcher-showcase-grid">
-                  {showcaseResources.map((resource) => (
-                    <article key={resource.showcaseId ?? resource.resourceId}>
-                      <img
-                        src={resource.imageSrc}
-                        alt={resource.label || resource.prompt || '灵感素材'}
-                      />
-                      <strong>{resource.label || '未命名素材'}</strong>
-                      <small>
-                        {resource.authorDisplayName ||
-                          resource.authorPublicUserCode ||
-                          '陶泥儿精选'}
-                      </small>
-                    </article>
-                  ))}
-                </div>
-              ) : (
-                <div className="launcher-showcase-empty">{showcaseStatus}</div>
-              )}
-            </section>
-          </>
+          <HomeView
+            hasPromo={launcherNotifications.length > 0}
+            homeAgentMode={homeAgentMode}
+            homeAgentModeItems={homeAgentModeItems}
+            homePrompt={homePrompt}
+            homeAttachments={homeAttachments}
+            homeAttachmentInputRef={homeAttachmentInputRef}
+            homeCreationBusy={homeCreationBusy}
+            status={status}
+            recentProjectRows={recentProjectRows}
+            showcaseResources={showcaseResources}
+            showcaseStatus={showcaseStatus}
+            onHomeAgentModeChange={setHomeAgentMode}
+            onHomePromptChange={setHomePrompt}
+            onHomeAttachmentSelection={handleHomeAttachmentSelection}
+            onHomeAttachmentRemove={removeHomeAttachment}
+            onHomeSubmit={handleHomeSubmit}
+            onProjectsOpen={() => setLauncherView('projects')}
+            onProjectOpen={(path) => {
+              setProjectPath(path);
+              void openProject(path, 'open');
+            }}
+          />
         ) : launcherView === 'projects' ? (
           <section className="launcher-page launcher-projects-page">
             <header>
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 128f74870..b6478a1b1 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -1,3 +1,5 @@
+@import 'tailwindcss';
+
 :root {
   color: #18202f;
   background: #f5f7fb;
@@ -196,11 +198,8 @@ textarea {
 }
 
 .launcher-sidebar button,
-.launcher-project-list button,
 .launcher-promo button,
-.launcher-account-bar button,
-.launcher-prompt-card button,
-.launcher-model-pills button {
+.launcher-account-bar button {
   border: 0;
   cursor: pointer;
 }
@@ -466,281 +465,12 @@ textarea {
   font-weight: 700;
 }
 
-.launcher-hero {
-  display: grid;
-  align-content: start;
-  justify-items: center;
-  gap: 13px;
-  min-height: 374px;
-  padding: 103px 24px 18px;
-}
-
-.launcher-main-with-promo .launcher-hero {
-  padding-top: 135px;
-}
-
-.launcher-hero-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-}
-
-.launcher-hero-logo {
-  display: grid;
-  width: 30px;
-  height: 30px;
-  flex: 0 0 auto;
-  border-radius: 50%;
-  background: #060606;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-  place-items: center;
-}
-
-.launcher-hero-title h1 {
-  margin: 0;
-  font-size: 27px;
-  font-weight: 750;
-  letter-spacing: 0;
-}
-
-.launcher-hero-title p {
-  margin-top: 12px;
-  color: #a0a0a0;
-  font-size: 13px;
-}
-
-.launcher-prompt-card {
-  display: grid;
-  grid-template-rows: minmax(42px, auto) auto auto;
-  width: min(488px, calc(100vw - 110px));
-  min-height: 80px;
-  padding: 13px 12px 8px;
-  border: 1px solid #e1e4e8;
-  border-radius: 18px;
-  background: #fff;
-  box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
-}
-
-.launcher-prompt-card textarea {
-  width: 100%;
-  min-height: 36px;
-  padding: 0;
-  resize: none;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: #171717;
-  font-size: 13px;
-}
-
-.launcher-attachment-queue {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 0 4px;
-}
-
-.launcher-attachment-queue span {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 100%;
-  min-height: 24px;
-  padding: 0 7px;
-  border: 1px solid #e5e7eb;
-  border-radius: 7px;
-  background: #f8fafc;
-  color: #374151;
-  font-size: 11px;
-}
-
-.launcher-attachment-queue button {
-  width: 18px;
-  height: 18px;
-  color: #6b7280;
-}
-
-.launcher-file-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.launcher-prompt-card textarea::placeholder {
-  color: #bababa;
-}
-
-.launcher-prompt-actions {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 10px;
-  color: #777;
-  font-size: 12px;
-}
-
-.launcher-prompt-actions button {
-  display: grid;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: #666;
-  place-items: center;
-}
-
-.launcher-prompt-actions button:last-child {
-  background: #f1f1f1;
-  color: #9a9a9a;
-}
-
-.launcher-prompt-actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.launcher-model-pills {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 9px;
-  width: min(488px, calc(100vw - 110px));
-}
-
-.launcher-model-pills button {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-height: 27px;
-  padding: 0 12px;
-  border: 1px solid #d6d6d6;
-  border-radius: 999px;
-  background: #fff;
-  color: #333;
-  font-size: 12px;
-}
-
-.launcher-model-pills .launcher-pill-active {
-  border-color: #8b5cf6;
-  background: #f8f2ff;
-  color: #7c3aed;
-}
-
-.launcher-project-list {
-  display: grid;
-  gap: 14px;
-  width: min(1054px, calc(100vw - 122px));
-  margin: 0 auto;
-}
-
-.launcher-project-list header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.launcher-project-list h2 {
-  margin: 0;
-  color: #111827;
-  font-size: 15px;
-}
-
-.launcher-project-status {
-  margin: 4px 0 0;
-  color: #8b8b8b;
-  font-size: 12px;
-}
-
-.launcher-project-list header button,
-.launcher-project-list-empty > button {
-  padding: 0;
-  background: transparent;
-  color: #888;
-  font-size: 12px;
-}
-
 .launcher-project-list-actions {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-.launcher-project-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  overflow: hidden;
-}
-
-.launcher-project-card {
-  display: grid;
-  min-width: 0;
-}
-
-.launcher-project-card > div,
-.launcher-project-card > button {
-  position: relative;
-  height: 116px;
-  width: 100%;
-  overflow: hidden;
-  border: 1px solid #e1e4e8;
-  border-radius: 8px;
-  background: #f7f7f7;
-  cursor: pointer;
-}
-
-.launcher-project-card-main {
-  display: grid;
-  align-content: start;
-  justify-items: start;
-  gap: 6px;
-  padding: 12px;
-  text-align: left;
-}
-
-.launcher-project-card-main:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.launcher-project-card-main > span {
-  display: grid;
-  width: 42px;
-  height: 42px;
-  border-radius: 12px;
-  background: #fff;
-  color: #f26d2d;
-  font-size: 16px;
-  font-weight: 700;
-  place-items: center;
-}
-
-.launcher-project-card strong {
-  min-width: 0;
-  color: #111;
-  font-size: 12px;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.launcher-project-card small {
-  margin-top: -5px;
-  color: #8b8b8b;
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .launcher-project-create > button {
   display: grid;
   border-style: dashed;
@@ -766,96 +496,6 @@ textarea {
   box-shadow: 0 8px 22px rgb(242 109 45 / 16%);
 }
 
-.launcher-showcase {
-  display: grid;
-  gap: 14px;
-  width: min(1054px, calc(100vw - 122px));
-  margin: 22px auto 0;
-}
-
-.launcher-showcase header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-}
-
-.launcher-section-title {
-  display: grid;
-  gap: 4px;
-}
-
-.launcher-section-title span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.launcher-showcase h2 {
-  margin: 0;
-  color: #111827;
-  font-size: 15px;
-}
-
-.launcher-showcase p {
-  margin: 4px 0 0;
-  color: #8b8b8b;
-  font-size: 12px;
-}
-
-.launcher-showcase-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.launcher-showcase-grid article,
-.launcher-showcase-empty {
-  overflow: hidden;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #fff;
-}
-
-.launcher-showcase-grid article {
-  display: grid;
-  gap: 7px;
-  padding-bottom: 10px;
-}
-
-.launcher-showcase-grid img {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  background: #f3f4f6;
-}
-
-.launcher-showcase-grid strong,
-.launcher-showcase-grid small {
-  min-width: 0;
-  padding: 0 9px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.launcher-showcase-grid strong {
-  color: #111827;
-  font-size: 12px;
-}
-
-.launcher-showcase-grid small,
-.launcher-showcase-empty {
-  color: #6b7280;
-  font-size: 11px;
-}
-
-.launcher-showcase-empty {
-  display: grid;
-  min-height: 96px;
-  place-items: center;
-}
-
 .launcher-page {
   display: grid;
   gap: 22px;
@@ -910,18 +550,6 @@ textarea {
   font-size: 12px;
 }
 
-.launcher-project-list-empty {
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-  padding: 18px 0 32px;
-}
-
-.launcher-project-list-empty h2 {
-  color: #111827;
-  font-size: 16px;
-}
-
 .launcher-project-form input {
   min-width: 0;
   height: 34px;
@@ -1467,52 +1095,14 @@ textarea {
     white-space: nowrap;
   }
 
-  .launcher-hero {
-    align-content: start;
-    gap: 16px;
-    min-height: auto;
-    padding: 84px 14px 34px;
-  }
-
-  .launcher-main-with-promo .launcher-hero {
-    padding-top: 84px;
-  }
-
-  .launcher-hero-title {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .launcher-hero-title h1 {
-    font-size: 22px;
-  }
-
-  .launcher-prompt-card,
-  .launcher-model-pills,
-  .launcher-project-list {
-    width: min(100%, calc(100vw - 76px));
-  }
-
-  .launcher-project-grid {
-    grid-template-columns: 1fr;
-    overflow: visible;
-  }
-
   .launcher-project-form {
     grid-template-columns: 1fr;
   }
 
-  .launcher-project-card > div,
-  .launcher-project-card > button {
-    height: 132px;
-  }
-
-  .launcher-showcase,
   .launcher-page {
     width: min(100%, calc(100vw - 76px));
   }
 
-  .launcher-showcase-grid,
   .launcher-development-grid {
     grid-template-columns: 1fr;
   }
diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx
new file mode 100644
index 000000000..2240a5488
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/home/index.tsx
@@ -0,0 +1,307 @@
+import {
+  FolderKanban,
+  type LucideIcon,
+  Plus,
+  Sparkles,
+  Upload,
+  X,
+} from 'lucide-react';
+import type {
+  ChangeEventHandler,
+  FormEventHandler,
+  RefObject,
+} from 'react';
+
+export type HomeAgentMode = 'game' | 'art' | 'doc';
+
+export type HomeAttachmentDraft = {
+  id: string;
+  file: File;
+};
+
+export type HomeAgentModeItem = {
+  mode: HomeAgentMode;
+  label: string;
+  placeholder: string;
+  emptyPrompt: string;
+  icon: LucideIcon;
+};
+
+export type HomeProjectRow = {
+  path: string;
+  name: string;
+  status: string;
+  canOpen: boolean;
+};
+
+export type HomeShowcaseResource = {
+  resourceId: string;
+  showcaseId?: string | null;
+  label?: string | null;
+  imageSrc: string;
+  prompt?: string | null;
+  authorDisplayName?: string | null;
+  authorPublicUserCode?: string | null;
+};
+
+type HomeViewProps = {
+  hasPromo: boolean;
+  homeAgentMode: HomeAgentMode;
+  homeAgentModeItems: readonly HomeAgentModeItem[];
+  homePrompt: string;
+  homeAttachments: readonly HomeAttachmentDraft[];
+  homeAttachmentInputRef: RefObject<HTMLInputElement | null>;
+  homeCreationBusy: boolean;
+  status: string;
+  recentProjectRows: readonly HomeProjectRow[];
+  showcaseResources: readonly HomeShowcaseResource[];
+  showcaseStatus: string;
+  onHomeAgentModeChange: (mode: HomeAgentMode) => void;
+  onHomePromptChange: (value: string) => void;
+  onHomeAttachmentSelection: ChangeEventHandler<HTMLInputElement>;
+  onHomeAttachmentRemove: (attachmentId: string) => void;
+  onHomeSubmit: FormEventHandler<HTMLFormElement>;
+  onProjectsOpen: () => void;
+  onProjectOpen: (path: string) => void;
+};
+
+export default function HomeView({
+  hasPromo,
+  homeAgentMode,
+  homeAgentModeItems,
+  homePrompt,
+  homeAttachments,
+  homeAttachmentInputRef,
+  homeCreationBusy,
+  status,
+  recentProjectRows,
+  showcaseResources,
+  showcaseStatus,
+  onHomeAgentModeChange,
+  onHomePromptChange,
+  onHomeAttachmentSelection,
+  onHomeAttachmentRemove,
+  onHomeSubmit,
+  onProjectsOpen,
+  onProjectOpen,
+}: HomeViewProps) {
+  const activeHomeMode =
+    homeAgentModeItems.find((item) => item.mode === homeAgentMode) ??
+    homeAgentModeItems[0];
+
+  if (!activeHomeMode) {
+    return null;
+  }
+
+  const ActiveHomeModeIcon = activeHomeMode.icon;
+
+  return (
+    <>
+      <section
+        className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[720px]:min-h-0 max-[720px]:gap-4 max-[720px]:px-3.5 max-[720px]:pb-[34px] max-[720px]:pt-[84px] ${
+          hasPromo ? 'pt-33.75 max-[720px]:pt-21' : ''
+        }`}
+        aria-label="首页输入"
+      >
+        <div className="flex items-center gap-3 text-center max-[720px]:flex-col max-[720px]:gap-2.5">
+          <span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-[#060606] text-[11px] font-bold text-white">
+            <ActiveHomeModeIcon size={18} aria-hidden="true" />
+          </span>
+          <div>
+            <h1 className="m-0 text-[27px] font-[750] tracking-normal max-[720px]:text-[22px]">
+              陶泥儿 GameAgent
+            </h1>
+            <p className="m-0 mt-3 text-[13px] text-[#a0a0a0]">
+              {activeHomeMode.placeholder}
+            </p>
+          </div>
+        </div>
+        <div
+          className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-[9px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+          aria-label="Agent 分类"
+        >
+          {homeAgentModeItems.map((item) => {
+            const ModeIcon = item.icon;
+            const isActive = item.mode === homeAgentMode;
+            return (
+              <button
+                type="button"
+                key={item.mode}
+                className={`inline-flex min-h-6.75 items-center gap-1.25 rounded-full border px-3 text-[12px] ${
+                  isActive
+                    ? 'border-violet-500 bg-[#f8f2ff] text-violet-600'
+                    : 'border-[#d6d6d6] bg-white text-[#333]'
+                }`}
+                onClick={() => onHomeAgentModeChange(item.mode)}
+              >
+                <ModeIcon size={14} aria-hidden="true" />
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+        <form
+          className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+          onSubmit={onHomeSubmit}
+        >
+          <textarea
+            className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-[#171717] outline-0 placeholder:text-[#bababa]"
+            aria-label="创作想法"
+            placeholder={activeHomeMode.placeholder}
+            value={homePrompt}
+            onChange={(event) => onHomePromptChange(event.currentTarget.value)}
+          />
+          {homeAttachments.length > 0 ? (
+            <div className="flex flex-wrap gap-1.5 py-2 pb-1" aria-label="附件队列">
+              {homeAttachments.map((attachment) => (
+                <span
+                  className="inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-gray-200 bg-slate-50 px-[7px] text-[11px] text-gray-700"
+                  key={attachment.id}
+                >
+                  {attachment.file.name}
+                  <button
+                    className="size-[18px] cursor-pointer border-0 bg-transparent p-0 text-gray-500"
+                    type="button"
+                    aria-label={`移除附件 ${attachment.file.name}`}
+                    onClick={() => onHomeAttachmentRemove(attachment.id)}
+                  >
+                    <X size={12} aria-hidden="true" />
+                  </button>
+                </span>
+              ))}
+            </div>
+          ) : null}
+          <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-[#777]">
+            <input
+              ref={homeAttachmentInputRef}
+              className="pointer-events-none absolute size-px opacity-0"
+              type="file"
+              multiple
+              onChange={onHomeAttachmentSelection}
+            />
+            <button
+              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-[#666]"
+              type="button"
+              aria-label="上传素材"
+              onClick={() => homeAttachmentInputRef.current?.click()}
+            >
+              <Upload size={15} aria-hidden="true" />
+            </button>
+            <span>{status}</span>
+            <button
+              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-[#f1f1f1] p-0 text-[#9a9a9a] disabled:cursor-not-allowed disabled:opacity-55"
+              type="submit"
+              aria-label="开启创作"
+              disabled={homeCreationBusy}
+            >
+              <Plus size={16} aria-hidden="true" />
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section
+        className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+        aria-label="最近项目"
+      >
+        <header className="flex items-center justify-between gap-3">
+          <div>
+            <h2 className="m-0 text-[15px] text-gray-900">最近项目</h2>
+            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{status}</p>
+          </div>
+          <div className="launcher-project-list-actions">
+            <button
+              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
+              type="button"
+              onClick={onProjectsOpen}
+            >
+              查看全部 〉
+            </button>
+          </div>
+        </header>
+        {recentProjectRows.length > 0 ? (
+          <div className="grid grid-cols-5 gap-3 overflow-hidden max-[720px]:grid-cols-1 max-[720px]:overflow-visible">
+            {recentProjectRows.map((project) => (
+              <article className="grid min-w-0" key={project.path}>
+                <button
+                  className="grid h-[116px] w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[720px]:h-[132px]"
+                  type="button"
+                  disabled={!project.canOpen}
+                  onClick={() => onProjectOpen(project.path)}
+                >
+                  <span className="grid size-[42px] place-items-center rounded-xl bg-white text-[16px] font-bold text-[#f26d2d]">
+                    {project.name.slice(0, 2)}
+                  </span>
+                  <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-[#111]">
+                    {project.name}
+                  </strong>
+                  <small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
+                    {project.path}
+                  </small>
+                  <small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
+                    {project.status}
+                  </small>
+                </button>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-[18px]">
+            <FolderKanban size={22} aria-hidden="true" />
+            <strong>暂无最近项目</strong>
+            <button
+              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
+              type="button"
+              onClick={onProjectsOpen}
+            >
+              去项目组
+            </button>
+          </div>
+        )}
+      </section>
+
+      <section
+        className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+        aria-label="灵感推荐"
+      >
+        <header className="flex items-center justify-start gap-3">
+          <div className="grid gap-1">
+            <span className="inline-flex items-center gap-1.5">
+              <h2 className="m-0 text-[15px] text-gray-900">灵感推荐</h2>
+              <Sparkles size={15} aria-hidden="true" />
+            </span>
+            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{showcaseStatus}</p>
+          </div>
+        </header>
+        {showcaseResources.length > 0 ? (
+          <div className="grid grid-cols-6 gap-3 max-[720px]:grid-cols-1">
+            {showcaseResources.map((resource) => (
+              <article
+                className="grid gap-[7px] overflow-hidden rounded-lg border border-gray-200 bg-white pb-2.5"
+                key={resource.showcaseId ?? resource.resourceId}
+              >
+                <img
+                  className="aspect-square w-full object-cover bg-gray-100"
+                  src={resource.imageSrc}
+                  alt={resource.label || resource.prompt || '灵感素材'}
+                />
+                <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[12px] text-gray-900">
+                  {resource.label || '未命名素材'}
+                </strong>
+                <small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[11px] text-gray-500">
+                  {resource.authorDisplayName ||
+                    resource.authorPublicUserCode ||
+                    '陶泥儿精选'}
+                </small>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div className="grid min-h-24 place-items-center overflow-hidden rounded-lg border border-gray-200 bg-white text-[11px] text-gray-500">
+            {showcaseStatus}
+          </div>
+        )}
+      </section>
+    </>
+  );
+}
diff --git a/apps/ai-game-creator-shell/vite.config.ts b/apps/ai-game-creator-shell/vite.config.ts
index 94caaba66..42b9392b4 100644
--- a/apps/ai-game-creator-shell/vite.config.ts
+++ b/apps/ai-game-creator-shell/vite.config.ts
@@ -2,6 +2,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
@@ -41,6 +42,7 @@ const apiTarget = resolveDevApiTarget();
 export default defineConfig({
   root: appRoot,
   plugins: [
+    tailwindcss(),
     react(),
     {
       name: 'genarrative-ai-game-creator-dev-marker',