Skip to content

Commit 8516b20

Browse files
lindoeliolindoelio
committed
feat(landing-page): improve workflow visualization and add responsive design
- Update 'See it in Action' section to show Spec-Driven as agent mode with explicit user approval at each phase - Add CSS custom properties for consistent typography scale - Implement responsive design for mobile and tablet breakpoints - Improve overall visual polish and spacing
1 parent 7f55d60 commit 8516b20

2 files changed

Lines changed: 467 additions & 99 deletions

File tree

‎packages/landing-page/index.html‎

Lines changed: 104 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@
1919
<body>
2020
<div id="app">
2121
<!-- Navbar -->
22-
<nav
23-
style="position: absolute; top: 0; left: 0; right: 0; padding: 2rem; z-index: 100; display: flex; justify-content: space-between; align-items: center; max-width: var(--spacing-container); margin: 0 auto;">
24-
<div style="font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem;">Spec-Driven Steroids 💪</div>
25-
<div style="display: flex; gap: 1rem;">
22+
<nav class="navbar">
23+
<div class="nav-brand">Spec-Driven Steroids 💪</div>
24+
<div class="nav-links">
2625
<a href="https://github.com/lindoelio/spec-driven-steroids" target="_blank" class="text-muted">GitHub</a>
2726
<a href="#install" class="text-muted">Install</a>
2827
</div>
@@ -31,15 +30,14 @@
3130
<!-- Hero Section -->
3231
<section class="hero container">
3332
<div class="hero-content">
34-
<h1 style="margin-bottom: 1.5rem;">
33+
<h1 style="margin-bottom: 1.25rem;">
3534
Inject <span class="text-gradient">Discipline</span> into<br>AI Coding
3635
</h1>
37-
<p class="text-muted"
38-
style="font-size: 1.25rem; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
36+
<p class="hero-subtitle">
3937
Rigorous Spec-Driven Development (SDD) workflows injected directly into your favorite AI tools. No new UI.
4038
Just standard markdown.
4139
</p>
42-
<div style="display: flex; gap: 1rem; justify-content: center;">
40+
<div class="hero-buttons">
4341
<a href="#demo" class="btn btn-primary">See it in Action</a>
4442
<a href="https://github.com/lindoelio/spec-driven-steroids" target="_blank" class="btn btn-secondary">View
4543
Source</a>
@@ -51,33 +49,30 @@ <h1 style="margin-bottom: 1.5rem;">
5149
<section class="section container">
5250
<div class="grid grid-2" style="align-items: center; gap: 4rem;">
5351
<div>
54-
<h2 style="text-align: left; margin-bottom: 1rem;">Stop the <span class="text-gradient">Chaos</span></h2>
55-
<p class="text-muted" style="margin-bottom: 2rem;">
52+
<h2 class="text-left">Stop the <span class="text-gradient">Chaos</span></h2>
53+
<p class="text-muted" style="margin-bottom: 1.5rem;">
5654
AI Agents are powerful but chaotic. They hallucinate, lose context, and write spaghetti code.
5755
<strong>Spec-Driven Steroids</strong> forces them to think before they code.
5856
</p>
59-
<ul style="list-style: none; display: grid; gap: 1rem;">
60-
<li style="display: flex; gap: 0.5rem; align-items: center;">❌ <span class="text-muted">No more "vibe
61-
coding"</span></li>
62-
<li style="display: flex; gap: 0.5rem; align-items: center;">❌ <span class="text-muted">No more
63-
unmaintainable messes</span></li>
64-
<li style="display: flex; gap: 0.5rem; align-items: center;">✅ <span>Requirements (EARS) first</span></li>
65-
<li style="display: flex; gap: 0.5rem; align-items: center;">✅ <span>Technical Design (Mermaid)
66-
second</span></li>
57+
<ul class="feature-list">
58+
<li><span class="icon-x">❌</span> <span class="text-muted">No more "vibe coding"</span></li>
59+
<li><span class="icon-x">❌</span> <span class="text-muted">No more unmaintainable messes</span></li>
60+
<li><span class="icon-check">✅</span> <span>Requirements (EARS) first</span></li>
61+
<li><span class="icon-check">✅</span> <span>Technical Design (Mermaid) second</span></li>
6762
</ul>
6863
</div>
69-
<div class="card" style="font-family: monospace; font-size: 0.9rem; color: #a5b4fc; line-height: 1.6;">
70-
<div style="color: var(--color-text-muted); margin-bottom: 1rem;">// The Workflow</div>
64+
<div class="card code-card">
65+
<div class="code-comment">// The Workflow</div>
7166
<div>
72-
<span style="color: var(--color-secondary);">PLANNING</span><br>
67+
<span class="code-phase" style="color: var(--color-secondary);">PLANNING</span><br>
7368
1. Requirements.md (EARS)<br>
7469
2. Design.md (Mermaid)<br>
7570
3. Tasks.md (Atomic)<br>
7671
<br>
77-
<span style="color: var(--color-primary);">EXECUTION</span><br>
72+
<span class="code-phase" style="color: var(--color-primary);">EXECUTION</span><br>
7873
4. Code Implementation<br>
7974
<br>
80-
<span style="color: var(--color-accent);">VERIFICATION</span><br>
75+
<span class="code-phase" style="color: var(--color-accent);">VERIFICATION</span><br>
8176
5. Automated Tests
8277
</div>
8378
</div>
@@ -87,33 +82,30 @@ <h2 style="text-align: left; margin-bottom: 1rem;">Stop the <span class="text-gr
8782
<!-- Why Spec-Driven Steroids? -->
8883
<section class="section container">
8984
<div class="grid grid-2" style="align-items: center; gap: 4rem;">
90-
<div class="card" style="border-color: var(--color-primary);">
91-
<div style="font-size: 4rem; margin-bottom: 1rem;">🤝</div>
85+
<div class="card card-highlight">
86+
<div class="card-emoji">🤝</div>
9287
<h3>Human &lt;-&gt; Agent</h3>
9388
<p class="text-muted">
9489
Most tools try to automate <em>everything</em>. We believe in <strong>Human-in-the-Loop</strong>.
9590
You provide the intent (EARS), the Agent provides the draft, you review (Mermaid), then the Agent builds.
9691
</p>
9792
</div>
9893
<div>
99-
<h2 style="text-align: left; margin-bottom: 1rem;">Flexible like <span
100-
class="text-muted">SpecKit</span>.<br>Simple like <span class="text-gradient">Kiro</span>.</h2>
101-
<p class="text-muted" style="margin-bottom: 2rem;">
94+
<h2 class="text-left">Flexible like <span class="text-muted">SpecKit</span>.<br>Simple like <span class="text-gradient">Kiro</span>.</h2>
95+
<p class="text-muted" style="margin-bottom: 1.5rem;">
10296
We stripped away the complexity of enterprise tools and kept the rigor.
10397
</p>
104-
<ul style="list-style: none; display: grid; gap: 1rem;">
105-
<li style="display: flex; gap: 0.5rem; align-items: start;">
106-
<span style="color: var(--color-primary); font-weight: bold;">1.</span>
107-
<span class="text-muted"><strong>Interchangeable Guidelines</strong>: Swap out rule sets for different
108-
projects.</span>
98+
<ul class="feature-list numbered">
99+
<li>
100+
<span class="number">1</span>
101+
<span class="text-muted"><strong>Interchangeable Guidelines</strong>: Swap out rule sets for different projects.</span>
109102
</li>
110-
<li style="display: flex; gap: 0.5rem; align-items: start;">
111-
<span style="color: var(--color-primary); font-weight: bold;">2.</span>
112-
<span class="text-muted"><strong>Platform Agnostic</strong>: Works in VS Code, JetBrains, or bespoke agent
113-
runtimes.</span>
103+
<li>
104+
<span class="number">2</span>
105+
<span class="text-muted"><strong>Platform Agnostic</strong>: Works in VS Code, JetBrains, or bespoke agent runtimes.</span>
114106
</li>
115-
<li style="display: flex; gap: 0.5rem; align-items: start;">
116-
<span style="color: var(--color-primary); font-weight: bold;">3.</span>
107+
<li>
108+
<span class="number">3</span>
117109
<span class="text-muted"><strong>Zero Lock-in</strong>: It's just Markdown files in your repo.</span>
118110
</li>
119111
</ul>
@@ -123,133 +115,150 @@ <h2 style="text-align: left; margin-bottom: 1rem;">Flexible like <span
123115

