Make a link in bio page with AI (Linktree alternative)

What you need

• A computer
• A free Claude account (claude.ai) or a free ChatGPT account
• A list of the links you want to include (blog, store, Instagram, and so on)
• A Google account if you want to take inquiries (Google Forms is free)
• A free Netlify account, only if you add a profile photo

What you get

A page with a round profile image, your name and a one-line intro, tappable link buttons, a light and dark mode switch, and an "Inquiries" button at the bottom. The example below is a fictional person.

Step by step

1. 1

   Gather the links you want to include

   In a notes app, write one "button name - address" per line. Copy each address from your browser's address bar. For Instagram, open your profile and use "Copy link" from the share menu.

   You know it worked whenYou are ready when you have about 6 names and addresses in your notes.

2. 2

   Go to claude.ai and sign in

   Open claude.ai in your browser and sign in. For ChatGPT, go to chatgpt.com.

   You know it worked whenYou are ready when you see a chat box at the bottom of the screen.

3. 3

   Paste the prompt and send it

   Swap in your own name, intro, and button list, then paste the prompt and send it. Leave the "Inquiry form" line as it is for now.

   Prompt to pasteCopy prompt

   Make a link page that introduces me, like a link in bio page. Put everything in a single file.
   
   - At the top, a round profile image spot. If I have no photo, use a circle with the first letter of my name
   - Below that, my name and a one-line intro
   - 6 tappable link buttons, using the names and addresses listed below
   - A light/dark switch at the top. Remember my choice the next time the page opens
   - At the bottom, an "Inquiries" button that goes to a Google Form I made
   - Design for a phone screen first. Make the buttons big enough to tap with a finger
   - When the link is sent in a chat or on social media, the preview should show my name and one-line intro
   - All text in English
   
   Name: Taylor Choi
   One-line intro: I make illustrations
   Buttons:
   1. Portfolio - https://example.com/portfolio
   2. Instagram - https://example.com/instagram
   3. Online store - https://example.com/store
   4. Blog - https://example.com/blog
   5. Newsletter signup - https://example.com/newsletter
   6. Email - hello@example.com
   Inquiry form: (I'll give you the address later)

   Make it yours

   • Replace the name, intro, and every button name and address with your own. The example addresses do not go anywhere.
   • You can add or remove buttons. Five to seven looks good.
   • To choose colors, add a line like "Light beige background, dark brown buttons."

   Want more control? (a slightly more technical version)

   Copy this version

   Make a link in bio page as one self-contained HTML file.
   - Avatar at the top (an initial in a circle if there is no image), name, one-line intro
   - 6 link buttons. Keep the link list as an array (label, address) at the top of the file
   - Light/dark toggle that remembers the choice
   - An "Inquiries" form at the bottom: name, contact, type of request, budget range, details. Keep the submit address as a constant at the top so it can connect to a service like Formspree
   - og:title and og:description meta tags
   - Mobile first, no external libraries
   - All UI text in English

   You know it worked whenIn Claude, a page with your name and link buttons appears in the result panel on the right.

   TipIf ChatGPT only shows a long block of code, say "Show it so I can see it right away (use Canvas)."

4. 4

   Try the buttons and change things by asking

   In the result panel, click the buttons to check they go where they should, and try the light/dark switch. Ask for any changes in words.

   You know it worked whenIf each button goes to the right place and the light/dark switch works, it works.

   TipTry things like "Make the buttons rounder", "Center the intro text", "Make the background light beige", or "Move the store button to the top".

5. 5

   Make an inquiry form

   Go to forms.google.com and create a blank form. Add questions such as name, contact, type of request (dropdown), budget range (dropdown), and details (long answer). Click "Send" at the top right, open the link tab, and copy the address. In the chat, say "Connect the Inquiries button to this address" and paste the address.

   You know it worked whenIf clicking the Inquiries button in the result opens your form, it works.

   TipResponses collect in the form's "Responses" tab. To get an email for each new response, turn on notifications from the three-dot menu in that tab.

6. 6

   Decide whether to add a profile photo

   If the circle with your initial is enough, skip this. To add a photo, say "Load the top image from profile.jpg", then save the code as index.html and put it in the same folder as the photo.

   TipWith a photo, you have to upload with Netlify Drop instead of Claude Publish. The steps are in "Share it as a link" below.

7. 7

   Turn it into a link and add it to your profile

   Without a photo, click Publish at the top right of the result panel to make a link. With a photo, upload the whole folder to Netlify Drop. For the full steps, see "Share it as a link" below. Copy the address and paste it into the website or link field when you edit your Instagram profile.

   You know it worked whenIf tapping the link on your Instagram profile on your phone opens your page, you are done.

If you get stuck

Try next

• Connecting your own domain (for example taylorchoi.com) makes the address in your Instagram profile short and clean.
• As your links grow, ask for sections that collapse and expand by category.

Features used here

More recipes