Building a Web Landing Page with AI

You've learned how to automate tasks and integrate services with AI. Now, let's apply those skills to create something tangible: a web landing page. By the end of this lesson, you'll be able to generate a functional web landing page from a brief using Claude Code's frontend-design plugin.

Core idea

Building a website traditionally involves designers, developers, and a lot of back-and-forth. However, with AI agents like Claude Code, you can act as the architect, describing your vision, and the AI handles the coding. This process starts with a brief, which is a concise summary of what you want the website to achieve. Claude Code can then interpret this brief and, with the help of specialized tools called plugins, generate the initial structure and content of your landing page. A plugin is a pre-built skill that extends Claude Code's capabilities, allowing it to perform specific tasks like frontend design without you needing to configure it manually.

The key is to approach this iteratively: create a basic version, review it, and then refine it. This allows you to quickly get a working foundation and then build upon it with more detail and polish.

Walkthrough

Let's generate the first version of a landing page based on a voice brief.

Task: Create a new folder, transcribe an audio brief, install the frontend-design plugin, and then generate an HTML landing page.

1. Create a new folder for your landing page.

This command tells Claude Code to set up the directory where all your landing page files will reside.

2. Transcribe the audio brief into a text file. First, you need to download the audio brief from the provided link: https://agentsim.online/api/content/assets/audio/marina-brief.mp3. Save this file inside the landing/ folder you just created.

   Now, ask Claude Code to transcribe it:

Claude Code will use its audio processing capabilities (like Whisper, which you've encountered before) to convert the spoken words into written text. This text file will serve as the input for generating your landing page.

3. Install the frontend-design plugin. This plugin is essential for Claude Code to understand how to build web interfaces.

After the installation is complete, you'll need to restart Claude Code for the new plugin to be recognized. Exit Claude Code (usually by pressing `Ctrl+C` or typing `/quit`) and then launch it again by typing `claude` in your terminal.

4. Generate the landing page. Now that you have the brief in text format and the frontend-design plugin installed, you can instruct Claude Code to build the page.

Claude Code will read the `brief.txt` file, interpret the requirements, and generate an `index.html` file within your `landing/` folder. This HTML file will contain the structure and content of your initial landing page.

5. Open the generated page in your browser. Navigate to the landing/ folder and open the index.html file with your web browser. You should see a basic, functional landing page.

6. Commit and push your changes to GitHub.

This ensures your work is saved and accessible.

Common mistakes

• Forgetting to restart Claude Code after plugin installation: New plugins are only loaded when Claude Code starts. If you try to use a plugin immediately after installing it without restarting, Claude Code won't recognize the associated skill.
• Incorrect file paths: Ensure that the paths to your audio brief and the output HTML file are correct. Typos in folder or file names will prevent Claude Code from finding or creating the necessary files.
• Expecting perfection on the first try: The initial version of the landing page is a starting point. It's designed to be functional, not necessarily polished. The next steps involve refining and improving it.

Key takeaways

• AI agents can act as architects, translating your brief into functional code.
• Plugins extend Claude Code's capabilities, enabling specialized tasks like frontend design.
• The process of building with AI is iterative, starting with a basic version and refining it.
• Transcribing audio briefs provides a structured input for AI to generate web content.
• Always restart Claude Code after installing new plugins to ensure they are loaded correctly.