Marcelo logo

How I'm vibe coding as a designer in October 2025

Practical applications that have closed the gap from idea to shipped to hours

Inspired by many others, I'd like to share tangible examples how I'm using AI-assisted coding agents ("vibe coding") in my design & product management workflow.

My 2025 GitHub contribution chart It's clear when I discovered vibe coding

Background

I'm currently the sole designer at an early stage startup, GoodDay Software. That means I wear many hats and efficient forward progress is the goal as we work to scale up.

I also have a pretty solid background in development, having taught myself PHP/Rails/Javascript, the command line, git, server management, and more early in my career - which is paying dividends these days.

If you're a designer and haven't learned the fundamentals of building software, investing this time is only going to help you make a greater impact. As GoodDay scales up, I see this as a requirement for the next several designers. Your ability to have an impact on the quality of the product is infinitely larger when you can just do the work yourself.

The best part is - the barrier to learning has never been lower. Just ask AI. The best way to learn is by doing. Books and classes might help, but nothing replaces getting your hands dirty and figuring it out.

Spoiler: I'm still using Figma.

There's nothing like sketching an idea in reasonably high fidelity and quickly copying an artboard, trying a tweak and looking at them side by side.

Figma is my scratchpad for ideas and I don't see that changing any time soon. I keep a "scratchpad" Figma file pinned open at all times so I can quickly sketch out ideas during the day.

I do look forward to Figma's promised AI features in the core product. I'd love to prompt it something like "Build me a table with 10 more rows like this one, but plug in new values for each row. Make sure the numbers in the columns add up"

My tools

My toolchain feels pretty settled since early summer. It felt like there was a ton of movement in the first half of the year with constant model and tool releases.

While there continue to be changes, I find the value of tinkering to be low. This setup allows me to ship efficiently at work and in personal projects, so I don't find a need to continue to change.

  1. Claude code - coding, researching, and planning. I settled on this in late spring because of the versatility of the command line, the power of planning mode and Opus model (earlier this year), and the generous limits on the Max plan. These days I'm all in on Sonnet 4.5.
  2. Cursor - Code editor & git client. Their tab mode completion is unparalleled. I used the AI agent in here heavily earlier in the year - but this is the tool that feels the most like it could cycle out if needed. It's felt bloated and slow lately.
  3. Linear - Project management and context storage. What a breath of fresh air when I joined GoodDay last year! I include Linear in this list because their MCP is terrific and allows me to do a lot of prompting / context building in here. One of the best features is that it generate a consistent git branch name for each ticket and auto updates status as long as the github branch & PR include the ticket id.
  4. ChatGPT - My general purpose agent, but it gets daily use for research, copywriting, and ideation.

One gap I'd love to close in my toolchain would be cloud-based dev agents & preview environments. We're working to stand this up at GoodDay, but have some unique complexities to get there. I think this would increase my impact even further.

1. Design polish

There's a never ending backlog of design polish in our app. As we're scaling and learning how users are using the app, I'm able to quickly ship tweaks, cleanups and polish of areas that aren't quite hitting the mark for customers.

I bucket this work into "an hour or less" where a good prompt and a solid idea of how to solve the problem yields a 99% AI-written PR that's ready for review in less than hour. Similar to Linear's zero bug policy - I force myself to just deal with these quick fixes in the moment because if it goes into the backlog it's unlikely to actually get done.

