DEV Community: Quinn

I Built an AI Crochet Pattern Engine Using Browser Agents (Debugg.ai + Claude Code + OpenAI) for my Sister

Quinn — Tue, 17 Mar 2026 18:31:02 +0000

Most people think browser agents are for QA, scraping, or growth automation.

I wanted to test something weirder:

Can you fully automate a creative, messy, human workflow like crocheting?

Turns out — yes. And it’s a perfect stress test for agent reliability.

🧠 The Idea

Crochet patterns are essentially programs written for humans:

Step-by-step instructions
Stateful execution (you can’t skip rows)
Error-prone (one missed stitch breaks everything)
Inconsistent formatting across the internet

This makes them ideal for testing agentic workflows over real UIs.

To ground this, I used real-world pattern flows from sites like the one I built for my sister:
👉 Crochets.site Crocheting Page

There are many types of general resources sites that provide structured + semi-structured patterns, materials, and UI interactions — perfect for agent testing.

🏗️ System Architecture

                ┌──────────────────────┐
                │   Surfs.dev Agents   │
                │ (browser execution)  │
                └─────────┬────────────┘
                          │
        ┌─────────────────┼─────────────────┐
        │                 │                 │
        ▼                 ▼                 ▼
 Pattern Sites     Pattern Editor UI   Test Runner (Debugg.ai)
 (scraping)         (Next.js app)        (validation layer)

        │
        ▼
   OpenAI / Claude
 (parsing + generation)

        │
        ▼
 Structured Pattern JSON

🔍 Step 1: Scraping Real Patterns

Using Surfs.dev agents (real browser sessions), I:

Navigate crochet sites
Extract rows, stitch counts, materials
Handle messy UI (expandable notes, dynamic sections)

Why not traditional scraping?

Because most pattern sites:

Aren’t clean HTML
Require interaction
Break easily

Browser agents solve this.

🧩 Step 2: Structuring with LLMs

Raw pattern example:

Row 3: Ch 1, *sc in next st, inc; rep from * around. (18 sts)

Converted into structured JSON:

{
  "row": 3,
  "stitches": 18,
  "instructions": [
    { "type": "sc", "count": 1 },
    { "type": "inc", "repeat": true }
  ]
}

Model Roles

OpenAI → deterministic parsing + schema output
Claude Code → reasoning, cleanup, transformations

🪄 Step 3: Generating Variations

Once structured, patterns become programmable.

Examples:

“Make it longer” → extend BODY rows
“Add ribbing” → inject BLO stitches
“Convert to child size” → adjust stitch counts

Crochet becomes:

A DSL for physical objects

🧪 Step 4: Testing with Debugg.ai

This is the key unlock.

We treat patterns like end-to-end tests.

What gets validated:

Stitch counts per row
Logical progression
UI rendering
Instruction clarity

Because:

One bad row = broken output

🤖 Step 5: Execution via Browser Agents

Agents:

Load pattern UI
Click through steps
Expand notes
Simulate a human following instructions

This creates:

Replayable sessions
Failure logs
Deterministic debugging

⚠️ Challenges

1. Data is messy

Different sites = different formats
→ solved with LLM normalization

2. Fully stateful system

Each row depends on the last
→ solved with full agent simulation

3. Tiny errors compound

→ solved with Debugg.ai validation loops

🚀 Why This Matters

Crochet is just a proxy.

The real insight:

Most real workflows are not APIs — they’re UI-driven systems.

Examples:

SaaS dashboards
Internal tools
Marketplaces
Creative workflows

If agents can handle crochet patterns reliably:
they can handle almost anything.

🧠 Key Takeaway

Crochet patterns are:

Programs for humans

And with Debugg.ai + Surfs.dev:

They become programs that can be tested, executed, and improved by agents.

If you’re building agent workflows (growth, ops, QA, etc.), I’d love to see what you’re working on.

Basic Example of a Custom Django Form

