Hi! Iโm Girish, an AWS Community Builder and Cloud Technology Enthusiast with expertise in delivering customer-focused, business-impacting cloud transformation programs of high complexity.
In my previous articles, Iโve explored several powerful features of Kiro IDE and how it is transforming the way developers build software using agentic AI workflows.
Some of the areas Iโve covered include:
- Vibe Coding for rapid idea-to-code prototyping
- Spec-Driven Development using structured requirements, design, and task workflows
- Hooks and Steering Documents to guide consistent code generation and developer workflows
- Building real-world applications such as a Customer Lookup API powered by Amazon API Gateway, AWS Lambda, Amazon DynamoDB, and AWS SAM
Through these examples, Iโve demonstrated how developers can build meaningful solutions simply by providing prompts and leveraging Kiroโs intelligent code generation capabilities while still maintaining full control over review, refinement, and deployment.
Since AI governance is equally importantโespecially for enterprise adoption, Iโve also shared content on:
- Secure enterprise rollout of Kiro IDE using AWS IAM Identity Center
- AI model, policy, and MCP governance using the Kiro administrative dashboard
In this article, I take a simpler but very practical use case:
Using Kiro IDE to build a simple portfolio website using only HTML and CSS, starting from a simple prompt and following Kiroโs spec-driven workflow from requirements to final prototype.
In this hands-on walkthrough, I used Kiro to create a simple personal portfolio website from a natural language prompt then iteratively refined it using follow-up prompts.
This is a great beginner-friendly example that demonstrates how Kiro uses:
- Requirements.md for understanding intent
- Design.md for defining technical design
- Task.md for execution planning
- Iterative prompts for incremental improvements
Letโs walk through it.
What We Will Build
For this hands-on example, letโs use a simple and practical real-world scenario.
Imagine you are a software engineer who wants to create a lightweight personal portfolio website to showcase your professional journey and technical work online.
The goal is to build a simple website that highlights:
- Professional Experience โ a brief summary of your career journey and domain expertise
- Key Projects โ selected projects that demonstrate your technical skills and business impact
- Contact Information โ an easy way for recruiters, peers, or collaborators to reach you
- GitHub and Technical Blogs โ links to your public code repositories and technical writing
Rather than manually creating HTML and CSS from scratch, I will ask Kiro IDE to generate the entire website prototype using a natural language prompt.
This makes it a perfect beginner-friendly use case to demonstrate how spec-driven development in Kiro can transform a simple idea into a working website by progressing through:
Prompt โ Requirements โ Design โ Tasks โ Code โ Review โ Refinement
Letโs build it.
Step 1: Start with the Initial Prompt
As with most workflows in Kiro IDE, everything begins with a natural language prompt.
The goal here is not to provide detailed technical implementation steps upfront, instead, I clearly describe the business need, expected website structure, and a few technical constraints, then allow Kiro to interpret and translate that into a structured development workflow.
Here is the initial prompt I provided to Kiro:
I am a software engineer with 5 years of experience in the financial/banking industry.
My projects included:
- creating a customer serving banking website
- a credit card launch project
- a regulatory requirement project
- currently working on a Generative AI customer service chatbot integrated with company knowledge base.
I would like to create a portfolio website to showcase my job experience.
Create a simple website only using HTML.
Requirements:
- Four tabs: About Me, Projects, Contact, and a section to link my GitHub and Technical blogs
- single page website
- no JavaScript
- simple CSS allowed
- no testing framework required
- simple prototype only
Why this prompt works well
This prompt gives Kiro enough context to understand:
- Who the user is โ a software engineer with banking and AI experience
- What needs to be built โ a portfolio website
- How it should look โ single-page layout with defined sections
- Technology constraints โ HTML + simple CSS only, no JavaScript
- Expected complexity โ simple prototype, not a production-grade application
This is an important concept when working with Kiro: better prompts lead to better specs and cleaner generated code.
Step 2: Confirm if This Is a New Feature or a Bug
Once the initial prompt is submitted, Kiro IDE begins by asking an important clarifying question:
โIs this a new feature or a bug?โ
For this use case, the answer is straightforward:
New Feature
This small step is important because it helps Kiro determine the appropriate workflow path.
By selecting New Feature, Kiro activates its structured spec-driven development workflow, which guides the implementation through:
Requirements โ Design โ Tasks โ Code
This ensures development starts with intent and structure not just immediate code generation.
Step 3: Generate Requirements
The next step is to ask Kiro to begin with requirements.
Kiro automatically generates a file named:
Requirements.md
Example output:
Why this matters
This step converts a plain English prompt into structured product requirements.
Instead of immediately jumping to code, Kiro first defines:
- what must be built
- what functionality is required
- what technical boundaries exist
This is one of the biggest strengths of spec-driven development.
Step 4: Generate Technical Design
Once the requirements are approved, Kiro moves to the next step in the workflow using the approved requirements as context to generate the technical design.
Kiro generates:
Design.md
Example output:
What happened here?
Kiro translated business requirements into an implementation blueprint.
At this stage, we now know:
- the overall architecture
- the technologies being used
- the major UI components
- expected styling principles
This helps reduce ambiguity before code generation begins.
Step 5: Generate Tasks
Once the technical design is approved, Kiro automatically moves to the next step using the design and requirements as context to generate an implementation plan.
Kiro produced:
Task.md
Example output:
Why this is useful
This becomes the execution plan.
Instead of one large generation step, Kiro breaks implementation into manageable tasks making it easier to:
- review progress
- adjust individual tasks
- iterate safely
Step 6: Kiro Creates the Files
Once requirements, design, and tasks are approved, Kiro starts execution.
Generated specification files:
- requirements.md
- design.md
- task.md
Then Kiro executes the tasks and creates the actual website files:
- index.html
- style.css
At this point, the first working prototype is complete.
Without manually writing a single line of code, we now have a functional single-page portfolio website generated directly from a prompt.
Thatโs the power of agentic development with Kiro IDE.
At this stage, the prototype is complete.
Initial Website Layout
Once Kiro completed the implementation tasks, the first version of the portfolio website was generated.
The initial prototype included the following sections:
About Me
A concise summary highlighting professional experience in the banking and software industry, along with recent work in Generative AI.
Projects
- A dedicated section showcasing key projects, including:
- Customer banking website
- Credit card launch initiative
- Regulatory requirements project
- Generative AI customer service chatbot
Contact
A simple contact section containing an email address and a LinkedIn placeholder for future updates.
Links
A section with external links to:
- GitHub profile
- Technical blog site
Below is the initial website generated by Kiro IDE:
Iterative Improvements Using Follow-Up Prompts
This is where Kiro IDE acts as your coding partner.
Once the initial prototype is generated, you can continue refining the application using simple follow-up promptsโwithout manually editing files or searching through code.
Update #1: Change Email Address
Prompt: update email under contact section to xxxxxx@cloudwithgirish.com
Kiro identifies the relevant section and updates only the Contact section.
No manual file search or code edits required, just a simple prompt-driven change.
Update #2: Convert Vertical Skills to Horizontal Layout
In the initial design, the Key Skills section used vertical bullet points, which consumed too much screen space.
Prompt: key skills taking too much space, rather than vertical bullets, make it horizontal bullets
Kiro automatically updated both the HTML structure and CSS styling.
Before & After
This small update significantly improved the layout by making the skills section cleaner, more compact, and visually easier to scan.
This demonstrates the real value of iterative development with Kiro: small prompt, targeted change, immediate improvement.
Conclusion
In this article, we used Kiro IDE to build a simple portfolio website and demonstrated how spec-driven development can transform a plain English prompt into a working HTML prototype.
By combining structured requirements, technical design, task-driven execution, and iterative follow-up prompts, we moved seamlessly from idea to implementation without manually writing the initial code.
This example highlights the power of agentic development workflows, where AI moves beyond simple code generation and becomes an active participant in the software development lifecycle helping define requirements, design solutions, execute tasks, and support iterative refinement.
Whether you are building simple websites, prototyping internal tools, or developing enterprise applications, Kiro IDE provides a practical and structured way to accelerate development while keeping developers in control.
Thanks for reading, and I hope you found this article insightful.
Watch the video here:
Thanks,
๐ข๐พ๐๐พ๐๐ฝ โฌ๐ฝ๐ถ๐๐พ๐ถ
๐๐๐ ๐๐ฐ๐ฎ๐ฎ๐ถ๐ฏ๐ช๐ต๐บ ๐๐ถ๐ช๐ญ๐ฅ๐ฆ๐ณ | ๐๐ ๐๐ฏ๐จ๐ช๐ฏ๐ฆ๐ฆ๐ณ๐ช๐ฏ๐จ
๐๐๐ ๐๐ฆ๐ณ๐ต๐ช๐ง๐ช๐ฆ๐ฅ ๐๐ฐ๐ญ๐ถ๐ต๐ช๐ฐ๐ฏ ๐๐ณ๐ค๐ฉ๐ช๐ต๐ฆ๐ค๐ต
๐๐๐ ๐๐ฆ๐ณ๐ต๐ช๐ง๐ช๐ฆ๐ฅ ๐๐ฆ๐ท๐ฆ๐ญ๐ฐ๐ฑ๐ฆ๐ณ ๐๐ด๐ด๐ฐ๐ค๐ช๐ข๐ต๐ฆ
๐๐๐ ๐๐ฆ๐ณ๐ต๐ช๐ง๐ช๐ฆ๐ฅ ๐๐ฆ๐ฏ๐๐ ๐๐ณ๐ข๐ค๐ต๐ช๐ต๐ช๐ฐ๐ฏ๐ฆ๐ณ
๐๐๐ ๐๐ฆ๐ณ๐ต๐ช๐ง๐ช๐ฆ๐ฅ ๐๐ญ๐ฐ๐ถ๐ฅ ๐๐ณ๐ข๐ค๐ต๐ช๐ต๐ช๐ฐ๐ฏ๐ฆ๐ณ
๐๐๐ ๐๐ญ๐ฐ๐ถ๐ฅ ๐๐ฆ๐ค๐ฉ๐ฏ๐ฐ๐ญ๐ฐ๐จ๐บ ๐๐ฏ๐ต๐ฉ๐ถ๐ด๐ช๐ข๐ด๐ต
