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.
Recommended Stack
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:
- Designs a unique layout matching the content and vibe
- Picks fonts, colors, and spacing that fit the use case
- Generates complete HTML with working interactivity
- 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
updatetool swaps content on the same URL.