Quinn — Sat, 15 Apr 2023 16:49:27 +0000

Django is a popular Python web framework that offers a lot of flexibility and customization options. One of the most powerful features of Django is its ability to create custom form classes that can be used to manipulate data in your models.

In this article, we'll show you how to create a custom form class for a Django model field.

We'll be writing additional how-tos for more complicated use cases that we've come across for our automotive platform. For instance when handling addresses in our analytics platform (see Lonestar Chervolet ), things become much more complicated as a single field in the form actually consists of many components like city, state, lat/lng, etc. But as always, you have to start with the basics!

Step 1: Define the model

Before you can create a custom form class for a model field, you need to define the model itself. Let's say, for example, that we want to create a custom form class for a field called "age" in a "Person" model. Here's what the model might look like:

from django.db import models

class Person(models.Model):
    name = models.CharField(max_length=255)
    age = models.IntegerField()

Step 2: Create the form class

Now that you have your model defined, you can create the custom form class for the "age" field. To do this, you'll need to create a new Python file in your Django app and define a new class that inherits from the base form class (in this case, forms.ModelForm).

from django import forms
from .models import Person

class PersonForm(forms.ModelForm):
    class Meta:
        model = Person
        fields = ['age']

In this example, we've defined a new form class called "PersonForm" that only includes the "age" field from our Person model.

Step 3: Customize the form class

Now that you have a basic form class, you can customize it to fit your needs. For example, you might want to add validation to the form to make sure that the user enters a valid age. You can do this by adding a new method to the PersonForm class:

class PersonForm(forms.ModelForm):
    class Meta:
        model = Person
        fields = ['age']

    def clean_age(self):
        age = self.cleaned_data['age']
        if age < 0 or age > 120:
            raise forms.ValidationError('Invalid age')
        return age

In this example, we've added a new method called clean_age() that checks to make sure that the age entered by the user is between 0 and 120. If the age is outside of this range, we raise a validation error.

Step 4: Use the custom form in your views

Finally, you can use your custom form class in your views. Here's an example of how you might use the PersonForm class to create a new person record in your database:

from django.shortcuts import render
from .forms import PersonForm

def create_person(request):
    if request.method == 'POST':
        form = PersonForm(request.POST)
        if form.is_valid():
            form.save()
            return render(request, 'success.html')
    else:
        form = PersonForm()
    return render(request, 'create_person.html', {'form': form})

In this example, we've created a new view called "create_person" that uses the PersonForm class to create a new person record in the database. When the user submits the form, we validate it using the is_valid() method. If the form is valid, we save the record and display a success message. If the form is not valid, we display an error message and allow the user to correct their input.

Conclusion

In this article, we've shown you how to create a custom form class for a Django model field. By defining your own form classes, you can add validation, custom widgets, and other features to your Django forms. This gives you a lot of flexibility and customization options when working with Django.

Analytics with Django & Chart.js - Simpler Than Expected

Quinn — Tue, 28 Feb 2023 17:34:13 +0000

Recently, we decided to expand our car selling platform with a new search feature that allowed consumers to search for dealerships in their area based on unique metrics that we extract from their historic inventory data like average prices, models, and more.

To do this, we had to dive into front-end charting for the first time. Our django / python backend has been great for us across a variety of features we've built, but our team's Javascript experience is significantly less than python. As such in our search for the ideal charting library we were hesitant to dive too deep into complicated js options or things that required heavy lifting on setup.

A few options we considered:

Recharts
CanvasJS
C3.js
Chart.js

Ultimately we decided to go with Chart.js because of a few main benefits. First, it's very low setup cost made playing around with its features quick and easy. Second, it is very well adopted across many platforms and offers clean and thorough documentation & support. There's nothing more frustrating than bringing on a new library that turns out to be a huge headache to understand or find documentation for.

Despite our initial concerns that this foray into a javascript only library was going to be a tough journey, adding chart.js to our django platform ended up being a cinch.

