Website references

Attach a public website URL to give the AI a design reference. VoxelSite uses the page's colors, typography, spacing and layout as context when it creates or restyles your site.

This works for two scenarios:

• New sites - "I like how Apple's website looks, build me something like that for my agency"
• Restyling existing sites - request a new look using the current content as context

How to use it

Attaching a reference

1. Click the globe icon (🌐) in the prompt toolbar, next to the image attachment button
2. Enter the website URL - full paths work too (e.g. https://www.apple.com/apple-vision-pro/)
3. Click Add - VoxelSite validates the URL in real time (checks accessibility, robots.txt, and content quality)
4. A reference chip appears below the prompt bar showing the URL
5. Send the reference. Add instructions when you need to specify the business or constrain the restyle.

You can optionally type extra instructions alongside the reference ("make it darker", "keep my existing colors"), but the URL alone is enough.

The globe icon lights up (orange accent) while the URL sheet is open and while a reference is attached, to indicate an attached reference.

For new sites

When you have no site yet, attach a reference URL and send it. You can optionally add a description of your business:

Make a site for my creative agency NowSquare

The AI receives the fetched page as reference context. Check the result for reused text, images or branding before publishing.

For existing sites (restyle)

When your site already exists, attaching a reference URL triggers a restyle. VoxelSite will:

• Interpret the reference site's visual language
• Change your site's colors, typography, spacing, border radius and shadows to reflect the reference
• Ask the model to preserve your existing text, pages and business information
• Automatically save a backup of your current design before making changes

You can optionally add instructions to guide the restyle:

Make the typography lighter - match the thin font weights from the reference

Keep my dark background but use their spacing and section layout

Reference + images + text

Website references combine with other attachments. You can send a reference URL, attach images, and type instructions - all in one message.

What gets extracted

VoxelSite fetches the page HTML, removes scripts and some bulky markup, then sends the cleaned HTML as reference context. Text and image paths can remain. The cleanup does not redact business details or personal information.

Use public pages you are comfortable sending to your configured AI provider. Built-in reference generation uses that provider. An external tool can use the bounded reference-import tools described in Tools and coverage; importing reference context does not itself write or publish website files.

In the default content mode, VoxelSite uses your business context, including the site name, tagline and details from your conversation, to write content.

VoxelSite asks the AI to use its Tailwind CSS output structure when interpreting a reference design.

Content modes

When attaching a reference, a toggle appears:

• Generate new content (default) - VoxelSite creates original content based on your business
• Preserve original content (paraphrased) - the reference site's content structure is adapted and paraphrased for your context

Review the generated text and images before publishing. The preserve mode is an editing option, not permission to reuse someone else's content.

URL validation

When you add a reference, VoxelSite checks the URL and fetched response:

• Invalid URLs - format errors are caught immediately
• Blocked sites - pages protected by Cloudflare, CAPTCHA, or login walls are detected and explained
• JavaScript-only apps - React, Vue, and Angular SPAs that require a browser to render are flagged with a clear message
• robots.txt - VoxelSite respects the site's robots.txt rules

Validation feedback appears as an inline error below the URL field - not as a disruptive popup.

Supported URLs

Use a public page that returns HTML. These examples describe common compatibility limits:

• ✅ Corporate sites, portfolios, agency pages, landing pages
• ✅ Subpages and specific sections (e.g. www.apple.com/apple-vision-pro/)
• ✅ Sites in any language
• ❌ Pages behind login walls or paywalls
• ❌ Single-page JavaScript apps (React/Vue/Angular) with no server-rendered content
• ❌ Pages blocked by Cloudflare or similar bot protection

If a URL doesn't work, VoxelSite explains why and suggests trying a different page.

History

Website references are saved in your conversation history. When you revisit a conversation, each message that used a reference shows a clickable globe badge with the reference URL - to show the saved reference.

Design safety

Before experimenting, click Save in the preview toolbar to create a named design you can find in the Gallery. You can also create a snapshot in Designs → History.

Studio creates an internal backup before a reference restyle. That backup does not appear as a normal Gallery entry, so keep your own named save.

Tips

• Choose a relevant page. Use the page that shows the layout or typography you want.
• The URL alone is enough. Attach the reference and send it. Add instructions only when you want to steer the result ("keep my dark colors", "make the typography lighter").
• Review reused material. Check the generated text, images and branding before publishing.
• Iterate. If the first result doesn't quite capture what you're after, send a follow-up prompt referencing specific elements: "The heading font should be lighter" or "Add more whitespace between sections."
• Save before experimenting. Click Save in the toolbar before attaching a bold reference, so you have a version to restore.

Related

• Chat - The AI conversation interface
• Creating Sites - Prompts for building from scratch
• Design Styles - Verbal style descriptions as an alternative to references
• Designs - Save and restore design states