DEV Community

Cover image for Graduating from Vibe Coding: Spec‑Driven Development with Kiro
Eliana Lam for AWS Community On Air

Posted on

Graduating from Vibe Coding: Spec‑Driven Development with Kiro

Speaker: Ray Goh @ AWS Community Day Hong Kong 2025

Summary by Amazon Nova

https://www.youtube.com/watch?v=kkYuAUAggG8



Introduction to Kiro

Kiro is similar to Visual Studio Code (VS Code) as it is forked from the VS Code base. Amazon has built additional features on top of it, making it a subscription-based service due to its reliance on underlying Large Language Models (LLMs) for agentic coding features.

Spec Mode and Spec-Driven Development

  • Spec Mode: A unique feature of Kiro called spec mode or spec-driven development.

  • Traditional Vibe Coding: Most developers are accustomed to vibe coding, where they prompt a coding agent to assist with coding or debugging.

  • Spec-Driven Development: A different approach to building software, starting from requirements, design, task planning, and finally coding. It involves structured requirements and design before actual coding begins.

Agent Steering Feature:

  • Agent Steering: A feature that allows developers to guide the coding assistant on how to write software.

  • Markdown File for Product Overview: Developers can provide a markdown file describing the product, including its overview, workflows, and use cases. This helps in aligning the requirements and design with the product overview.

  • Project Structure Definition: Developers can define the project structure in a markdown file before coding starts. This includes enterprise standards or specific ways of structuring project files and test files.

  • Naming Conventions: Developers can specify naming conventions in the markdown file, ensuring that the created files follow the correct conventions.



Defining Technology Stack

  • Technology Stack Definition: A third example of agent steering is defining the technology stack for the project.

  • Front-end: Specify frameworks like React.

  • Back-end: Specify frameworks or technologies for the back-end.

  • Dependencies: Define project dependencies in markdown files.

Coding Conventions

  • Coding Conventions: Predefine coding conventions for the organization to ensure the coding assistant adheres to them.

Support for agents readme

  • Agents readme Support: The latest release of Kiro introduced support for agents.readme, an open standard for agent markdown files.

  • Interoperability: Define an agent readme file in Kiro and use it in other coding assistants like Cursor, ensuring alignment with agent markdown standards.

Agent Hooks

  • Agent Hooks: Similar to web hooks, agent hooks trigger workflows upon specific events (e.g., saving or updating a file).

  • Security Standards:

  • Example: Define security standards to ensure code does not contain hard-coded credentials or security vulnerabilities.

  • Security Scan on Save: Define an agent hook for a security review that scans for API keys, private keys, IP addresses, etc., and remediates them automatically.

  • Demonstration:

  • Existing Code: A simple example with a hard-coded IP address.

  • Agent Hook Creation: Define an agent hook to perform a security scan upon saving the file.

  • Result: The security scan identifies the hard-coded IP address as high-risk and fixes it by changing it to use an environment variable, defaulting to localhost if not present.

  • Shift-Left Security: The security scan is performed at the point of saving the file, shifting security checks left in the development process rather than during CI/CD.



Additional Uses of Agent Hooks

  • Figma Design Comparison:

  • Integration: Use agent hooks to compare coded elements with a Figma UX design upon saving the file.

  • MCP for Figma: Integrate with MCP for Figma to ensure code aligns with the defined design.

  • Example: Prompt the system to implement a Figma design in Angular, generating code directly from the Figma design.

MCP Server Integration (Figma to Code)

  • Example: Integrate MCP for Figma and prompt the system to generate Angular code from a Figma design.

  • Result: The system generates code directly from the Figma design, creating a site from the design.

MCP Server Integration (Up-to-Date Documentation):

  • Integration: Use MCP server to refer to the most up-to-date documentation, such as AWS documentation and knowledge base.

  • Example: Integrate with AWS documentation and prompt the system to check if locally written code can run on AWS Lambda.

  • Result: The system not only identifies issues with the code when deployed to Lambda but also creates a migration plan, suggesting changes like using S3 pre-signed URLs for file transfer.



Spec-Driven Development in Kiro

  • Spec-Driven Development: Highlighted as the best advancement in agile development since its inception.

  • Challenges in Agile: Often, what users specify is not what is ultimately built due to evolving requirements and miscommunications among project managers, business analysts, and users.

  • Adaptive Approach: Kiro's spec-driven development embraces these challenges by adapting dynamically throughout the development process.

