Anthropic just launched Claude Design, a tool that turns text descriptions into interactive prototypes, websites, and marketing pages. Here is how to use it to build a website for an architecture company from scratch.
What You'll Need
A Claude subscription (Pro, Max, Team, or Enterprise)
Access to Claude Design (rolling out from April 17, 2026)
Optional: your company logo, brand colours, and any reference images
Step 1: Open Claude Design
Go to claude.ai and select Claude Design from the product menu. You will see a blank canvas with a chat panel on the left.
If you have an existing website or codebase, Claude can read it during setup to build a brand system. For this tutorial, we will start from scratch.
Step 2: Describe Your Architecture Website
In the chat panel, describe what you want. Be specific about the business, the audience, and the style.
Try this:
Create a modern landing page for a London-based architecture firm called MetaLabs Architecture. The style should be minimal, clean, and premium. Use a dark colour palette with white text and warm accent tones. Include sections for: hero with tagline, featured projects grid, services overview, team section, and contact form. The tone should feel confident and understated.Claude will generate a full page layout with placeholder content. You can see it update in real time on the canvas.
Step 3: Refine the Hero Section
The first section visitors see matters most. Refine it with a follow-up prompt.
Try these prompts:
Update the hero section. Make the headline "Designing spaces that outlast trends." Add a subtitle: "MetaLabs Architecture. Residential, commercial, and cultural projects across London and the South East." Use a full-width background image placeholder and a subtle scroll indicator at the bottom.
Customisation: swap in your own headline and company details. Claude adapts the layout to fit your content.
Step 4: Add Project Showcase Images
Architecture websites live or die on their visuals. Tell Claude what kind of project grid you want.
Try this:
Make the featured projects section a 3-column grid with large images. Each project card should show: a full-bleed image, project name, location, and year. Add hover effects that reveal a one-line description. Use these project names: Horizon House (Camden, 2024), Riverlight Apartments (Battersea, 2023), The Foundry (Hackney, 2022), Maplewood Residence (Richmond, 2025), Signal Tower (King's Cross, 2024), Ashford Pavilion (Greenwich, 2023).Add a "View All Projects" button below the grid that links to a separate projects page.
Step 5: Build the Services and Team Sections
Once the visual portfolio is in place, add the sections that tell visitors what you do and who you are. Claude can build both from a single description, matching the style of what is already on the page.
Try this:
For the services section, use a clean two-column layout. Left side: a short intro paragraph about the firm's approach. Right side: a list of services including Residential Design, Commercial Architecture, Interior Architecture, Planning & Permissions, and Sustainable Design. Each service should have a one-line description.For the team section, create a row of four team member cards. Each card shows a circular photo placeholder, name, role, and a one-line bio. Keep it minimal.
Customisation: adjust the number of team members and services to match your actual firm.
Step 6: Adjust Spacing, Colours, and Layout
Claude generates custom sliders for design adjustments. You can also use inline comments or direct edits.
Try this:
Increase the padding between sections. Make the background slightly warmer, not pure black. Reduce the font size on the service descriptions. Add more white space around the team section.You can also click directly on elements in the canvas to edit text, drag to reposition, or leave comments for Claude to action.
Step 7: Export Your Website
When you are happy with the design, export it in the format you need. Just click the share button in the top right and export to HTML to use the code.
Other export options include:
Claude Code bundle: hands off the design as a build-ready project
Canva: for further editing with your team
PDF: for client presentations
PPTX: for pitch decks
Real-World Applications
Architecture and Design Firms
Create client-facing website prototypes before investing in development. Test different layouts and messaging quickly.
Property Developers
Build marketing pages for new developments without waiting for a design agency. Update them as the project evolves.
Interior Designers
Showcase portfolio work with interactive prototypes that feel more polished than a simple image gallery.
Small Businesses
Build a professional landing page in minutes. Export to HTML and host it without needing a web developer.
Next Steps
Start with your own business. Describe your company, audience, and style in one prompt, and see what Claude generates. Then refine section by section until it feels right.
Start with this prompt:
Create a landing page for [your company name]. We are a [type of business] based in [location]. The style should be [describe the aesthetic]. Include sections for: [list your key sections]. The audience is [describe who visits your website]