Should I paste the Moon template in the chat or save it to a file?

For a single component, pasting in the chat is fastest. For a full page or multiple sections you will reuse across sessions, save the templates to a reference folder and point Cursor to the file.

Can Cursor convert Moon templates to Tailwind classes?

Yes. Cursor handles this conversion reliably. Include 'convert all inline styles to Tailwind classes' in your instruction and it will translate each CSS rule, flagging any values that need a custom config entry.

Which Moon templates work best with Cursor?

Any template works with Cursor, but the SaaS landing pages, hero sections, and navigation templates are the most useful starting points. They define the visual identity of the product and are the sections where a design reference saves the most iteration time.

How to use Moon templates with Cursor

Cursor is an AI-powered code editor that operates directly on your codebase. Unlike prompt-first vibe coding tools, Cursor reads your existing files, understands your project structure, and makes targeted edits. Moon templates work as design references that you paste or save locally, giving Cursor a concrete visual target to build toward.

Option 1: paste the template directly into a Cursor chat message

Open Cursor's AI chat panel and paste a Moon template alongside your instruction. For example: "Use this HTML as the design reference for the hero section. Convert it to a React component using Tailwind. Replace the placeholder headline with 'Ship faster with AI' and make the CTA link to /signup."

Cursor will read the template, identify the structural elements, and generate a component that matches the design while fitting your existing codebase conventions.

Option 2: save the template as a local reference file

For larger projects, save the Moon HTML to a file inside your project directory (for example reference/hero.html) and instruct Cursor: "Read reference/hero.html and rebuild the homepage hero to match it. Convert all inline styles to Tailwind classes. Keep the animation."

Keeping the reference file in the project means Cursor can access it across multiple sessions and chat threads without you needing to paste the template again.

Working with inline styles vs Tailwind

Moon templates use inline styles for maximum portability. If your project uses Tailwind, add "convert all inline styles to the nearest Tailwind equivalent" to your instruction. Cursor is accurate at this conversion and will flag values that have no direct Tailwind class, giving you the option to add them to your config.

Using Cursor to customise an existing Moon section

Cursor's codebase context makes it particularly good at targeted customisations. Open the component file in Cursor, select the relevant section, and send a scoped instruction: "Update the colour values in this component to use our brand blue (#2D5BE3) instead of the current accent colour. Leave all spacing and typography unchanged." Cursor makes the surgical edit without touching the rest of the file.