Skip to content

Commit 044f757

Browse files
rmdevproclaude
andcommitted
Replace layout 03 with layout 04 (banner + card grid) at production
Right pick this time — banner + card grid was the layout we'd been iterating on. Folds in the three pending edits as well: - Closing tagline reads "...an agent-teaming framework, built on 3 key facts." and uses .tagline class so it matches the opening tagline's font - Removed "Workbench's value proposition is based on 3 key facts" heading - Removed the facts-block background, border, and top padding so the facts list flows directly out of the hero (no visible boundary) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 674b8c5 commit 044f757

1 file changed

Lines changed: 51 additions & 62 deletions

File tree

open-source/blueprint-agentic-workbench.html

Lines changed: 51 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,40 @@
88
<link rel="icon" href="../assets/logos/favicon.ico">
99
<link rel="stylesheet" href="../css/style.css">
1010
<style>
11-
.product-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }
11+
.product-hero { padding-block: clamp(2rem, 4vw, 3.5rem) 0; }
1212
.product-hero .back { font-family: var(--mono); font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.02em; margin-bottom: 1.25rem; display: inline-block; }
13-
.product-hero .back:hover { color: var(--accent); }
1413
.product-hero .kicker { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 0.6rem; }
15-
.product-hero h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.25rem; max-width: 16ch; }
16-
.product-hero .tagline { font-size: 1.2rem; line-height: 1.45; color: var(--text); max-width: 60ch; margin-bottom: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
17-
.product-hero .sub { font-size: 1rem; color: var(--text-soft); max-width: 60ch; margin-bottom: 0.75rem; }
18-
.product-hero .principles { font-size: 1rem; color: var(--text-soft); max-width: 60ch; margin: 0 0 1.5rem 1.5rem; line-height: 1.55; }
19-
.product-hero .principles li { margin-bottom: 0.4rem; padding-left: 0.2rem; }
20-
.product-hero .principles ul { list-style: disc; margin: 0.4rem 0 0.5rem 1.5rem; padding-left: 0; font-size: 0.95rem; }
21-
.product-hero .principles ul li { margin-bottom: 0.3rem; padding-left: 0.2rem; }
14+
.product-hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.25rem; }
15+
.product-hero .tagline { font-size: 1.2rem; line-height: 1.45; color: var(--text); margin-bottom: 1.25rem; font-weight: 500; letter-spacing: -0.01em; max-width: none; }
16+
.product-hero .sub { font-size: 1rem; color: var(--text-soft); margin-bottom: 0.75rem; max-width: none; }
2217

