It is 1 a.m., Mina has been coding alone for hours, and she wants to tell her friends: I'm doing Kiroween this year, who is in? A plain text message felt flat. In about a minute she picks the "Pirate Crypt" look, types her name in Korean, adds "Oct 31, 7 PM, Hapjeong", saves a 9:16 story image and sends a link to the group chat. Everyone who opens the link sees exactly the same invitation, and one tap adds the party to their calendar.
What it does
Kiroween Invitation turns a few choices into a polished, glowing Halloween invitation built around a white Kiro ghost and a jack-o'-lantern on a dark purple night.
- Three purposes (join, notice, recruit), any year, any name (Korean and other scripts work), plus optional date, time and place.
- Eleven drawn assets (moon, bats, cobweb, crow, cat, tombstone, skull, candle, pumpkins, hat, horns), each in one of six colors; four costumes (Dracula, mummy, pirate, skeleton); four backdrop scenes.
- Six one-click looks and a Remix button that invents a whole new look.
- Three export sizes (square, story 9:16, wide 16:9) saved as PNG, a share link that stores the whole invitation in the URL, and a calendar file (.ics) when the date can be read.
- Keyboard-navigable, with text alternatives, and a
noscriptexplanation.
The design target for the Costume Contest category is a haunting interface that also does real work: the dark, glowing look is the product, and every control changes what the picture says.
How we built it with Kiro
We treated Kiro like a small studio, not a chatbot. The spec was the script (51 requirements, failure paths written first). Steering was the house rules. A pre-commit hook was the night watchman. A custom conductor agent drove the build from Kiro CLI. Property-based tests were the stress test. And Kiro Crew was the studio next door: an independent reviewer that had never seen the build. The full write-up is in the Kiro usage field and in docs/KIRO_WRITEUP.md.
The core idea is model says, code decides. There is no AI and no randomness in the render path: the same settings always produce the same SVG, byte for byte. Validation, layer rules (a hat and horns cannot both win), the privacy scan and the calendar-date reader are plain code with named tests.
Challenges
- A mid-project pivot. The first version drew ASCII art, but it could not give the grotesque, glowing look we wanted. We switched the renderer to SVG. Because the guarantees lived in the spec and the tests, not in the renderer, 18 of the 21 requirements carried over unchanged.
- Bugs that green tests could not see. An independent review in Kiro Crew opened the app in a real Chrome and found two: the calendar feature used a Node-only function, so in a browser the button never switched on; and six preview thumbnails shared SVG element ids, so every palette looked like the first. We fixed both test-first.
- Text that does not fit. Long Korean lines left the frame. The engine has no font measuring, so it estimates text width and squeezes only lines that are too wide.
Accomplishments we are proud of
- 131 passing tests, including 10 property-based tests (about 3,050 generated cases) for determinism, safe defaults and share-link round trips.
- Two red-team rounds (42 deceptive inputs). Every one is rejected, sanitized or safely defaulted; the second round found two real bugs, fixed test-first.
- An honest limits list: we say what we did not verify.
What we learned
Green tests are necessary but not enough: a second tool looking at the real browser found what 117 passing tests missed. Writing the negative paths into the spec first made safe defaults the starting point instead of a retrofit.
What's next
Verify Safari, Firefox and mobile rendering, and import the calendar file into Google, Apple and Outlook calendars. Both are listed as unverified below.
Honest limits
- Not verified: Safari, Firefox and mobile; saving a PNG on Safari; calendar import into real calendar apps.
- Contrast is tested against the palette colors (WCAG 4.5:1), not by sampling rendered pixels, and the text-fit rule estimates widths instead of measuring a real font.
- We did not use the Kiro Crew App Kit; Kiro Crew was used as an independent reviewer only.
Built With
- amazon-cloudfront
- amazon-web-services
- aws-cloudformation
- fast-check
- javascript
- kiro
- kiro-cli
- kiro-crew
- node.js
- svg