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,
𝒢𝒾𝓇𝒾𝓈𝒽 ℬ𝒽𝒶𝓉𝒾𝒶
𝘈𝘞𝘚 𝘊𝘰𝘮𝘮𝘶𝘯𝘪𝘵𝘺 𝘉𝘶𝘪𝘭𝘥𝘦𝘳 | 𝘈𝘐 𝘌𝘯𝘨𝘪𝘯𝘦𝘦𝘳𝘪𝘯𝘨
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘚𝘰𝘭𝘶𝘵𝘪𝘰𝘯 𝘈𝘳𝘤𝘩𝘪𝘵𝘦𝘤𝘵
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘋𝘦𝘷𝘦𝘭𝘰𝘱𝘦𝘳 𝘈𝘴𝘴𝘰𝘤𝘪𝘢𝘵𝘦
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘎𝘦𝘯𝘈𝘐 𝘗𝘳𝘢𝘤𝘵𝘪𝘵𝘪𝘰𝘯𝘦𝘳
𝘈𝘞𝘚 𝘊𝘦𝘳𝘵𝘪𝘧𝘪𝘦𝘥 𝘊𝘭𝘰𝘶𝘥 𝘗𝘳𝘢𝘤𝘵𝘪𝘵𝘪𝘰𝘯𝘦𝘳
𝘈𝘞𝘚 𝘊𝘭𝘰𝘶𝘥 𝘛𝘦𝘤𝘩𝘯𝘰𝘭𝘰𝘨𝘺 𝘌𝘯𝘵𝘩𝘶𝘴𝘪𝘢𝘴𝘵
