Kanban Window Mock
Overview
A browser window mockup: a workspace sidebar with icons and an agent list on the left; page title, view switcher and a four-column colorful kanban on the right. Every few seconds a card moves to the next column, and agent notifications pop up top right.
Taken from the page template Moge Team AI Workspace Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Kanban Window Mock to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add kanban-window-mock
mcp › Use 8pt MCP to call get_component("kanban-window-mock")
Code
Source for Kanban Window Mock. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-kwm"><section class="mg-mock" aria-label="产品界面示意"><div class="mg-mock__peb"><svg class="mg-peb " viewBox="0 0 92 92" width="86" height="86" aria-hidden="true" style="transform:rotate(-6deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#F59AA8"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><path d="M40 59h12" stroke="#191918" stroke-width="2.6" stroke-linecap="round"/><path d="M16 62 6 70" stroke="#F59AA8" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#F59AA8" stroke-width="7" stroke-linecap="round"/></svg></div><div class="mg-win"><div class="mg-win__bar"><i></i><i></i><i></i><span class="mg-win__tab"><b></b>青柚工作室总览</span></div> <div class="mg-win__body"><aside class="mg-side"><b>青柚工作室</b><a href="#hero"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>搜索</a><a href="#hero"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5"/><path d="M6 9v10.5h12V9"/><path d="M10 19.5v-5h4v5"/></svg>首页</a><a href="#hero"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6" width="12" height="12" rx="2.5"/><path d="m15.5 10.5 5-3v9l-5-3"/></svg>会议</a><a href="#hero"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5Z"/><path d="M18.5 15.5v4"/><path d="M16.5 17.5h4"/></svg>智能助手</a><a href="#hero"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13.5 6.5 5h11l2.5 8.5"/><path d="M4 13.5v5h16v-5h-4.5l-1.5 2.5h-4l-1.5-2.5Z"/></svg>收件箱</a><small>智能体</small><a href="#agents"><span class="mg-dot" style="background:#9B8AF0"></span>需求分拣</a><a href="#agents"><span class="mg-dot" style="background:#F2A65A"></span>周报撰写</a><a href="#agents"><span class="mg-dot" style="background:#5BB98C"></span>内部问答</a><a href="#agents"><span class="mg-dot" style="background:#5AA9E6"></span>入职向导</a><small>团队空间</small><a href="#teams">产品路线图</a><a href="#teams">设计周会</a></aside><div class="mg-main"><div class="mg-main__t"><span><b></b></span>青柚工作室总览</div> <div class="mg-views"><span class="is-on">团队任务</span><span>我的任务</span><span>本周冲刺</span><span>时间线</span></div> <div class="mg-board"><div class="mg-col" style="--cbg:#F1EFEC;--cfg:#787774"><div class="mg-col__h"><i></i>待处理<em>3</em></div><div class="mg-col__l"><div class="mg-card">整理用户访谈纪要</div><div class="mg-card">更新帮助中心目录</div><div class="mg-card">核对季度预算表</div></div></div><div class="mg-col" style="--cbg:#FDF3E1;--cfg:#B7791F"><div class="mg-col__h"><i></i>进行中<em>3</em></div><div class="mg-col__l"><div class="mg-card">发布会演示脚本</div><div class="mg-card">新版定价页文案</div><div class="mg-card">招聘面试题库</div></div></div><div class="mg-col" style="--cbg:#E6F3FE;--cfg:#0B6BC2"><div class="mg-col__h"><i></i>审核中<em>3</em></div><div class="mg-col__l"><div class="mg-card">移动端引导流程</div><div class="mg-card">合同模板修订</div><div class="mg-card">客服话术更新</div></div></div><div class="mg-col" style="--cbg:#E8F5EC;--cfg:#2F8A55"><div class="mg-col__h"><i></i>已完成<em>3</em></div><div class="mg-col__l"><div class="mg-card">设计规范第二版</div><div class="mg-card">入职清单</div><div class="mg-card">官网首屏改版</div></div></div></div> <div class="mg-note"><b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5Z"/><path d="M18.5 15.5v4"/><path d="M16.5 17.5h4"/></svg>周报撰写</b>本周进展已整理成草稿，三项待你确认。</div></div></div></div></section></div>
.x-kwm{--bg:#FFFFFF;--ink:#191918;--acc:#0075DE;--accs:#E6F3FE;--soft:#F6F5F4;--card:#F9F9F8;--line:#E6E5E3;--mut:#787774;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-kwm *,.x-kwm *::before,.x-kwm *::after{box-sizing:border-box;margin:0;padding:0}.x-kwm{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-kwm a{color:inherit;text-decoration:none}.x-kwm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-kwm .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-kwm .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-kwm .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}.x-kwm .mg-btn:active{transform:scale(.97)}.x-kwm .mg-btn--pri{background:var(--acc);color:#fff}.x-kwm .mg-btn--pri:hover{background:#005BAB}.x-kwm .mg-btn--sec{background:var(--accs);color:#005BAB}.x-kwm .mg-btn--sec:hover{background:#D5EAFC}.x-kwm .mg-btn--white{background:#fff;color:#005BAB}.x-kwm .mg-btn--white:hover{background:#F0F7FE}.x-kwm .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-kwm .mg-logo__m{width:28px;height:28px}.x-kwm .mg-logo--big{font-size:26px;gap:10px}.x-kwm .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-kwm .mg-peb{display:block;overflow:visible}.x-kwm .mg-peb__eyes{animation:xkwmBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xkwmBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-kwm *,.x-kwm *::before,.x-kwm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-kwm .mg-mock{position:relative;padding:20px 24px 70px;overflow-x:clip}.x-kwm .mg-win{position:relative;max-width:980px;margin:0 auto;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 60px -24px rgba(0,0,0,.22);overflow:hidden;text-align:left}.x-kwm .mg-win__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#F7F6F5;border-bottom:1px solid var(--line)}.x-kwm .mg-win__bar i{width:9px;height:9px;border-radius:50%;background:#DDDBD8}.x-kwm .mg-win__tab{display:inline-flex;align-items:center;gap:6px;height:24px;margin-left:56px;padding:0 10px;border-radius:6px;background:#fff;font-size:11.5px;box-shadow:0 0 0 1px var(--line)}.x-kwm .mg-win__tab b{width:10px;height:10px;border-radius:3px;background:#F28B6B}.x-kwm .mg-win__body{display:grid;grid-template-columns:200px 1fr;height:430px}.x-kwm .mg-side{padding:12px 10px;background:#FBFBFA;border-right:1px solid var(--line);font-size:12px;color:#5F5E5B}.x-kwm .mg-side b{display:block;padding:4px 8px 8px;color:var(--ink);font-size:12.5px}.x-kwm .mg-side a{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:6px;transition:background .2s}.x-kwm .mg-side a:hover{background:#EFEEEC}.x-kwm .mg-side a svg{width:14px;height:14px}.x-kwm .mg-side small{display:block;padding:12px 8px 4px;font-size:10.5px;color:#A3A29E}.x-kwm .mg-side .mg-dot{width:12px;height:12px;border-radius:50%;flex:none}.x-kwm .mg-main{position:relative;padding:20px 22px;overflow:hidden}.x-kwm .mg-main__t{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700}.x-kwm .mg-main__t span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FDE8E0}.x-kwm .mg-main__t span b{width:16px;height:20px;border-radius:3px;background:#F28B6B;box-shadow:5px -3px 0 #F6B39C}.x-kwm .mg-views{display:flex;gap:4px;margin-top:14px;font-size:11.5px;color:#787774}.x-kwm .mg-views span{padding:3px 8px;border-radius:6px}.x-kwm .mg-views span.is-on{background:#EFEEEC;color:var(--ink)}.x-kwm .mg-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.x-kwm .mg-col{min-width:0;padding:8px;border-radius:9px;background:var(--cbg)}.x-kwm .mg-col__h{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11.5px;font-weight:600;color:var(--cfg)}.x-kwm .mg-col__h i{width:7px;height:7px;border-radius:50%;background:var(--cfg)}.x-kwm .mg-col__h em{font-style:normal;font-weight:400;opacity:.7}.x-kwm .mg-col__l{display:grid;gap:6px}.x-kwm .mg-card{padding:8px 9px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05);font-size:11.5px;line-height:1.4;transition:box-shadow .2s}.x-kwm .mg-card:hover{box-shadow:0 0 0 1px rgba(0,117,222,.4)}.x-kwm .mg-card.is-new{animation:xkwmPop .6s var(--ease)}@keyframes xkwmPop{from{transform:translateY(-6px) scale(.96);opacity:0;box-shadow:0 0 0 2px var(--acc)}}.x-kwm .mg-note{position:absolute;right:16px;top:14px;width:220px;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:0 10px 28px -10px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05);font-size:11.5px;line-height:1.45;animation:xkwmNote 7s var(--ease) infinite}.x-kwm .mg-note b{display:flex;align-items:center;gap:6px;font-size:12px}.x-kwm .mg-note b svg{width:14px;height:14px;color:var(--acc)}@keyframes xkwmNote{0%,6%{opacity:0;transform:translateY(-8px)}12%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-8px)}}.x-kwm .mg-mock__peb{position:absolute;left:calc(50% - 560px);bottom:40px;animation:xkwmBob 5s ease-in-out infinite}@media (max-width:860px){.x-kwm .mg-mock{padding:8px 14px 44px}.x-kwm .mg-win__body{grid-template-columns:1fr;height:290px}.x-kwm .mg-side{display:none}.x-kwm .mg-board{grid-template-columns:repeat(2,minmax(0,1fr))}.x-kwm .mg-col:nth-child(n+3){display:none}.x-kwm .mg-note{display:none}.x-kwm .mg-mock__peb{display:none}.x-kwm .mg-win__tab{margin-left:12px}
}.x-kwm .mg-wrap{width:100%}.x-kwm .mg-mock{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}.x-kwm .mg-mock__peb{left:16px}(root) => {
const el = (root.matches && root.matches('.mg-mock')) ? root : root.querySelector('.mg-mock');
if (!el) return;
const lists = [...el.querySelectorAll('.mg-col__l')];
const iv = setInterval(() => {
const moves = [];
for (let c = lists.length - 2; c >= 0; c--) { const card = lists[c].firstElementChild; if (card) moves.push([card, lists[c + 1]]); }
const back = lists[lists.length - 1].lastElementChild;
moves.forEach(([card, to]) => { card.classList.remove('is-new'); void card.offsetWidth; to.insertBefore(card, to.firstElementChild); card.classList.add('is-new'); });
if (back) { back.classList.remove('is-new'); lists[0].appendChild(back); }
}, 3200);
return () => clearInterval(iv);
…Subscribe to Builder to see the full source.See pricing