Most of this work happens via a Claude Code task I call /background-dev. I'll share more in a future post, but the way it works is to:

  1. It gets passed a Linear ticket id (where I've typically added instructions on what I want done, as well as the original report)
  2. It uses plan mode to research the ticket and return a plan for me to review
  3. I'll go back and forth if necessary.

Once approved, the task will:

  1. Create a git worktree off the latest code on the main branch based on the linear branch name
  2. Copy over the necessary files from our main project (e.g., .env)
  3. Do the work, lint and build the app
  4. Stop for me to review

At that point, I'll usually start up the app from the git worktree directory to test the work. Once I give approval, the task will:

  1. Commit the code
  2. Push the branch to origin
  3. Create a draft GitHub PR via the github CLI

This workflow enables me to ship quick design polish by the next day regardless of the state my local development environment. In early attempts here, I found a dirty local environment in the middle of another bigger task was a blocker to getting the work done in the moment and my backlog was growing.

Git worktrees were confusing at first to me - but prompting Claude Code to help me use them was enough for me to figure out how to use it. That's so important to remember - if you're a designer who is learning, asking the AI to teach you or to do it is a terrific way to learn, and it has access to your exact situation to help debug.

2. Scaffolding complex UI before developers

For new feature development, I'm usually able to work ahead of the developers. I make it a point to scaffold the UI before the engineers are ready to start building.

This lets me get in there and explore the edges and polish interactions ahead of the engineers wiring it up.

For example - earlier this year when we rebuilt GoodDay's reconciliation engine, I needed to really push the bounds of Shopify's Polaris, developing new patterns. Getting ahead of the engineers let me really lock in the UI in a way that it's become very efficient and useful for our merchants. Today we get few support requests & questions from our customers because we were able to radically rethink this massively complex area of our app.

Had a designer not been hands-on for this, there's no way we would have invested what it took to get this UI to where it is.

2a. Building components

Alongside scaffolding UI, as a design team of one, I can build out reusable components with a basic understanding of how React components work.

What I love about prototyping components is how easy it is to test different states and inform the developer experience. The designer is capable of giving significant input into what should be a prop, what states need to exist, and how should developers consume this.

To scaffold these components, I work directly in our codebase, which enables a 1:1 match to our production UI code & tech and I can evolve our infrastructure as I work.

I created a /prototypes directory that I added to the .gitignore so I can just work locally. This lets me spin up interactive component pages.

Recently I was rebuilding one of our most used components throughout the app and this approach let me simulate many states and swap in content easily:

All these toggles were "vibe coded" in seconds by asking things like "add an input that will control the item name" or "add a checkbox that will control the archive badge". Pretty isn't the goal for these toggles, just getting it done.

3. Copywriting

I've created a ChatGPT project that includes context for the general style guide for our app as well as industry context, since inventory, logistics, and accounting have very industry specific terms that we want to stay aligned with.

It's really impressive how high the floor is of what the LLM is able to generate with this context. I rarely use the first result, But what it can do is get a solid first draft at 80% that then is very quick to iterate and improve on.

I know I'd be capable of doing this on my own, it would just take so much longer than the 5 to 10 minutes I invest.

4. Researching our customer data

I had a general grasp of SQL and GraphQL queries prior to AI, but this has enormously supercharged my ability to understand and design around real customer data.

My process to generate SQL queries is often to screenshot multiple tables' schemas, then explain to ChatGPT the data I want and how it's linked. 99% of the time I get an accurate SQL query.

Grabbing examples of our 50/80/90/95 percentile values

Recently I was trying to understand how many characters to truncate a particular UI element for a complex UI component I was prototyping. Within minutes I was able to calculate the distribution of character lengths for item names in our customer database and pull examples of each to design with.

5. Researching bugs

Part of quality is handling much of our inbound bug triage. I will often point Claude Code at Linear tickets to research potential causes for bugs. I've been surprised at the quality of what they're able to find and sometimes even fix without bothering an engineer.

Even beyond our codebase, I was even able to help a customer debug Shopify liquid theme files to onboard to our feature. I had only a cursory knowledge of Liquid - but Claude Code found the issue and we were able to work through the misconfigured situation.

Epilogue: Actually shipping features

I'm a huge believer that the future will bring together the disciplines of product, engineering, and design. It doesn't mean that everybody will do all of them, just that the Venn diagrams will overlap more than they did before and senior craftspeople will be asked to do more themselves in the other's realm.

One of the biggest examples of this is being able to ship more complex work when it makes sense. Being the solo designer at a startup and being able to build and ship features somewhat or mostly on my own really is a superpower.

The caution here is that as you become more capable, it's a fine line of investing your time vs impact. Over the summer, I found myself getting a bit overconfident - and turns out the work was far more complex than I was capable of shipping quality code on my own. It took several pairing sessions with our CTO to get an 80% PR to shippable. And while there was impact, the time investment wasn't worth it.

For the most part, I've settled into a good understanding of what parts of the app I can operate independently. Claude Code plan mode helps me sniff this out within seconds. For example, in a recent GoodDay hackathon I wanted to shove in a new column / filter in one of our views thinking that'd be a quick win. Turns out there was extensive data fetching & transforming required - and when I understood that as a part of the plan Claude put together, I scrapped the work.

With that being said, if the future is small teams - a designer being able to prioritize a quality focused feature while the engineers can stay busy on critical infrastructure is a total game changer.

AI isn't replacing designers – it's removing friction between the idea in your head and the product in the users' hands.