A Claude Code logo with an arrow pointing into a Figma logo.

How to build a website with Claude Code (without knowing how to code)

Introduction: Vibe coding with Claude Code

Typically, creating a website means writing endless lines of code or hiring a developer. But now, thanks to AI web design tools like Claude Code, it’s easier than ever for non-developers to build websites and apps without having to know how to code. This new approach—sometimes called vibe coding—lets you describe what you want, and the AI generates the code for you.

To put Claude Code to the test, I decided to create a landing page for our newsletter, Figma Plugin Weekly. As a non-developer, I have little-to-no code experience and simply followed the instructions on Claude Code’s website, plus watched a few tutorials on vibe coding. That’s all I needed to get started!

In this post, I’ll walk you step by step through how I used Claude Code to create the landing page for Figma Plugin Weekly and, even better, I’ll show you how to take that site and import HTML into Figma as fully editable designs using html.to.design.

Step 1: How to make a landing page with Claude Code

The first step was building the newsletter’s landing page directly with Claude Code.

⚙️ Set up Claude Code for AI web development

You’ll need a Claude or Anthropic account with access to Claude Code (via a paid plan or API key).

🚀 Install and run Claude Code

Open your terminal and follow Claude’s quickstart guide to get set up.

✏️ Write a detailed prompt to generate UI with AI

The quality of the result depends on your prompt. The more details you give, the more polished the website will be. Here’s an excerpt from the prompt I used:

Search the internet and find out about the digital newsletter Figma Plugin Weekly by divRIOTS (@figpluginweekly on X). I want you to create a bold and colorful landing page for this newsletter, using Figma Plugin Weekly’s brand colors…

My prompt also specified fonts, sections (hero, cards, testimonials, CTA, footer), and even where to pull assets from.

👩‍💻 Generate a website without coding

Claude Code then generated all the HTML, CSS, and scripts needed to run my website locally.

Step 2: Edit and improve your Claude Code website

No website is perfect on the first try—but with Claude Code, making edits is as simple as asking.

📝 How to revise Claude Code outputs

After reviewing the first draft, I asked Claude to:

  • Swap out the hero image
  • Correct text and links
  • Update hero section copy
  • Expand the issue preview cards from 4 to 6
  • Reduce testimonials from 6 to 3
  • Adjust newsletter delivery day

Claude instantly updated the codebase and relaunched the site in my browser.

💡 Pro tip: Use Claude Code to redesign existing websites

If you already have a site, you can ask Claude Code to redesign it or refactor sections for you.

Step 3: How to import HTML into Figma from Claude Code

Once my landing page was ready, I wanted to refine the design and align with my team in Figma. That’s where html.to.design came in.

📸 Use the html.to.design Chrome Extension

  1. Run the website locally in your browser.
  2. Launch the html.to.design Chrome extension.
  3. Capture the site as an .h2d file or send it directly to the Figma plugin.

🪄Convert your website into editable Figma designs

  1. Open the html.to.design plugin in Figma and import your captured site.
  2. You now have fully editable Figma designs—auto-layout, layers, and all.

This workflow means you don’t just have code—you also get design assets in Figma ready for iteration, collaboration, or systemization.

Benefits of using Claude Code for AI web design

Why use Claude Code instead of traditional coding?

  • No code knowledge required → Build a site from scratch just by writing natural-language prompts.
  • Design + code in one → Unlike typical no-code builders, Claude Code delivers production-ready HTML/CSS/JS and makes sure your website project is perfectly set up for your development team.
  • Simple setup → All you need is a terminal and a prompt, nothing else.

The Claude Code + Figma workflow advantage

  • Thanks to html.to.design, you can capture your Claude-generated site and import HTML into Figma for further refinements.
  • Perfect for teams who need both code for developers and design files for collaboration.

From vibe coding to Figma collaboration

Using Claude Code for AI web design allowed me to build a professional landing page for our Figma Plugin Weekly newsletter without knowing how to code. With just a prompt, I generated a working website, iterated quickly on the design, and then brought it into Figma for collaboration and polish.

This workflow shows just how far AI website builders have come. For designers, marketers, and creators, vibe coding with Claude Code paired with html.to.design is a powerful way to move from idea → website → Figma in record time.

👉 If you’re curious about experimenting with AI-generated websites, give Claude Code a try—and don’t forget to bring your work into Figma to make it truly your own.