124116
<!-- See it in Action (Copilot Flow) -->
125117
<section id="demo" class="section container">
126-
<h2 style="text-align: center; margin-bottom: 3rem;">See it in <span class="text-gradient">Action</span></h2>
118+
<h2 style="text-align: center; margin-bottom: 1rem;">See it in <span class="text-gradient">Action</span></h2>
119+
<p class="text-center text-muted" style="margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto;">
120+
Human-in-the-Loop at every phase. You review, you approve, then the agent builds.
121+
</p>
127122
<div
128123
style="max-width: 800px; margin: 0 auto; background: #0f172a; border-radius: 1rem; border: 1px solid var(--color-border); overflow: hidden;">
129124
<!-- Window Controls -->
130-
<div style="background: rgba(255,255,255,0.05); padding: 0.75rem 1rem; display: flex; gap: 0.5rem;">
125+
<div style="background: rgba(255,255,255,0.05); padding: 0.75rem 1rem; display: flex; gap: 0.5rem; align-items: center;">
131126
<div style="width: 12px; height: 12px; border-radius: 50%; background: #ef4444;"></div>
132127
<div style="width: 12px; height: 12px; border-radius: 50%; background: #eab308;"></div>
133128
<div style="width: 12px; height: 12px; border-radius: 50%; background: #22c55e;"></div>
134-
<div style="margin-left: auto; color: var(--color-text-muted); font-size: 0.8rem; font-family: monospace;">
135-
GitHub Copilot Chat</div>
129+
<div style="margin-left: auto; color: var(--color-text-muted); font-size: 0.75rem; font-family: monospace;">
130+
GitHub Copilot Chat — <span style="color: var(--color-primary);">Spec-Driven Mode</span></div>
136131
</div>
137132
<!-- Chat Interface -->
138133
<div
139-
style="padding: 2rem; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; gap: 1.5rem;">
134+
style="padding: 1.5rem; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; gap: 1rem;">
140135