23-
.zone { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
24-
.zone .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
25-
.zone.flip .row { direction: rtl; }
26-
.zone.flip .row > * { direction: ltr; }
18+
.facts-block { padding-block: 0 clamp(2rem, 4vw, 3rem); }
19+
.facts-list { font-size: 1rem; color: var(--text-soft); line-height: 1.55; margin: 0 0 0 1.5rem; max-width: none; }
20+
.facts-list li { margin-bottom: 0.4rem; padding-left: 0.25rem; }
21+
.facts-list ul { list-style: disc; margin: 0.4rem 0 0.5rem 1.5rem; padding-left: 0; font-size: 0.95rem; }
22+
.facts-list ul li { margin-bottom: 0.3rem; padding-left: 0.25rem; }
2723

28-
.zone .frame { border: 1px solid var(--rule); background: white; box-shadow: 0 20px 50px -20px rgba(9,31,56,0.2); overflow: hidden; }
29-
.zone .frame img { width: 100%; display: block; }
30-
.zone .cap { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.78rem; color: var(--text-soft); display: flex; justify-content: space-between; }
24+
.banner { padding-block: clamp(2rem, 4vw, 3rem); }
25+
.banner .frame { border: 1px solid var(--rule); overflow: hidden; background: white; box-shadow: 0 20px 50px -20px rgba(9,31,56,0.2); }
26+
.banner .frame img { width: 100%; display: block; }
3127

32-
.zone .text .lbl { font-family: var(--mono); font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.02em; margin-bottom: 0.5rem; }
33-
.zone .text h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
34-
.zone .text p { font-size: 1rem; color: var(--text-soft); max-width: 50ch; margin-bottom: 0.75rem; line-height: 1.55; }
35-
.zone .text ul { font-size: 1rem; color: var(--text-soft); margin: 0.25rem 0 0 1.25rem; }
36-
.zone .text ul li { margin-bottom: 0.4rem; }
37-
.zone .text ul li b { color: var(--text); font-weight: 600; }
28+
.framing-strip { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 1rem; }
29+
.framing-strip h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
30+
.framing-strip p { font-size: 1rem; color: var(--text-soft); margin-bottom: 0.75rem; line-height: 1.55; max-width: none; }
3831

39-
.zone.pair .row { grid-template-columns: 1fr 1fr; }
32+
.categories-block { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-top: 0; }
33+
.categories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
34+
.feature-card { padding: 2rem; border: 1px solid var(--rule); background: white; }
35+
.feature-card h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
36+
.feature-card p { font-size: 1rem; color: var(--text-soft); max-width: 50ch; margin-bottom: 0.6rem; line-height: 1.55; }
37+
.feature-card ul { font-size: 1rem; color: var(--text-soft); margin: 0.25rem 0 0 1.25rem; }
38+
.feature-card ul li { margin-bottom: 0.4rem; }
39+
.feature-card ul li b { color: var(--text); font-weight: 600; }
40+
41+
section + section { border-top: 0; }
4042

4143
@media (max-width: 880px) {
42-
.zone .row { grid-template-columns: 1fr; }
43-
.zone.flip .row { direction: ltr; }
44+
.categories-grid { grid-template-columns: 1fr; }
4445
}
4546
</style>
4647
</head>
@@ -67,8 +68,13 @@
6768
<div class="kicker">§ Custom Software</div>
6869
<h1>Blueprint Agentic Workbench.</h1>
6970
<p class="tagline">An agent that can call sub-agents is powerful; teams of agents collaborating are more powerful. Workbench provides an organizing framework that allows native agentic tools like Claude Code or ChatGPT's Codex to team together without sacrificing any part of the native tools, while bolstering their capabilities with add-on tools.</p>
70-
<p class="sub">Workbench's value proposition is based on 3 key facts:</p>
71-
<ol class="principles">
71+
<p class="tagline">Workbench is not a coding tool &mdash; it's an agent-teaming framework, built on 3 key facts.</p>
72+
</div>
73+
</section>
74+
75+
<section class="facts-block">
76+
<div class="wrap">
77+
<ol class="facts-list">
7278
<li>Teams of agents are far more powerful than agents with sub-agents.</li>
7379
<li>There are massive advantages to sticking with provider native agentic tools.
7480
<ul>
@@ -80,51 +86,35 @@ <h1>Blueprint Agentic Workbench.</h1>
8086
</li>
8187
<li>Using a variety of models is crucial because different models both think differently and are good at different things. This is true of models both within a given provider and between providers.</li>
8288
</ol>
83-
<p class="tagline">Workbench is not a coding tool &mdash; it's an agent-teaming framework, capable of nearly anything computer technology can do. It assembles the best agentic tools from the top AI providers into a community of agents that's more than the sum of its parts.</p>
8489
</div>
8590
</section>
8691

87-
<section class="zone">
92+
<section class="banner">
8893
<div class="wrap">
89-
<div class="row">
90-
<div class="visual">
91-
<div class="frame">
92-
<img src="../assets/workbench-preview.png" alt="Blueprint Agentic Workbench interface">
93-
</div>
94-
<div class="cap"><span>Fig. 01 — Blueprint Agentic Workbench</span><span>Single operator · Self-hosted</span></div>
95-
</div>
96-
<div class="text">
97-
<div class="lbl">§ Community of agents</div>
98-
<h2>A community of agents.</h2>
99-
<p>Today's provider-native tools provide a powerful construct: full agents with sub-agents. If a full agent is an employee, sub-agents are interns.</p>
100-
<p>The Workbench enables higher-order agentics &mdash; full agents communicating and coordinating as teams, and teams in turn coordinating as a community. The structure mimics human organizational hierarchies for essentially the same reasons.</p>
101-
</div>
102-
</div>
94+
<div class="frame"><img src="../assets/workbench-preview.png" alt="Blueprint Agentic Workbench interface"></div>
10395
</div>
10496
</section>
10597

106-
<section class="zone flip pair">
98+
<section class="framing-strip">
10799
<div class="wrap">
108-
<div class="row">
109-
<div class="text">
110-
<div class="lbl">§ 01 · Parallel work</div>
100+
<h2>A community of agents.</h2>
101+
<p>Today's provider-native tools provide a powerful construct: full agents with sub-agents. If a full agent is an employee, sub-agents are interns. The Workbench enables higher-order agentics &mdash; full agents communicating and coordinating as teams, and teams in turn coordinating as a community.</p>
102+
<p>The structure mimics human organizational hierarchies for essentially the same reasons.</p>
103+
</div>
104+
</section>
105+
106+
<section class="categories-block">
107+
<div class="wrap">
108+
<div class="categories-grid">
109+
<div class="feature-card">
111110
<h2>Parallel work.</h2>
112111
<p>Each agent focuses on its own tasks while the other agents focus on theirs, each with its own automation and triggers &mdash; also true at the team level.</p>
113112
</div>
114-
<div class="text">
115-
<div class="lbl">§ 02 · Coordination</div>
113+
<div class="feature-card">
116114
<h2>Coordination.</h2>
117115
<p>Each agent can coordinate its work and share information with other agents &mdash; and so with teams. Your Controller can direct your Analyst. Your Marketing team can work with your Finance team.</p>
118116
</div>
119-
</div>
120-
</div>
121-
</section>
122-
123-
<section class="zone pair">
124-
<div class="wrap">
125-
<div class="row">
126-
<div class="text">
127-
<div class="lbl">§ 03 · Specialization</div>
117+
<div class="feature-card">
128118
<h2>Specialization.</h2>
129119
<ul>
130120
<li>Each agent runs on the model best suited to its specific work.</li>
@@ -133,13 +123,12 @@ <h2>Specialization.</h2>
133123
<li>Each agent can have its own rules, skills, tools, and access levels specific to its domain &mdash; also true at the team level.</li>
134124
</ul>
135125
</div>
136-
<div class="text">
137-
<div class="lbl">§ 04 · Checks and balances</div>
126+
<div class="feature-card">
138127
<h2>Checks and balances.</h2>
139128
<p>Complementary team members assist each other with better decision-making.</p>
140129
<ul>
141-
<li><b>Rule adherence.</b> Higher-reasoning models vs. lower-reasoning models. Reasoning models are terrible at following rules &mdash; they often decide they know better and sabotage critical rule-following. A less-reasoning model is often the right choice for rule-following work, and sometimes the right manager <em>for</em> a reasoning model.</li>
142-
<li><b>Quorum-based decisions.</b> Cognitive diversity from a cross-model quorum &mdash; prevents hallucination, surfaces diverse perspectives, and forces consideration of edge cases. Quorums may also include models with diverse reasoning levels, combining the powers of both high-reasoning and high-rule-following models for better decision-making.</li>
130+
<li><b>Rule adherence.</b> Reasoning models are terrible at following rules &mdash; they often decide they know better and sabotage critical rule-following. A less-reasoning model is often the right choice for rule-following work, and sometimes the right manager <em>for</em> a reasoning model.</li>
131+
<li><b>Quorum-based decisions.</b> Cognitive diversity from a cross-model quorum &mdash; prevents hallucination, surfaces diverse perspectives, and forces consideration of edge cases. Quorums may also include models with diverse reasoning levels.</li>
143132
</ul>
144133
</div>
145134
</div>

0 commit comments

Comments
 (0)