Build a Personal Website from Scratch

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.

mkdir my-website && cd my-website

Step 1: Understand the command

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

echo "your instructions here" | autohand --auto-mode -p

• 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

mkdir my-website && cd my-website
autohand

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

Scaffold the project

Create a personal portfolio website. I need:
- index.html with a hero section, about me, projects grid, and contact form
- style.css with a clean modern design, dark mode support using CSS custom properties
- script.js for the contact form validation and dark mode toggle
Make it responsive for mobile, tablet, and desktop.

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:

How do I preview this locally?

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.

Update the hero section:
- Name: Sarah Chen
- Title: "Frontend developer and open source contributor"
- Add a short bio paragraph about building web experiences for 5 years

Update the projects grid with 3 projects:
1. "Weather Dashboard" - A React weather app with live data
2. "Markdown Editor" - A browser-based markdown editor with preview
3. "Task API" - A REST API built with Express and PostgreSQL

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.

Look at @reference-design.png and update the layout and colors to match that design.
Keep the responsive behavior and dark mode support.

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

Polish and deploy

Add smooth scroll behavior, a subtle fade-in animation on the project cards,
and a favicon. Then create a README.md with deployment instructions for GitHub Pages.

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

mkdir my-website && cd my-website
echo "Create a personal portfolio website for a frontend developer named Sarah Chen.

Include:
- Hero section with name, title, and short bio
- About section with skills list
- Projects grid showing 4 portfolio items with images, titles, descriptions
- Contact form with name, email, and message fields
- Footer with social links

Technical requirements:
- HTML, CSS, vanilla JavaScript only (no frameworks)
- Responsive design (mobile, tablet, desktop)
- Dark mode toggle with CSS custom properties
- Smooth scroll navigation
- Contact form validation
- Subtle scroll animations on the project cards
- Favicon and proper meta tags for SEO
- README with GitHub Pages deployment steps" | autohand --auto-mode -p

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.

# Set a cost limit so you do not go over budget
echo "Build my portfolio site" | autohand --auto-mode -p --max-cost 5

# Use extended thinking for more thorough planning
echo "Build my portfolio site" | autohand --auto-mode -p --thinking extended

# Auto-commit changes so you get a git history of each step
echo "Build my portfolio site" | autohand --auto-mode -p --auto-commit

# Dry run to see what Autohand would do without writing files
echo "Build my portfolio site" | autohand --auto-mode -p --dry-run

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

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

# Inside an Autohand session, use @ to reference the file
Build a personal website that matches the layout in @mockup.png
Use the same colors, spacing, and typography.

Non-interactive mode

# Pipe the prompt and reference the image path
echo "Build a personal website that matches the layout in mockup.png.
Use the same colors, spacing, and typography.
The image is in the current directory." | autohand --auto-mode -p

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.

# Generate the skeleton first
echo "Create a basic portfolio site structure" | autohand --auto-mode -p

# Then open an interactive session to refine
autohand
# > "Update the color scheme to use blue and slate tones"
# > "Add a blog section with 3 sample posts"

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