Three Step Flow
介绍
三个图标节点配代码标签横向排开，节点之间用细线相连，窄屏自动改成纵向排列。适合讲清检索、调用、结算这类三段式流程。
拆自整页模板 器枢 智能体工具接入平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Three Step Flow 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add three-step-flow
mcp › 使用 8pt MCP 调用 get_component("three-step-flow")
代码
Three Step Flow 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-qsf"><section class="qs-flow" id="flow"><div class="qs-wrap"><h2 class="qs-h2">说出任务，<br>剩下的它自己办。</h2><ol class="qs-steps"><li class="qs-step" style="transition-delay:0.0s"><span class="qs-step__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></span><h3>检索比价</h3><code>qs.find()</code></li><li class="qs-step__line" style="transition-delay:0.08s" aria-hidden="true"></li><li class="qs-step" style="transition-delay:0.15s"><span class="qs-step__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5l11 7-11 7z"/></svg></span><h3>直接调用</h3><code>qs.call()</code></li><li class="qs-step__line" style="transition-delay:0.22999999999999998s" aria-hidden="true"></li><li class="qs-step" style="transition-delay:0.3s"><span class="qs-step__ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2.5"/><path d="M3 10h18"/></svg></span><h3>按次结算</h3><code>wallet.debit()</code></li></ol></div></section></div>
.x-qsf{--acc:#0016D7;--ink:#1c1c1e;--mut:#6e6e73;--line:#ececee;--soft:#fafafa;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;box-sizing:border-box;text-align:left}.x-qsf *,.x-qsf *::before,.x-qsf *::after{box-sizing:border-box;margin:0;padding:0}.x-qsf a{color:inherit;text-decoration:none}.x-qsf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qsf .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qsf .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qsf .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qsf .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qsf .qs-mark i:nth-child(4){opacity:.35}.x-qsf .qs-flow{background:var(--soft) radial-gradient(#dcdce3 1px,transparent 1.3px) 0 0/18px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:112px 0}.x-qsf .qs-steps{list-style:none;display:flex;align-items:flex-start;justify-content:center;gap:0;margin-top:64px}.x-qsf .qs-step{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.x-qsf .qs-step__ic{width:42px;height:42px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--acc);display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(0,0,0,.06)}.x-qsf .qs-step__ic svg{width:19px;height:19px}.x-qsf .qs-step h3{font-size:19px;font-weight:700;letter-spacing:-.01em}.x-qsf .qs-step code{font:13px var(--mono);color:var(--acc);background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:5px}.x-qsf .qs-step__line{flex:0 0 90px;height:1px;background:#d6d6dc;margin-top:21px;transform-origin:left}.x-qsf .qs-step__line.qs-reveal{transform:scaleX(0)}.x-qsf .qs-step__line.qs-reveal.is-in{transform:scaleX(1)}@media (max-width:760px){.x-qsf .qs-flow{padding:80px 0}.x-qsf .qs-steps{flex-direction:column;align-items:center;gap:0}.x-qsf .qs-step{flex:none}.x-qsf .qs-step__line{flex:none;width:1px;height:36px;margin:14px 0;transform-origin:top}.x-qsf .qs-step__line.qs-reveal{transform:scaleY(0)}.x-qsf .qs-step__line.qs-reveal.is-in{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.x-qsf .qs-step__line.qs-reveal{transform:none!important}}.x-qsf .qs-flow{padding:96px 0;border:0;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}
订阅 Builder 查看完整源码。查看价格