feat(frontend): refine welcome messaging and branding

safe1ine · safe1ine · commit ae7882b561ec · 2026-04-09T21:29:27.000+08:00
diff --git a/frontend/src/components/welcome/banner.tsx b/frontend/src/components/welcome/banner.tsx
@@ -3,15 +3,15 @@ import {
   IconArrowRight,
   IconBrandGithub,
   IconCloudCode,
-  IconPlayerPlayFilled,
+  IconCodeDots,
   IconSparkles,
 } from "@tabler/icons-react";
 import { Link } from "react-router-dom";
 
 const stats = [
-  { value: "3", label: "任务模式" },
-  { value: "4", label: "研发环节覆盖" },
-  { value: "Git", label: "协作链路接入" },
+  { value: "不限额", label: "免费使用" },
+  { value: "云端", label: "自带开发环境" },
+  { value: "开源", label: "支持私有化方向" },
 ];
 
 const Banner = () => {
@@ -26,25 +26,25 @@ const Banner = () => {
 
           <div className="flex flex-col gap-4">
             <h1 className="max-w-3xl text-balance text-4xl font-bold leading-tight tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
-              让 AI 真正进入
-              <span className="block text-primary">研发交付流程</span>
+              MonkeyCode 是
+              <span className="block text-primary">在线 AI 编程平台</span>
             </h1>
             <p className="max-w-2xl text-base leading-8 text-slate-600 sm:text-lg">
-              MonkeyCode 不是只会补全代码的助手，而是一个能从需求理解、技术设计、编码实现到代码审查持续推进的 AI 工程师工作台。
+              支持不限额度免费使用，不需要连接本地开发机，也不需要先折腾复杂环境。你可以直接在平台里创建任务，让 AI 编码，在云端开发环境中使用终端、文件管理和预览，再把结果接回 Git 协作流程。
             </p>
           </div>
 
           <div className="flex flex-col gap-3 sm:flex-row">
             <Button size="lg" className="pixel-button h-12 border-slate-900 px-6" asChild>
               <Link to="/console/">
-                立即开始
+                免费立即开始
                 <IconArrowRight className="size-4" />
               </Link>
             </Button>
             <Button size="lg" variant="secondary" className="pixel-button h-12 border-slate-900 bg-white px-6 text-slate-900 hover:bg-slate-50" asChild>
-              <a href="https://monkeycode.docs.baizhi.cloud/" target="_blank" rel="noreferrer">
-                <IconPlayerPlayFilled className="size-4" />
-                查看文档
+              <a href="https://github.com/chaitin/MonkeyCode" target="_blank" rel="noreferrer">
+                <IconCodeDots className="size-4" />
+                查看开源仓库
               </a>
             </Button>
           </div>
@@ -64,11 +64,11 @@ const Banner = () => {
           <div className="flex flex-wrap gap-3 text-sm text-slate-600">
             <div className="pixel-badge inline-flex items-center gap-2 border-slate-900 bg-white px-3 py-2">
               <IconCloudCode className="size-4 text-primary" />
-              独立云开发环境
+              不限额度免费使用
             </div>
             <div className="pixel-badge inline-flex items-center gap-2 border-slate-900 bg-white px-3 py-2">
               <IconBrandGithub className="size-4 text-primary" />
-              Git 协作可接入
+              无需连接本地开发机
             </div>
           </div>
         </div>
@@ -101,13 +101,13 @@ const Banner = () => {
               <div className="border-2 border-slate-900 bg-white px-4 py-4">
                 <div className="font-pixel text-[10px] text-primary">INPUT</div>
                 <p className="mt-3 text-sm leading-7 text-slate-600">
-                  说需求，系统自动拆出执行上下文，不需要先把命令、环境和流程都自己接好。
+                  输入需求就能开始，支持不限额度免费使用，不需要先在自己电脑上准备环境、装工具或连接本地工程机。
                 </p>
               </div>
               <div className="border-2 border-slate-900 bg-amber-50 px-4 py-4">
                 <div className="font-pixel text-[10px] text-primary">OUTPUT</div>
                 <p className="mt-3 text-sm leading-7 text-slate-600">
-                  代码、设计、Review 和 Git 协作回到同一个工作台，而不是散落在多个工具之间。
+                  AI 编码、终端操作、文件修改和 Git 协作都回到同一个在线工作台，而不是散落在多个工具之间。
                 </p>
               </div>
             </div>
diff --git a/frontend/src/components/welcome/final-cta.tsx b/frontend/src/components/welcome/final-cta.tsx
@@ -11,15 +11,15 @@ const FinalCTA = () => {
             START
           </div>
           <h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
-            先让 MonkeyCode 跑一遍，再判断它是否适合你的研发方式
+            先不限额度免费用，再判断 MonkeyCode 是否适合你
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
-            从一次真实任务开始，比反复比较概念和口号更快。先跑一遍，再决定它是否该进入你的日常研发流程。
+            它首先是在线 AI 编程平台，其次才是各种概念包装。先直接免费跑一次真实任务、用一次云开发环境，再决定要不要把它放进日常研发里。
           </p>
           <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
             <Button size="lg" className="pixel-button h-12 border-slate-950 px-6" asChild>
               <Link to="/console">
-                立即开始
+                立即免费使用
                 <IconArrowRight className="size-4" />
               </Link>
             </Button>
diff --git a/frontend/src/components/welcome/git-bot.tsx b/frontend/src/components/welcome/git-bot.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import {
   IconBrandGithub,
-  IconBuildingBank,
   IconCloudLock,
   IconGitPullRequest,
+  IconShare2,
   IconShieldLock,
   IconStack2,
 } from "@tabler/icons-react";
@@ -13,26 +13,26 @@ const proofs = [
   {
     icon: IconBrandGithub,
     title: "开源仓库可见",
-    description: "产品不是只展示概念图，核心能力与开源仓库都可以被查看和验证。",
+    description: "不是只给一张落地页和几句口号，用户可以直接查看仓库、版本和公开能力信息。",
   },
   {
     icon: IconStack2,
     title: "支持主流 Git 平台",
-    description: "GitHub、GitLab、Gitea、Gitee 等协作链路可以被纳入同一套工作方式。",
+    description: "GitHub、GitLab、Gitea、Gitee 等协作链路都可以接入，不让 AI 结果停留在平台内部。",
   },
   {
-    icon: IconShieldLock,
-    title: "可走离线部署方向",
-    description: "如果团队更看重数据边界与内网部署，MonkeyCode 也保留了私有化落地路径。",
+    icon: IconShare2,
+    title: "支持在线远程协作",
+    description: "终端共享和远程协助能力让在线开发不只是自己用，也能服务演示、排障和团队协作场景。",
   },
   {
-    icon: IconBuildingBank,
-    title: "背后有明确团队支撑",
-    description: "不是单纯的个人 Demo，而是围绕真实研发场景持续打磨的产品能力。",
+    icon: IconShieldLock,
+    title: "可走私有化部署方向",
+    description: "如果团队更看重数据边界和内网部署，MonkeyCode 也保留了离线版与私有化落地路径。",
   },
 ];
 
-const platformTags = ["GitHub", "GitLab", "Gitea", "Gitee", "离线部署", "团队协作"];
+const platformTags = ["GitHub", "GitLab", "Gitea", "Gitee", "远程协助", "离线部署"];
 
 const GitBot = () => {
   const typewriterText = "@monkeycode-ai 你好，请帮我 review 这个 PR";
@@ -57,13 +57,13 @@ const GitBot = () => {
       <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10">
         <div className="mx-auto max-w-3xl text-center">
           <div className="pixel-badge font-pixel inline-flex items-center border-slate-900 bg-emerald-100 px-3 py-2 text-[10px] text-slate-900">
-            TRUST
+            TRUST & COLLAB
           </div>
           <h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
-            为真实研发场景设计，而不是只适合演示
+            不只是在网页上在线写代码，还能接回真实协作
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
-            MonkeyCode 的可信度来自真实截图、开源信息、Git 协作能力和私有化落地方向，而不是只靠一句“AI 很强”。
+            MonkeyCode 的价值不只是“在线生成代码”，还包括 Git Review、开源透明度、远程协作和私有化路径。这些才是开发者会长期关心的部分。
           </p>
         </div>
 
@@ -162,7 +162,7 @@ const GitBot = () => {
                 <span className="font-pixel text-[10px]">SYSTEM READY</span>
               </div>
               <p className="mt-4 text-sm leading-7 text-slate-300">
-                不管你更关注开源透明度、Git 协作、团队落地还是私有化路径，MonkeyCode 都不只是停留在抽象口号层面。
+                如果你真正关心的是能不能接入仓库、能不能协作、能不能离线部署，那 MonkeyCode 给出的不是抽象概念，而是明确的产品路径。
               </p>
               <div className="mt-5 flex flex-wrap gap-2">
                 {platformTags.map((tag) => (
diff --git a/frontend/src/components/welcome/header.tsx b/frontend/src/components/welcome/header.tsx
@@ -69,19 +69,13 @@ const Header = () => {
           </Drawer>
           <Link to="/" className={cn("mr-6 flex flex-row items-center gap-3 text-base font-semibold cursor-pointer", isPixelPage && "text-slate-950")}>
             <img src="/logo-colored.png" className={cn("size-8", isPixelPage && "border-2 border-slate-900 bg-white p-1")} alt="MonkeyCode Logo" />
-            <div className="flex flex-col leading-none">
-              <span className={cn(isPixelPage && "font-pixel text-[10px] tracking-normal")}>MonkeyCode</span>
-              <span className={cn("text-[11px] font-normal text-muted-foreground", isPixelPage && "text-slate-500")}>AI 智能开发平台</span>
-            </div>
+            <span className={cn(isPixelPage ? "font-pixel text-sm tracking-normal sm:text-base" : "text-base")}>MonkeyCode</span>
           </Link>
         </div>
         <div className="hidden md:flex flex-row items-center gap-2">
           <Link to="/" className={cn("mr-6 flex flex-row items-center gap-3 text-base font-semibold cursor-pointer", isPixelPage && "text-slate-950")}>
             <img src="/logo-colored.png" className={cn("size-8", isPixelPage && "border-2 border-slate-900 bg-white p-1")} alt="MonkeyCode Logo" />
-            <div className="flex flex-col leading-none">
-              <span className={cn(isPixelPage && "font-pixel text-[10px] tracking-normal")}>MonkeyCode</span>
-              <span className={cn("text-[11px] font-normal text-muted-foreground", isPixelPage && "text-slate-500")}>AI 智能开发平台</span>
-            </div>
+            <span className={cn(isPixelPage ? "font-pixel text-sm tracking-normal sm:text-base" : "text-base")}>MonkeyCode</span>
           </Link>
           <Button variant={"link"} className={cn(
             isPixelPage ? "rounded-none border-2 border-transparent text-slate-900 no-underline hover:bg-amber-50" : "",
diff --git a/frontend/src/components/welcome/highlights.tsx b/frontend/src/components/welcome/highlights.tsx
@@ -1,26 +1,26 @@
-import { IconBolt, IconPlugConnectedX, IconRouteOff } from "@tabler/icons-react";
+import { IconBolt, IconCloudCode, IconPlugConnectedX } from "@tabler/icons-react";
 
 const items = [
   {
     icon: IconBolt,
     index: "01",
-    title: "AI 会回答，但不真正推进交付",
+    title: "不限额度免费使用，先上手再判断",
     description:
-      "很多工具停留在对话和补全层面，能给建议，却很难持续把一个需求推进成可运行、可审查、可提交的结果。",
+      "这是首页最该被看见的卖点之一。用户可以先用真实任务验证 MonkeyCode 是否适合自己，而不是一开始就被额度和试用门槛卡住。",
   },
   {
-    icon: IconPlugConnectedX,
+    icon: IconCloudCode,
     index: "02",
-    title: "环境和流程经常断开",
+    title: "自带云开发环境，打开就能干活",
     description:
-      "本地环境、工具链、模型能力和仓库协作是分散的，研发工作很容易在不同工具之间来回切换，失去连续性。",
+      "终端、文件管理、端口预览和任务执行都在平台里，用户不需要先把本地环境、模型配置和运行链路拼起来。",
   },
   {
-    icon: IconRouteOff,
+    icon: IconPlugConnectedX,
     index: "03",
-    title: "快速生成代码，不等于稳定交付",
+    title: "不连接本地开发机，也能在线完成开发",
     description:
-      "Vibe Coding 适合试验灵感，但在真实项目里，缺少边界、规范和追踪链路，最终会把问题留给团队自己收拾。",
+      "MonkeyCode 更像一个随时可用的在线开发入口。无论是临时验证、远程协作还是快速演示，都不用先占用自己的本地机器。",
   },
 ];
 
@@ -30,13 +30,13 @@ const Highlights = () => {
       <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10">
         <div className="mx-auto max-w-3xl text-center">
           <div className="pixel-badge font-pixel inline-flex items-center border-slate-900 bg-amber-100 px-3 py-2 text-[10px] text-slate-900">
-            WHY NOW
+            WHY MONKEYCODE
           </div>
           <h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
-            问题不在 AI 不够聪明，而在它还没真正进入研发流程
+            先把上手门槛降下来，再让 AI 真正参与编程
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
-            如果 AI 只能补全代码、回答问题，却无法进入环境、执行任务、接回 Git 协作，那它对真实研发的帮助就始终停留在边缘位置。
+            对开发者来说，很多 AI 工具真正卡住的不是不会生成代码，而是开始前还要先买额度、准备环境、接本地机器、切换一堆工具。MonkeyCode 把这些前置成本尽量收进平台里。
           </p>
         </div>
 
diff --git a/frontend/src/components/welcome/sdd.tsx b/frontend/src/components/welcome/sdd.tsx
@@ -2,25 +2,25 @@ import { IconBrandGithub, IconCloudCode, IconListDetails } from "@tabler/icons-r
 
 const modules = [
   {
-    icon: IconCloudCode,
+    icon: IconListDetails,
     code: "MOD-01",
-    title: "独立云开发环境",
+    title: "在线 AI 编程平台",
     description:
-      "任务直接在云端执行，不要求用户先把本地环境、模型配置和运行链路都准备好，减少真正开始前的阻力。",
+      "MonkeyCode 的核心不是一个聊天框，也不是本地插件，而是一个支持不限额度免费使用、可以直接创建任务并持续推进的在线 AI 编程入口。",
   },
   {
-    icon: IconListDetails,
+    icon: IconCloudCode,
     code: "MOD-02",
-    title: "规范驱动开发",
+    title: "云开发环境直接可用",
     description:
-      "先讲清楚做什么、做到什么程度、验收标准是什么，再让 AI 在边界内推进，避免只追求一时快感的随意生成。",
+      "任务在平台提供的开发环境中运行，终端、文件和预览能力都已经准备好，用户不需要依赖自己的本地开发机。",
   },
   {
     icon: IconBrandGithub,
     code: "MOD-03",
-    title: "回到真实协作流",
+    title: "开源透明，可走私有化方向",
     description:
-      "从任务执行到 Review，再到 PR 和 Issue 协作，MonkeyCode 不把结果困在聊天框里，而是继续推进到团队工作流中。",
+      "既可以在线快速开始，也保留开源仓库和离线部署方向。对开发者来说，这比单纯宣传模型能力更容易建立信任。",
   },
 ];
 
@@ -30,13 +30,13 @@ const SDD = () => {
       <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10">
         <div className="mx-auto max-w-3xl text-center">
           <div className="pixel-badge font-pixel inline-flex items-center border-slate-900 bg-slate-900 px-3 py-2 text-[10px] text-slate-50">
-            CORE MODULES
+            CORE VALUE
           </div>
           <h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
-            三件事，把 MonkeyCode 和普通 AI coding 工具区分开
+            三个关键词，概括 MonkeyCode 最值得宣传的点
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
-            真正决定研发体验的，不是功能点数量，而是任务能否在稳定环境中执行、是否有明确规范边界，以及结果能否接回协作流。
+            首页不需要堆太多概念。把“它是什么”“为什么容易开始”“为什么值得信任”讲清楚，转化会比空泛口号更有效。
           </p>
         </div>
 
diff --git a/frontend/src/components/welcome/task.tsx b/frontend/src/components/welcome/task.tsx
@@ -44,13 +44,13 @@ const Task = () => {
       <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-8">
         <div className="mx-auto max-w-3xl text-center">
           <div className="pixel-badge font-pixel inline-flex items-center border-slate-900 bg-sky-100 px-3 py-2 text-[10px] text-slate-900">
-            FLOW
+            HOW IT WORKS
           </div>
           <h2 className="mt-6 text-balance text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">
-            把一句需求推进成可执行任务，而不是一次聊天
+            在线把一句需求推进成真正可执行的开发任务
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
-            MonkeyCode 的重点不是“对话结束了”，而是“任务开始了”。需求、模式、环境和执行结果被放在一条连续链路里。
+            MonkeyCode 不是只给你一段回答，而是把需求、任务模式、云开发环境和执行结果放进同一条在线链路里。
           </p>
         </div>
 