To get started, you just have to add the package to the page you'd like to add charts to:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Note there may also be an option to add a charting library directly to your python environment using pip install django-charts. For simplicity and ease of starting, we just added the script library to our required pages.

Once you've added the script, you can then start generating charts with their pretty simple constructor calls.

We had our 'x-axis' data in a dictionary key accessed with:
inventory.new.models.items.model

We had our 'y-axis' data in a dictionary key accessed with:
inventory.new.models.items.num

To generate the chart we simply use django templating to loop through the dictionaries in the chart instantiation script.

<script async>
        const ctx = document.getElementById('newInventoryChart');

        new Chart(ctx, {
            type: 'bar',
            data: {
              labels: [
                    {% for model, num in inventory.new.models.items %}'{{ model }}',{% endfor %}
                ],
              datasets: [{
                label: '# of Vehicles in stock',
                data: [
                    {% for model, num in inventory.new.models.items %}{{ num }},{% endfor %}
                ],
                borderWidth: 1,
                backgroundColor: '#17428f'
              }]
            },
            options: {
              scales: {
                y: {
                  beginAtZero: true
                }
              },
              aspectRatio: 1
            }
        });
</script>

Once you've done this, you're pretty much done. All you need to do is ensure you have an html tag somewhere that matches the 'id' that you used in the chart constructor. Chart.js will automatically take care of generating the visual for you on page load.

For now, we have a mix of charts and basic metrics for each dealership, but plan to expand the single-point metrics into over-time charting with the library. For instance, Bayway Chevrolet below shows the average price, most popular model, and number of vehicles sold across both the new and used car departments.

We would like to be able to add the ability to on-the-fly generate new charts based on user input. For instance, if the user is searching for Silverados they could click to filter by model and get detailed metrics for just that vehicle. Eg. pricing changes, popular features, cost to own, etc.

Because it's relatively expensive from a load time perspective to just add all possible charts in the initial template, we expect to build out additional REST APIS that will allow the frontend to pull new chart data as it's needed.

I hope this has been helpful to anyone considering adding Chartjs to their django application and would be happy to answer any questions in the comments. As I mentioned, it is quite easy to get up and running and you shouldn't be concerned if you're not a JS pro!

Payments - an unforeseen roadblock

Quinn — Fri, 25 Dec 2020 21:11:48 +0000

I've been working on a website for used car buyers who want to skip handling the pre purchase inspection step themselves by having everything already done. It's a new version of the peer-to-peer marketplace with some tweaks to avoid problems that companies like beepi ran into. The hope is by focusing on higher-end foreign cars, which are much harder to sell for a good price to large auto dealers, we can carve out a bit of a niche market.

Car buyers can ensure that all the vehicles service has been done appropriately and the inspection shows any indication of potential repair costs coming down the road. All seemed good!

The interesting thing this week though was that after assuming I could use Stripe connect, I chatted with one of their growth team members and apparently they didn't 'like the business model' such that they won't facilitate payments for the company. Now, there are definitely other options and I will make it work, but I definitely did not see that coming. The application fits quite well into their 'Stripe Connect' marketplace functionality so it took me a bit by surprise.

Stripe is great for handling basic CC payments on SaaS software but be warned - if you are venturing into anything outside of the immediately basic, they may just avoid the risk. My guess is that if you have some revenue they'd be more willing to investigate more.

Moral of the story - check before you assume you can use Stripe with your new business.

Use Django to Add Schema for Rich Results

Quinn — Sun, 11 Oct 2020 18:53:26 +0000

I recently went through the process of learning about Schema markup and how to use it and figured I would share what I ended up with.

For my website, I built a feature where users can search for different car shows that are going on in their area but I wanted the results to be able to show up similar to how they do on Eventbrite and the other larger sites so I started to investigate Schema. Generally, it's pretty self explanatory once you go through a few of the examples at their docs page:

https://schema.org/Event