141136
<!-- User Msg -->
142-
<div
143-
style="align-self: flex-end; background: var(--color-primary); color: white; padding: 0.75rem 1.25rem; border-radius: 1rem 1rem 0 1rem; max-width: 80%;">
144-
@spec-driven I want to add a rate limiter to my API.
137+
<div class="chat-msg user">
138+
I want to add a rate limiter to my API.
145139
</div>
146140

147-
<!-- Agent Msg -->
148-
<div
149-
style="align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--color-border); color: var(--color-text-main); padding: 1rem; border-radius: 1rem 1rem 1rem 0; max-width: 90%;">
150-
<p style="margin-bottom: 0.5rem;"><strong>Spec-Driven Agent</strong></p>
151-
<p style="color: var(--color-text-muted);">I've created a plan for <code>specs/changes/rate-limiter</code>:
152-
</p>
153-
<ul style="margin: 0.5rem 0 0.5rem 1.5rem; color: var(--color-text-muted);">
154-
<li>CREATED <code>requirements.md</code> (EARS format)</li>
155-
<li>CREATED <code>design.md</code> (Mermaid diagram)</li>
156-
<li>CREATED <code>tasks.md</code> (Atomic breakdown)</li>
157-
</ul>
158-
<p style="color: var(--color-text-muted);">Please review the design. Once approved, you can ask Copilot to
159-
implement it.</p>
141+
<!-- Agent Msg - Phase 1 -->
142+
<div class="chat-msg agent">
143+
<div class="chat-phase"><span class="phase-badge">PHASE 1</span> Requirements</div>
144+
<p>I've drafted <code>specs/changes/rate-limiter/requirements.md</code> using EARS format.</p>
145+
<p class="text-muted" style="font-size: 0.875rem;">Please review and approve before I proceed to design.</p>
160146
</div>
161147

