--- title: "Building Bloomline — Matthew Oldach" url: "https://matthewoldach.com/writing/building-bloomline/" description: "A short visual account of building Bloomline with AI-assisted design, iteration and testing." --- ![Editorial illustration of ivory flower cards and an ornate card back on emerald velvet.](https://matthewoldach.com/stories/building-bloomline/assets/hero.webp) Building Bloomline # My first game. _Built with AI._ An experiment in design, one iteration at a time. Matthew Oldach Editorial illustration Bloomline is my first video game, and one of my experiments in designing with AI. I wanted visitors to my website to have something to play. That became a botanical card game, and a way to explore how far I could take an idea with Codex. I used AI to explore the visual identity, develop the game, and work through revisions. [imagegen](https://github.com/openai/skills/blob/main/skills/.system/imagegen/SKILL.md) gave me alternatives to react to; interactive studies made satin, paper and foil something I could compare on screen. My part was choosing a direction, pointing out what felt wrong, and asking for another pass. Three ways to finish a card ## Something I could _compare._ The same flowers, colours and card sizes, with three different surface treatments. Keeping those constants made the differences easier to judge. [![Daisy and Tulip cards in the satin linen material study.](https://matthewoldach.com/stories/building-bloomline/assets/study-satin.png)](https://matthewoldach.com/stories/building-bloomline/assets/study-satin.png) 01 ### Satin linen A fine weave and a broad, soft reflection. Used for ordinary cards [![Daisy and Tulip cards in the embossed paper material study.](https://matthewoldach.com/stories/building-bloomline/assets/study-paper.png)](https://matthewoldach.com/stories/building-bloomline/assets/study-paper.png) 02 ### Embossed paper Shallow relief and soft shadows, with almost no shine. An explored alternative [![Daisy and Tulip cards in the restrained foil material study.](https://matthewoldach.com/stories/building-bloomline/assets/study-foil.png)](https://matthewoldach.com/stories/building-bloomline/assets/study-foil.png) 03 ### Restrained foil A narrow glint around an ivory face. Reserved for scored Blooms I chose satin linen for everyday play. Foil became a signal for a committed Full Bloom, giving the finish a role in the game. Details from the original interactive CSS/SVG studies, October 29. Each image opens the complete study, including compact stacks and hand cards. [![Actual Bloomline match: flower sets above, colour sets below, and the player's hand at the bottom.](https://matthewoldach.com/stories/building-bloomline/assets/game.png)](https://matthewoldach.com/stories/building-bloomline/assets/game.png) Inside the game 1. **Same flower.** Different colours form a set. 2. **Same colour.** Different flowers form a set. 3. **Your hand.** Drag cards, or select and place them. Actual local match capture from the showcase recording. Numbered callouts are editorial annotations. [Inspect full screenshot](https://matthewoldach.com/stories/building-bloomline/assets/game.png) The working loop ## Generate. Try it. _Look again._ That became the working loop: ask, compare, build, check, repeat. Skills gave the AI reusable instructions for particular jobs. [Playwright](https://github.com/openai/skills/blob/main/skills/.curated/playwright/SKILL.md) supported browser checks and recording; [HyperFrames](https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/SKILL.md) supported the film and its audio workflow. For this article, Product Design’s [ideate](https://github.com/openai/plugins/blob/main/plugins/product-design/skills/ideate/SKILL.md) and [image-to-code](https://github.com/openai/plugins/blob/main/plugins/product-design/skills/image-to-code/SKILL.md) skills took three visual directions through to this page. ![Explore image concepts, choose through author feedback, implement code and assets, then check with tests and browser review. Feedback returns to exploration.](https://matthewoldach.com/stories/building-bloomline/assets/design-loop.svg) 1. **Explore**AI image concepts 2. **Choose**Author feedback 3. **Implement**Code and assets 4. **Check**Tests and browser review How the work moved forward. Feedback could send us through another pass. One loop, up close ## Make room _for the game._ > “Size of cards in hand could be scaled down more in general to make the play area bigger.” > > My feedback during the build · October 29 1. 01 / Notice ### Too much navigation My feedback called out hidden columns and six-card stacks that did not fit. 2. 02 / Revise ### Change the proportions Smaller hand cards and responsive stack rows made more of the playable state visible. 3. 03 / Check ### Use a crowded board A six-card-stack fixture checked card visibility and hand fit across five window sizes. Editorial summary of a documented iteration. Local browser checks, not a usability study. Earlier · 420 × 588 [![Earlier 420-pixel layout with nine large hand cards arranged across two rows and directional controls above the lanes.](https://matthewoldach.com/stories/building-bloomline/assets/hand-earlier.png)](https://matthewoldach.com/stories/building-bloomline/assets/hand-earlier.png) **1 · A taller hand.** Nine large cards occupy two rows at the bottom of the screen. Later · 420 × 588 [![Later 420-pixel layout with nine smaller hand cards on one row, compact controls and a fullscreen button.](https://matthewoldach.com/stories/building-bloomline/assets/mobile.png)](https://matthewoldach.com/stories/building-bloomline/assets/mobile.png) **2 · One compact row.** The hand leaves more vertical room for play. **3 · Fullscreen access.** A later addition beside the compact toolbar. Saved captures from October 29 and November 2, shown at equal scale. Different game states: compare the controls and hand layout, not the cards in play. The later image uses a synthetic fixture. Neither is a physical-phone test. What the browser check established The crowded-board check recorded all stack cards visible and the hand fitting at 320 × 568, 420 × 588, 570 × 535, 768 × 768 and 1024 × 768. These are layout checks; they do not establish how comfortable the game is to use. The choices beneath the finish ## Keep the next _move readable._ AI made it possible to put several directions in front of me and keep developing the one I chose. Each version gave me something more specific to ask for. A card could look good on its own and still become difficult to read in a crowded hand. That meant moving between images, working screens and browser checks. The skills helped structure those jobs, while my feedback connected one pass to the next. Readable labels, compact stacks and reduced-motion behaviour all needed attention beyond the initial image. There are two kinds of AI in this story. The AI helping me build was part of the design process. The computer opponent is game logic, limited to its own hand and public information. Even there, a search timeout cannot prove that no move exists. 6 flowers 6 colours 108 cards Three copies of every flower–colour pairing. See it in motion · 45 seconds ## A turn in _the garden._ [Download film](https://matthewoldach.com/stories/building-bloomline/assets/showcase.mp4) [Watch the Bloomline showcase](https://matthewoldach.com/stories/building-bloomline/assets/showcase.mp4) Music: [“Garden Music” by Kevin MacLeod (incompetech.com)](https://incompetech.com/music/royalty-free/index.html?isrc=USUAN1500081) · [Creative Commons Attribution 4.0](https://creativecommons.org/licenses/by/4.0/). Opening 45 seconds excerpted, with a 1.5-second fade-in and 4-second fade-out. Added soundtrack; not captured game audio. [Open film in a separate player](https://matthewoldach.com/stories/building-bloomline/assets/showcase-web.webm) · [Download MP4](https://matthewoldach.com/stories/building-bloomline/assets/showcase.mp4) What the film shows Dealing, matching by flower and colour, switching and repairing sets, a Full Bloom collection, and Garden AI placements. Real local game and tutorial footage; tutorial shots are sped up. This close-up edit keeps the original 45-second timing. That is what I wanted to explore: how AI could help me move between an idea, a visual direction and something playable. Bloomline still needs human playtesting. For a first game, it has given me plenty to keep working on. The next experiment ### What I want to learn next Can a new player understand how to rearrange a set? Follow the computer’s moves? Play comfortably in the compact layout? Those are the questions I want human playtesting to answer.