Skip to content

docs(design): draw the guide page, 1440 and 390 (TASK-757) #3187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lilyshen0722 wants to merge 1 commit into from
Closed

docs(design): draw the guide page, 1440 and 390 (TASK-757) #3187

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 50 additions & 1 deletion docs/design/artboards/d215/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,38 @@
.app.m .composer { margin: 4px 10px 10px; }
.app.m .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app.m .tile { height: 104px; }
/* public pages (guides, landing, legal): one top bar, one reading column, no rail */
.pub { display: flex; flex-direction: column; height: 100%; background: var(--sf); }
.pubbar { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 28px; border-bottom: 1px solid var(--d); }
.pubbar .brand { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--f-display); letter-spacing: -0.03em; }
.pubbar .brand .logo { width: 30px; height: 30px; border-radius: 9px; }
.pubbar .brand .logo svg.i { width: 17px; height: 17px; }
.pubbar .sp { flex: 1; }
.pubbody { flex: 1; min-height: 0; overflow: hidden; padding: 44px 28px 0; }
.art { max-width: 700px; margin: 0 auto; }
.art .eyebrow { font: 500 11.5px/1 var(--f-mono); color: var(--c-text); letter-spacing: .02em; text-transform: uppercase; }
.art h1 { font: 800 40px/1.08 var(--f-display); letter-spacing: -0.035em; margin: 12px 0 14px; text-wrap: balance; }
.art .lede { font-size: 17px; line-height: 27px; color: var(--se); margin: 0; }
.art .by { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font: 500 12px/1 var(--f-mono); color: var(--mu); flex-wrap: wrap; }
.art .toc2 { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; }
.art h2 { font: 700 24px/1.2 var(--f-display); letter-spacing: -0.025em; margin: 36px 0 10px; }
.art p { font-size: 15.5px; line-height: 26px; color: var(--ink2); margin: 0 0 14px; }
.art .faqh { font: 500 11.5px/1 var(--f-mono); color: var(--mu); margin: 40px 4px 8px; display: flex; align-items: center; gap: 8px; }
.art .faq details.disc > summary { grid-template-columns: minmax(0, 1fr) auto; font: 600 14.5px/21px var(--f-body); }
.art .faq details.disc > p { margin: 0; padding: 0 16px 16px; font-size: 14.5px; line-height: 23px; color: var(--se); }
.art .faq details.disc:last-child { border-bottom: 1px solid var(--d); }
.art .cta { margin: 28px 0 0; padding: 24px 26px; border-radius: 14px; background: var(--c-soft); display: grid; gap: 8px; }
.art .cta h2 { margin: 0; font-size: 21px; color: var(--c-text); }
.art .cta p { margin: 0 0 8px; color: var(--ink2); font-size: 14.5px; line-height: 23px; }
.art .cta .cta-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.art .rel { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; }
.app.m .pubbar { height: 52px; padding: 0 12px; }
.app.m .pubbody { padding: 22px 16px 0; }
.app.m .art h1 { font-size: 28px; }
.app.m .art .lede { font-size: 15.5px; line-height: 24px; }
.app.m .art h2 { font-size: 21px; margin-top: 28px; }
.app.m .art p { font-size: 15px; line-height: 24px; }
.app.m .art .cta { padding: 18px; }
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
Expand Down Expand Up @@ -536,7 +568,7 @@ <h1>Same look. <em>Less said.</em></h1>
<li><svg viewBox="0 0 24 24"><use href="#i-grid"/></svg><b>One screen first</b><span>Repeated blocks become a table; rare settings collapse.</span></li>
</ol>
<nav class="toc" aria-label="Surfaces">
<a href="#s-sidebar">Sidebar controls</a><a href="#s-chat">Pod chat</a><a href="#s-board">Task board</a><a href="#s-memory">Memory</a><a href="#s-agent">Agent settings</a><a href="#s-settings">Settings</a><a href="#s-connectors">Connectors</a><a href="#s-dark">Dark mode</a>
<a href="#s-sidebar">Sidebar controls</a><a href="#s-chat">Pod chat</a><a href="#s-board">Task board</a><a href="#s-memory">Memory</a><a href="#s-agent">Agent settings</a><a href="#s-settings">Settings</a><a href="#s-connectors">Connectors</a><a href="#s-guide">Guide page</a><a href="#s-dark">Dark mode</a>
</nav>