162-
<!-- User Msg -->
163-
<div
164-
style="align-self: flex-end; background: var(--color-primary); color: white; padding: 0.75rem 1.25rem; border-radius: 1rem 1rem 0 1rem; max-width: 80%;">
165-
@copilot Implement the rate limiter following the tasks in specs/changes/rate-limiter/tasks.md.
148+
<!-- User Msg - Approval -->
149+
<div class="chat-msg user">
150+
Approved. Continue to design.
151+
</div>
152+
153+
<!-- Agent Msg - Phase 2 -->
154+
<div class="chat-msg agent">
155+
<div class="chat-phase"><span class="phase-badge">PHASE 2</span> Design</div>
156+
<p>Created <code>design.md</code> with Mermaid architecture diagrams.</p>
157+
<p class="text-muted" style="font-size: 0.875rem;">Review the technical design and approve to continue.</p>
158+
</div>
159+
160+
<!-- User Msg - Approval -->
161+
<div class="chat-msg user">
162+
Looks good. Generate tasks.
163+
</div>
164+
165+
<!-- Agent Msg - Phase 3 -->
166+
<div class="chat-msg agent">
167+
<div class="chat-phase"><span class="phase-badge">PHASE 3</span> Tasks</div>
168+
<p>Generated atomic tasks in <code>tasks.md</code>.</p>
169+
<p class="text-muted" style="font-size: 0.875rem;">Ready to implement when you approve.</p>
170+
</div>
171+
172+
<!-- User Msg - Final Approval -->
173+
<div class="chat-msg user">
174+
Approved. Implement all tasks.
175+
</div>
176+
177+
<!-- Agent Msg - Implementation -->
178+
<div class="chat-msg agent" style="border-color: var(--color-primary);">
179+
<div class="chat-phase"><span class="phase-badge" style="background: var(--color-primary);">EXECUTE</span> Implementation</div>
180+
<p style="color: var(--color-primary);">Implementing 12 atomic tasks...</p>
166181
</div>
167182

168183
</div>
169184
</div>
170-
<p class="text-center text-muted" style="margin-top: 2rem;">
171-
It's that simple. <a href="https://github.com/lindoelio/spec-driven-steroids" target="_blank"
172-
style="text-decoration: underline; color: var(--color-primary);">Read the README</a> for more details.
185+
<p class="text-center text-muted" style="margin-top: 2rem; font-size: 0.9rem;">
186+
Each phase requires your explicit approval. No surprises. <a href="https://github.com/lindoelio/spec-driven-steroids" target="_blank"
187+
style="text-decoration: underline; color: var(--color-primary);">Read the docs</a> for more.
173188
</p>
174189
</section>
175190

176191
<!-- Core Pillars (Grid 3) -->
177192
<section class="section container">
178-
<h2 style="margin-bottom: 4rem;">The Triad of <span class="text-gradient">Control</span></h2>
193+
<h2>The Triad of <span class="text-gradient">Control</span></h2>
179194
<div class="grid grid-3">
180-
<!-- Pillar 1 -->
181195
<div class="card">
182196
<div class="icon-box">🧠</div>
183197
<h3>The Brain</h3>
184-
<p class="text-muted" style="margin-top: 0.5rem;">
198+
<p class="text-muted">
185199
Universal Spec Standards. Markdown templates that define the shape of rigorous software engineering.
186200
</p>
187201
</div>
188-
<!-- Pillar 2 -->
189202
<div class="card">
190203
<div class="icon-box">🛡️</div>
191204
<h3>The Enforcer</h3>
192-
<p class="text-muted" style="margin-top: 0.5rem;">
193-
MCP Server running in the background. Validates every spec file against strict schemas before code is
194-
written.
205+
<p class="text-muted">
206+
MCP Server running in the background. Validates every spec file against strict schemas before code is written.
195207
</p>
196208
</div>
197-
<!-- Pillar 3 -->
198209
<div class="card">
199210
<div class="icon-box">💉</div>
200211
<h3>The Injector</h3>
201-
<p class="text-muted" style="margin-top: 0.5rem;">
212+
<p class="text-muted">
202213
CLI tool that surgically injects standards into your existing projects and AI agent configurations.
203214
</p>
204215
</div>
205216
</div>
206217
</section>
207218

