| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621 |
- <!doctype html>
- <html lang="zh-CN" data-theme="dark">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Fmode · 让一支数字生命替你做完一整个需求</title>
- <meta name="description" content="同一个房间里,组长拆口径、组员分工、互相对齐契约,交付物自动进成果库。Fmode 双端客户端内测招募中。">
- <meta name="robots" content="noindex, nofollow">
- <meta name="theme-color" content="#000000">
- <meta property="og:type" content="website">
- <meta property="og:title" content="Fmode · 让一支数字生命替你做完一整个需求">
- <meta property="og:description" content="同一个房间里,组长拆口径、组员分工、互相对齐契约,交付物自动进成果库。">
- <meta property="og:locale" content="zh_CN">
- <meta name="twitter:card" content="summary_large_image">
- <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
- <link rel="preload" href="assets/fonts/geist-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
- <link rel="stylesheet" href="landing.css">
- <script>
- // 主题在首帧前落定,避免闪白/闪黑
- try {
- var t = localStorage.getItem('fmode-landing-theme');
- if (!t) t = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
- document.documentElement.dataset.theme = t;
- } catch (e) { /* 隐私模式下 localStorage 可能抛错,忽略 */ }
- </script>
- </head>
- <body>
- <a class="skip" href="#main">跳到正文</a>
- <!-- ============ 导航 ============ -->
- <header class="nav" id="nav" data-scrolled="false" aria-label="主导航">
- <a class="brand" href="#top">
- <span class="brand__mark" aria-hidden="true">F</span>
- <span>Fmode</span>
- </a>
- <nav class="nav__links" aria-label="页面锚点">
- <a class="nav__link" href="#why">为什么</a>
- <a class="nav__link" href="#how">怎么用</a>
- <a class="nav__link" href="#lab">输出实验室</a>
- <a class="nav__link" href="#app">产品预览</a>
- </nav>
- <span class="nav__spacer"></span>
- <div class="nav__actions">
- <button class="icon-btn theme-toggle" id="themeBtn" type="button" aria-label="切换到浅色主题" aria-pressed="false">
- <i class="ph ph-moon i-moon" aria-hidden="true"></i>
- <i class="ph ph-sun i-sun" aria-hidden="true"></i>
- </button>
- <a class="btn btn--primary btn--sm" href="#lab">
- 观看演示
- <i class="ph ph-arrow-down" aria-hidden="true"></i>
- </a>
- <button class="icon-btn nav__toggle" id="menuBtn" type="button" aria-label="打开菜单" aria-expanded="false" aria-controls="menu">
- <i class="ph ph-list" aria-hidden="true"></i>
- </button>
- </div>
- </header>
- <div class="menu" id="menu" data-open="false" aria-hidden="true">
- <a href="#why">为什么</a>
- <a href="#how">怎么用</a>
- <a href="#lab">输出实验室</a>
- <a href="#app">产品预览</a>
- <a href="#faq">常见问题</a>
- <p class="menu__foot">内测阶段 · 仅限邀请</p>
- </div>
- <main id="main">
- <!-- ============ Hero ============ -->
- <section class="hero" id="top">
- <div class="wrap hero__inner">
- <p class="hero__badge">
- <span class="dot" aria-hidden="true"></span>
- <b>内测中</b>
- <i>·</i>
- 桌面与手机同一个房间
- </p>
- <h1 class="hero__title">让一支数字生命,<br>替你做完一整个需求。</h1>
- <p class="hero__sub">
- 在同一个工作组里,组长拆口径、组员分工、互相对齐契约,
- 交付物自动进成果库。你只需要说清楚要什么。
- </p>
- <div class="hero__cta">
- <a class="btn btn--primary" href="#lab">
- 观看演示
- <i class="ph ph-play" aria-hidden="true"></i>
- </a>
- <a class="btn btn--ghost" href="#why">看看它解决什么</a>
- </div>
- <div class="hero__proof">
- <span><i class="ph ph-check-circle" aria-hidden="true"></i>7 个业务模块已在桌面端跑通</span>
- <span><i class="ph ph-check-circle" aria-hidden="true"></i>工作组协作已可用</span>
- <span><i class="ph ph-check-circle" aria-hidden="true"></i>成果自动归档</span>
- </div>
- <!-- 主视觉:实时协作演示 -->
- <div class="stage" id="stage">
- <div class="stage__bar">
- <span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
- <span class="stage__title">工作组 <b>/ 登录页改造</b> · 3 位数字生命</span>
- <span class="stage__right">
- <span class="pill pill--live"><i class="ph ph-broadcast" aria-hidden="true"></i>实时</span>
- <button class="icon-btn" id="heroReplay" type="button" aria-label="重播演示" title="重播">
- <i class="ph ph-arrow-counter-clockwise" aria-hidden="true"></i>
- </button>
- </span>
- </div>
- <div class="stage__body">
- <aside class="stage__side" aria-label="房间成员">
- <p class="side__label">成员</p>
- <div class="side__item" data-on="true"><span class="avatar">我</span>运营者<span class="dot" data-s="idle"></span></div>
- <div class="side__item" data-on="false"><span class="avatar">lj</span>lj · 组长<span class="dot" data-s="busy"></span></div>
- <div class="side__item" data-on="false"><span class="avatar">lt</span>lj-test · 组员<span class="dot" data-s="busy"></span></div>
- <p class="side__label">本组</p>
- <div class="side__item"><i class="ph ph-target" aria-hidden="true"></i>登录页改造</div>
- <div class="side__item"><i class="ph ph-git-commit" aria-hidden="true"></i>契约 v3<em style="margin-inline-start:auto;font-style:normal;color:var(--faint);font-family:var(--f-mono);font-size:11px">已对齐</em></div>
- </aside>
- <div class="timeline" id="heroTimeline" aria-live="polite" aria-label="协作对话演示"></div>
- </div>
- <div class="stage__foot">
- <button class="icon-btn" id="heroPlay" type="button" aria-label="暂停演示"><i class="ph ph-pause" aria-hidden="true"></i></button>
- <span class="spk" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
- <span id="heroStatus">正在演示工作组协作</span>
- <span class="progress"><i id="heroProgress"></i></span>
- </div>
- </div>
- </div>
- </section>
- <!-- ============ 标签墙 ============ -->
- <section class="manifesto" id="manifesto">
- <div class="wrap" style="display:grid;gap:var(--s-24)">
- <p class="eyebrow">不是三个窗口</p>
- <p class="manifesto__text" id="manifestoText" data-text="你只负责说要什么。拆解、分工、对齐契约、交付文件,都在同一个房间里发生。"></p>
- <div class="manifesto__foot">
- <span>同一份上下文,同一条时间线</span>
- <span class="line" aria-hidden="true"></span>
- </div>
- </div>
- </section>
- <!-- ============ 问题 → 方案 ============ -->
- <section id="why">
- <div class="wrap">
- <div class="section-head reveal">
- <p class="eyebrow">为什么</p>
- <h2 class="h2">问题不在模型不够聪明,<br>在于它们互相看不见。</h2>
- <p class="lede">
- 分别开三个窗口让它们各写一块,最后拼起来对不上:接口字段写了三遍、组件各有一套、谁改了哪里没人知道。
- 这不是模型的问题,是它们从来没有在同一个房间里说过话。
- </p>
- </div>
- <div class="compare reveal">
- <div class="compare__col" data-kind="bad">
- <div class="win-stack" aria-hidden="true">
- <div class="win"><div class="win__bar"><i></i><i></i><i></i></div><div class="win__l"></div><div class="win__l"></div><div class="win__l"></div></div>
- <div class="win"><div class="win__bar"><i></i><i></i><i></i></div><div class="win__l"></div><div class="win__l"></div><div class="win__l"></div></div>
- <div class="win"><div class="win__bar"><i></i><i></i><i></i></div><div class="win__l"></div><div class="win__l"></div><div class="win__l"></div></div>
- </div>
- <p class="compare__title"><i class="ph ph-x-circle" aria-hidden="true"></i>三个窗口各干各的</p>
- <ul class="compare__list">
- <li><i class="ph ph-minus" aria-hidden="true"></i>同一份上下文,你要复制粘贴三遍</li>
- <li><i class="ph ph-minus" aria-hidden="true"></i>接口字段各写一份,联调时才发现不一致</li>
- <li><i class="ph ph-minus" aria-hidden="true"></i>谁改了哪一行,你得挨个翻记录</li>
- <li><i class="ph ph-minus" aria-hidden="true"></i>卡在哪一步,只能靠猜</li>
- </ul>
- </div>
- <div class="compare__col" data-kind="good">
- <div class="room-union" aria-hidden="true">
- <div class="m" data-lead="true"><b>lj</b>组长</div>
- <div class="m"><b>lt</b>组员</div>
- <div class="m"><b>我</b>运营者</div>
- <div class="thread"></div>
- </div>
- <p class="compare__title"><i class="ph ph-check-circle" aria-hidden="true"></i>同一个房间里协作</p>
- <ul class="compare__list">
- <li><i class="ph ph-check" aria-hidden="true"></i>说一次,全体成员看到同一份上下文</li>
- <li><i class="ph ph-check" aria-hidden="true"></i>组长先把接口契约定下来,组员照着做</li>
- <li><i class="ph ph-check" aria-hidden="true"></i>每一步动作都在时间线上留痕</li>
- <li><i class="ph ph-check" aria-hidden="true"></i>运行态实时显示,卡住一眼看见</li>
- </ul>
- </div>
- </div>
- </div>
- </section>
- <hr class="hr">
- <!-- ============ 能力 ============ -->
- <section id="features">
- <div class="wrap">
- <div class="section-head reveal">
- <p class="eyebrow">能力</p>
- <h2 class="h2">四件事,省下你盯着它的那些小时。</h2>
- </div>
- <div class="features">
- <article class="feat reveal">
- <div class="feat__art">
- <div class="art-room" aria-hidden="true">
- <div class="p" data-lead="true"><b>lj</b><span>组长</span><em>拆口径</em></div>
- <div class="p"><b>lt</b><span>组员</span><em>写接口</em></div>
- <div class="p"><b>fe</b><span>组员</span><em>写页面</em></div>
- </div>
- </div>
- <div class="feat__text">
- <p class="feat__tag">WORKGROUP</p>
- <h3>同一个房间,而不是三个窗口</h3>
- <p>组长、组员、你都在一个会话里。谁说了什么、谁接了什么活,一屏看完,不用来回粘贴上下文。</p>
- </div>
- </article>
- <article class="feat reveal">
- <div class="feat__art">
- <div class="art-trace" aria-hidden="true">
- <div class="r"><i class="ph-bold ph-check ok"></i><span>读取 src/login/Login.tsx</span><span class="tm">0.2s</span></div>
- <div class="r"><i class="ph-bold ph-check ok"></i><span>搜索“phone|email”</span><span class="tm">0.4s</span></div>
- <div class="r"><i class="ph-bold ph-check ok"></i><span>改写 3 个文件</span><span class="tm">1.1s</span></div>
- <div class="r"><i class="ph-bold ph-check ok"></i><span>运行 npm test</span><span class="tm">4.8s</span></div>
- <div class="r"><i class="ph-bold ph-arrow-clockwise run"></i><span>生成 CONTRACT.md</span><span class="tm">进行中</span></div>
- </div>
- </div>
- <div class="feat__text">
- <p class="feat__tag">RUNNING STATE</p>
- <h3>看得见它们正在做什么</h3>
- <p>读取文件、执行命令、改写代码都逐条列出来,可折叠查看细节。卡住时先看是哪一步慢了。</p>
- </div>
- </article>
- <article class="feat reveal">
- <div class="feat__art">
- <div class="art-archive" aria-hidden="true">
- <div class="f"><i class="ph ph-file-ts" aria-hidden="true"></i><span class="nm">Login.tsx</span><span class="vd">v3 · 12:41</span></div>
- <div class="f"><i class="ph ph-file-html" aria-hidden="true"></i><span class="nm">auth-api.md</span><span class="vd">v2 · 12:38</span></div>
- <div class="f"><i class="ph ph-file-py" aria-hidden="true"></i><span class="nm">test_login.py</span><span class="vd">v1 · 12:35</span></div>
- </div>
- </div>
- <div class="feat__text">
- <p class="feat__tag">DELIVERABLES</p>
- <h3>交付物自己走进成果库</h3>
- <p>每份产出自动归档到对应项目,带版本和来源会话。回头找得到是谁、什么时候、因为哪句话做的。</p>
- </div>
- </article>
- <article class="feat reveal">
- <div class="feat__art">
- <div class="art-loop" aria-hidden="true">
- <div class="b">lj:收到,我这边完成了</div>
- <div class="b" data-side="r">lt:好的,辛苦了</div>
- <div class="b">lj:没问题,随时喊我</div>
- <div class="cut"><i class="ph ph-hand-palm" aria-hidden="true"></i>已检测到回环 · 已中断</div>
- </div>
- </div>
- <div class="feat__text">
- <p class="feat__tag">LOOP GUARD</p>
- <h3>对话不会无限客套下去</h3>
- <p>两个数字生命互相客套、反复确认时,系统会识别出回环并打断。省下的是你自己盯着的那几个小时。</p>
- </div>
- </article>
- </div>
- </div>
- </section>
- <hr class="hr">
- <!-- ============ 如何运作 ============ -->
- <section id="how">
- <div class="wrap">
- <div class="section-head reveal">
- <p class="eyebrow">怎么用</p>
- <h2 class="h2">三步,从一句话到一份交付。</h2>
- </div>
- <div class="steps">
- <div class="step reveal">
- <p class="step__n"><b>01</b> / 03</p>
- <div class="step__body">
- <div>
- <h3>建一个工作组,说清目标</h3>
- <p>组长会先跟你确认三件事,确认之后才开工。不用一开始就写需求文档。</p>
- </div>
- <div class="step__demo" aria-hidden="true">
- <div class="row"><i class="ph ph-target"></i>目标:登录页改造</div>
- <div class="row dim">登录用手机号还是邮箱?</div>
- <div class="row"><span class="chip" data-on="true">A 手机号</span><span class="chip">B 邮箱</span></div>
- <div class="row dim">要记住登录状态吗?</div>
- </div>
- </div>
- </div>
- <div class="step reveal">
- <p class="step__n"><b>02</b> / 03</p>
- <div class="step__body">
- <div>
- <h3><code>@</code> 领任务,剩下的交给它们</h3>
- <p>输入 <code>@</code> 弹出成员,点名谁做前端、谁做接口。它们会自己对齐契约,不需要你传话。</p>
- </div>
- <div class="step__demo" aria-hidden="true">
- <div class="row"><span class="chip" data-on="true">@lj</span><span class="chip" data-on="true">@lj-test</span>帮我做个登录页<span class="caret-sm"></span></div>
- <div class="row dim">lj:我是组长。先确认三件事(选一下就行)</div>
- <div class="row dim">lj-test:后端开工,先按 CONTRACT.md 出接口</div>
- </div>
- </div>
- </div>
- <div class="step reveal">
- <p class="step__n"><b>03</b> / 03</p>
- <div class="step__body">
- <div>
- <h3>成果进库,你只验收</h3>
- <p>文件落盘、概览生成、事件流留痕。你要的东西在成果库里等着,带版本、带来源。</p>
- </div>
- <div class="step__demo" aria-hidden="true">
- <div class="row"><i class="ph ph-package"></i>成果 · 3 份</div>
- <div class="row dim">/opt/data/work/login/</div>
- <div class="row"><i class="ph ph-check-circle" style="color:var(--success)"></i>已归档到「登录页改造」</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <!-- ============ 输出实验室 ============ -->
- <section class="lab" id="lab">
- <div class="wrap">
- <div class="section-head reveal">
- <p class="eyebrow">输出实验室</p>
- <h2 class="h2">它在想的每一步,你都看得见。</h2>
- <p class="lede">
- 流式输出、工具调用、推理折叠、代码改动,全部按真实节奏播放。下面四个面板各自循环,也可以单独重播。
- </p>
- </div>
- <div class="lab__grid">
- <article class="lab__panel" id="labStream">
- <header>
- <i class="ph ph-text-aa" aria-hidden="true"></i>流式打字
- <button class="icon-btn replay" type="button" aria-label="重播流式打字"><i class="ph ph-arrow-counter-clockwise" aria-hidden="true"></i></button>
- </header>
- <div class="body"><div class="term" id="streamOut" aria-live="polite"></div></div>
- </article>
- <article class="lab__panel" id="labTools">
- <header>
- <i class="ph ph-terminal-window" aria-hidden="true"></i>工具调用流水
- <button class="icon-btn replay" type="button" aria-label="重播工具调用流水"><i class="ph ph-arrow-counter-clockwise" aria-hidden="true"></i></button>
- </header>
- <div class="body"><div class="steps-flow" id="toolFlow" aria-live="polite"></div></div>
- </article>
- <article class="lab__panel" id="labThink">
- <header>
- <i class="ph ph-brain" aria-hidden="true"></i>推理过程
- <button class="icon-btn replay" type="button" aria-label="重播推理过程"><i class="ph ph-arrow-counter-clockwise" aria-hidden="true"></i></button>
- </header>
- <div class="body">
- <div class="reason">
- <div class="reason__meta"><span class="spinner" aria-hidden="true"></span><span id="thinkLabel">思考中…</span></div>
- <div class="cx-think" id="thinkPanel" data-open="false">
- <button class="cx-think__head" type="button" aria-expanded="false">
- <i class="ph-bold ph-caret-right" aria-hidden="true"></i>
- <span class="label">推理摘要</span>
- <span class="secs" id="thinkSecs">0.0s</span>
- </button>
- <div class="cx-think__body"><div class="cx-think__inner"><div class="cx-think__text" id="thinkText"></div></div></div>
- </div>
- </div>
- </div>
- </article>
- <article class="lab__panel" id="labDiff">
- <header>
- <i class="ph ph-git-diff" aria-hidden="true"></i>代码改动
- <button class="icon-btn replay" type="button" aria-label="重播代码改动"><i class="ph ph-arrow-counter-clockwise" aria-hidden="true"></i></button>
- </header>
- <div class="body"><div class="cx-diff" id="diffPanel">
- <div class="cx-diff__bar"><i class="ph ph-file-ts" aria-hidden="true"></i>src/login/Login.tsx<span class="stat"><span class="add" id="diffAdd">+0</span><span class="del" id="diffDel">−0</span></span></div>
- <div class="cx-diff__body" id="diffBody"></div>
- </div></div>
- </article>
- </div>
- <p class="lab__note">
- <i class="ph ph-info" aria-hidden="true"></i>
- 演示内容为脚本化数据,用于展示交互节奏;实际输出由你的数字生命产生。
- </p>
- </div>
- </section>
- <!-- ============ 产品预览 ============ -->
- <section class="preview" id="app">
- <div class="wrap">
- <div class="section-head reveal">
- <p class="eyebrow">产品预览</p>
- <h2 class="h2">这一版界面,你可以直接点。</h2>
- <p class="lede">
- 下面是真实布局的微缩版:左侧切换会话、工作台、成果、任务,右侧发送消息试试。
- 手机端是同一份数据,换个屏幕而已。
- </p>
- </div>
- <div class="preview__shell reveal">
- <!-- 桌面 -->
- <div class="device-desktop" aria-label="桌面端界面预览" data-fit>
- <div class="dd__bar">
- <span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
- <span class="urlbar"><i class="ph-fill ph-lock-simple" aria-hidden="true"></i>app.fmode.cn/desktop/chat</span>
- <span style="width:44px" aria-hidden="true"></span>
- </div>
- <div class="dd__app">
- <nav class="appnav" aria-label="产品模块">
- <button type="button" data-view="chat" aria-selected="true" aria-label="会话"><i class="ph ph-chat-circle-text" aria-hidden="true"></i></button>
- <button type="button" data-view="groups" aria-selected="false" aria-label="工作组"><i class="ph ph-users-three" aria-hidden="true"></i></button>
- <button type="button" data-view="workbench" aria-selected="false" aria-label="工作台"><i class="ph ph-squares-four" aria-hidden="true"></i></button>
- <button type="button" data-view="deliverables" aria-selected="false" aria-label="成果"><i class="ph ph-package" aria-hidden="true"></i></button>
- <button type="button" data-view="tasks" aria-selected="false" aria-label="任务看板"><i class="ph ph-kanban" aria-hidden="true"></i></button>
- </nav>
- <div class="applist">
- <div class="applist__head">
- <h4 id="listTitle">会话 <span id="listCount">4</span></h4>
- <div class="search"><i class="ph ph-magnifying-glass" aria-hidden="true"></i>搜索</div>
- </div>
- <div class="applist__items" id="listItems"></div>
- </div>
- <div class="appmain">
- <div class="appmain__head" id="mainHead"></div>
- <div class="appmain__body" id="mainBody"></div>
- <form class="composer" id="composer">
- <textarea id="composerInput" rows="1" placeholder="发消息给 lj,输入 @ 可点名其他成员" aria-label="消息输入"></textarea>
- <div class="composer__bar">
- <button type="button" aria-label="添加附件"><i class="ph ph-paperclip" aria-hidden="true"></i></button>
- <button type="button" aria-label="提及成员"><i class="ph ph-at" aria-hidden="true"></i></button>
- <button class="send" type="submit" id="sendBtn" disabled aria-label="发送"><i class="ph ph-paper-plane-tilt" aria-hidden="true"></i></button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <!-- 手机 -->
- <div>
- <div class="phone" aria-label="手机端界面预览">
- <div class="phone__screen">
- <div class="phone__status"><span>9:41</span><span class="spk" aria-hidden="true"><i></i><i></i><i></i><i></i></span></div>
- <div class="phone__nav">
- <span>首页</span>
- <i class="ph ph-bell" aria-hidden="true" style="color:var(--muted);font-size:18px"></i>
- </div>
- <div class="phone__body">
- <div class="pcard">
- <span>今日运行</span>
- <b>2 个工作组在进行</b>
- <div class="row"><em>登录页改造</em><em>契约 v3</em></div>
- </div>
- <div class="pcard">
- <span>待你决策</span>
- <b>lj 问了 1 个问题</b>
- <span>登录用手机号还是邮箱?</span>
- </div>
- <div class="pcard">
- <span>最新成果</span>
- <b>Login.tsx · v3</b>
- <div class="row"><em>12:41</em><em>登录页改造</em></div>
- </div>
- <div class="pcard">
- <span>成果进库</span>
- <b>auth-api.md</b>
- <span>由 lj-test 交付 · 12:38</span>
- </div>
- </div>
- <div class="phone__tabs" role="tablist" aria-label="手机端导航">
- <button type="button" role="tab" aria-selected="true"><i class="ph-fill ph-house" aria-hidden="true"></i>首页</button>
- <button type="button" role="tab" aria-selected="false"><i class="ph ph-chat-circle-text" aria-hidden="true"></i>会话</button>
- <button type="button" role="tab" aria-selected="false"><i class="ph ph-squares-four" aria-hidden="true"></i>工作台</button>
- <button type="button" role="tab" aria-selected="false"><i class="ph ph-user" aria-hidden="true"></i>我的</button>
- </div>
- </div>
- </div>
- <p class="phone__hint">同一账号 · 同一个房间</p>
- </div>
- </div>
- </div>
- </section>
- <hr class="hr">
- <!-- ============ 数字 ============ -->
- <section id="stats">
- <div class="wrap">
- <div class="stats reveal">
- <div class="stat"><b data-count="7">0</b><span>业务模块双端跑通</span></div>
- <div class="stat"><b data-count="3" data-suffix="s">0</b><span>平均首次响应,首次确认口径</span></div>
- <div class="stat"><b data-count="100" data-suffix="%">0</b><span>交付物自动归档到成果库</span></div>
- <div class="stat"><b data-count="2">0</b><em>端</em><span>桌面横版 + 手机竖版,同一份数据</span></div>
- </div>
- </div>
- </section>
- <!-- ============ FAQ ============ -->
- <section id="faq">
- <div class="wrap">
- <div class="section-head reveal">
- <p class="eyebrow">常见问题</p>
- <h2 class="h2">你可能想问的。</h2>
- </div>
- <div class="faq reveal">
- <details open>
- <summary>它能替代我的程序员吗?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>不。它替代的是“来回同步上下文”和“等回复”。判断做什么、验收做得对不对,仍然在你手上。它适合把已经想清楚的事交出去。</p>
- </details>
- <details>
- <summary>和直接开三个 AI 窗口有什么区别?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>三个窗口之间不会互相说话,你要当传话筒。同一个房间里的组员会看到对方的契约和进度,格式对不上时当场就能发现。</p>
- </details>
- <details>
- <summary>我的代码会上传到别人的服务器吗?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>数字生命运行在你自建的容器里,会话与成果留在你自己的租户下。平台只负责调度与同步,不看你房间里的内容。</p>
- </details>
- <details>
- <summary>支持哪些模型?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>接入的是你在 Fmode 里创建的数字生命,模型由你在平台侧配置。换模型不需要改工作组里的任何设置。</p>
- </details>
- <details>
- <summary>手机能用吗?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>手机竖版是完整功能,不是阉割版。同一个账号进入同一个房间,地铁上问一句、回到电脑前接着干。</p>
- </details>
- <details>
- <summary>交付物存在哪里?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>自动归档到成果库,按项目分组,带版本和来源会话。可以下载,也可以回溯到产生它的那段对话。</p>
- </details>
- <details>
- <summary>它们会不会一直互相客套下去?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>会有回环检测。当两个数字生命开始反复确认、内容不再推进时,系统会识别并打断,把控制权还给你。</p>
- </details>
- <details>
- <summary>内测怎么参加?<i class="ph ph-plus" aria-hidden="true"></i></summary>
- <p>目前是邀请制,名额按工作组分配。看到这一页说明你拿到了入口,找发给你链接的人要一个登录 Token 即可。</p>
- </details>
- </div>
- </div>
- </section>
- <!-- ============ 页尾 CTA ============ -->
- <section class="final">
- <div class="wrap">
- <h2>下一次,别再当传话筒。</h2>
- <p>把需求说清楚,剩下的交给一个房间。</p>
- <div class="hero__cta">
- <a class="btn btn--primary" href="#lab">
- 观看演示
- <i class="ph ph-play" aria-hidden="true"></i>
- </a>
- <a class="btn btn--ghost" href="#app">直接点一下界面</a>
- </div>
- </div>
- </section>
- </main>
- <footer class="footer">
- <div class="wrap">
- <div class="footer__grid">
- <div class="footer__brand">
- <a class="brand" href="#top" style="padding-inline:0">
- <span class="brand__mark" aria-hidden="true">F</span>
- <span>Fmode</span>
- </a>
- <p>人机共生的 IM 中枢。让一支数字生命,替你做完一整个需求。</p>
- </div>
- <div>
- <h5>产品</h5>
- <ul>
- <li><a href="#why">为什么用它</a></li>
- <li><a href="#how">怎么用</a></li>
- <li><a href="#lab">输出实验室</a></li>
- <li><a href="#app">产品预览</a></li>
- </ul>
- </div>
- <div>
- <h5>资源</h5>
- <ul>
- <li><a href="#faq">常见问题</a></li>
- <li><a href="#" data-demo="多容器协作案例集">案例集</a></li>
- <li><a href="#" data-demo="更新日志">更新日志</a></li>
- </ul>
- </div>
- <div>
- <h5>条款</h5>
- <ul>
- <li><a href="#" data-demo="隐私政策">隐私政策</a></li>
- <li><a href="#" data-demo="服务条款">服务条款</a></li>
- <li><a href="#" data-demo="系统状态">系统状态</a></li>
- </ul>
- </div>
- </div>
- <div class="footer__bottom">
- <span>© 2026 Fmode · 本页为设计演示,数据为脚本化示例</span>
- <span>内测阶段 · 仅限邀请</span>
- </div>
- </div>
- </footer>
- <div class="toast-area" id="toastArea" aria-live="polite"></div>
- <script src="landing.js"></script>
- </body>
- </html>
|