Vague, unspecific prompts—often called “vibe-coding”—are a dead end for any serious software project. This approach leads to poor quality output, lost context, and code that’s impossible to maintain. The industry recognizes this, and a new wave of structured AI development methodologies has emerged to provide a solution.
But are they any good?
To find out, I built the same project—a feature-rich landing page—three separate times, each with a different AI framework: the heavyweight BMAD method, GitHub’s Spek Kit, and the fast-moving Open Spec. One took eight hours; another, less than two.
This article breaks down the setup, the workflow, the final results, and the core philosophies of each. By the end, you’ll know exactly which framework is right for you.
The Test Project: A Real-World Challenge
Building a simple landing page isn’t enough of a test. To push these frameworks, the project had specific requirements:
- Tech Stack: Next.js, Tailwind CSS, and ShadCN/UI.
- Live API Integrations:
- YouTube Data API: To fetch and display a live subscriber count.
- MailChimp API: For a functional email sign-up form.
- YouTube oEmbed: To display and play the best-performing videos.
A detailed input.md file specifying every section was provided to each framework to ensure a fair comparison.
1. BMAD: The Process-Driven Beast
BMAD (Build Me a Dream) simulates an entire Agile software team using different AI agents. Its philosophy is that a highly structured, top-down process produces the most consistent and reliable results.
The Workflow
Installation is a single command, but the process is documentation-heavy. The initial phase involves orchestrating AI personas like a Project Manager, UX Expert, and Architect to produce massive specification documents.
What are Epics and Stories?
- Epics: Large bodies of work that can be broken down into smaller tasks (e.g., "Implement User Authentication").
- Stories: Smaller, user-focused requirements that deliver a piece of value (e.g., "As a user, I want to be able to sign up with my email and password").
The project was broken down into four epics, and for every single story, I had to manually run a three-step loop:
- Scrum Master: Draft the story.
- Developer: Write the code.
- QA Agent: Review the code.
graph TD;
A[Start Story] --> B{Scrum Master Agent};
B --> C{Developer Agent};
C --> D{QA Agent};
D --> E{Is Story Complete?};
E -- Yes --> F[End Story];
E -- No --> B;
The Experience (8 Hours)
This entire process for one landing page took eight hours. The bottleneck was the manual orchestration. Each agent required several minutes to work, but I had to be present to trigger the next one in the sequence. Running agents in separate terminals helped but introduced context-switching overhead, as each persona took up to a minute to initialize. It was incredibly tiresome.
The Result
Despite the grueling process, the result was impressive. The dedicated UX Expert agent produced a sophisticated design system, and all three API integrations worked on the first try. The final website was incredibly solid.
[!WARNING] High Overhead: BMAD’s strength is also its weakness. The time commitment and manual orchestration make it overkill for small projects or solo developers.
BMAD’s rigorous, auditable process creates an “audit defense blueprint,” where every decision is versioned in Git and traceable. This is a critical feature for regulated industries like finance and healthcare that are hesitant to adopt AI due to perceived risks.
2. Spek Kit: The Developer’s Toolkit
Spek Kit, from GitHub, is a lightweight toolkit designed to empower a developer working with a single AI assistant. It’s a bottom-up, developer-centric approach.
The Workflow
Installation uses uv, a fast Python package installer. The process is built around four simple slash commands in your AI chat:
/specify: Generates a formalspec.mdfrom the initialinput.md./plan: Reads the spec and creates a technicalplan.md./tasks: Breaks the plan into a checklist of small, actionable tasks./implement: Executes the checklist and generates the code.
graph TD;
A[input.md] --> B[/specify];
B --> C[spec.md];
C --> D[/plan];
D --> E[plan.md];
E --> F[/tasks];
F --> G[tasks.md];
G --> H[/implement];
H --> I[Code];
This workflow generates a clear project structure.
project/
├── input.md
├── spec.md
├── plan.md
└── tasks.md
A key feature is the constitution.md file, where you define high-level project rules (e.g., “Always use Test-Driven Development,” “All API calls must have error handling”). The AI must adhere to this constitution at all times.
The Experience (2 Hours)
The difference was night and day. The entire process took just under two hours. The AI was fast, efficient, and even handled hitting its context window limit gracefully by pausing, summarizing its progress, and allowing me to continue.
The Result
The implementation was brilliant. For the embedded videos, instead of loading the heavy YouTube player immediately, it first fetched static cover images from YouTube’s CDN. The page loaded instantly with these lightweight placeholders. The full player JavaScript was only loaded when a user clicked “play.”
Here’s a conceptual look at the code transformation:
// Before: Naive implementation
- const VideoPlayer = ({ videoId }) => {
- return (
- <iframe
- src={`https://www.youtube.com/embed/${videoId}`}
- title="YouTube video player"
- frameBorder="0"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowFullScreen
- ></iframe>
- );
- };
// After: Optimized with Spek Kit's approach
+ const OptimizedVideoPlayer = ({ videoId }) => {
+ const [isPlaying, setIsPlaying] = useState(false);
+ const thumbnailUrl = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+
+ if (isPlaying) {
+ return (
+ <iframe
+ src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
+ title="YouTube video player"
+ frameBorder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowFullScreen
+ ></iframe>
+ );
+ }
+
+ return (
+ <div onClick={() => setIsPlaying(true)} style={{ cursor: 'pointer', backgroundImage: `url(${thumbnailUrl})` }}>
+ {/* Play button overlay */}
+ </div>
+ );
+ };
[!TIP] Lazy Loading: This “lazy loading” pattern is a huge performance boost for media-heavy pages. It significantly improves the Largest Contentful Paint (LCP) score, a key web vital.
This felt like a tool made for developers.
3. Open Spec: The Agile Proposer
Open Spec is philosophically similar to Spek Kit: fast, developer-focused, and built around making the specification the single source of truth.
The Workflow
After a global npm install, you run openspec init. The workflow is built around a proposal system. For any new work, you ask the AI to create a change proposal.
- The AI creates a new folder for the change.
- Inside, it generates a
proposal.md,tasks.md, andspec deltas(small files showing only the proposed changes). - You review and approve the proposal.
- You instruct the AI to implement the change.
- Finally, you tell the AI to archive the change, which merges the deltas into the main project spec.
.changes/
└── 001-initial-landing-page/
├── proposal.md
├── tasks.md
└── spec_deltas/
└── components/
└── hero.md
The Experience (7 Minutes for V1)
This was by far the fastest experience. After a few initial hiccups (I forgot to specify design colors and had to restart), the first implementation took a stunning seven minutes. All three API integrations worked perfectly.
Because it was so fast, I had time for a second iteration. I gave the AI a screenshot of the first version and asked it to modernize the design. A few minutes later, the site had animated logos and smooth scroll-reveal effects.
Head-to-Head: Philosophies & Use Cases
The radical differences in development time stem from fundamentally different philosophies.
mindmap
root((AI Frameworks))
BMAD
Philosophy: Top-down, process-driven
Human Role: Orchestrator/Manager
AI Role: Team of Specialists
Overhead: High (entire process change)
Best For: Enterprise, Regulated Industries
Spek Kit & Open Spec
Philosophy: Bottom-up, developer-centric
Human Role: Implementer/Collaborator
AI Role: Single Powerful Assistant
Overhead: Low (lightweight toolkit)
Best For: Solo Devs, Startups, Feature Work
| Feature | BMAD | Spek Kit / Open Spec |
|---|---|---|
| Core Philosophy | Process is the star | Developer is the star |
| Human Role | High-level Orchestrator | Hands-on Implementer |
| AI Model | Team of specialized agents | Single AI co-pilot |
| Scope | Macro (full project lifecycle) | Micro (single feature or task) |
| Adoption | High overhead, changes entire workflow | Low overhead, adds to existing workflow |
| Time Investment | Very High (8+ hours) | Very Low (under 2 hours) |
The Verdict: Which Framework Should You Use?
Use BMAD if: You are in a large-scale enterprise environment, especially in a regulated industry. The deep documentation, process control, and auditable trail are invaluable for compliance and managing complexity. For a solo developer, the current stable version is overkill.
For everyone else, the choice is between Spek Kit and Open Spec.
Both are fast, effective, and produce high-quality results. They empower the developer rather than replacing them.
My personal recommendation is Spek Kit. It is maintained by GitHub, has a massive community (35,000+ stars), and is under active development, suggesting a stable, long-term future. Open Spec is also excellent and developing quickly, but the corporate backing and community size give Spek Kit the edge for daily professional use.
The most important takeaway is that structured AI development is a massive leap forward from “vibe-coding.” Whether you need the rigorous control of BMAD or the agile speed of Spek Kit, adopting a methodology will make your AI-assisted work more predictable, scalable, and professional.