Vibe-coding a quilt planner

 The challenge

As a beginner quilter, I set out to make a basic quilt for my king-sized bed. I found it surprisingly difficult to find a tool to do my quilt math (calculate dimensions for standard bed sizes, block counts, and fabric needs). The tools I found online were often overwhelming, clunky on a phone, and still required me to do my own research.

As one reviewer of a popular quilting app put it:

So I decided to create a simple, mobile friendly quilt planner that did the math for me.

I had been wanting to explore how new AI-powered tools could fit into my professional workflow, so I used this project as my sandbox. This personal project gave me the freedom to test whether AI could help me design faster and build a functional site without engineering resources.

The approach

I tried out different AI tools and starter prompts.

I rebuilt the tool a few times in different tools:

1. First build: Built in ChatGPT and published it through GitHub Pages. I found it cumbersome to make edits.

2. Second build: I rebuilt the site with Figma Make. It looked exactly like the prototype I designed, but it failed on performance.

3. Final build: I ended up with Lovable. I like that I could see changes visually and didn’t have to interact with the code. However I still used ChatGPT to help with some tasks.

By the time I got to the final build, I figured out the best way to structure my first prompt:

• Purpose of the site

• Basic functionality I wanted to include in the first iteration

• What component library I wanted to use and how it should be customized

• All of the UX copy with notes on which components to use.

I researched quilters’ needs.

The first version of the site just had the basics to get an overall quilt layout and dimensions. From there, I researched feasible ways to make the site more valuable:

• I joined r/quilting to track common questions about quilt math and layout.

• I looked at app store reviews and Reddit comments to see what users liked or disliked about existing tools.

• I used ChatGPT to run a competitive analysis of the most commonly used tools I found.

I walked the line between valuable and overly complicated

I developed a list of features that quilters wanted but existing tools often failed to deliver, and tried adding them incrementally to the site.

• Features I added successfully: multiple borders and cornerstones, support for international users who buy fabric in meters but cut in inches, and adjustments for users buying fabric in fat quarters instead of off the bolt.

• Features I abandoned (too buggy or credit-heavy in Lovable): on-point quilt layouts, throw pillow planning, and custom PDF exports.

The solution

One form, one plan

The tool gives quilters a comprehensive plan from a single form. Unlike other tools that have multiple calculators, this one keeps it simple while remaining useful.

Different ways to save a plan (no account needed)

On mobile, the tool uses the native sharing functionality so you can create a Note with your plan content or email it to yourself. On desktop, users can copy the plan text, bookmark the link, or save a PDF.

Plans generate unique URLs, stored in Supabase, so users can return to them or share them without accounts. This has also allowed me to preview recently created plans on the landing page.

Beginner friendly

My content strategy was to be clear and educational. Unlike other quilting tools, this one assumes users don’t know quilting terms.

The results

• Published the tool: plan-a-quilt.com

• The site is starting to get traffic organically. View analytics

• Gained skills in applying AI strategically in a UX workflow.

• Next steps: Making code fixes to improve accessibility and performance.