Skip to content

Page Design

Based Page gives Claude creative freedom to design unique pages for every use case. Rather than picking from pre-built templates, Claude generates custom HTML tailored to your specific request.

Every page uses a lightweight CDN stack:

  • Tailwind CSS for utility-class styling
  • Alpine.js for interactivity (accordions, tabs, mobile menus, toggles)
  • Lenis for smooth scrolling
  • IntersectionObserver for scroll-reveal animations

How It Works

Tell Claude what you want:

"Build a landing page for Beacon, a developer tool for API monitoring. Dark theme, modern feel."

Claude:

  1. Designs a unique layout matching the content and vibe
  2. Picks fonts, colors, and spacing that fit the use case
  3. Generates complete HTML with working interactivity
  4. Calls deploy - the page is live immediately

React Apps

For interactive apps, Claude can use React via esm.sh CDN imports (no build step):

html
<script type="module">
  import React from 'https://esm.sh/react@18'
  import { createRoot } from 'https://esm.sh/react-dom@18/client'
  // ...
</script>

Multi-file Sites

For sites with separate CSS, JS, or multiple pages, Claude uses the files parameter on the deploy tool instead of a single HTML string.

Notes

  • Pages use Google Fonts with system font fallbacks for reliable typography.
  • Forms automatically submit to /_submit - data is stored and viewable in the dashboard.
  • If you don't like the design, ask Claude to iterate. The update tool swaps content on the same URL.

Deploy apps from conversation.