New: Generate Pages with Design Inspiration from Any Website

·4 min read·
featurepage-generationapidesign

We just shipped one of the most requested features for the WapuuLink page generator: design inspiration from any website. You can now pass any public URL to the API and WapuuLink will study that site's design — its layout, spacing, color usage, typography, and visual hierarchy — then generate a page that mirrors that style.

No more describing design styles in words and hoping for the best. Just point at what you like.

How It Works

The new inspirationUrl parameter triggers a three-step process behind the scenes:

  1. Screenshot — WapuuLink uses Playwright to load the URL in a real browser and capture a full-page screenshot
  2. Visual Analysis — The screenshot is sent to the AI model as a vision input alongside your prompt
  3. Style Replication — The AI studies the design patterns (not the text content) and generates your page with that same visual polish

This all happens automatically. You just add one parameter to your API call.

The API Call

Here's what a request looks like with inspirationUrl:

const response = await fetch('https://api.wapuulink.com/v1/generate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-api-key': 'your-api-key'
  },
  body: JSON.stringify({
    prompt: 'Build a pricing page for our developer tools platform',
    siteContext: {
      siteName: 'DevTools Pro',
      themeSettings: {
        primaryColor: '#6366F1',
        accentColor: '#22D3EE',
        fontFamily: 'Inter, sans-serif'
      }
    },
    inspirationUrl: 'https://stripe.com/pricing',
    model: 'premium'
  })
});

const { html } = await response.json();
// html is a complete, self-contained HTML document

The returned HTML is fully self-contained — it includes Bootstrap 5 via CDN, Google Fonts, a <style> block with custom CSS variables and animations, and responsive layout. You can open it directly in a browser or drop it into WordPress.

Combining with WordPress Media Library

The real power comes when you combine inspirationUrl with siteUrl. These are two separate parameters that work together:

  • siteUrl — Your WordPress site URL. WapuuLink fetches images from your WordPress media library via the REST API and uses real photos (team headshots, product images, logos) in the generated page.
  • inspirationUrl — Any website URL. WapuuLink screenshots it and uses the design as visual reference.
const page = await fetch('https://api.wapuulink.com/v1/generate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-api-key': 'your-api-key'
  },
  body: JSON.stringify({
    prompt: 'Build a landing page for our consulting firm with team bios',
    siteContext: {
      siteName: 'Archer Consulting',
      themeSettings: {
        primaryColor: '#335069',
        secondaryColor: '#0a7575',
        accentColor: '#F4C430',
        headingFont: 'Prata, serif'
      }
    },
    siteUrl: 'https://archerconsulting.com',       // pulls real headshots
    inspirationUrl: 'https://mckinsey.com',         // mirrors this design style
    model: 'premium'
  })
}).then(r => r.json());

fs.writeFileSync('landing-page.html', page.html);

Both URLs are fetched in parallel, so there's no extra latency. The media library fetch and the Playwright screenshot happen simultaneously before the AI starts generating.

Using the npm SDK

If you're using the WapuuLink npm SDK, the same parameters are available:

import { WapuuLink } from 'wapuulink';

const wapuu = new WapuuLink({ apiKey: 'your-api-key' });

const page = await wapuu.pages.generate({
  prompt: 'Build an about page for a law firm',
  siteContext: {
    siteName: 'Smith & Associates',
    themeSettings: { primaryColor: '#1a365d' }
  },
  inspirationUrl: 'https://example-lawfirm.com',
  siteUrl: 'https://smithlaw.com',
  model: 'premium'
});

console.log(page.html);

What Makes a Good Inspiration URL

The AI analyzes the visual design, not the content. So you can use inspiration sites from completely different industries. Some ideas:

  • stripe.com — Clean, modern SaaS design with lots of whitespace
  • apple.com — Bold typography, minimal layouts, premium feel
  • linear.app — Dark theme, developer-focused aesthetic
  • notion.so — Friendly, approachable design with soft colors

The AI will adapt the design patterns to your brand colors and content. You get the layout quality of a well-designed site with your own branding applied.

Self-Contained Output

Every generated page now comes as a complete HTML document. No external dependencies to worry about:

  • Full <!DOCTYPE html> document with <head> and <body>
  • Bootstrap 5 CSS and JS via CDN
  • Bootstrap Icons via CDN
  • Google Fonts @import for any fonts used
  • CSS custom properties for brand colors
  • @keyframes animations for subtle entrance effects
  • Responsive, mobile-first layout

You can open the HTML file directly in a browser, upload it to WordPress, or embed it anywhere. It just works.

Pricing

The inspirationUrl feature is included at no extra cost. Page generation is still 1 credit (standard) or 2 credits (premium). Check our pricing page for credit bundles.

Try It Now

If you already have a WapuuLink API key, you can start using inspirationUrl right now. Check the API documentation for the full parameter reference.

Not signed up yet? Create your account and start generating pages in under 30 seconds.