208219
<!-- Platforms -->
209-
<section class="section container" style="text-align: center;">
220+
<section class="section container text-center">
210221
<h2>Native Integration</h2>
211-
<p class="text-muted" style="margin-bottom: 3rem;">Works where you work. No new dashboards.</p>
212-
<div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;">
213-
<div class="card" style="min-width: 200px;">GitHub Copilot</div>
214-
<div class="card" style="min-width: 200px;">Google Antigravity</div>
215-
<div class="card" style="min-width: 200px;">OpenCode</div>
216-
<div class="card" style="min-width: 200px; opacity: 0.5;">Claude Code (Soon)</div>
222+
<p class="text-muted section-subtitle">Works where you work. No new dashboards.</p>
223+
<div class="platform-grid">
224+
<div class="card platform-card">GitHub Copilot</div>
225+
<div class="card platform-card">Google Antigravity</div>
226+
<div class="card platform-card">OpenCode</div>
227+
<div class="card platform-card platform-coming">Claude Code <span class="coming-soon">Soon</span></div>
217228
</div>
218229
</section>
219230

220231
<!-- Install -->
221-
<section id="install" class="hero" style="min-height: 50vh;">
232+
<section id="install" class="hero hero-install">
222233
<div class="hero-content">
223234
<h2>Start enforcing <span class="text-gradient">today</span></h2>
224-
<div class="code-block" style="font-size: 1.25rem;">
235+
<div class="code-block">
225236
npm install -g spec-driven-steroids
226237
</div>
227-
<p class="text-muted">
228-
Then run <code
229-
style="color: var(--color-primary); background: rgba(255,255,255,0.1); padding: 0.2rem 0.4rem; border-radius: 4px;">spec-driven-steroids inject</code>
230-
in your project.
238+
<p class="text-muted install-hint">
239+
Then run <code>spec-driven-steroids inject</code> in your project.
231240
</p>
232241
</div>
233242
</section>
234243

235244
<!-- Call to Contribute -->
236245
<section class="section container text-center">
237-
<h2 style="margin-bottom: 1.5rem;">This is just the <span class="text-gradient">beginning</span></h2>
238-
<p class="text-muted" style="max-width: 600px; margin: 0 auto 2.5rem;">
246+
<h2 style="margin-bottom: 1rem;">This is just the <span class="text-gradient">beginning</span></h2>
247+
<p class="text-muted section-subtitle" style="max-width: 600px; margin-left: auto; margin-right: auto;">
239248
We want to bring Spec-Driven Discipline to <strong>every IDE and Agent runtime</strong>.
240249
Whether you use JetBrains, Cursor, or a custom LLM stack - help us build the steroids for it.
241250
</p>
242251
<a href="https://github.com/lindoelio/spec-driven-steroids/blob/main/CONTRIBUTING.md" target="_blank"
243-
class="btn btn-secondary" style="border-color: var(--color-primary);">
252+
class="btn btn-secondary btn-outline-primary">
244253
Start Contributing &rarr;
245254
</a>
246255
</section>
247256

248257
<!-- Footer -->
249-
<footer style="border-top: 1px solid var(--color-border); padding: 4rem 0; margin-top: 4rem;">
258+
<footer class="footer">
250259
<div class="container text-center text-muted">
251-
<p style="margin-bottom: 1rem;">&copy; 2026 Spec-Driven Steroids. Released under MIT License.</p>
252-
<div style="display: flex; justify-content: center; gap: 2rem;">
260+
<p class="footer-copy">&copy; 2026 Spec-Driven Steroids. Released under MIT License.</p>
261+
<div class="footer-links">
253262
<a href="https://github.com/lindoelio/spec-driven-steroids" target="_blank">GitHub</a>
254263
<a href="https://github.com/lindoelio/spec-driven-steroids/blob/main/LICENSE" target="_blank">License</a>
255264
</div>

0 commit comments

Comments
 (0)