<section class="surf" id="s-sidebar">
Expand Down Expand Up @@ -756,6 +788,23 @@ <h1>Same look. <em>Less said.</em></h1>
</div>
</section>

<section class="surf" id="s-guide">
<div class="shead"><h2>Guide page</h2><span class="route">/guides/:guideId</span><div class="nums"><span class="num">visits <b>2,250</b></span><span class="num">questions <b>4 open</b> → <i>1 open</i></span></div></div>
<div class="row1">
<figure><figcaption><b>After · 1440</b><span>top of the page; the column scrolls</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="guide" data-vp="1440" data-state><div class="app d"><div class="pub"><div class="pubbar"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>Commonly</div><span class="sp"></span><button class="b b-g">Sign in</button><button class="b b-s">Get started</button></div><div class="pubbody"><div class="art"><div class="eyebrow">Guide</div><h1>What is a multi-agent collaboration platform?</h1><p class="lede">A shared place where people and agents make decisions, divide work, keep context and hand off results.</p><div class="by"><span>By Commonly</span><span>·</span><span>Reviewed by Commonly SEO team</span><span>·</span><span>Updated Aug 30, 2026</span></div><div class="toc2"><span class="chip chip--btn">Collaboration vs orchestration</span><span class="chip chip--btn">What it needs to do</span><span class="chip chip--btn">How Commonly works</span><span class="chip chip--btn">Evaluating a platform</span></div><h2>Collaboration is different from orchestration</h2><p>Orchestration is how a system routes work among agents, such as a supervisor handing a fixed sequence to specialists. Collaboration is the environment around that work: shared context, decisions, owners and handoffs.</p><h2>What a platform needs to do</h2><p>Several agents in separate chat windows can speed up research, but it is not a team. Someone still copies requirements, decides who owns the next step and recovers context after a session ends.</p><div class="faqh">Questions</div><div class="faq"><details class="disc" open><summary>Is a multi-agent collaboration platform the same as an agent framework?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary><p>No. An agent framework generally focuses on how an agent is built or orchestrated. A multi-agent collaboration platform focuses on the shared environment where people and agents coordinate.</p></details><details class="disc"><summary>Can I use Claude Code and Codex in the same team?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc"><summary>How do agents share context?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc"><summary>Do I have to host the agents on Commonly?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details></div><div class="cta"><h2>Build a team, not a pile of chats</h2><p>The point is not to collect more assistants. It is a team where people and agents decide, own work, keep context and hand off results.</p><div class="cta-acts"><button class="b b-c">Create a workspace<svg class="i" viewBox="0 0 24 24"><use href="#i-chevr"/></svg></button><button class="b b-s">Explore Commonly</button></div></div><div class="rel"><button class="b b-g b-sm">AI agent workspaces</button><button class="b b-g b-sm">Agent task management</button><button class="b b-g b-sm">Claude Code and Codex in one workspace</button></div></div></div></div></div></div></figure>
</div>
<div class="row2">
<figure><figcaption><b>After · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="guide" data-vp="390" data-state><div class="app m"><div class="pub"><div class="pubbar"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>Commonly</div><span class="sp"></span><button class="b b-s b-sm">Get started</button></div><div class="pubbody"><div class="art"><div class="eyebrow">Guide</div><h1>What is a multi-agent collaboration platform?</h1><p class="lede">A shared place where people and agents make decisions, divide work, keep context and hand off results.</p><div class="by"><span>By Commonly</span><span>·</span><span>Reviewed by Commonly SEO team</span><span>·</span><span>Updated Aug 30, 2026</span></div><h2>Collaboration is different from orchestration</h2><p>Orchestration is how a system routes work among agents, such as a supervisor handing a fixed sequence to specialists. Collaboration is the environment around that work: shared context, decisions, owners and handoffs.</p><div class="faqh">Questions</div><div class="faq"><details class="disc" open><summary>Is a multi-agent collaboration platform the same as an agent framework?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary><p>No. An agent framework generally focuses on how an agent is built or orchestrated. A multi-agent collaboration platform focuses on the shared environment where people and agents coordinate.</p></details><details class="disc"><summary>Can I use Claude Code and Codex in the same team?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc"><summary>How do agents share context?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc"><summary>Do I have to host the agents on Commonly?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details></div><div class="cta"><h2>Build a team, not a pile of chats</h2><p>The point is not to collect more assistants. It is a team where people and agents decide, own work, keep context and hand off results.</p><div class="cta-acts"><button class="b b-c">Create a workspace<svg class="i" viewBox="0 0 24 24"><use href="#i-chevr"/></svg></button><button class="b b-s">Explore Commonly</button></div></div></div></div></div></div></div></figure>
<div class="notes"><ul><li><b>One reading column,</b> 700px, on the product's white pane. The top bar is the only chrome: brand left, Sign in and Get started right.</li><li><b>The title block folds to one line of provenance.</b> Author, reviewer and update date stay; the published date moves to the page's structured data.</li><li><b>Sections are headings you can jump to.</b> A chip row lists the first four; the rest are reached by scrolling.</li><li><b>Questions are disclosures,</b> closed, one open at a time. The call to action is the one cobalt block on the page.</li></ul></div>
</div>
<div class="row1" style="margin-top:18px">
<figure><figcaption><b>After · 1440, foot of the page</b><span>questions, the one cobalt block, related reading</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="guide" data-vp="1440" data-state="foot"><div class="app d"><div class="pub"><div class="pubbar"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>Commonly</div><span class="sp"></span><button class="b b-g">Sign in</button><button class="b b-s">Get started</button></div><div class="pubbody"><div class="art"><div class="faqh" style="margin-top:0">Questions</div><div class="faq"><details class="disc"><summary>Is a multi-agent collaboration platform the same as an agent framework?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc"><summary>Can I use Claude Code and Codex in the same team?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc" open><summary>How do agents share context?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary><p>They share the pod’s conversation, task list, files and memory, within the access granted to each installation.</p></details><details class="disc"><summary>Do I have to host the agents on Commonly?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details></div><div class="cta"><h2>Build a team, not a pile of chats</h2><p>The point is not to collect more assistants. It is a team where people and agents decide, own work, keep context and hand off results.</p><div class="cta-acts"><button class="b b-c">Create a workspace<svg class="i" viewBox="0 0 24 24"><use href="#i-chevr"/></svg></button><button class="b b-s">Explore Commonly</button></div></div><div class="rel"><button class="b b-g b-sm">AI agent workspaces</button><button class="b b-g b-sm">Agent task management</button><button class="b b-g b-sm">Claude Code and Codex in one workspace</button></div></div></div></div></div></div></figure>
</div>
<div class="row2" style="margin-top:18px">
<figure><figcaption><b>After · 390, foot of the page</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="guide" data-vp="390" data-state="foot"><div class="app m"><div class="pub"><div class="pubbar"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>Commonly</div><span class="sp"></span><button class="b b-s b-sm">Get started</button></div><div class="pubbody"><div class="art"><div class="faqh" style="margin-top:0">Questions</div><div class="faq"><details class="disc"><summary>Is a multi-agent collaboration platform the same as an agent framework?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc"><summary>Can I use Claude Code and Codex in the same team?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details><details class="disc" open><summary>How do agents share context?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary><p>They share the pod’s conversation, task list, files and memory, within the access granted to each installation.</p></details><details class="disc"><summary>Do I have to host the agents on Commonly?<svg class="i chev" viewBox="0 0 24 24"><use href="#i-chev"/></svg></summary></details></div><div class="cta"><h2>Build a team, not a pile of chats</h2><p>The point is not to collect more assistants. It is a team where people and agents decide, own work, keep context and hand off results.</p><div class="cta-acts"><button class="b b-c">Create a workspace<svg class="i" viewBox="0 0 24 24"><use href="#i-chevr"/></svg></button><button class="b b-s">Explore Commonly</button></div></div></div></div></div></div></div></figure>
</div>
</section>

<section class="surf" id="s-dark">
<div class="shead"><h2>Dark mode</h2><span class="route">one dark value per token</span></div>
<div class="dm">
Expand Down
Loading