# Home Assistant + Vibe Coding: From AI Image to Working Card

Most of what I write here is about Oracle, APEX, and SQLcl. This one is a little different.

I started playing around with Home Assistant at my house and using AI to help me get things connected. That eventually included my pool, which uses a Hayward OmniPL controller.

My original goal was pretty simple: get the pool into Home Assistant and give me some decent controls on an iPad.

It worked. But after seeing some beautiful Home Assistant dashboards on Reddit, I wanted something better than the collection of basic cards I had.

So I asked AI to generate an image of what a better dashboard could look like. That became the starting point for a working custom card—and eventually a small open-source project.

## First, get it working

Codex helped me connect the controller through the existing [OmniLogic Local integration](https://github.com/cryptk/haomnilogic-local). It connects over the local network and exposes the temperatures, heater, pump, lighting, and chlorination controls in Home Assistant.

Here is the first version:

![The original pool dashboard built with standard Home Assistant cards](https://cdn.hashnode.com/uploads/covers/65989e80819e26965a4d250d/922a0bb5-6a52-4491-979c-cbc88afc73dd.png align="center")

*The original dashboard, before the redesign.*

The information was there, but I didn't like the way it looked. Lots of separate boxes, buttons, and labels. I wanted something that felt more put together, especially on a tablet I would leave open in the house.

In Home Assistant, a **card** is a dashboard component. I could keep arranging existing cards, or try building one around the layout I wanted.

## Start with an image

My design requirements were very technical: “These cards are ugly.”

So I asked AI to start with an image:

> First start by creating an image for me for inspiration and then we can go from there.

I refined the design through several prompts until I had a direction I liked:

![AI-generated pool dashboard concept with generic artwork and sample readings](https://cdn.hashnode.com/uploads/covers/65989e80819e26965a4d250d/2db7877d-6c59-4b05-8a1b-3dd78907c5ed.png align="center")

*AI design concept*

This gave me something concrete to react to: a large pool visual, a clear water temperature, heating controls beside it, and separate areas for circulation, lighting, and chlorination. Instead of asking for it to look “better,” I could point to the layout I liked.

## Turn that image into a working card

Next, I asked Codex to build a custom Home Assistant card based on the design.

Getting the appearance right was only part of it. The controls needed to use my Home Assistant entities—the individual sensors and equipment controls—and show their actual states.

For example, an enabled heater isn't necessarily heating right now. A chlorinator can be enabled but idle. In my setup, the water temperature can be unavailable while the pump is off. The card needed to handle those cases rather than always look like the mockup.

Here is the implemented card:

![Pool Control Card demo using generic pool artwork and simulated equipment readings](https://cdn.hashnode.com/uploads/covers/65989e80819e26965a4d250d/c85d0a61-34a6-4fd1-bd60-de0543ef6fbb.png align="center")

*The working card, shown with generic demo artwork and simulated readings.*

I also checked landscape and portrait tablet layouts: did the navigation fit, and were the controls large enough to use by touch?

The image is configurable too. Users can supply a photograph or artwork; the public examples use the generic illustration shown here.

## Make it configurable

Once I had something I liked, I started thinking about sharing it. Hardcoding my equipment names and dashboard links wouldn't be much use to someone else.

With Codex's help, I added configurable entity mappings and a visual editor inside Home Assistant. Users can choose their equipment, change labels, supply a pool image, and select which sections to display. The card supports both a regular card layout and a full panel layout for a tablet dashboard.

To open the editor, choose **Edit dashboard**, then **Edit** on the Pool Control Card. The equipment fields use Home Assistant's entity selectors:

![Actual Home Assistant visual card editor showing equipment selectors](https://cdn.hashnode.com/uploads/covers/65989e80819e26965a4d250d/64333045-706f-4135-9313-0289a30f6c6b.png align="center")

*The actual Home Assistant visual editor, showing the equipment selectors.*

The card uses each user's own equipment mappings and image. No personal pool photos or home configuration are bundled with it.

## Put it on GitHub

I published it as [**Pool Control Card**](https://github.com/neilfernandez/pool-control-card). The first public beta includes the card, visual editor, installation instructions, examples, and 15 automated tests. Those tests check configuration and command handling with simulated Home Assistant calls; I also checked the dashboard and editor in my live instance.

I installed the beta through **HACS**, the Home Assistant Community Store, as a custom repository. I've also [submitted it for inclusion in the default HACS catalog](https://github.com/hacs/default/pull/11995). As of October 18, 2026, that submission is waiting for maintainer review. The README explains how to install it while that review is pending.

## Four prompts that shaped the project

Here are the four main requests, condensed from a longer conversation. There was setup, troubleshooting, and design iteration between them.

![Illustrated recap of connecting the pool, refining a design, building the card, and preparing it for sharing; all previews use generic demo artwork](https://cdn.hashnode.com/uploads/covers/65989e80819e26965a4d250d/e0c82c1e-2327-4b01-b8c1-028c3572e1ef.png align="center")

*AI-generated recap with paraphrased prompts and illustrative previews, including the editor - not screenshots of the original conversation.*

The card and installation instructions are on [GitHub](https://github.com/neilfernandez/pool-control-card). So far, I've tested it with Hayward OmniPL through OmniLogic Local. Other integrations may work if they expose compatible entities, but I haven't verified those yet. If you try another setup, [open an issue](https://github.com/neilfernandez/pool-control-card/issues) and let me know how it goes.