Real-Use Case Demo

  • User Requirement: The user wanted to build an application for file chunking, specifically splitting a 500 MB file into five 100 MB chunks.

  • [ 1 ] Implicit Requirements:

  • Graphical User Interface (GUI)

  • Drag-and-drop functionality for file input

  • Configuration options for splitting (e.g., five chunks or chunks of 10 MB each)

  • Download options for individual files and a zip file of all split files

  • [ 2 ] Development Time:

  • Traditional Estimate: Two weeks

  • Kiro Development: Six hours (demonstrated in a 10-minute sped-up video)

  • [ 3 ] Video Demonstration:

  • A 10-minute video showcasing the six-hour development process using Kiro, with a real-time timer displayed in the top left corner.



Initial Requirements and Design

  • User Input: The product owner types in the initial requirement for an application to split large files into smaller chunks.

  • Kiro's Response: Kiro generates seven user requirements with acceptance criteria within a minute.

  • User Feedback: The product owner reviews and approves the requirements.

Design Adjustments

  • Initial Design: Kiro creates an initial design, assuming a Command Line Interface (CLI).

  • User Correction: The product owner requests a Graphical User Interface (GUI) instead of CLI.

  • Real-Time Update: Kiro adjusts the design in real-time to include a GUI and a backend API.

Iterative Design Process

  • To-Do File: A to-do file is used to track additional questions and requirements as they arise.

  • [ 1 ] The product owner asks about the mechanism for sending files from the front end to the back end.

  • Design Update: The design is updated to document the upload mechanism.

  • [ 2 ] New Requirement: The product owner adds a requirement to support files up to one terabyte.

  • Design Update: The design is updated to handle one terabyte file.

  • [ 3 ] The product owner asks how the back end knows the file size before chunking.

  • Design Update: The design is updated with more detail to answer this question.

Task Planning

  • Task Plan Creation: After finalizing the requirements and design, a task plan is created, breaking down the project into individual tasks (Task 1 to Task 10).

  • Time Taken: The entire process from initial requirements to task planning takes less than 20 minutes.



Task Planning and Coding

  • Task Traceability: Each task is traceable back to the requirements, ensuring end-to-end traceability from requirements to design to task plan.

  • Unit Tests: Kiro generates unit tests alongside coding. Tasks must pass all unit tests before being considered complete.

  • Debugging: Kiro automatically debugs and fixes unit test failures.

  • Error Handling and Optimization: Kiro handles error handling, validation, and performance optimization as part of the task.

Testing and Bug Fixing

  • Initial Testing: The application is tested for the first time, revealing UX issues (e.g., hard-to-read blue font).

  • Bug Identification: An error occurs during file upload, identified through log messages.

  • Agent-Assisted Debugging: The error code is copied and pasted into the agent, which attempts to fix the bug.

  • Successful Upload: The bug is fixed, and a large file upload is successful.

  • Chunking and Downloading: The application successfully chunks files and allows downloading of individual chunks and zip files.

UX Improvements

  • Color Change: The blue font is changed to cyan to improve readability.

  • Button Appearance: The gray color of the buttons is changed to a more acceptable color.

  • Multiple File Upload: The application is tested with a two gigabyte file to ensure it can handle large files.

Testing Automation

  • Manual Testing: Initially, testing was done manually, including chunking multiple files and verifying UX issues.

  • Automation: Kiro creates a design and documentation using mermaid diagrams and automates it using Playwright.

  • Cross-Browser Testing: The automated tests are run in Firefox, Chrome, Safari, and mobile devices.

  • End-to-End Flow: The process demonstrates an end-to-end flow from requirements to building software to automated live verification, all within the IDE.

Summary

  • The process demonstrates Kiro's ability to handle spec-driven development, from requirements and design to coding, unit testing, and UX improvements, all within a significantly reduced timeframe compared to traditional methods.

Conclusion and Future of Agile Development

  • Agile Team Size: consist of one experienced engineer and one domain or functional expert working together in an IDE.

  • Time Comparison: The entire process, from requirements to automated testing, was completed in six hours, compared to the two-week estimate given by an entire agile team.

  • Spec-Driven Development: The session aimed to provide a glimpse of what can be achieved with spec-driven development using Kiro.



Team:

AWS FSI Customer Acceleration Hong Kong

AWS Amarathon Fan Club

AWS Community Builder Hong Kong

Top comments (0)