Frequently asked questions

Short answers about using Page Patterns. For how each control works, see the help pages.

Is Page Patterns free?

Yes. The app is free to use and needs no account. The MCP server for AI agents is free too; it needs a free key, which you get by signing in with GitHub or Google.

Can I use the patterns in commercial projects?

Yes. The patterns you make are yours to use on any site or product, including client work and things you sell. You don't need to credit Page Patterns. The terms have the details.

Are my designs uploaded anywhere?

No. The app runs in your browser. Autosave keeps your design on your device, and a share link carries the whole design inside the link, after the # sign, which browsers never send to a server. If you accept analytics cookies, Google Analytics records which pages and features are used, never your designs. See the privacy notice.

Which AI coding tools does the prompt work with?

Any tool that edits your site's code from a text prompt, such as Claude Code, Cursor, Windsurf, GitHub Copilot, Lovable, Bolt, v0 and Replit. The prompt names the section, explains how to layer the pattern behind the content and includes the SVG, or saves it as a file when it is large.

Can I add a pattern without an AI tool?

Yes. Use on my site has a Code tab with an HTML and CSS version, a CSS background, React and Tailwind, plus SVG, PNG, WebP and JPEG files. See Use on your site.

Will the sample text end up in my download?

No. The headline and buttons on the canvas are a guide that shows where your words will sit, so you can see how quiet the pattern needs to be behind them. They are never exported, which is also why you can't edit them. Your AI tool adds your real text. See Text position.

Will a pattern slow my site down?

Usually not. Most patterns are a few kilobytes of SVG. The top bar shows the file size as you work, and Use on my site suggests fixes above 200 KB. Grain uses an SVG filter that can be slow on large sections, so use it sparingly.

How do I change the colour after adding it?

The HTML version uses CSS variables: --pattern-tint recolours the shapes, --brand sets the background and --pattern-strength fades the whole pattern. Change them in your CSS. You don't need a new export.

Will the pattern look right on phones?

The SVG fills the section at any size and crops what doesn't fit, so the clear area behind your headline stays in place. Check it with Responsive preview in the Code tab, or make a separate design with the Phone placement.

Can I make a repeating pattern?

Yes. Use on my site, Code, More has a Repeating tile: a small tile for background-repeat. Zones and sheen are switched off in tiles, because they belong to one place on the artboard.

Where is my work saved?

In your browser, automatically. To keep a copy or move it to another computer, choose Save project from the menu, which downloads a .pattern.json file, or copy a share link.

Does it work on a phone or tablet?

Yes. On a phone the canvas sits at the top, the controls run underneath, and Looks and Fine-tune become two tabs. One finger uses the active tool; two fingers pan and zoom.

Can my AI agent use Page Patterns directly?

Yes. Page Patterns has an MCP server that runs on your computer and lets agents such as Claude Code design patterns for a section of your site, show you options in your real page, and add the one you pick. It needs a free key. See Use it from an AI agent.

How is this different from Hero Patterns?

Hero Patterns is a well-loved library of repeating SVG tiles. Page Patterns designs a background for one particular section: it keeps the area behind your headline clear, offers effects such as halftone fades and lighting, and gives your AI tool a prompt that says where the pattern goes.

How do I report a bug or suggest a feature?

Email hello@pagepatterns.com. A share link to the design that shows the problem helps a lot.