Guided Tutorials

Build a Personal Website from Scratch

Go from an empty folder to a live personal website. You will learn two ways to work with Autohand: interactive mode where you guide the conversation, and non-interactive mode where you fire a command and walk away.

Beginner 15 min

echo "Create a personal portfolio website with a hero section, about me, projects grid, and contact form. Use HTML, CSS, and vanilla JavaScript. Make it responsive and dark-mode ready." | autohand --auto-mode -p

What you'll learn

How to build a complete website from an empty folder
The difference between interactive and non-interactive mode
How to use reference images to guide the design
How to combine both modes for the best workflow

Before you start

Make sure you have the following ready, then create a folder for your site.

Requirements

Autohand Code installed. See Your First Autohand Session if you need to set up.
A code editor. VS Code, Zed, or any editor you are comfortable with.
No coding experience required. Autohand handles the code. You describe what you want in plain English.

Project setup

Create a new empty folder for your website project.

Step 1: Understand the command

The prompt block above uses non-interactive mode. Here is what each part means.

echo "..." sends your instructions through a pipe instead of typing them in a session. This is called pipe mode.
--auto-mode tells Autohand to work autonomously. It will plan, write files, install dependencies, and iterate until the task is done without asking for confirmation at each step. See the auto mode guide for the full list of options.
-p prints the output to your terminal instead of opening an interactive session. Combine it with --auto-mode for fire-and-forget workflows. See all flags in the CLI reference.

This is the fastest way to use Autohand when you know exactly what you want. But if you want to guide the process step by step, interactive mode works just as well. This tutorial shows you both.

Step 2: Build with interactive mode

Interactive mode lets you build the site step by step. You give an instruction, review the result, then give the next one. This is the best way to learn because you see what Autohand creates at each step.

Start a session

You are now in an interactive session. Type your first instruction.

Scaffold the project

The agent creates the files. You can open them in your editor to see what it built. If you want to preview the site, ask:

Autohand will suggest a way to serve the files, typically with npx serve . or Python's built-in server.

Customize the content

Now make it yours. Replace the placeholder content with your real information.

Add a reference image

If you have a screenshot or design mockup you want to match, drop the image file into the project folder and reference it.

The @ symbol tells Autohand to include that file as context. It works with images, PDFs, and code files.

Polish and deploy

Tip: You can keep refining in the same session. Each prompt builds on what came before. Ask for a color scheme change, move sections around, or add new pages. The agent remembers the full project context.

Step 3: Build with non-interactive mode

Non-interactive mode does everything in one shot. You send a detailed prompt, Autohand builds the entire site, and you review the output when it finishes. No back and forth.

The one-liner

What each flag does

--auto-mode runs an autonomous loop. The agent plans the work, writes all files, installs any packages it needs, and iterates until it marks the task complete. You can set limits with --max-iterations and --max-cost. Full details in the auto mode guide.
-p (short for --prompt) reads the piped input as the prompt and prints the output. Without -p, Autohand tries to open an interactive session. See all available flags in the CLI reference.

Other useful flags

You can combine these with the command above to control how Autohand works.

Each of these flags is documented in the CLI reference. Mix and match them to fit your workflow.

Tip: Non-interactive mode is great for automation. You can put this command in a shell script, a CI pipeline, or a Makefile. Your team can regenerate the site from a description file anytime.

Step 4: Use a reference image

Both modes support reference images. If you have a screenshot, mockup, or sketch of the site you want, include it in the prompt.

Interactive mode

Non-interactive mode

Autohand reads the image and extracts layout structure, color values, and spacing patterns from it. It is not pixel-perfect, but it gets you 80% of the way there. You refine the rest with follow-up prompts.

Step 5: Choose the right mode

Interactive mode when you are exploring ideas, learning, or want to review each change before moving on. Start here if this is your first time building something with Autohand.
Non-interactive mode when you know exactly what you want, want to automate the build, or want to hand it off to a script. It is also faster because there is no wait between steps.

You can switch between them freely. Start with non-interactive to get the skeleton, then open an interactive session to refine the details.

What you learned

Built a complete website from scratch using Autohand
Used interactive mode to guide the build step by step
Used non-interactive mode for one-shot generation
Included reference images to match a specific design

Try next

autohand "Add a blog section to my website with 3 sample posts and a tag filtering system"