Quick Brief
- Claude Opus 4.6 launched February 5, 2026 with 1M token context window first for Opus-class models
- Model outperforms predecessor by 190 Elo points, surpasses GPT-5.2 by 144 points on knowledge work tasks
- Professional website development costs $8,000–$25,000 through agencies versus $5–$25 API costs with Claude
- Figma Make integrates Claude to generate interactive prototypes and web apps from text prompts
Professional website development through agencies costs $8,000–$25,000 and requires 4-8 weeks to complete. Claude Opus 4.6, Anthropic’s latest model released February 5, 2026, generates complete HTML, CSS, and JavaScript from natural language descriptions at API costs of $5–$25 per million tokens. The 1M token context window allows entire website projects to be processed in single conversations without losing context.
What Makes Claude Opus 4.6 Different
Claude Opus 4.6 features a 1M token context window the first time an Opus-class model has reached this capacity. This extended context means the model can process entire website project briefs, including page structures, design specifications, and functionality requirements in a single conversation without losing track of earlier instructions. The model supports 128k output tokens, allowing it to generate complete multi-page websites without splitting code across multiple responses.
Anthropic’s model achieved significant performance improvements, outperforming its predecessor Claude Opus 4.5 by 190 Elo points on GDPval-AA, an evaluation measuring performance on economically valuable knowledge work tasks. The model surpasses OpenAI’s GPT-5.2 by approximately 144 Elo points on the same benchmark. On Terminal-Bench 2.0, an agentic coding evaluation, Claude Opus 4.6 achieves the highest score among tested models.
Figma’s Chief Design Officer Loredana Crisan confirmed Claude Opus 4.6’s capabilities: “Claude Opus 4.6 generates complex, interactive apps and prototypes in Figma Make with an impressive creative range. The model translates detailed designs and multi-layered tasks into code on the first try, making it a powerful starting point for teams to explore and build ideas“. This integration between Claude Opus 4.6 and Figma Make creates a workflow for rapid website prototyping and deployment.
9 Proven Prompts for Website Generation
1. Complete Business Website Prompt
Prompt: “Build a responsive business website for [Company Name], a [industry] company targeting [audience]. Include homepage with hero section featuring [value proposition], services page with 6 service cards, about page with team section, blog with 3 recent posts layout, and contact form with name/email/message fields. Use [color palette], modern sans-serif typography, and incorporate smooth scroll animations. Create semantic HTML5 with proper header hierarchy and optimize for Core Web Vitals with LCP target under 2.5 seconds.”
Claude generates semantic HTML structure with appropriate heading organization, which supports both accessibility and SEO. The model creates responsive designs that function across devices. Figma Make can transform the same prompt into an interactive prototype using Figma’s design system components.
2. E-Commerce Store Prompt
Prompt: “Create an online store for [Brand Name] selling [product category]. Design includes homepage with featured products grid (3 columns, CSS Grid layout), individual product pages with image galleries using carousel pattern, shopping cart with quantity adjusters and subtotal calculator, checkout flow with shipping form fields, and order confirmation page with order number display. Implement product filtering by price range and category using JavaScript. Use [brand colors], mobile-first responsive design with 44px minimum touch targets. Include structured data markup for products.”
E-commerce websites built through traditional agencies cost $20,000–$60,000. Claude can generate the front-end structure and shopping interface, though payment processing integration requires additional configuration. The 1M token context window allows the model to maintain consistency across all e-commerce pages and features.
3. Portfolio Website Prompt
Prompt: “Design a personal portfolio for a [role, e.g., graphic designer, photographer]. Include hero section with name and tagline, project gallery with 9 items in CSS Grid masonry layout (grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))), individual project pages with image sliders using native scroll-snap, about section with skills list displayed as tags, testimonials section with 3 cards, and contact section with social media links. Use minimalist aesthetic with [primary color] accents, 18px body text, 1.6 line height, generous white space (80px section padding). Implement lazy loading using loading=’lazy’ attribute and Intersection Observer for animations.”
The detailed technical specifications CSS Grid configuration, scroll-snap properties, and lazy loading implementation guide Claude toward performance-optimized output. This level of detail produces code that meets Core Web Vitals standards. Figma Make can generate the same portfolio with editable design components.
4. Landing Page Prompt
Prompt: “Build a high-conversion landing page for [Product/Event Name]. Structure: attention-grabbing H1 headline with [key benefit], hero section with background video (muted autoplay, playsinline attributes), 5-point benefits section with SVG icons in flexbox layout, social proof section with 3 testimonial cards and company logos grid, pricing table comparing 3 tiers with highlighted recommended option using transform scale, FAQ accordion using details/summary elements, and sticky CTA button (position: sticky, bottom: 20px). Use conversion-focused color scheme: [primary color] for CTAs with minimum 3:1 contrast ratio for WCAG AA compliance.”
Landing pages require strategic CTA placement and psychological design elements. Claude can implement these structures when explicitly specified in prompts. The mention of WCAG contrast ratios ensures accessibility compliance. Figma Make generates responsive landing pages with interactive elements that can be tested immediately.
5. Blog Platform Prompt
Prompt: “Create a magazine-style blog for [niche, e.g., tech reviews]. Include homepage with featured post hero (full-width, aspect-ratio: 16/9), 3-column recent articles grid (CSS Grid with gap: 2rem), right sidebar with category navigation list and popular posts widget, individual article pages with table of contents generated from H2/H3 headings, reading time estimator based on 200 words per minute, related posts section (3 cards with thumbnails), newsletter signup form with email validation, and author bio box with circular avatar. Use readable typography: 18px body text, 1.6 line height, max-width 720px for content column, system font stack. Optimize hero images for Google Discover with 1200px width in 16:9 ratio, WebP format.”
The specific image dimensions (1200px width, 16:9 ratio) and WebP format align with Google Discover’s documented preferences for featured content. Claude’s 128k output tokens allow generation of complete blog post templates with proper structure. Figma Make can prototype the blog interface with real content from connected data sources.
6. SaaS Dashboard Prompt
Prompt: “Build a responsive dashboard interface for [product name], a [description] tool. Include left sidebar navigation (200px wide, position: fixed) with icon menu and active state styling, top bar with search input (min-width: 300px) and user avatar dropdown menu, main content area with 4 metric cards showing KPIs (display: grid, grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))), data visualization section with placeholder divs for chart libraries (Chart.js dimensions), activity feed with timestamps using relative time format, and settings panel with form sections. Use [brand colors] with CSS custom properties (–primary-color, –background-color) for theme switching capability, ensure 44px minimum touch targets for tablet use, implement responsive sidebar collapse on mobile using media query at 768px.”
Dashboard interfaces require complex layouts and interactive components. Claude’s improved code review capabilities in Opus 4.6 help catch layout issues and ensure responsive behavior across breakpoints. Specifying CSS custom properties enables straightforward theme implementation. Figma Make can generate dashboards that pull real data from Supabase backends.
7. Restaurant Website Prompt
Prompt: “Design a restaurant website for [Restaurant Name], specializing in [cuisine type]. Include homepage with full-width hero image (height: 60vh, object-fit: cover), online menu organized by categories (appetizers, mains, desserts, drinks) using tab interface pattern with prices in table format and dietary icons (SVG: vegetarian leaf, vegan V, gluten-free GF), location page with Google Maps iframe embed (width: 100%, height: 450px, src with [address] geocoded), hours of operation displayed in definition list (dl/dt/dd elements), and contact form with name/email/phone/message fields and HTML5 validation. Use warm color palette ([colors]), incorporate hover zoom effects on food images (transform: scale(1.05), transition: transform 0.3s ease). Optimize for mobile ordering with large tap targets and click-to-call phone links (tel: protocol).”
Service-based websites require clear information architecture and prominent calls to action. The prompt’s specification of Google Maps integration and structured menu layout ensures all essential restaurant website elements are included. Figma Make can generate the restaurant site with customizable menu components from design system libraries.
8. Educational Platform Prompt
Prompt: “Create an online course platform homepage for [Platform Name]. Include main navigation with course categories dropdown menu (max-height: 400px, overflow-y: auto), hero section with introduction paragraph and video placeholder (aspect-ratio: 16/9, background: #f0f0f0), featured courses grid (display: grid, grid-template-columns: repeat(4, 1fr), gap: 24px) with course cards containing thumbnail images (300x200px), star ratings displayed as SVG icons, student count badge, and pricing with currency formatting, instructor showcase section with profile cards (circular avatars using border-radius: 50%, name, specialty text), student testimonials section with quote elements and attribution, and course search bar with filter button group. Use trust-building design: professional blue color scheme (#1E40AF primary, #3B82F6 secondary), certification badge icons (shield SVG), prominent ‘10,000+ students’ counter with number animation on scroll.”
Educational platforms benefit from social proof and credibility signals. Claude can implement these elements when specified in prompts, including the specific color codes and numeric counters. The technical details about grid layout and responsive design help ensure the platform adapts properly to different screen sizes. Figma Make generates educational interfaces with interactive prototypes for user testing.
9. Event Landing Page Prompt
Prompt: “Build a single-page event site for [Event Name], a [event type] happening on [date]. Structure: full-screen hero section (height: 100vh) with background video (MP4 format, muted autoplay loop, poster image fallback), countdown timer displaying days/hours/minutes/seconds using JavaScript Date object and setInterval, event details section with date/time/location in large typography (font-size: clamp(24px, 5vw, 36px)), speaker lineup section with cards triggering modal popups (using dialog element) showing detailed bios, schedule timeline (vertical line with CSS ::before pseudo-element) with session descriptions and time slots, sponsor logos grid (display: grid, gap: 32px, filter: grayscale(100%) transitioning to grayscale(0%) on hover), and ticket section with pricing tiers in cards and prominent CTA buttons. Implement smooth scroll navigation using scroll-behavior: smooth CSS property and anchor links. Optimize for mobile with responsive video (use poster image on small screens), collapsible schedule sections, and sticky ticket button.”
Event pages need urgency and clear information hierarchy. The countdown timer and smooth scroll navigation create engagement while maintaining usability. Specifying the CSS properties (scroll-behavior: smooth) and HTML5 elements (dialog) rather than JavaScript implementation produces cleaner, more performant code. Figma Make can prototype the event landing page with interactive animations and transitions.
Cost Comparison: Traditional vs AI Development
| Development Method | Time Required | Cost Range (USD) | Customization Level | Context Retention |
|---|---|---|---|---|
| Web Development Agency | 4–8 weeks | $8,000–$25,000 | High | Human memory |
| Freelance Developer | 2–4 weeks | $5,000–$15,000 | Medium-High | Human memory |
| Website Builder Platforms | 1–2 weeks | $500–$2,000/year | Low-Medium | Template-based |
| Claude Opus 4.6 API | Hours to days | $5–$25 per million tokens | High | 1M token context |
| Figma Make | Hours | $0–$192/year | Medium-High | Design system aware |
Professional business websites cost $8,000–$25,000 when built by agencies, with medium-complexity projects taking 4-8 weeks. Entry-level professional websites start at $5,000–$7,000. Complex e-commerce builds range from $20,000 to $60,000 or more.
Claude Opus 4.6 is available via API at $5 per million input tokens and $25 per million output tokens. For prompts exceeding 200k tokens, premium pricing applies at $10 per million input tokens and $37.50 per million output tokens. Figma Make is included for Full seat users at no additional cost, with 3,500 AI credits per month for Organization plans and 4,250 credits for Enterprise plans.
The 1M token context window means Claude can maintain coherence across massive projects equivalent to approximately 750,000 words or 3,000 pages without losing track of specifications. This represents a qualitative shift in how AI handles complex web development projects compared to previous models.
Technical Capabilities and Integration
Claude Opus 4.6 generates semantic HTML5 with proper header organization, responsive CSS including modern layout systems like Flexbox and Grid, and functional JavaScript for interactive elements. The model creates contact forms, navigation menus, and other standard website components. It establishes essential SEO elements including meta descriptions, alt attributes for images, and appropriate heading hierarchy.
On Terminal-Bench 2.0, an agentic coding evaluation, Claude Opus 4.6 achieves the highest score among tested models. The model scored 76% on the 8-needle 1M variant of MRCR v2, a needle-in-a-haystack benchmark that tests information retrieval across vast amounts of text whereas previous models scored just 18.5%. This demonstrates Claude’s ability to maintain context across large codebases and complex website projects.
Figma Make integrates Claude to transform text descriptions into interactive prototypes and working web apps directly within Figma. The tool generates layouts, logic, and structure from natural language prompts. Users can connect Figma Make to Supabase to add user authentication, database storage, and private API functionality creating data-aware prototypes without coding. Generated projects can be published through Figma Sites with customization and responsive design built-in.
However, certain functionality requires configuration beyond AI generation. Payment processing integration, user authentication systems (unless using Supabase through Figma Make), and custom database connections need developer setup. Backend infrastructure and complex server-side logic fall outside Claude’s primary scope, which focuses on front-end code generation.
Implementation Workflow
Access Claude Opus 4.6 through the API using the claude-opus-4-6 model identifier. Developers can integrate the API into code editors or custom applications. The model is also available on claude.ai and major cloud platforms. Pricing remains at $5 per million input tokens and $25 per million output tokens, with premium pricing ($10/$37.50) for prompts exceeding 200k tokens.
Begin with detailed project specifications including brand colors (with hex codes), typography preferences, desired page sections, and specific functionality requirements. The 1M token context window allows you to include comprehensive requirements, design system guidelines, accessibility standards, and reference examples all in a single prompt.
Claude Opus 4.6 introduces adaptive thinking, where the model can automatically decide when deeper reasoning would be helpful for complex tasks. At the default effort level (high), the model uses extended thinking when useful for website architecture decisions and complex layouts. Developers can adjust effort levels (low, medium, high, max) to balance quality with cost and latency.
For visual prototyping, access Figma Make through Figma’s interface (available to Full seat users). Describe your website in natural language, and Figma Make generates responsive layouts with design system components. The tool allows direct editing of generated outputs, rewriting copy, replacing images, or adjusting spacing and margins. Copy your preview as design layers to continue iterating in Figma Design, or publish directly through Figma Sites.
Context compaction, a new beta feature, automatically summarizes and replaces older context when conversations approach the window limit. This allows Claude to perform longer website development tasks without hitting token limits, maintaining project coherence across extended sessions.
Frequently Asked Questions (FAQs)
What is Claude Opus 4.6’s context window capacity?
Claude Opus 4.6 features a 1M token context window, marking the first time an Opus-class model has reached this capacity. This extended context is currently available in beta on the Claude Developer Platform. For prompts exceeding 200k tokens, premium pricing applies at $10 per million input tokens and $37.50 per million output tokens. The 128k output token limit allows complete page generation in single responses.
How does Claude Opus 4.6 compare to other AI models?
Claude Opus 4.6 outperforms its predecessor Claude Opus 4.5 by 190 Elo points on GDPval-AA, an evaluation measuring performance on economically valuable knowledge work tasks. The model surpasses OpenAI’s GPT-5.2 by approximately 144 Elo points on the same benchmark, translating to higher scores approximately 70% of the time. On Terminal-Bench 2.0 agentic coding evaluation, Claude Opus 4.6 achieves the highest score among tested models.
What is Figma Make and how does it work with Claude?
Figma Make is Figma’s prompt-to-app builder that transforms text descriptions into interactive prototypes and working web apps within Figma. It integrates Claude AI to generate layouts, logic, and structure from natural language. Users can connect Supabase backends for authentication and data storage, apply design system styles automatically, and publish sites through Figma Sites. Figma Make is included for Full seat users with 3,500–4,250 AI credits monthly depending on plan tier.
Can Claude Opus 4.6 handle e-commerce functionality?
Claude can generate front-end e-commerce interfaces including product grids, shopping carts, and checkout page layouts. The model creates the structural code and user interface components. However, payment processing integration (Stripe, PayPal) and inventory management systems require manual developer configuration. Figma Make with Supabase integration can prototype e-commerce flows with database connections for product catalogs.
What are the API costs for Claude Opus 4.6?
Claude Opus 4.6 pricing is $5 per million input tokens and $25 per million output tokens. For prompts exceeding 200k tokens, premium pricing applies at $10 per million input tokens and $37.50 per million output tokens. A typical website generation project consuming 50,000 input tokens and 100,000 output tokens would cost approximately $2.75. US-only inference is available at 1.1× token pricing for workloads requiring domestic processing.
How long does adaptive thinking take in Claude Opus 4.6?
Claude Opus 4.6 introduces adaptive thinking, where the model automatically decides when deeper reasoning would improve outcomes. At the default effort level (high), Claude uses extended thinking when useful for complex website architecture but moves quickly through straightforward tasks. Developers can adjust effort levels from low to max using the /effort parameter to control intelligence, speed, and cost tradeoffs. If the model overthinks simple tasks, dialing effort down to medium is recommended.
Does Claude generate SEO-optimized code?
Claude creates semantic HTML with proper heading hierarchy, generates meta descriptions and alt attributes for images, and can produce robots.txt files and XML sitemaps. The model understands SEO best practices when prompted with specific requirements. However, content quality, keyword research, schema markup implementation, and ongoing SEO strategy remain separate responsibilities requiring human expertise.
Can AI-generated websites rank in Google Search?
Websites rank based on content quality, technical SEO, user experience, and backlinks not build method. Claude generates semantic HTML and proper heading structure that supports search engine indexing. Manual addition of quality content, structured data markup, optimized images, and ongoing SEO work determine ranking success. The 1M token context window allows Claude to maintain SEO consistency across large multi-page websites.
