Overview
The Website Connector is an AI web designer and developer you talk to in plain words. You describe the business and the goal; it designs the look first, writes real content, builds the pages, generates the images, checks its own work, and saves the finished website on your computer.
Who this guide is for: anyone, no technical background needed.
| What you give | A plain-words description of the business and what the page should achieve |
|---|---|
| What you get | A complete, ready-to-open website folder on your Desktop |
| Time | Usually one working session |
| Works inside | Claude Code, Codex, ChatGPT desktop app (any AI that can save files) |
| Website type | Fast, simple pages that open anywhere and need no special hosting |
Before you begin
You need two things:
- A coding-capable AI tool. One of: Claude Code, Codex, or the ChatGPT desktop app. (The connector saves real files, so a plain chat window is not enough.)
-
The connector added to that tool. A one-time step:
Claude Code
claude mcp add --transport http canz-website https://canz-website.vercel.app/mcpCodex or ChatGPT desktop app
codex mcp add canz-website --url https://canz-website.vercel.app/mcp
Quick start: your first website in 5 steps
Follow this once and you will understand the whole rhythm.
-
Open a new chat in your AI tool and describe the job in one paragraph. Include: the business name, what it does, who the customers are, and what the page should achieve. Example:
"Build a landing page for GreenNest Interiors, an interior design studio in Lahore. Customers are homeowners aged 30–55. Goal: consultation bookings. Generate real images and use them on the page."
- Answer its questions. If your description leaves something important out (for example brand colors, or a website whose style you like), it asks about exactly those things, then confirms the direction.
- Let it design first. It prepares the design decisions (audience, references, colors, fonts, section-by-section text, image plan, motion plan) as short documents you can read. Building starts only after the design is decided. That is normal, and it is why the results look professional.
- Let it build and check. It writes the pages, creates the images, tests the site on phone and desktop sizes, and runs its own quality review before calling anything done.
- Open your website. Find the folder in
Desktop\canz-website\<project-name>, and ask: "How do I view it?" You get one command that opens the site in your browser. The folder also contains a delivery note describing what was built and what (if anything) remains.
That's it. Every future job follows the same rhythm: describe → answer → review.
Capabilities: everything it can do
Websites and pages
- Premium landing pages: one-page sites built to convert visitors into enquiries, bookings, or sales
- Multi-page websites: home, about, services, contact, and more, all matching one consistent design
- Redesigns and "make it better" jobs: give it an existing website's address and it rebuilds it cleaner, faster, and more persuasive while keeping the business content
- Portfolio and personal sites: including light and dark color themes with a switch
Design
- A real design process: decisions about audience, style, colors, and fonts are made and written down before any page is built
- Design-language extraction: show it a website you admire and it studies the style (colors, fonts, spacing) and creates something original in that spirit, and it does not copy it
- Consistent styling everywhere: every page and section follows the same locked color and font system, so a 10-page site still looks like one site
Content and images
- Real written content: headlines, section text, and calls-to-action written for your specific business and customers; pages are never filled with dummy text
- AI-generated images: hero images and section visuals created and placed into the page (in tools that support image generation), compressed so pages stay fast
- Your own material: give it your photos, logo, or an approved copy document and it builds with those instead
Quality
- Mobile-first: the phone layout is designed as its own experience, then tablet and desktop
- Speed: lightweight pages built to load fast
- Accessibility: readable contrast, keyboard-friendly navigation, screen-reader labels
- Self-review before delivery: every build passes a strict internal quality check (including a dedicated review of the top "hero" section) before handover; if something cannot be verified, it says so in the delivery note
- Purposeful animation: subtle motion that guides the eye, never decoration for its own sake, and it respects visitors who prefer reduced motion
Search and sharing
- Search-engine basics included: page titles, descriptions, sitemap, and the structured information that helps Google and AI assistants understand the site
Practical
- Everything saved on your computer: the full website folder appears on your Desktop as it is being built
- No hosting lock-in: the site is plain web files that work on any hosting service; there is nothing proprietary to maintain
- Contact forms: form layouts ready to connect to your email or form service
- Pairs with the Website QA connector: after a build, you can ask the independent QA inspector for a scored second opinion
How-to guides
How to request a new landing page
Write one paragraph with these five ingredients: business, customers, goal, feel, anything you already have:
"Build a premium landing page for [business] in [city]. It offers [services]. Customers are [who]. Goal: [bookings / quote requests / sign-ups]. Brand feel: [e.g. premium but warm]. We have [photos / a logo / a copy document at this path]."
How to improve an existing website
Give the address and the ambition:
"Recreate this website 3x better: same business and content, much more polished: https://your-old-site.com. Generate real images and use them on the page."
How to use a copy document you already have
If a writer already prepared the website text (a Word/PDF copy document):
"Build the website using the approved copy in this file: [file path]. Keep the wording; you design everything around it."
How to get a second opinion on the finished site
After delivery, in the same tool:
"Now QA this site with the Website QA connector, goal: [the site's goal], and share the score and top fixes."
Best practices for a great result
- Say the goal out loud. "More consultation bookings" produces a better page than "make it nice."
- Name a website you like (any famous brand or competitor). It gives the design research a head start.
- Give real material when you have it. Real photos and real testimonials always beat generated ones.
- Answer its questions specifically. "Teal and warm neutrals" is more useful than "you decide", but "you decide" also works; it will research and propose.
- Review the design documents when it shares direction. Changing a color at the design stage costs a sentence; changing it after the build costs a rebuild.
Troubleshooting and FAQ
It is asking me questions instead of building. Is something wrong?+
No. That is the process working. It asks only about things your description did not cover. Answer them and the build proceeds.
Where is my website?+
Desktop\canz-website\<project-name> on your computer. Ask "how do I view it?" for the one command that opens it in your browser.
The ChatGPT app says it cannot save to my Desktop.+
Open the Desktop folder as the workspace/project folder in the app, then continue. The connector will remind you of this itself if it happens.
Can it use my exact brand colors and fonts?+
Yes. State them in the brief or when it asks, and the whole site is built on them.
Will the images be real photos of my business?+
Generated images are AI-made. For photos of your actual team, shop, or products, supply your own files. They get placed, and any spots waiting for real photos are marked.
Does the site come with hosting or a domain?+
No. You receive the website files, ready to upload to any hosting service. Ask for upload instructions for your host and they are included in the delivery note.
The first reply took a long time.+
The service sleeps when unused; the first response can take 20–30 seconds. After that it is fast.
Glossary
| Term | Plain meaning |
|---|---|
| Landing page | A one-page website with a single goal, like getting enquiries |
| Hero section | The first screen a visitor sees: headline, image, and main button |
| Brief | Your plain-words description of the job |
| Call-to-action (CTA) | The button/action you want visitors to take ("Book a call") |
| Design language | The consistent set of colors, fonts, and spacing a site uses |
| Delivery note | The plain-language report in your folder: what was built, how to run it, what remains |
The Website Connector is one of the live MCP connectors on this site. For AI agents and backends, see the Agentic AI Developer guide.