{
  "name": "Vibe Coding with Claude: Building 3 Journaling AI Tools in 1 hour",
  "items": [
    {
      "id": "vibe-coding-101",
      "name": "Vibe Coding with Claude: Building 3 Journaling AI Tools in 1 hour",
      "sections": {
        "Content": "\n\n# Vibe Coding with Claude: Building 3 Journaling AI Tools in 1 hour\n\n**Everything I built in my main project, Recursive.eco was mostly done through vibe coding. This is where I come back to teach how to use these skills, so that we can make Recursive.eco a truly recursive public.**\n\n## What You'll Build Today\n\nA personalized interactive tool where users can write and get AI feedback on any topic. Total privacy: no data saved anywhere. User can export content and save it wherever they feel safe to do it.\n\nAt the end, we encourage you to share what you made with the [Library](https://flow.recursive.eco/library). Bonus points if you record your whole process and publish on YouTube!\n\n### By the end of Hour 1, you'll have:\n\n- 3 working AI tools\n- Published link to share with other humans\n- An offering ready for an altar\n\n---\n\n## Prerequisites (5m)\n\n### Sign up for Claude\n\n1. Go to [claude.ai](https://claude.ai)\n2. Create a free account\n3. You're ready!\n\n---\n\n## Section 1: Adapting a Tool (20m)\n\n### Step 1: Interact with the tool (5m)\n\nOpen [the tool](https://claude.ai/public/artifacts/94fdc893-2eb6-4b08-b2e9-e269055dbc60) and go through the whole process. As you do, jot down anything you'd want to change — things that feel off, missing, or that you'd do differently.\n\n### Step 2: Try some customizations (10m)\n\nClick the button **\"Customize\"** on the top-right of the page:\n\n![Customize Button](../images/vibe-coding-101/customize-button.jpg)\n\nTry the prompts below to customize. You can paste all of them at once or take a step-by-step approach:\n\n**Example Customization Prompts:**\n\n> I think the Value-Driven Goals and Activity Scheduling sections are kind of the same. Merge both of them.\n\n> I want to add an option for the User to Include a Value they are trying to work on in the beginning.\n\n> I would rather have all the tool in one page than making the user navigate across pages. I would like that the user see all the work immediately and be able to look into his previous answers by scrolling. Maybe with this the Summary step gets obsolete.\n\n> In the Summary section you had/have you say the user can simply press CTRL+ P and print as a PDF to save their work. However, the export is broken because it just print 1 page and there is some content missing. Can you create a button to export user input as a txt file so the user can save the data? Also create an import button in the beginning of the section so that all the data can be visualized in this UI.\n\nTo share your work, close the artifact temporarily (you can always go back in the chat and open it again), then click the Share button on the top-right corner of the page.\n\n![Share Example](../images/vibe-coding-101/share-example.jpg)\n\n### Step 3: Try your own ideas (4m)\n\nNow, look at the list you created when you first used the tool. Pick the one that seems still relevant to implement and prompt Claude to change the artifact based on it.\n\nWhenever in doubt about writing a prompt, ask Claude to help you frame a prompt for you before using action verbs like \"Change this\", \"Merge that\", etc. You can say something like:\n\n> I am still bogged by XYZ, can you help me ideate on what I could change and how would you prompt yourself to make the changes? Please do not change anything in the artifact before we have a plan.\n\nIf Claude ends up implementing a change you did not want, you can always go back to the prior version by clicking on the arrow down in the version tag.\n\n![Version Control](../images/vibe-coding-101/version-control.jpg)\n\n### Step 4: Publish (1m)\n\nWhen Claude builds an artifact, it automatically gets saved in your artifact section for later retrieval:\n\n![Artifacts Section](../images/vibe-coding-101/artifacts-section.jpg)\n\nYou can also hit the **\"Publish\"** button and share with anyone you want! [Here's what I created](https://claude.ai/public/artifacts/9b003d0c-1f4c-4975-a3b8-be1e792d2065) — yours will look different based on the changes you made.\n\n![Publish Button](../images/vibe-coding-101/publish-button.jpg)\n\n---\n\n## Section 2: Create a Tool from Scratch (15m)\n\n### Step 1: Reference (2m)\n\nOpen [the tool from Section 1](https://claude.ai/public/artifacts/94fdc893-2eb6-4b08-b2e9-e269055dbc60) and scroll to the footer — you'll find a link to the [original blog post](https://donaldrobertson.substack.com/p/my-self-improvement-framework) it was based on. Open that blog post, select all the text (shortcut: CTRL + A), and paste it into a new Claude chat (CTRL + C, then CTRL + V).\n\n### Step 2: Prompt (3m)\n\nNow, along with the blog post text you just pasted, prompt Claude to build a new tool:\n\n> Develop an artifact for me based on the artifact attached. It should have an easy way for users to export their data into a txt that they could easily re-upload in the tool to see it in the UI (user interface). Create a button for export and import in the hero section of the tool. At the end, there should be an AI chatbot in which the AI is prompted to act as a DBT coach mixed with NVC moderator and a Stoic philosopher when answering and be fed all the user inputs to give a thoughtful answer.\n\nSee if you like the results. **Always credit your sources.** Prompt Claude to include a link to the original blog post in the footer, and check with the author before sharing your tool publicly.\n\n> Please include a footer with the original blog post: https://donaldrobertson.substack.com/p/my-self-improvement-framework. Also include a link to recursive.eco for people who are interested in tools like this to discover more: https://recursive.eco.\n\nAlways test it — Claude makes mistakes!\n\n### Step 3: Optimize (10m)\n\nIf the result isn't quite what you had in mind, keep chatting with Claude to refine it. You can also browse the [Wellness channel](https://flow.recursive.eco/library/channels/wellness) for inspiration on what others have built.\n\n---\n\n## Section 3: Create Your Personalized Tool (20m)\n\nNow that you know the capabilities, choose a tool, worksheet or method you like and prompt Claude to build them!\n\n### Step 0 (optional): Create a Project with a System Prompt and References (5m)\n\nThis feature is only available on paid plans. You don't need it to complete this course, but it helps if you plan to keep building.\n\nIn my experience, Claude works better when you set up system prompts and references at the project level. Claude doesn't remember anything from previous chats, so a project is the best way to keep all your context in one place and rebuild artifacts easily in the future.\n\nIf you are willing to pay for Claude, then navigate to Projects and Create a new Project.\n\n![Projects](../images/vibe-coding-101/projects.jpg)\n\nThen, choose a title and a system prompt for the project. As an example, I did:\n\n**Title:** Wellness Tools Creator\n\n**Prompt:**\n> I am trying to build artifacts to be publicly available for people interested in wellness and self improvement. They should always contain the following features: 1) An import and export button in the hero section for the user to export a file in txt and be able to save their work. Later they will be able to import the file and see it in the UI. 2) An AI chat at the end in which the AI is prompted to behave as a DBT coach, mixed with an NVC mentor and a stoic philosopher. It should always provide some validation/empathy and ask a question at the end that would get the user thinking deeper.\n\n**Note:** Keep this as a self-reflection tool, not a clinical one. Claude is not HIPAA compliant, so it shouldn't act as a therapist or handle sensitive health data.\n\nInclude any documents or references you think might be useful for this project in the knowledge base.\n\n### Step 1: Create the Right Prompt for your Project (10m)\n\nThe best prompt generator for AI is AI. Write loosely for two minutes about the tool that you want to create and prompt Claude to write a prompt for itself to create an artifact later. Then, prompt Claude to:\n\n> Generate a prompt for me so we can plan this thoroughly before jumping into coding the artifact.\n\n**If not using a project (Free tier)**, add this to your prompt at the end:\n\n> I am trying to build artifacts to be publicly available for people interested in wellness and self improvement. They should always contain the following features: 1) An import and export button in the hero section for the user to export a file in txt and be able to save their work. Later they will be able to import the file and see it in the UI. 2) An AI chat at the end in which the AI is prompted to behave as a DBT coach, mixed with an NVC mentor and a stoic philosopher. It should always provide some validation/empathy and ask a question at the end that would get the user thinking deeper.\n\nChat briefly with Claude to answer any questions it might have. If you want to move quickly, you can just ask Claude to use its best judgment.\n\nWhen you think you got to a point you are comfortable with, prompt Claude to create the artifact. Optionally, spend as much time as you want to get this into a better spot!\n\nIt took me a few back-and-forth exchanges to get to something I liked. Don't worry if your first result isn't perfect — that's normal! The more specific your prompt, the better the output.\n\n**Pro Tip:** You can print screen the tool and paste the content in the chat so Claude can understand exactly what you are seeing!\n\nThe recursive.eco community is here to support you. When you're happy with your tool, publish your artifact, copy the link, and share it in the [Wellness channel](https://flow.recursive.eco/library/channels/wellness) so others can find and use it.\n"
      },
      "sort_order": 0
    }
  ],
  "default_view": "course",
  "grammar_type": "course",
  "_recursive_eco_url": "https://flow.recursive.eco/g/0a79720e-9d5a-4f91-bff9-8a9318da79bd?view=reading",
  "_recursive_eco_edit_url": "https://flow.recursive.eco/create/dashboard/unified/new?id=0a79720e-9d5a-4f91-bff9-8a9318da79bd"
}