diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index 40d8ca6..7cc4f5c 100644 --- a/docs/assets/css/styles.css +++ b/docs/assets/css/styles.css @@ -68,6 +68,11 @@ body { min-height: 100vh; } +a { + color: var(--accent-green); + text-decoration: none; +} + /* Code styling - applies to all code elements, but not pre elements */ code:not(pre code) { background-color: rgba(137, 223, 0, 0.15); @@ -476,6 +481,47 @@ nav { font-weight: 600; } +.before-scenario .phase-detail { + margin-bottom: 1.5rem; + padding: 2rem; + background-color: var(--box-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} + +.before-scenario .phase-detail:nth-of-type(even) { + background-color: rgba(137, 223, 0, 0.06); + border-color: rgba(137, 223, 0, 0.18); +} + +.before-scenario .phase-detail:hover { + transform: translateY(-2px); + border-color: var(--accent-green); + box-shadow: 0 8px 24px rgba(137, 223, 0, 0.08); +} + +.before-scenario .phase-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 4rem; + min-width: 4rem; + height: 4rem; + font-size: 1.75rem; + color: var(--accent-green); + background-color: rgba(137, 223, 0, 0.1); + border-radius: 8px; +} + +.before-scenario .phase-content h3 { + margin-bottom: 1rem; +} + +.before-scenario .phase-content p { + margin-bottom: 0; +} + /* Flow Input Section */ .flow-input-section { margin: 3rem 0; @@ -617,33 +663,63 @@ nav { text-decoration: underline; } -/* Comparison CTA */ -.comparison-cta { +/* Next Step CTA */ +.next-step-cta { margin-top: 3rem; - padding: 1.5rem; + padding: 2rem; background-color: var(--box-bg); border: 1px solid var(--border-color); border-radius: 8px; text-align: center; } -.comparison-cta p { +.next-step-cta h3 { + font-size: 1.75rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 1rem; +} + +.next-step-cta p { font-size: 1.125rem; line-height: 1.8; color: var(--text-secondary); - margin: 0; + margin: 0 auto; + max-width: 720px; +} + +.next-step-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + margin-top: 1.5rem; } -.comparison-cta a { +.next-step-link { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 0.85rem 1.25rem; + border: 1px solid var(--border-color); + border-radius: 8px; + background-color: var(--bg-section); color: var(--accent-green); text-decoration: none; font-weight: 600; - transition: color 0.2s ease; + transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } -.comparison-cta a:hover { +.next-step-link:hover { color: var(--accent-green-hover); - text-decoration: underline; + border-color: var(--accent-green); + transform: translateY(-1px); +} + +.next-step-link-primary { + background-color: rgba(137, 223, 0, 0.1); + border-color: rgba(137, 223, 0, 0.25); } /* Comparison Table */ @@ -662,11 +738,11 @@ nav { } .comparison-table thead { - background-color: var(--bg-section); + background-color: var(--bg-dark); } .comparison-table th { - padding: 1.25rem; + padding: 1.5rem 1.25rem; text-align: left; font-size: 1rem; font-weight: 600; @@ -675,7 +751,7 @@ nav { } .comparison-table td { - padding: 1.25rem; + padding: 1.5rem 1.25rem; font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); @@ -683,6 +759,14 @@ nav { vertical-align: top; } +.comparison-table tbody tr:nth-child(odd) { + background-color: rgba(137, 223, 0, 0.03); +} + +.comparison-table tbody tr:nth-child(even) { + background-color: var(--box-bg); +} + .comparison-table tbody tr:last-child td { border-bottom: none; } @@ -706,9 +790,20 @@ nav { min-width: 200px; } +.comparison-table a { + color: var(--accent-green); + text-decoration: none; +} + +.comparison-table a:hover { + color: var(--accent-green-hover); + text-decoration: underline; +} + /* Quote */ .quote { border-left: 4px solid var(--accent-green); + background-color: var(--box-bg); padding-left: 2rem; margin: 4rem 0; font-size: 1.25rem; @@ -756,6 +851,35 @@ nav { font-size: 1.25rem; } +.redefining-grid { + gap: 2rem; +} + +.redefining-card { + background-color: var(--box-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 2rem; + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} + +.redefining-card:hover { + transform: translateY(-4px); + border-color: var(--accent-green); + box-shadow: 0 8px 24px rgba(137, 223, 0, 0.1); +} + +.redefining-card h4 { + margin-bottom: 1rem; +} + +.redefining-card p { + font-size: 1rem; + line-height: 1.7; + color: var(--text-secondary); + margin: 0; +} + /* Reactive Art Section */ .reactive-art { padding: 6rem 0; @@ -781,6 +905,20 @@ nav { pointer-events: none; } +.progression-section { + background-color: var(--bg-section); + background-image: radial-gradient(circle at top left, rgba(137, 223, 0, 0.1), transparent 32%), linear-gradient(180deg, rgba(45, 51, 56, 0.96) 0%, rgba(26, 31, 35, 0.96) 100%); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: scroll; +} + +.progression-section::before { + background: linear-gradient(180deg, rgba(26, 31, 35, 0.24) 0%, rgba(26, 31, 35, 0.5) 100%); + opacity: 1; +} + .reactive-art>* { position: relative; z-index: 1; @@ -807,7 +945,6 @@ nav { color: var(--text-secondary); max-width: 900px; margin: 0 auto 4rem; - text-align: center; } .progression-boxes { @@ -880,20 +1017,19 @@ nav { } } -.audit-trail>.container>p:first-of-type { +.audit-trail>.container>p { font-size: 1.125rem; line-height: 1.8; color: var(--text-secondary); max-width: 900px; - margin: 0 auto 4rem; - text-align: center; + margin: 0 auto 1rem; } .audit-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; - margin-bottom: 4rem; + margin-bottom: 2rem; } .audit-box { @@ -901,6 +1037,13 @@ nav { border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} + +.audit-box:hover { + transform: translateY(-4px); + border-color: var(--accent-green); + box-shadow: 0 8px 24px rgba(137, 223, 0, 0.1); } .audit-box h4 { @@ -917,14 +1060,6 @@ nav { color: var(--text-secondary); } -.conclusion { - font-size: 1.125rem; - line-height: 1.8; - color: var(--text-secondary); - max-width: 900px; - margin: 4rem auto 0; - text-align: center; -} /* Footer */ footer { @@ -981,7 +1116,6 @@ footer a:hover { max-width: 900px; margin-left: auto; margin-right: auto; - text-align: center; } @@ -1078,9 +1212,16 @@ footer a:hover { } .workflow-item { - margin-bottom: 2rem; - padding-left: 1.5rem; + margin-bottom: 1rem; + padding: 1.25rem 1.5rem; + background-color: var(--bg-section); + border: 1px solid var(--border-color); border-left: 3px solid var(--accent-green); + border-radius: 0 8px 8px 0; +} + +.workflow-item:last-of-type { + margin-bottom: 0; } .workflow-item h4 { @@ -1158,6 +1299,14 @@ footer a:hover { color: var(--text-primary); margin-bottom: 0.75rem; padding-left: 0.5rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid var(--border-color); +} + +.commit-item:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; } .commit-item code { @@ -1243,6 +1392,13 @@ footer a:hover { border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} + +.shift-item:hover { + transform: translateY(-4px); + border-color: var(--accent-green); + box-shadow: 0 8px 24px rgba(137, 223, 0, 0.1); } .shift-item h4 { @@ -1338,11 +1494,25 @@ footer a:hover { margin-bottom: 2rem; } +.non-goals-split { + grid-template-columns: repeat(2, minmax(280px, 420px)); + justify-content: center; +} + +.non-goals-column { + background-color: var(--bg-section); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 1.5rem; +} + .non-goals-column p { font-size: 1.125rem; - line-height: 1.8; + line-height: 1.6; color: var(--text-secondary); margin-bottom: 1rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid var(--border-color); } .non-goals-column p strong { @@ -1362,7 +1532,7 @@ footer a:hover { .non-goals-list { list-style: none; - margin: 1rem 0 2rem 0; + margin: 0; padding-left: 0; } @@ -1384,6 +1554,40 @@ footer a:hover { font-size: 1.25rem; } +.technical-background-content { + display: flex; + flex-direction: column; + gap: 1.5rem; + max-width: 760px; + margin: 0 auto; +} + +.technical-background-intro, +.technical-background-link { + font-size: 1.125rem; + line-height: 1.8; + color: var(--text-secondary); + margin: 0; +} + +.technical-background-list { + background-color: var(--bg-section); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 1.5rem; +} + +.technical-background-link { + padding-top: 1.5rem; + border-top: 1px solid var(--border-color); +} + +@media (max-width: 768px) { + .non-goals-split { + grid-template-columns: 1fr; + } +} + .coverage-section { margin-top: 3rem; padding-top: 3rem; @@ -1523,7 +1727,6 @@ footer a:hover { line-height: 1.8; color: var(--text-secondary); margin-bottom: 2rem; - text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; @@ -1674,6 +1877,11 @@ footer a:hover { margin-top: 2rem; } +.reference-grid-balanced { + grid-template-columns: repeat(2, minmax(280px, 420px)); + justify-content: center; +} + .reference-card { background-color: var(--box-bg); border: 1px solid var(--border-color); @@ -1758,6 +1966,27 @@ footer a:hover { transition: transform 0.2s ease, margin-left 0.2s ease; } +.ai-workflow-section, +.demo-section, +.documentation-section, +.compound-effect { + margin-top: 3rem; + padding: 2.5rem; + background-color: var(--box-bg); + border: 1px solid var(--border-color); + border-radius: 8px; +} + +.ai-workflow-section .code-example, +.demo-section .code-example, +.documentation-section .commit-list { + background-color: var(--bg-section); +} + +.demo-section .benefits-grid { + margin-top: 2rem; +} + .reference-link:hover::after { transform: translateX(4px); margin-left: 0.75rem; @@ -1839,6 +2068,18 @@ footer a:hover { .audit-boxes { grid-template-columns: 1fr; } + + .reference-grid-balanced { + grid-template-columns: 1fr; + } + + .next-step-actions { + flex-direction: column; + } + + .next-step-link { + width: 100%; + } } @media (max-width: 480px) { @@ -1945,21 +2186,81 @@ footer a:hover { /* Directory Structure Section */ .directory-structure { - padding: 4rem 0; - background: var(--bg-section); + padding: 5rem 0; + background: var(--bg-light); +} + +.directory-structure-header { + margin-bottom: 2.5rem; +} + +.directory-structure-header h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 2rem; + color: var(--text-primary); + text-align: center; + letter-spacing: var(--letter-spacing-tight); +} + +@media (min-width: 768px) { + .directory-structure-header h2 { + font-size: 3rem; + } +} + +.directory-structure-header .section-intro { + font-size: 1.125rem; + line-height: 1.8; + color: var(--text-secondary); + max-width: 900px; + margin: 0 auto; + text-align: center; +} + +.directory-structure-layout { + display: grid; + grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); + gap: 2rem; + align-items: start; } .tree-structure { - margin: 2rem 0; + margin: 0; border-radius: 8px; - overflow: hidden; } -.tree-structure pre { +.tree-structure-card { background: var(--box-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; +} + +.tree-structure-meta { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.tree-structure-meta h4 { + color: var(--text-primary); + font-size: 1.25rem; + margin-bottom: 0.75rem; + font-weight: 600; +} + +.tree-structure-meta p { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.7; +} + +.tree-structure pre { + background: var(--bg-section); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 2rem; overflow-x: auto; margin: 0; } @@ -1973,9 +2274,14 @@ footer a:hover { .structure-explanation { display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - margin-top: 2rem; + gap: 1.25rem; +} + +.structure-column { + background: var(--box-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 1.5rem; } .structure-column h4 { @@ -2050,10 +2356,24 @@ footer a:hover { font-style: italic; } -@media (max-width: 768px) { - .structure-explanation { +@media (max-width: 1024px) { + .directory-structure-layout { grid-template-columns: 1fr; - gap: 2rem; + } +} + +@media (max-width: 768px) { + .directory-structure { + padding: 4rem 0; + } + + .tree-structure-card, + .structure-column { + padding: 1rem; + } + + .tree-structure-meta { + padding: 0 0 1rem; } .tree-structure pre { diff --git a/docs/common-questions.html b/docs/common-questions.html index 93b6f5e..0d57821 100644 --- a/docs/common-questions.html +++ b/docs/common-questions.html @@ -28,7 +28,12 @@

Addressing Common Objections to Spec-Driven Development

adaptability. This evidence-based FAQ addresses common objections to Liatrio's Spec-Driven Development (SDD) using a concrete example: implementing a cspell pre-commit hook for spell-checking. By analyzing specifications, task lists, proof artifacts, and validation - reports, we demonstrate how well-executed SDD works in practice.

+ reports, we demonstrate how well-executed SDD works in practice. You can inspect the full + example in Reference Materials.

+

It also highlights something easy to miss: SDD keeps its method visible. The workflow is not + hidden behind a product layer, allowing teams to inspect the prompts and understand the + patterns that drive the workflow. This accessibility enables teams to improve their skills + with AI as they learn SDD.

@@ -39,8 +44,8 @@

Addressing Common Objections to Spec-Driven Development

Does Spec-Driven Development Add Unnecessary Overhead?

Structured processes often face criticism for introducing bureaucratic overhead. However, the cspell hook implementation proves that SDD structure is an investment, not a - cost. By mandating upfront clarity, it prevents ambiguity and rework—the true sources of - delay—ultimately increasing development velocity.

+ cost. By forcing the hardest thinking into the first two steps when correction is cheapest, it + prevents ambiguity and rework. These are the true sources of delay. Mandating upfront clarity ultimately increases development velocity.

@@ -53,10 +58,10 @@

Does Spec-Driven Development Add Unnecessary Overhead?

stroke-linecap="round" stroke-linejoin="round" />
-

Upfront Planning Prevents Waste

-

The specification clearly established Goals and Non-Goals, defining what's out of scope. This - protected the team from scope creep and unexpected requirements, concentrating effort - exclusively on agreed-upon value.

+

Upfront Planning Prevents Costly Rework

+

The specification clearly established Goals and Non-Goals, defining what's out of scope. + That early clarity protected the team from scope creep and unexpected requirements, when it + was still cheap to make adjustments.

@@ -69,8 +74,8 @@

Upfront Planning Prevents Waste

Structured Work Creates Velocity

Git history shows implementation took under 6 minutes—from first commit (09:57:02) to final - commit (10:02:41). This remarkable speed was enabled by a clear plan breaking work into four - distinct tasks.

+ commit (10:02:41). That speed was enabled by Step 2 turning the approved spec into four + distinct tasks before implementation began.

@@ -92,7 +97,7 @@

Unambiguous Blueprint

Non-Goals Defined Clear Boundaries

-
+

Explicitly Out of Scope:

    @@ -274,6 +279,9 @@

    The SDD Advantage

    SDD provides a robust framework that enhances clarity, guarantees verifiability, and gracefully accommodates change. The initial investment in structured planning and documentation delivers more predictable, successful outcomes with reduced rework and increased stakeholder confidence. + Because the workflow is exposed in readable prompts and artifacts, it also helps engineers learn + the patterns of effective AI-assisted development instead of treating them as hidden product + behavior.

    @@ -297,12 +305,84 @@

    The SDD Advantage

    Key Takeaway: The evidence from this real-world implementation demonstrates that SDD's structured approach is not overhead—it's an investment that pays dividends through - clarity, velocity, and quality assurance. + clarity, velocity, quality assurance, and a more teachable way of working with AI.
+
+
+

Are Specs, Tasks, and Proofs Supposed To Live in the Repo Forever?

+

No. In SDD, these artifacts are process scaffolding for an implementation + loop, not living documentation that must stay perfectly synchronized forever. Their job is to help a + human and an AI align on the work, verify progress, and make the reasoning process explicit while + the feature is being built.

+ +
+
+
+ +
+

Process Artifacts, Not Product Docs

+

Specs, tasks, proofs, and validation reports exist to guide the current implementation loop. + Once that loop is complete, the durable source of truth becomes the code and tests.

+
+ +
+
+ +
+

Storage and Retention Are Flexible

+

Some teams keep artifacts in docs/specs/, some archive them, and some map them + to Jira, GitHub issues, or other systems. SDD stays intentionally unopinionated so teams can + manage context the way that fits their environment.

+
+ +
+
+ +
+

They Still Matter After the Run

+

Even when they are not maintained forever, these artifacts still provide value as an audit + trail and a teaching surface that shows how the work was framed and verified.

+
+
+ +
+

How To Think About PR Feedback

+

Implementation Feedback

+

Feedback like "use a different test structure" or "refactor this code path" stays inside the + current implementation and review loop. The original artifacts already did their job by getting + the work to a reviewable state.

+

Directional Feedback

+

Feedback like "this should use a different technology" or "the scope should be different" + signals that the earlier framing was off. That usually means going back upstream, clarifying the + direction, and starting a new spec for a new implementation loop.

+

You can think of specs and proofs like the recipe notes and test batches used to bake a tray of + cookies. They help you get the current batch right, but once the batch is baked, the next major + change is usually a new batch, not an edit to the old dough.

+
+
+
+
@@ -359,18 +439,20 @@

What You Should Expect

SDD1️⃣ I'll help you generate a specification... or SDD3️⃣ Let me start implementing task 1.0.... This is expected behavior and indicates the verification system is working correctly. The markers add minimal overhead - (1-2 tokens) while providing immediate visual feedback. + (1-2 tokens) while providing immediate visual feedback. They also model a broader SDD + principle: effective AI workflows should make important operating logic explicit and easy to + inspect.

Technical Background

-
-

This verification technique was shared by Lada Kesseler at AI Native Dev Con Fall 2025 as a +

+

This verification technique was shared by Lada Kesseler at AI Native Dev Con Fall 2025 as a practical solution for detecting context rot in production AI workflows. The technique provides:

-
+ +
+

Continue Evaluating the Workflow

+

Watch the short walkthrough next, then dive into the real prompts, proofs, and validation + artifacts behind the workflow.

+ +
diff --git a/docs/comparison.html b/docs/comparison.html index 4e6b82e..5694579 100644 --- a/docs/comparison.html +++ b/docs/comparison.html @@ -22,12 +22,14 @@
-

Why Not Other Structured Development Tools?

+

Comparing SDD to Other Structured Development Tools

-

Other structured development tools like Kiro, SpecKit, and Taskmaster offer structured approaches - to AI-assisted development, but they require installation, configuration, and learning new - workflows. Here's why Liatrio's 4 transparent prompts are a better fit for day-to-day - development work.

+

Kiro, SpecKit, and Taskmaster each add structure to AI-assisted development, but they do so + through very different operating models. This page compares Liatrio's four repo-local SDD + prompts with those tools, with a focus on setup, workflow fit, and day-to-day adoption cost.

+

A second distinction matters just as much: SDD exposes its logic in plain markdown, so teams can + learn the patterns behind effective AI collaboration instead of depending on a product to hide + or mediate them.

@@ -36,8 +38,10 @@

Why Not Other Structured Development Tools?

Comparison: Liatrio's Prompts vs. Other Structured Development Tools

-

How do Liatrio's prompts compare to other structured development tools? Here's - a side-by-side look at the key differences.

+

The table below compares Liatrio's prompts with three other structured + development approaches. The emphasis is less on feature lists and more on the practical cost of + adopting each system inside an existing engineering workflow, including whether the workflow itself + is something engineers can inspect and learn from.

@@ -45,65 +49,120 @@

Comparison: Liatrio's Prompts vs. Other Structured Development Tools

- + + + - - + + + + - - + + + + - - + + + + - - + + + + - - + + + + - - + + + + - - + + + + - - + + + + - - + + + + - - + + + +
Feature Liatrio's SDD PromptsKiro / SpecKit / TaskmasterKiroSpecKitTaskmaster
Setup & Installation✅ Just 4 markdown files—no installation❌ Kiro: Requires downloading IDE app. SpecKit: Requires installation and - configuration. Taskmaster: Requires installation and setup.Four markdown files + added as prompts within your existing workflowRequires installing Kiro, signing in, and + learning its product-specific workflow model + Requires the Specify CLI, generated + agent command files, and adoption of a large multi-step workflowMCP + or CLI setup, plus model/API configuration, project initialization, and a + PRD-to-task pipeline
Editor/IDE Dependency✅ Works with any editor (VS Code, Cursor, etc.)❌ Kiro: Requires switching to Kiro IDE. SpecKit/Taskmaster: Work within existing - editors but require specific setup.✅ Works in editors that support prompts or slash commands❌ Structured workflow assumes the Kiro IDE as the primary environment⚠️ Runs in existing editors through generated agent commands⚠️ Works in existing editors through CLI or MCP integration
AI Assistant Compatibility✅ Works with any AI assistant (Claude, GPT, Gemini, etc.)❌ Kiro: Built-in AI. SpecKit: Works with GitHub Copilot, Claude Code, Gemini CLI. - Taskmaster: Works with Claude, Cursor, etc.✅ Works with assistants that support custom prompts or slash commands⚠️ Uses Kiro's built-in agent experience, model options, and product-specific modes + ⚠️ Works through supported agent integrations and slash commands⚠️ Works through CLI or MCP integrations plus model-provider and agent setup
Learning Curve✅ Just read markdown prompts—no new concepts❌ Kiro: Learn new IDE. SpecKit: Learn command system (`/speckit.specify`, - `/speckit.plan`, etc.). Taskmaster: Learn task management system.✅ Uses a guided four-prompt workflow layered onto your existing workflow❌ Requires learning Kiro's broader vocabulary and workflow model + (specs, + steering, hooks, powers, + autopilot, vibe vs spec, etc.) + ❌ Requires learning a large constitutionspecify → + clarifyplantasks → + implement methodology + ❌ Requires learning Taskmaster's broader orchestration model: PRDs, task graphs, + subtasks, dependencies, statuses, and optional autopilot/TDD workflows
Transparency✅ Every prompt is readable markdown—no black boxes❌ Tool logic is hidden in codebases. Can't easily see or modify how they work.✅ Prompts are plain markdown, so the workflow logic is directly readable, editable, + and teachable⚠️ Some files are editable, but core behavior, modes, and workflow concepts live in + the product⚠️ Workflow files and templates are published on GitHub, but much of the method is + still experienced through its larger system⚠️ Open source, but much of the behavior lives in JS packages, configs, and task + state data
Flexibility✅ Edit prompts to fit your project/style/company guidelines❌ Limited customization. Must work within tool's structure and constraints.✅ Prompt text can be edited to match team or project conventions⚠️ Steering files, hooks, and modes are configurable within Kiro's product model + ⚠️ Templates can be adapted, but the workflow, artifacts, and process vocabulary + stay highly prescriptive⚠️ Models, prompts, tasks, tags, and execution modes can be configured within its + orchestration system
File Structure✅ Simple docs/specs/ that doesn't pollute repo❌ Kiro: IDE-specific files. SpecKit: Creates .specify/ directory - structure. Taskmaster: Task management files.✅ Uses a repository-level docs/specs/ structure but can be easily + adapted + to any directory structure⚠️ Stores project-specific files in .kiro alongside multiple product + concepts and configs❌ Creates a .specify/ directory, agent-specific command files, and + multiple generated planning artifacts❌ Stores PRDs, config, state, task graphs, and generated artifacts in + .taskmaster/ +
Workflow Integration✅ Fits into your existing workflow—no context switching❌ Kiro: Requires switching IDEs. SpecKit: Requires using specific commands. - Taskmaster: Requires managing tasks through tool.✅ Adds structure without replacing repo-local development workflows❌ Best fit when teams are willing to adopt Kiro as the primary workspace and + operating model❌ Can run in an existing repo, but expects teams to adopt its full process and + artifact model❌ Adds a separate planning, execution, and tracking layer on top of normal + engineering work
Speed✅ Complete feature in minutes (example: <15 min)⚠️ Varies by tool, but requires learning and setup overhead✅ Minimal setup overhead once prompts are installed❌ Front-loaded overhead is high because teams must learn the product model before + moving quickly❌ Front-loaded overhead is high because the workflow generates and coordinates many + artifacts❌ Front-loaded overhead is high because useful adoption requires creating and + maintaining the task system
Cost✅ Free—just markdown files✅ All are open source, but require time investment to learn✅ Markdown files are free to use⚠️ Free tier available, but usage is managed through sign-in, credits, and paid + usage tiers✅ Open source⚠️ Open source, with limits on some commercial use cases
@@ -115,23 +174,21 @@

Comparison: Liatrio's Prompts vs. Other Structured Development Tools

-

Getting Started Is Simple

-

While other tools require complex installation and configuration, the SDD workflow prompts can be - installed +

Repo-Native Setup

+

The SDD workflow prompts can be installed in any AI assistant in seconds using the slash-command-manager. This open-source tool from Liatrio - makes it - straightforward + makes it straightforward to add the prompts as slash commands in VS Code, Cursor, Claude Code, and many other AI tools - that - support - custom commands.

-

No complex setup, no configuration files, no learning curve—just install the prompts and start - using - them immediately in your existing workflow. See the +

Because the workflow is plain markdown, teams can adopt it without taking on a new IDE, a + generated artifact model, or a separate task-orchestration system. See the installation instructions in the README to get started.

+

That same simplicity also makes SDD useful as a teaching tool: engineers can read the prompts, + understand the workflow patterns they encode, and reuse those patterns when working with AI in + other contexts.

@@ -140,14 +197,26 @@

Getting Started Is Simple

The Bottom Line

-

For day-to-day development work in enterprise companies, Liatrio's 4 prompts provide the structure - and rigor you need without requiring new tools, installation, or learning curves. They're - transparent, flexible, and designed to fit into your existing workflow—not replace it. Perfect for - developers who want structured AI-assisted development without the overhead of switching tools or - learning new systems.

+

For teams working in existing enterprise codebases, the main tradeoff is not whether a tool offers + structure, but how much new product or process it asks engineers to adopt. Liatrio's prompts aim to + provide structure in a repo-native form: readable markdown, editable conventions, and a workflow + that can sit on top of existing tools rather than replace them.

+

This pattern extends beyond Kiro, SpecKit, and Taskmaster. Other spec-driven frameworks such as + Tessl and BMAD also add structure by introducing a larger system around the developer: more + tooling, more workflow machinery, and more framework-specific concepts to absorb. Liatrio's SDD + prompts are intentionally different. They expose the workflow logic directly in markdown, so teams + can inspect it, adapt it, and internalize better AI collaboration patterns instead of depending on + a mediated system.

-
-

← Back to the Playbook

+
+

See What This Means for Developers

+

After comparing the operating models, look at how SDD changes implementation work in practice + and how teams can address common concerns about the workflow.

+
diff --git a/docs/developer-experience.html b/docs/developer-experience.html index c274203..ccf3406 100644 --- a/docs/developer-experience.html +++ b/docs/developer-experience.html @@ -29,15 +29,19 @@

Transforming Developer Experience with AI-Assisted, Spec-Driven Workflow

Using a real-world case study—implementing a pre-commit spell checker—we demonstrate the profound - impact Liatrio's workflow has on developer experience. We'll first explore the traditional - manual approach to establish a baseline, then reveal how AI assistance transforms the entire - development lifecycle from hours of toil into minutes of strategic oversight.

+ impact Liatrio's workflow has on developer experience. You can inspect the full cspell example + in Reference Materials. We'll first explore the + traditional manual approach to establish a baseline, then reveal how AI assistance transforms + the entire development lifecycle from hours of toil into minutes of strategic oversight.

+

Just as importantly, SDD keeps the workflow logic visible. The prompts, specs, tasks, proofs, + and validation artifacts make the method readable, so teams can learn how to guide AI well + instead of relying on hidden product behavior.

-
+

The "Before" Scenario: A Developer's Manual Toil

To appreciate the efficiency gains of AI-assisted workflows, we must first @@ -147,6 +151,8 @@

The "After" Scenario: The AI-Accelerated Workflow

improvement. Developers transition from manual implementers to strategic directors, providing intent via clear specifications while AI agents handle tactical execution. This section explores the key pillars: intelligent asset generation, proactive quality control, and self-documenting processes. + The transparency of the workflow ensures engineers learn how to scope + work, direct AI, and validate results as they follow the steps.

@@ -305,12 +311,17 @@

Transformed Work Nature

nature of work itself. This shift from manual toil to strategic oversight is the cornerstone of modern, high-performance engineering culture.

+
+

Teachable AI Collaboration

+

Because SDD exposes the workflow in readable prompts and artifacts, developers can study the + method itself and improve how they interact with AI over time.

+
-
+

Redefining the Developer Experience

This case study demonstrates a fundamental transformation of developer @@ -318,22 +329,27 @@

Redefining the Developer Experience

findings are clear and compelling, pointing toward a new standard for high-performance software engineering.

-
-
+
+

Radical Speed Improvements

Implementation time for standard features reduced from hours to minutes, enabling unprecedented development velocity and faster time-to-market for new capabilities.

-
+

Embedded Quality & Consistency

Automated gates prevent errors and enforce standards by default, eliminating inconsistencies and reducing technical debt across the entire codebase.

-
+

Transformed Developer Role

Developers evolve from manual laborers bogged down by repetitive tasks to strategic overseers who direct high-level goals and validate results.

+
+

Visible Working Method

+

The prompts and artifacts make effective AI-assisted engineering visible, which helps + teams build shared habits and judgment instead of depending on hidden workflow logic.

+
@@ -345,7 +361,8 @@

The Path Forward

As organizations seek to maximize engineering effectiveness, AI-assisted, spec-driven workflows are poised to become the new standard. This approach doesn't just improve existing processes—it fundamentally reimagines what's possible when human expertise is amplified by intelligent - automation.

+ automation. The critical advantage of SDD is that it exposes this operating model in a form teams + can read, discuss, and adapt.

@@ -368,6 +385,17 @@

Iterate Rapidly

our most valuable resource to focus on what truly matters: solving complex problems and delivering exceptional value to customers. + +
+

Address the Practical Questions

+

Next, review the most common objections teams raise about SDD, then watch the short overview of + the workflow end to end.

+ +
diff --git a/docs/index.html b/docs/index.html index e42d82a..d4b0640 100644 --- a/docs/index.html +++ b/docs/index.html @@ -26,11 +26,15 @@

The Spec-Driven Development (SDD) Playbook

Complete a feature in minutes, not days. Liatrio's Spec-Driven Development workflow is just 4 markdown prompts that help developers guide an AI assistant through - implementing their day-to-day work with structure, clarity, and evidence.

-

These prompts are transparent (you can read and modify every one), - tool-agnostic (works with any AI assistant), and lightweight - (no installation, no dependencies). They create a simple file structure in - docs/specs/ that doesn't pollute your repo.

+ implementing their day-to-day work with structure, clarity, and evidence. +

+

These prompts are transparent and learnable: you can read + every prompt, understand the workflow logic it applies, and adapt the patterns to your own team + and projects. Instead of hiding the method inside a product, SDD exposes it in markdown.

+

They are also tool-agnostic (works with any AI assistant) and + lightweight (no installation, no dependencies). They create a simple file + structure in docs/specs/ that doesn't pollute your repo. +

View the prompts on GitHub: Built-in Scope Validation

- -
- -
-
- - - -
-

Step 2: Task Breakdown

-

Break the spec into actionable tasks with demo criteria

- -
-
-
- - - -
-

Step 3: Implementation

-

Execute tasks with verification and proof artifacts

- -
-
-
- - - - -
-

Step 4: Validation

-

Verify implementation meets all requirements with evidence

- -
-
@@ -144,8 +79,13 @@

Step 4: Validation

The Four Steps

-

One person runs through these 4 prompts sequentially with an AI assistant. The - example described on this site took less than 15 minutes from start to finish.

+

One person runs through these 4 prompts sequentially with an AI assistant. In + the cspell pre-commit hook example featured across this + site, the end-to-end workflow took less than 15 minutes from start to finish. The highest-leverage + work happens in Step 1 and Step 2: when the spec is clear and the task plan is concrete, + implementation and validation are far more likely to run smoothly without human rescue. Because the + prompts are readable, the workflow also doubles as a guide for learning how to scope work, guide + AI, and verify results more effectively.

@@ -154,12 +94,14 @@

The Four Steps

Specification

-

Focus: Transform your flow input into a structured specification with - clear boundaries and functional requirements.

+

Focus: Lock down scope, intent, and success criteria before any code is + written.

What It Does: The prompt validates scope (too large/too small/just - right), asks clarifying questions, and generates a specification document.

+ right), resolves ambiguous context, and generates a specification document with clear + boundaries.

Output: A markdown spec file in - docs/specs/[NN]-spec-[feature-name]/

+ docs/specs/[NN]-spec-[feature-name]/ +

Prompt: SDD-1-generate-spec.md

@@ -172,15 +114,17 @@

Specification

Task Breakdown

-

Focus: Break the specification into actionable tasks with demo criteria - and proof artifacts.

+

Focus: Turn the approved spec into an executable plan with demo + criteria and proof artifacts.

What It Does: Analyzes the spec, identifies relevant files, and creates - a task list with parent tasks (first) and sub-tasks (after confirmation).

+ a task list with parent tasks (first) and sub-tasks (after confirmation) so drift is + caught before implementation starts.

Output: A task list markdown file with demo criteria and proof artifact requirements

Prompt: SDD-2-generate-task-list-from-spec.md

+ target="_blank" rel="noopener noreferrer">SDD-2-generate-task-list-from-spec.md +

@@ -216,14 +160,16 @@

Validation

coverage matrix

Prompt: SDD-4-validate-spec-implementation.md

+ target="_blank" rel="noopener noreferrer">SDD-4-validate-spec-implementation.md +

- The upfront investment in clarity de-risks the entire development lifecycle by preventing the two - most common causes of project failure: ambiguous requirements and unchecked scope creep. + The highest-leverage work happens in the first two steps: if you nail the spec and task breakdown, + the later steps have a much better chance of succeeding without rework, course correction, or human + intervention.
@@ -231,9 +177,10 @@

Validation

Why This Works

@@ -264,19 +211,65 @@

Built-in Context Verification

How does this compare to other structured development tools? See our comparison against Kiro, SpecKit, and Taskmaster to understand why Liatrio's prompts fit better into the typical workflow of software developers doing - day-to-day work.

+ day-to-day work, and why exposing the workflow logic matters just as much as lightweight + adoption.

+ + +
+ +
+
+

Where SDD Fits in the Work

+

SDD is intentionally focused on the implementation loop. In many enterprise + teams, research, prioritization, and architecture decisions already happen upstream in product, + design, or ticketing systems. SDD starts when an engineer has a piece of work ready to execute and + helps carry it through implementation and into review.

+ +
+
+

Loop 1: Research and Problem Framing

+

This is where requirements are clarified, options are considered, and constraints are + understood. In many teams this already lives in Jira, GitHub issues, design docs, or + product conversations before SDD begins.

+
+
+

Loop 2: Implementation via SDD

+

This is the four-step workflow. Specs, tasks, proofs, and validation artifacts help the human + and the AI align on the work, verify progress, and make the reasoning process visible while + the feature is being built.

+
+
+

Loop 3: Review and Iteration

+

The PR is reviewed and feedback is incorporated. Implementation feedback can be handled in the + current loop, but directional feedback usually means starting a new spec and a new + implementation run.

+
+
+ +
+

Artifacts Are Process Scaffolding

+

Specs, tasks, proofs, and validation reports are process artifacts, not living documentation. + They exist to guide the implementation loop, help the human verify the AI's understanding, and + make the workflow teachable while the work is in flight.

+

After that loop completes, the code and tests become the durable source of truth. Some teams keep + these artifacts in docs/specs/, some archive them elsewhere, and some align them to + external systems. SDD intentionally leaves that lifecycle flexible so teams can manage context in + the way that fits their environment.

-
+

From Reactive Art to Predictable Engineering

By consistently using these four prompts, developers transform small feature work from reactive coding into predictable, evidence-based implementation. Liatrio's Spec-Driven Development workflow creates a self-documenting, auditable process that systematically drives up quality, reduces ambiguity, and ensures every feature delivered is a feature validated—all in minutes, not days.

+

The important point is that this process remains visible to the team. Engineers are not only using + AI to move faster; they are learning a repeatable way to frame requirements, direct execution, and + validate output.

@@ -341,12 +334,15 @@

The Audit Trail Advantage

The linkage from Git commit, to task list, to proof artifact forms an unbreakable audit trail from a specific line of code back to the requirement it satisfies. This traceability is non-negotiable and transforms development into a transparent, verifiable process.

+

Because the workflow is documented in prompts and artifacts rather than hidden behind product logic, + the audit trail also becomes a teaching surface teams can inspect to understand how effective + AI-assisted delivery actually works.

Self-Documenting Process

-

Every step generates artifacts that serve as living documentation, creating a complete - project history without additional overhead.

+

Every step generates a working record of the implementation loop, creating traceability and + shared context without requiring a separate documentation effort.

Auditable Progress

@@ -369,11 +365,23 @@

Evidence-Based Quality

-

Directory Structure

-

The SDD workflow creates a structured directory layout in docs/specs/ that provides a complete audit trail from requirements to implementation:

+
+

Directory Structure

+

One common way to run SDD is to keep implementation artifacts in + docs/specs/ so requirements, tasks, proofs, and validation stay connected in one + place while the work is active. +

+
-
-
docs/specs
+                
+
+
+
+

Example Spec Workspace

+

This is one example of an in-repo storage pattern. Teams can keep, archive, or move + these artifacts differently depending on how they manage planning and context.

+
+
docs/specs
 ├── 01-spec-feature-name
 │   ├── 01-proofs
 │   │   ├── 01-task-01-proofs.md
@@ -404,38 +412,68 @@ 

Directory Structure

├── 03-spec-third-feature.md ├── 03-tasks-third-feature.md └── 03-validation-third-feature.md
-
+
+
-
-
-

File Naming Convention

-
    -
  • [NN]-spec-[feature-name]/: Main directory for each feature specification -
      -
    • [NN]: Zero-padded 2-digit number (01, 02, 03, etc.)
    • -
    • spec-[feature-name]: Descriptive feature name
    • -
    -
  • -
  • [NN]-spec-[feature-name].md: The main specification document
  • -
  • [NN]-tasks-[feature-name].md: Task breakdown with parent/sub-tasks
  • -
  • [NN]-questions-1-[feature-name].md: Clarifying questions and answers
  • -
  • [NN]-validation-[feature-name].md: Validation report and coverage matrix
  • -
  • [NN]-proofs/: Subdirectory containing proof artifacts -
      -
    • [NN]-task-[TT]-proofs.md: Proof artifacts for each parent task
    • -
    -
  • -
+
+
+

File Naming Convention

+
    +
  • [NN]-spec-[feature-name]/: Main directory for each + feature specification +
      +
    • [NN]: Zero-padded 2-digit number (01, 02, 03, etc.)
    • +
    • spec-[feature-name]: Descriptive feature name
    • +
    +
  • +
  • [NN]-spec-[feature-name].md: The main specification + document
  • +
  • [NN]-tasks-[feature-name].md: Task breakdown with + parent/sub-tasks
  • +
  • [NN]-questions-1-[feature-name].md: Clarifying + questions and answers
  • +
  • [NN]-validation-[feature-name].md: Validation report + and coverage matrix
  • +
  • [NN]-proofs/: Subdirectory containing proof artifacts +
      +
    • [NN]-task-[TT]-proofs.md: Proof artifacts for + each parent task
    • +
    +
  • +
+
+
+

Workflow Progression

+
    +
  1. Specification Phase
    Creates + [NN]-spec-[feature-name].md and + [NN]-questions-1-[feature-name].md +
  2. +
  3. Task Planning Phase
    Creates + [NN]-tasks-[feature-name].md +
  4. +
  5. Implementation Phase
    Creates + [NN]-proofs/[NN]-task-[TT]-proofs.md files as tasks are completed +
  6. +
  7. Validation Phase
    Creates + [NN]-validation-[feature-name].md with final validation report +
  8. +
+

This shows one way to store a complete Loop-2 implementation trail in-repo. The exact + retention model is intentionally flexible, and teams can archive or externalize these + artifacts once the implementation loop is complete.

+
-
-

Workflow Progression

-
    -
  1. Specification Phase: Creates [NN]-spec-[feature-name].md and [NN]-questions-1-[feature-name].md
  2. -
  3. Task Planning Phase: Creates [NN]-tasks-[feature-name].md
  4. -
  5. Implementation Phase: Creates [NN]-proofs/[NN]-task-[TT]-proofs.md files as tasks are completed
  6. -
  7. Validation Phase: Creates [NN]-validation-[feature-name].md with final validation report
  8. -
-

This structure provides a complete audit trail from requirements to implementation, with each artifact serving as evidence in the validation process.

+
+ +
+

Ready to Explore the Workflow Further?

+

Start with how SDD compares to other structured development approaches, then see how the + workflow changes day-to-day developer experience.

+
diff --git a/docs/reference-materials.html b/docs/reference-materials.html index ce1aeed..eb2e3d7 100644 --- a/docs/reference-materials.html +++ b/docs/reference-materials.html @@ -20,9 +20,19 @@

Reference Materials

-

Complete documentation and proof artifacts from a real Spec-Driven Development workflow

+

Complete documentation, workflow logic, and proof artifacts from a real + Spec-Driven Development run

-

These reference materials demonstrate a complete Spec-Driven Development workflow in action. They document the implementation of a cspell pre-commit hook feature, showing the full SDD process from initial conversation through specification, task breakdown, implementation proofs, and validation.

+

These reference materials demonstrate a complete Spec-Driven Development workflow in action. They + document the implementation of a cspell pre-commit hook feature, showing the full SDD process + from initial conversation through specification, task breakdown, implementation proofs, and + validation.

+

Taken together, they are more than evidence that the workflow worked. They also expose the + internal logic of the method so engineers can study how SDD structures intent, guides AI, and + verifies outcomes.

+

This page preserves one complete run for study and demonstration. Teams may keep, archive, + externalize, or discard these artifacts differently depending on how they manage planning, + ticketing, and AI context in their own environment.


@@ -40,7 +50,8 @@

Core Documentation

AI Conversation

-

Complete AI-assisted development conversation and decision making process

+

Complete AI-assisted development conversation showing how intent, constraints, and decisions + were shaped

View Documentation
@@ -52,7 +63,8 @@

AI Conversation

Specification

-

Technical specification for the cspell pre-commit hook implementation

+

Technical specification showing how requirements, boundaries, and success criteria were made + explicit

View Specification
@@ -63,7 +75,8 @@

Specification

Tasks Overview

-

Detailed task breakdown and implementation roadmap

+

Detailed task breakdown showing how the spec was converted into an executable implementation + plan

View Tasks
@@ -73,7 +86,9 @@

Tasks Overview

Task Proofs & Validation

-
+

These artifacts show how SDD turns implementation into something visible. Each proof document is + both evidence of completion and an example of how to make AI-driven work verifiable.

+

Task 04 Proofs

Reports & Analysis

-
+

These materials show the final review layer of the workflow: traceability, validation, and the + reasoning that connects requirements to delivered code.

+

Git Log Analysis

View Git Log
+ +
+

Ready to Apply SDD in Your Repo?

+

Use these artifacts as a study guide, then install the workflow prompts or watch the walkthrough + before trying the process in your own repository.

+ +
diff --git a/docs/video-overview.html b/docs/video-overview.html index 1381e3e..65ff212 100644 --- a/docs/video-overview.html +++ b/docs/video-overview.html @@ -22,7 +22,11 @@

Spec Driven Development Workflow

-

Discover how Spec Driven Development transforms software creation. This workflow connects planning, design, and execution seamlessly. Watch our brief video overview (courtesy of NotebookLM) to master this powerful approach.

+

Discover how Spec Driven Development transforms software creation. This workflow connects + planning, design, and execution seamlessly.

+

Watch this brief video overview (courtesy of NotebookLM) to understand not only the four-step + workflow, but also the reasoning patterns SDD makes visible for teams learning how to work with + AI effectively.