Built a Vibe Coded App where you can Style any Image you like! :D
#devchallenge#githubchallenge#cli#githubcopilot
👾 FrancisTRᴅᴇᴠ 👾

👾 FrancisTRᴅᴇᴠ 👾 @francistrdev

About: 📚 Full-Stack AI Engineer 📚 "A Smooth Sea never made a Skilled Sailor" - Franklin D. Roosevelt

Location:
United States
Joined:
Jan 14, 2026

Built a Vibe Coded App where you can Style any Image you like! :D

Publish Date: Feb 12
50 28

This is a submission for the GitHub Copilot CLI Challenge

What I Built

This is my first time using the GitHub Copilot CLI! I believe doing this challenge will allow me to get exposure of using this CLI and how it help me in my development process.

I Vibe Coded a Web App that I called "ImageStyler" where you have the ability to upload any image and translate it into either ASCII or paint-like canvas themed. I built this app since it reminded me of doing an assignment for "Wed Design" where we have to scale our images/change colors for the web. One of the tools we used is "GIMP". Since I just started building this (Starting on Feb 5) and the deadline is in a couple of weeks, I thought to myself "Why not build that simple tool on the web?". This is built for fun and allow me to experience GitHub Copilot CLI.

Technologies used

This was built in Vanilla HTML, CSS, and JS. This was vibe coded using the GitHub Copilot CLI, so I am relying 99% of the copilot to do the work.

Demo

This is what the site looks like!
Site

Drag and Drop image

You have the ability to drag/drop the image onto the box or click the button to select the image.
Drop Image

ASCII Feature

One option is to translate the image to ASCII.
ASCII

Paint Settings

The other option is to paint the image. For simplicity, this is what it looks like when you mix and convert the image.
Description of GIF

Download Modified Image

Once you are finished, you have the option to name the file and download your modified image.
Description of GIF

My Experience with GitHub Copilot CLI

GitHub Copilot CLI in my Visual Studio Code has been really great (For a first timer using the CLI). Every time I request and feature or fix a bug, it tells me on the file on what are the changes that they made.

Additionally, it also ask me permission to execute the action. This only happens if it is running sensitive commands such as running a python server or fetching documentation from the web. It's always nice to ask for permission before executing the command.

Since it was vibe coded, I rely on the CLI to build this project in full. Unfortunately, I reached my limit for using the CLI since I was using the Free Tier. There are some challenges I faced though such as:

  • Asking too much. Since I was on a limit, I tried to cramp everything I want into one prompt. The problem is that it starts to get confused and got more errors. I then strategize how I can word it in a way where I can get the features I want while prompting as little as possible.
  • GIF compatibility. GIF is not supported in this web app. Initially, it was built in-progress, but ran into issues where it does not do the GIF animation as well as not exporting as a GIF. Left that one out and only focusing on the image MVP. It is probably where I have too many requests in one prompt, but I believe adding the GIF functionality is possible and would be cool to see!

Regardless, I made some small changes and worked on the Readme.md file in my repository after I reached my limit of using the CLI.

Overall, it was a great experience using the GitHub Copilot CLI in my Visual Studio Code! For future uses, I am thinking of using it as a mentor guide instead of using it to build the whole project code by code. It is very convenient and also a great learning tool (if asked!).

Summary

It was a fun experience! My first time using this tool in the Visual Studio Code and would 100% recommend it!

If you are interesting in the Repository and Demo, check out the links below!

Any questions or comments? I would love to hear from you!

