LinkedIn Frame sucks and how to fix it

🌍 Try it here: https://www.opento.world/

Have you ever tried to add a frame to your profile picture in LinkedIn and feel it’s a bit of limited? It is because LinkedIn only allows two types of frames #OPENTOWORK and #HIRING.

I’ve seen people in my network—like students looking for PhD opportunities—had to use #OPENTOWORK simply because there are no other options. So I built my very first web app (by vibe coding, Cursor, and Claude Code ⚡) to fix that :D

Now you can add any custom text to your profile photo—like #OPENTOSTUDY, #OPENTOPHD, #HiringSuperStars, #LoveCode, #HavingFun, or whatever message you want to show the world.

A quick demo of the app.

Tool used including:

  • Cursor and Claude Code for coding.
  • Vercel for hosting with domain bought from Porkbun.
  • Quill for text editor and Cropper.js for image cropping.

Development Flow

I started with a Jupyter Notebook to develop the core function of the app, i.e., generating the curve, the color gradient in the background, and the text displayed on the curve. While it looks like a simple task, it took me a while to overcome some technical challenges, e.g., how to rotate the characters towards the center of the curve, how to distribute the characters evenly on the curve, etc, so that the final result looks more natural.

I then using Cursor to convert the python code to JS code for the web app. While the converted code by Cursor is almost working, I still need to manually fix several bugs, e.g., the coordinates in JS and python are different, as well as the spacing between characters.

I also used Cursor to help with the web UI, by a prompt like: “build a simple UI for the image editing web app, etc”. That first version was quite impressive to me given most of the code is written automatically by Cursor. However, it was not as minimalistic as I want, so I start the main vibe code process by step-by-step prompting Cursor to modify the UI. You can see the comparison between the first and final UI design to see the improvement, which to me is quite satisfying :D.

In the middle of the development, it seems that I had out-of-credits on Cursor making it was very slow to generate code, so I switched to Claude Code (as heard from social media that it is better than Cursor) and it was indeed better. While it is a terminal-based editor rather than an IDE as Cursor, it seems that Claude Code can read the entire codebase with the maximum leverage of the context window, unlike in Cursor where the code has been processed internally for cost management.

🌍 Try it here: https://www.opento.world/

Similar Apps

While the idea of the app is from my personal need quite long time ago, when starting to develop the app, I found that there are already some similar apps out there like https://inframe.stephcraft.net/ and https://www.nothiring.co/ and https://frame-generator.com/. These apps also got a bit of attention, e.g., 700+ upvotes on Reddit or 400+ likes on LinkedIn.

This was first let me feel a bit discouraged that I was not the first one anymore :D. However, after trying to use these apps, I found that there are still room that I can improve, e.g., cropping the image, flexible text, or just a better UI. More importantly, this might be a fun project to learn some web development skills that I haven’t known before. Therefore, I gave it a try and here is the result that I am quite satisfied with. Beside of the final result, here are some other interesting things that I learned from this project:

  • How to deploy a web app, from buying a domain, hosting it on Vercel, verifying the domain, etc.
  • How to prevent users from right-clicking the image to save it :D so that they have to hit the download button to get the image. From that, we can also add payment options :D (the other apps also have this payment but mine is free at the moment - I don’t think people will pay for this simple feature).
  • How to prevent reverse engineering of the code (which is impossible in the current version where the code is all in the browser) but we can make it harder by adding some obfuscation to the code.
  • How to add Google Analytics to the web app to track the usage and the source of the traffic. Now I can see where the users come from in real-time.

In the future, I will try to extend the app with some fancy AI features, e.g., generating professional headshots, or collecting the data of the users to build a matching system between #OPENTOWORK and #HIRING.