← Daily AI recipesWork✓ Verified Aug 28, 2026

Build a working web app from a single prompt with Claude Code and Fable

Describe your idea in one sentence - get ready-made code and an interactive step-by-step guide in 10 minutes.

  1. 1.Install Node.js (LTS version) from the official website if it is not installed yet. Verify the installation by running node -v in the terminal - it should print the version number.

    If the service is unavailable in your region, use a VPN for the download step.

    Node.js ↗
  2. 2.Install Claude Code globally via npm. Open the terminal and run the install command, then follow the on-screen instructions to authenticate.

    Claude Code is free for Claude Pro and Max subscribers. Without a subscription, a paid plan is required - see the costs section.

    Claude Code ↗About this tool
    Prompt
    npm install -g @anthropic-ai/claude-code
    What this prompt doesThis command installs the Claude Code CLI tool globally. No need to change anything - run it as-is in the terminal.
  3. 3.Create an empty folder for your project, navigate to it in the terminal, and launch Claude Code by running claude. On first launch, follow the on-screen instructions to link your Anthropic account.

    If the service is unavailable in your region, a VPN is needed for authentication.

    Claude Code ↗About this tool
    Prompt
    mkdir my-app && cd my-app && claude
    What this prompt doesCreates a folder named my-app, enters it, and launches an interactive Claude Code session. You can replace the folder name with any name you like.
  4. 4.Paste the following prompt into the Claude Code session. It will create the project structure, logic, and files in a single step.

    Claude Code will create the files in the current folder automatically. No need to copy code manually.

    Claude Code ↗About this tool
    Prompt
    Build a single-page web app called "[APP_NAME]" that does the following: [DESCRIBE_WHAT_IT_DOES]. Use vanilla HTML, CSS and JavaScript in one index.html file. Make the UI clean and responsive. Include a heading "[APP_NAME]", an input form, and a results area. Add basic input validation.
    What this prompt doesThis English prompt asks Claude Code to build a single-page web app. Replace [APP_NAME] with your app name (e.g., Task Tracker) and [DESCRIBE_WHAT_IT_DOES] with a description of what the app does (e.g., lets a user add tasks, mark them done and delete them). Leave the rest as-is - Claude will create an index.html file in the current folder.
  5. 5.Go to the Fable website, click Get Started, and sign in with Google or email. The free plan lets you create public guides.

    Do not enter personal or payment details into third-party services unnecessarily. Fable is used for screen recording.

    Fable ↗
  6. 6.Start a screen recording in Fable, open the index.html file in your browser (double-click it), and demonstrate the app in action - enter data and show the result. Stop the recording and publish the guide, then copy the share link.

    Close tabs with personal information before recording - they may appear in the capture.

    Fable ↗
💰 What it costs to followprices as of 2026-08
  • freeNode.jsCompletely free to download and use.
  • subscriptionClaude CodeRequires a Claude Pro ($20/mo) or Max ($100/mo) subscription; without a subscription, it can be used via API with token-based billing. There is no free tier.
  • freeFableThe free plan lets you create public interactive guides; paid plans are available for teams.
Try it and be the first to check in

Why today

2
videos from creators in 48h
2
source channels
6.2K
total views
Nate Herk | AI AutomationyoutubeChannel in catalog
Борис опятьtelegramChannel in catalog
Anthropic Docsweb
Fableweb
Anthropic Pricingweb

AI services change fast - interfaces and free limits may differ from what's described.