However, I was using Django and wanted to make sure that the results could be looped through using the Django template engine. For instance, for car shows in houston I just set the Event markup to loop through the queryset and use the appropriate data pieces. Of course, you'll need to put in you specific model attributes. See the full example of what I used below. Just add this code to the rest of your scripts and you'll be off to the races.

You'll also likely want to add the single event markup to the detail page of your events.

While generally pretty straightforward, the json code is very particular about ending commas so you have to make sure the last one isn't there with an if statement. Google search console will also still suggest that you add a few additional parameters if you use the rich text results tool that they provide. These aren't dealbreakers though so you can choose to implement or not.

Hope this helps on your journey to improve your site with Rich Results!

How To Use Multiple Markdown Fields for Articles?

Quinn — Fri, 25 Sep 2020 03:08:07 +0000

I've been working on a site for a few months and made the (potentially questionable) decision to build the thing from scratch using JQuery/Django/Python/Postgres. I've found that although the front-end work of the platform can be quite difficult, all that matters is that it works for the user.

This is different when it comes to the blog/forum/whatever you want to call it because the search engines and webmasters expect you to do very specific things in terms of structure.

I'm using markdown fields for the article content which I think is pretty typical. I have no issue integrating a header image followed by text. You can check out an example article here (I'm into cars btw): how much does it cost to wrap a car. This is ok, but I'd like to be able to include additional media like videos, graphics, etc.

Does anyone have experience in an option like wordpress where each section is defined as a media type? Eg first section is a markdown field with text, then a video field, then another markdown, etc. I'd be interested in hearing how this is structured from a database perspective.

My thought is that I could remove the individual markdownfield from the article model and replace it with a foreignkey to a 'media' model. Then use that to have separate sections that combine to create the article.

Would love some feedback on the approach or suggestions!

How To Learn Django / Python in a Month

Quinn — Tue, 25 Aug 2020 00:46:17 +0000

So quick disclaimer before jumping in. I had some background in coding but never really did it enough to get proficient at it. I learned originally in Java in High School but only played around with it in College for some projects. As such I had a decent understanding of some of the general concepts that might take someone more time to grasp.

Now, on to the fun stuff. Around march I decided to quit my job (great timing, I know) to try and work on a company idea for a service to find car shows on weekends. The problem was, I am an Electrical Engineer and really had never done any web development.

Well, COVID happened and then Pluralsight offered a deal where April was free for everyone. I decided to take advantage of that by putting all of my time for the entire month into learning a combo of Django, Python and CSS/HTML/JS.

I started with the intermediate Python course which I really enjoyed. Obviously if you're starting from ground 0 you will need to do the first course also but I thought they were really well done and easy to work along. With this I felt at least semi confident in playing around with basic python.

Beyond the basics

After that I moved into Django. I started with a good basic course called Django Getting Started. This was enough to get me going with a basic project and play around with various features. I also used some projects available on the web to play around after taking this course.

I wanted a bit more understanding of Django so I also took the code school django tutorial. Try Django from codeschool. I thought this was ok but definitely less good than the others. I was already somewhat decent though so I fought through it and it definitely filled in a few gaps though so for a short course it's worth it.

From there my last course was on Bootstrap cause I had no idea what it was or how to use it and i thought this intro was pretty good.

Anyways, I was able to do this all free and I did it full time, but I definitely came out of April feeling ready to go. I made tons of mistakes on my first site, but I think you just have to pick a project and go for it so you have a goal. You can check out my site Topmarq which is still almost 100% done by me. It may not be the best, but hey I just started!!

One thing I've really had a tough time with is the blog aspect. I think i should have integrated Wordpress or something but the articles are actually quite difficult to optimize and build according to current standards. For instance, my post about car shows in Houston kept having various Title/H1/Meta/Etc tag issues because Django doesn't have a great way of doing this that im aware. Just an FYI if you're looking to create a blog on you Django app, maybe look for a plugin.