Comments 28 total

  • 👾 FrancisTRᴅᴇᴠ 👾
    👾 FrancisTRᴅᴇᴠ 👾Feb 12, 2026

    Rick Rolled
    This is the example result.

    Get rick rolled twice :)

  • Ben Halpern
    Ben HalpernFeb 12, 2026

    Fun

  • Julien Avezou
    Julien AvezouFeb 12, 2026

    Looks like a fun project!

  • shambhavi525-sudo
    shambhavi525-sudoFeb 13, 2026

    This is a great 'Rite of Passage' project! ASCII conversion is such a satisfying visual to get right.
    I’m curious about the moment you hit the free-tier limit—did having to do those manual fixes and the Readme yourself change how you viewed the code the CLI had generated?
    That GIF animation issue is a classic murder mystery in web dev because of how browsers handle frame buffers. If you ever decide to perform an autopsy on why those frames wouldn't export, that’s where the deepest learning usually hides!
    Great MVP for 2026 speed.

    • 👾 FrancisTRᴅᴇᴠ 👾
      👾 FrancisTRᴅᴇᴠ 👾Feb 13, 2026

      Thanks again Sham! Also replied to the GIF issue you made and saw your comment below it!

      When I hit the Free-tier limit, the Readme wasn't the issue because I know it's nothing much other than it is built with Vanilla HTML, CSS, and JS. I barely did any changes (delete a bit of stuff). Of course, as a result of Vibe coding, the JS file was a nightmare to look at because it is the "leg that holds the chair". Meaning there are Hundreds lines of code that I do not completely understand, which makes sense if you only rely on vibe coding and not reviewing the code at all until the end.

      When I vibe coded the ASL game, at least I took the time to understand the code and how it works. For this case, I just "ball".

      Will probably think about the GIF issue in the future along with your detail comment about it. Thanks again Sham!

  • shambhavi525-sudo
    shambhavi525-sudoFeb 13, 2026

    The possible reason those GIFs are "ghosting" you is likely because of how the browser handles the Canvas 2D context.
    When you "vibe code" an image styler, the AI usually maps one static frame to the canvas. But a GIF is a stack of timed layers. To export it, you can't just Save As; you have to manually extract each frame's ImageData, process the ASCII/Paint transformation for every single layer, and then use a library like gif.js to "sew" those frames back together with specific millisecond delays.
    Without a loop that handles the temporal dimension of the image, the browser just sees the first frame and calls it a day. It’s a classic Physics of the System problem—the AI knows how to draw, but it doesn't always know how to keep time!

    • 👾 FrancisTRᴅᴇᴠ 👾
      👾 FrancisTRᴅᴇᴠ 👾Feb 13, 2026

      Thanks Sham for the reason of the GIF issue! I figured something was up with that functionality since Copilot seems to understand, but cannot really built it out.

      When I was prompting for the GIF functionality initially, I saw the solution it came up with and it made sense. The execution problem was the issue. It got to the point where it went around in circles, so I had to scrap it.

      Again, thank you for the detail comment of the GIF issue and why it is the case! Learned something new! :D

  • Bhavin Sheth
    Bhavin ShethFeb 13, 2026

    This is such a fun idea 👏

    Turning image styling into a simple web tool (especially ASCII mode) is a really cool throwback to classic web design days. I also like that you shared the real Copilot experience — the limits, prompt confusion, and learning how to ask better questions. That’s the part most people don’t talk about.

    Using Copilot as a “mentor” instead of a full builder next time sounds like a smart move. Nice work shipping an MVP and documenting the journey! 🚀

    • 👾 FrancisTRᴅᴇᴠ 👾
      👾 FrancisTRᴅᴇᴠ 👾Feb 13, 2026

      Thanks Bhavin! I appreciate your comment!
      It was a fun experience to work with. It is also very convenient to have a CLI in there instead of using the web/app version because I tend to copy/paste the whole project onto copilot and go from there. With this, I can just ask within my Visual Studio code and it does it for me without me dragging/dropping my files onto the Web/App version of Copilot.

      Appreciate it! Thanks Bhavin!

  • Omaima Ameen
    Omaima AmeenFeb 13, 2026

    Such a cool project

  • Aryan Choudhary
    Aryan ChoudharyFeb 13, 2026

    Fun project Francis! Will definitely use it and drop an image here (⁠☞⁠ ͡⁠°⁠ ͜⁠ʖ⁠ ͡⁠°⁠)⁠☞

    • 👾 FrancisTRᴅᴇᴠ 👾
      👾 FrancisTRᴅᴇᴠ 👾Feb 13, 2026

      Thanks Aryan! Can't wait to see what image you drop!

      • Aryan Choudhary
        Aryan ChoudharyFeb 13, 2026

        All I have are food pics (ˉ▽ˉ；)...
        This is a strawberry mochi I had at a Japanese sweets restaurant
        I ticked the brush, gallery, impression and watercolor, I really like this version it looks like a printed cloth or colored manga... was very fun to play around with it (❁´◡`❁)
        starwberry mochi

  • Cesar Castillo
    Cesar CastilloFeb 13, 2026

    Francis, I loved the design — both the visual design and its features! I had fun playing around with it for a while haha 😁

  • rushyhirosan
    rushyhirosanFeb 14, 2026

    This is super cool — especially the idea of turning images into ASCII or paint styles in such a simple UI.

    I’ve also been experimenting with “vibe coding” for my own project (a trend dashboard), and I really relate to your point about hitting limits and needing to be more intentional with prompts. That part is underrated.

    Great work!

  • Miracle
    Miracle Feb 17, 2026

    Hi

  • Sight Whale
    Sight WhaleFeb 17, 2026

    This is interesting, thank you!

  • Harsh
    Harsh Feb 17, 2026

    This is actually pretty cool! 🔥

    I've been experimenting with vibe coding too. Quick question — which model are you using under the hood for the image styling? Stable Diffusion or something else?

    Also, how's the GitHub Copilot CLI treating you? Thinking of trying it out myself.

    Great work on the challenge! 👏

    • 👾 FrancisTRᴅᴇᴠ 👾
      👾 FrancisTRᴅᴇᴠ 👾Feb 17, 2026

      Hey Harsh! Thanks for your comment!

      For the image styling, just Vanilla JS. Nothing too fancy since it is basically editing the image using math.

      The Copilot CLI is Convenient. When I vibe code, I tend to use the online Copilot were I have to drag and drop the files. For the CLI, it's just there, waiting for you to specify what you want to do locally which is great! The only downside is the limit since I was using the Free Tier, but it's expected.

      Glad you liked it!

Add comment