Claude Code is Anthropic's agentic coding tool. It reads and edits files in your project directly, runs terminal commands, and can build entire features from a single natural language instruction. When you give it a Moon template, it adapts the design to your codebase without inventing its own styles from scratch.
Option 1: paste the template directly into a chat message
Copy a Moon section, then open Claude Code and paste the HTML into your message with instructions like: "Use this as the hero section. Convert it to a React component, replace the placeholder headline with 'Automate your workflow', and make the CTA link to /signup."
Claude Code will convert the HTML to the correct format for your project: JSX if you are using React, Svelte template syntax if you are on SvelteKit, or plain HTML if you are building a static site.
Option 2: write the template to a file first
For larger templates or when you want Claude Code to reference the design across multiple steps, save the Moon HTML to a file in your project (e.g. reference/hero.html) and then instruct Claude Code: "Read reference/hero.html and use its design as the basis for the homepage hero. Convert to React."
What Claude Code handles automatically
Claude Code will handle the conversion from inline styles to Tailwind classes (if you ask), from static HTML to responsive JSX, and from placeholder content to your actual product copy. The Moon template provides the design values (font sizes, spacing, colour values) that you would otherwise have to describe in your prompt.
This is the most efficient way to use Claude Code for frontend work: give it the design, describe the function, and let it generate the code.