# AI WEBSITE BUILD WORKING FILE

## Operational companion to The Marketer's AI Website Build Guide

**Purpose:** Use this file while you build. It is not a second copy of the guide.

Upload this file to your main AI website project and use it as the operating reference for the build. Complete the placeholders before each phase, attach the requested files or screenshots, and work through the checkpoints in order.

This workflow was created for ChatGPT because that is the tool used to build FunnelFlag.com. You can adapt the same process to other capable AI assistants. Interface names and site-building features may differ.

---

# 1. PROJECT CONTROL PANEL

Fill this out before you begin.

```text
BRAND NAME: [BRAND NAME]
DOMAIN: [DOMAIN]
TARGET AUDIENCE: [TARGET AUDIENCE]
BUSINESS DESCRIPTION: [WHAT THE BUSINESS DOES]
CORE PROBLEM: [PROBLEM YOU SOLVE]
PRIMARY OFFER: [OFFER OR SERVICES]
PRIMARY WEBSITE GOAL: [PRIMARY GOAL]
PRIMARY CTA: [PRIMARY CTA]
SECONDARY CTA: [SECONDARY CTA OR NONE]
BRAND VOICE: [BRAND VOICE]
APPROVED COLORS WITH CODES: [COLOR NAME + HEX/RGB]
TYPOGRAPHY: [TYPOGRAPHY]
LOGO ASSETS: [SVG POSITIVE / SVG NEGATIVE / OTHER]
PRIMARY SOCIAL LINKS: [SOCIAL LINKS]
HOSTING PREFERENCE: [NETLIFY / OTHER / UNDECIDED]
DOMAIN REGISTRAR: [REGISTRAR]
FORM SERVICE: [NETLIFY FORMS / FORMSPREE / OTHER / NONE]
PROFESSIONAL EMAIL PROVIDER: [PROVIDER / NONE]
```

## Files to have ready

- Brand strategy or brand brief.
- Website copy or approved messaging, if available.
- Logo in SVG whenever possible.
- Positive logo version for light backgrounds.
- Negative logo version for dark backgrounds.
- Exact institutional color codes.
- Typography rules.
- Social URLs.
- Existing legal pages or requirements, if applicable.
- Any approved photography, illustrations, diagrams, or image references.

---

# 2. OPERATING RULES FOR THE AI

Paste this once at the beginning of your main website project.

```text
We are going to build and publish a real website for [BRAND NAME].

I am a marketer with no coding or web-development experience. I will make the business, brand, copy, and design decisions. I need you to act as a senior website strategist, UX reviewer, front-end developer, QA partner, and technical guide.

Working rules:
1. My approved brand and website documents are the source of truth.
2. Do not reinvent approved brand decisions.
3. Challenge weak UX, messaging, or structural decisions instead of blindly agreeing with me.
4. Do not start building the working site until the homepage structure and visual execution are approved.
5. When visual concept images are needed, create prompts for separate image chats. Do not generate all visual concepts inside this main project conversation.
6. Once the working site is created in GPT Sites, treat that version as the current working site.
7. Preserve approved sections and change only what I request unless you identify a conflict that I should review first.
8. Explain technical concepts in plain English.
9. When deployment, DNS, forms, or email configuration is involved, guide me one step at a time and wait for confirmation.
10. Never invent account settings, DNS values, credentials, or business information.
11. If you need to see my current screen, current site, or error, ask me for a screenshot.
12. At major checkpoints, help me create an updated Markdown handoff brief.
13. Do not expose secrets, passwords, private keys, recovery codes, or customer data in public code.
14. Do not move to the next phase until I approve the current checkpoint.

Project variables:
Brand: [BRAND NAME]
Domain: [DOMAIN]
Audience: [TARGET AUDIENCE]
Primary website goal: [PRIMARY GOAL]
Primary CTA: [PRIMARY CTA]
Hosting preference: [HOST OR UNDECIDED]

I am attaching the source-of-truth documents now.

First tell me:
- What is already decided
- What is still missing before website architecture
- What you recommend as our next single step

Do not start coding yet.
```

---

# 3. PHASE 1: WEBSITE BUILD BRIEF

## Input

Attach or paste your approved brand material.

## Prompt 1: Turn the brand into a website build brief

```text
I am going to build a real website for [BRAND NAME] using AI as my strategy, design, coding, and technical assistant.

I already have the brand strategy defined. I do NOT want you to reinvent the brand.

Use the information I provide as the source of truth and create a concise Website Build Brief in Markdown.

The brief must include:
1. Brand name and domain
2. Business description
3. Target audience
4. Core problem and value proposition
5. Offers or services
6. Primary and secondary CTAs
7. Brand voice and copy rules
8. Visual identity: colors with exact codes, typography, logo/assets
9. Homepage objective
10. Required sections or pages
11. Required functionality
12. SEO requirements
13. Things the site must avoid
14. Decisions that are still missing

Do not invent missing brand decisions. Put them under "Open Decisions".

Here is my existing brand material:
[PASTE OR ATTACH YOUR BRAND DOCUMENTS]

Before you continue, ask me all the questions you need to make this brief as complete and accurate as possible.
```

## Prompt 2: Create the asset checklist

```text
Using the approved Website Build Brief, create a checklist of every asset and piece of information we need before development.

Separate the checklist into:
- Copy
- Brand assets
- Images or illustrations
- Social links
- Domain and hosting
- Forms
- SEO
- Legal or privacy items
- Analytics

Mark each item as:
- Required before building
- Can be added before launch
- Optional later

For logo assets, verify whether I have:
- SVG positive version
- SVG negative version
- Any icon/isotype version needed for favicon or compact applications

Do not add tools or requirements unless they serve a clear purpose for this website.
```

## Checkpoint 1

Do not continue until:

- [ ] The Website Build Brief is approved.
- [ ] Open decisions that block the site are resolved.
- [ ] Exact color codes are documented.
- [ ] Typography is documented.
- [ ] Logo files are ready, ideally in SVG positive and negative versions.
- [ ] The primary website goal and CTA are clear.

---

# 4. PHASE 2: HOMEPAGE NARRATIVE

## Prompt 3: Build the homepage architecture

```text
Act as a senior website strategist and conversion-focused UX consultant.

Using my approved Website Build Brief, create the homepage information architecture for [BRAND NAME].

The goal of the homepage is:
[PRIMARY HOMEPAGE GOAL]

The primary audience is:
[TARGET AUDIENCE]

The primary CTA is:
[PRIMARY CTA]

For each proposed section, give me:
- Section purpose
- Main message
- Recommended headline direction
- Supporting content
- CTA, if needed
- Why this section belongs in this position

Rules:
- Do not make the homepage explain everything.
- Remove sections that are redundant.
- Prioritize clarity, trust, and conversion.
- Respect all brand voice and visual rules in the source brief.
- Challenge my assumptions when a section does not help the page.
- Do not write code yet.
```

## Checkpoint 2

- [ ] The hero has one clear job.
- [ ] The primary CTA is obvious.
- [ ] Every section has a reason to exist.
- [ ] Redundant sections have been removed.
- [ ] The narrative works for someone who does not already know the business.

---

# 5. PHASE 3: VISUAL DIRECTIONS

## Prompt 4: Create three visual direction prompts

Run this in the main website chat. Generate the actual images in separate chats.

```text
Using the approved Website Build Brief and homepage architecture, propose 3 clearly differentiated visual directions for the homepage of [BRAND NAME].

All 3 must respect the SAME approved brand identity:
- Colors with exact codes: [COLOR NAME + HEX/RGB CODE]
- Typography: [TYPOGRAPHY]
- Logo rules: [LOGO RULES]
- Brand personality: [BRAND PERSONALITY]

Differentiate the directions through:
- Layout
- Visual hierarchy
- Section composition
- Use of whitespace
- Cards or panels
- Diagrams or visual storytelling
- CTA treatment
- Navigation treatment
- Motion or interaction ideas

For each direction provide:
1. Name
2. Core visual idea
3. Homepage layout behavior
4. How it uses the existing brand system
5. Exact color codes used and their roles
6. Strengths
7. Risks
8. Best fit for the target audience
9. A complete image-generation prompt I can paste into a SEPARATE AI image conversation to visualize that direction

Important:
- Do not generate the images in this conversation.
- Give me the 3 image-generation prompts only.
- I will create each visual in a separate chat and bring the winning image back here.
- Do not write production code yet.
```

## Action

1. Open three separate image chats.
2. Generate one direction per chat.
3. Compare the outputs side by side.
4. Choose the strongest direction.
5. Save any useful secondary references from the other directions.
6. Return to the main website chat.

## Prompt 5: Consolidate the winning direction

Attach the winning image. Attach other concepts only if you want to borrow something specific.

```text
I selected visual direction [DIRECTION NAME].

I am attaching the image of the winning direction. Treat that image as the primary visual reference.

Optional references:
[ATTACH OTHER DIRECTION IMAGES IF NEEDED]

Elements I want to borrow or adjust before implementation:
[LIST ELEMENTS FROM OTHER DIRECTIONS OR REQUESTED CHANGES, OR WRITE NONE]

First, review the winning direction and the requested adjustments. Tell me whether any of those changes create conflicts with the approved brand identity, usability, hierarchy, or consistency.

Then consolidate the final direction into a practical Website Visual System that can be used consistently in GPT Sites and later in HTML/CSS when the site is packaged for deployment.

Document:
- Color roles with exact approved codes
- Typography roles and hierarchy
- Spacing principles
- Grid and max-width behavior
- Button styles
- Card and panel styles
- Border/radius rules
- Iconography rules
- Section background rhythm
- Responsive behavior principles
- Motion rules
- Accessibility considerations
- Elements that must NOT be introduced

Keep every decision consistent with my existing brand identity and with the attached winning visual direction.

At the end, create a concise "Implementation Rules" section that I can paste into future build prompts.
```

## Checkpoint 3

- [ ] One direction is approved.
- [ ] Exact colors are locked by code.
- [ ] Typography roles are locked.
- [ ] Logo treatment is clear.
- [ ] Any borrowed elements are explicitly documented.
- [ ] The final Implementation Rules are saved.

---

# 6. PHASE 4: CREATE THE WORKING SITE IN GPT SITES

Your starting point is the approved visual direction, not an HTML file.

## Prompt 6: Create the first working build

```text
Now create the first working version of the approved homepage for [BRAND NAME] in GPT Sites.

I am a marketer with no coding experience. I want GPT Sites to become the working version we refine from this point forward.

Visual reference:
[ATTACH THE IMAGE OF THE APPROVED WINNING VISUAL DIRECTION]

First-round adjustments I already know I want:
[LIST ANY FINAL ADJUSTMENTS OR ELEMENTS YOU WANT INCORPORATED BEFORE THE FIRST GPT SITES BUILD, OR WRITE NONE]

Requirements:
- Follow the approved Website Build Brief
- Follow the approved homepage architecture
- Follow the approved Website Visual System and winning visual reference
- Preserve the approved brand colors exactly by code
- Use semantic HTML underneath the site
- Make the page responsive for desktop, tablet, and mobile
- Use accessible labels and sensible keyboard behavior
- Avoid unnecessary dependencies
- Do not use placeholder sections that were not approved
- Do not invent new brand colors, fonts, messages, services, or CTAs
- Keep asset references explicit and easy to replace
- Incorporate the first-round adjustments listed above before asking me to review the site

Important workflow rule:
- Create or update the website in GPT Sites.
- Do not keep generating new downloadable HTML versions while we iterate.
- From this point forward, treat the GPT Sites version in this chat as the current working site.
- Use the attached winning visual direction as the primary visual reference for this first build.
- From Prompt 7 onward, work from the GPT Sites version already created in this chat. Do not ask me for an HTML file during normal iteration.

After the site is created, give me a short visual review checklist.
Do not move to deployment yet.
```

## First review checklist

- [ ] Hero communicates the business quickly.
- [ ] Primary CTA is obvious.
- [ ] Site visually matches the approved direction.
- [ ] No unapproved colors or fonts were introduced.
- [ ] No section feels redundant.
- [ ] Desktop works.
- [ ] Tablet works.
- [ ] Mobile works.
- [ ] Buttons and interactions behave correctly.
- [ ] There is exactly one H1.
- [ ] The H1 is the intended primary page heading.
- [ ] H2s represent the main sections logically.
- [ ] H3s and H4s are nested logically and are not being used only for visual sizing.
- [ ] The heading hierarchy still makes sense as a text outline without the design.

---

# 7. PHASE 5: ITERATE WITHOUT BREAKING APPROVED WORK

From here forward, the working site already exists in GPT Sites. Do not upload or regenerate HTML for normal revisions.

## Prompt 7: Change one section only

```text
We are continuing from the current GPT Sites version already created in this chat.

Do not rebuild the page from scratch.
Do not ask me to upload an HTML file.
Do not modify approved sections unless required by the requested change.

Section to change:
[SECTION NAME]

What is wrong:
[PROBLEM]

What I want instead:
[REQUESTED CHANGE]

Before changing it:
1. Tell me whether the requested change creates any conflict with the rest of the page.
2. If it does not, update only this section in GPT Sites.
3. Preserve all approved brand, layout, responsive, and accessibility rules.
4. Show me what changed and what you intentionally left untouched.
```

## Prompt 8: Diagnose a visual issue from a screenshot

```text
We are continuing from the current GPT Sites version in this chat.

I am attaching a screenshot of a visual problem.

Expected result:
[WHAT I WANT TO SEE]

Actual result:
[WHAT I SEE]

Please:
1. Identify the most likely visual or structural cause
2. Explain it in plain English
3. Propose the smallest safe fix
4. Update only the affected area in GPT Sites
5. Preserve the rest of the approved page
6. Tell me what I should verify after the change
```

## Prompt 9: Create a handoff brief before changing chats

Use this when the conversation becomes long or you want to continue elsewhere.

```text
Create a Markdown handoff brief for the current website project so I can continue in a new AI conversation without losing decisions.

Include:
- Current approved homepage structure
- Current approved copy
- Visual system and exact color codes
- Typography rules
- Logo and asset rules
- Current CTA system
- Current GPT Sites state
- Sections already approved and not to be changed
- Outstanding issues
- Technical decisions already made
- SEO decisions already made
- Deployment decisions already made
- Files or screenshots I need to bring to the new chat
- The exact next step

Do not rewrite or reinterpret approved decisions. Record the current state accurately.
```

## Checkpoint 4

- [ ] All sections are visually approved.
- [ ] Mobile has been reviewed separately.
- [ ] Heading hierarchy is correct.
- [ ] No broken interactions remain.
- [ ] The latest handoff brief is saved.

---

# 8. PHASE 6: QA, SEO, AND FINAL PACKAGING

## Prompt 10: Full pre-launch QA

```text
The current GPT Sites version is visually approved.

Run a complete pre-launch QA review before we package the website for deployment.

Review:
- Brand consistency
- Copy consistency
- Desktop responsiveness
- Tablet responsiveness
- Mobile responsiveness
- Navigation
- Buttons and links
- Forms, if present
- Images and SVGs
- Accessibility basics
- Semantic structure
- Heading hierarchy
- Exactly one intended H1
- Logical H2, H3, and H4 nesting
- Obvious 404 risks
- Performance risks
- External dependencies
- Any placeholder content

Return:
1. Critical issues that must be fixed before launch
2. Recommended improvements
3. Optional improvements that can wait

Do not make optional changes until I approve them.
```

## Prompt 11: Technical SEO and social metadata

```text
Prepare the approved website for technical SEO and social sharing.

Business information:
Brand: [BRAND NAME]
Domain: [DOMAIN]
Primary market: [MARKET]
Business description: [BUSINESS DESCRIPTION]
Founder or organization details that are public: [PUBLIC DETAILS]
Social profiles: [SOCIAL URLS]

For each indexable page, review or create:
- SEO title
- Meta description
- Canonical URL
- H1
- Heading hierarchy
- Open Graph title
- Open Graph description
- Open Graph image
- X/Twitter metadata if appropriate
- Structured data only when supported by real information
- Internal links
- Indexation status

Rules:
- Do not invent awards, addresses, legal entities, reviews, or business facts.
- Do not add schema types that the page does not actually support.
- Keep titles and descriptions readable for humans, not stuffed with keywords.

Show me the proposed SEO metadata before applying it.
```

## Prompt 12: Package for deployment

```text
The GPT Sites version is approved and ready to publish.

Create the final static deployment package for [BRAND NAME].

Requirements:
- Preserve the approved GPT Sites design and behavior
- Include the required HTML, CSS, JavaScript, and local assets
- Use clear relative or root-relative paths appropriate for the site
- Include favicon assets
- Include social images required by the metadata
- Include robots.txt if appropriate
- Include sitemap.xml for indexable pages
- Include success or error pages required by forms
- Do not include unused experimental files
- Do not expose credentials or secrets

Before giving me the final package:
1. List every file included
2. Explain what each file does in plain English
3. Run a final link and asset-path check
4. Confirm the homepage has the intended H1 and heading hierarchy
5. Confirm all indexable pages have their intended metadata

Then provide the final deployment package.
```

---

# 9. PHASE 7: PUBLISH

The FunnelFlag build used Netlify. You can use another static hosting platform if it supports your site's requirements.

## Prompt 13: Deploy step by step

```text
I am ready to publish my static website.

Hosting platform: [HOST]
Deployment method I want to use: [MANUAL ZIP/FOLDER / GIT / UNDECIDED]
I have no hosting experience.

Guide me through deployment one step at a time.

Rules:
- Give me only the next step
- Tell me exactly what button or menu to look for
- Wait for me to confirm what I see before giving the next step
- Do not assume I know hosting, DNS, nameservers, SSL, redirects, or Git
- If my screen differs from your expectation, ask for a screenshot instead of guessing
- Do not tell me to change DNS until the temporary hosted version works correctly
```

## Prompt 14: Connect the custom domain

```text
My temporary hosted website is working correctly.

Now help me connect my custom domain.

Domain: [DOMAIN]
Registrar: [DOMAIN REGISTRAR]
Hosting platform: [HOST]
Desired primary version: [DOMAIN.COM / WWW.DOMAIN.COM]

I have no DNS experience.

Before asking me to change anything:
1. Explain which service currently controls my DNS
2. Explain what will change
3. Explain what must NOT be deleted
4. Identify any email-related DNS records that could be affected

Then guide me one step at a time.
Wait for my confirmation after each step.
If anything on my screen does not match your instructions, ask for a screenshot.
```

## Universal troubleshooting prompt

```text
Something is not working on my website and I do not know the technical terminology.

Expected result:
[WHAT SHOULD HAPPEN]

Actual result:
[WHAT HAPPENS]

I am attaching a screenshot and the current files if relevant.

Please:
1. Diagnose the most likely cause
2. Explain it in plain English
3. Do not give me five possible fixes at once
4. Give me the safest FIRST step to test
5. Wait for my result before continuing
6. Do not ask me to change unrelated settings
```

---

# 10. OPTIONAL: WORKING LEAD FORM

Skip this section if your site does not need a form.

## Prompt 15: Add a real lead capture form

```text
I want to convert the existing form on my website into a real lead capture form.

Hosting platform: [HOST]
Preferred form service: [NETLIFY FORMS / FORMSPREE / OTHER]

Fields I need:
[LIST FORM FIELDS]

After submission I want:
[SUCCESS MESSAGE OR SUCCESS PAGE]

Requirements:
- Keep the current visual design
- Use accessible labels
- Add required validation where appropriate
- Add reasonable spam protection supported by the selected service
- Do not expose secrets or API keys in client-side code
- Store submissions using the selected service

First explain the integration in plain English.
Then make the minimum code changes required.
Finally give me an exact test procedure to confirm a real submission was stored.
```

## Prompt 16: Add lead notifications

```text
My form is already successfully storing submissions in [FORM SERVICE].

Now I want to receive a notification when a new lead submits the form.

Notification destination:
[EMAIL / SLACK / OTHER SUPPORTED DESTINATION]

Guide me through the configuration using the platform's current interface.
Do not change the working form code unless the notification feature actually requires it.

After setup, give me a test checklist so I can confirm:
1. The lead is stored
2. The success experience works
3. The notification arrives
4. The notification contains the fields I need
```

---

# 11. OPTIONAL: PROFESSIONAL EMAIL AND DNS

Skip this section if you do not need a professional email address yet.

## Prompt 17: Configure professional email safely

```text
My website is already live and I want to configure professional email for my domain.

Domain: [DOMAIN]
Domain registrar: [REGISTRAR]
DNS provider, if known: [DNS PROVIDER / I DON'T KNOW]
Website host: [HOST]
Email provider: [EMAIL PROVIDER]
Desired email: [EMAIL ADDRESS]

I have no DNS experience.

Before changing anything:
1. Help me identify which service currently controls DNS
2. Review the records the email provider says I need
3. Separate website-related records from email-related records
4. Warn me about anything that could break the website
5. Check for duplicate SPF records or conflicting records

Then guide me one change at a time and wait for confirmation after each step.

Do not invent DNS values. Use only the exact values supplied by my email provider.
```

---

# 12. FINAL LAUNCH CHECKLIST

## Content and conversion

- [ ] Brand name is correct everywhere.
- [ ] Hero explains the offer quickly.
- [ ] Primary CTA is obvious.
- [ ] Page does not repeat the same argument unnecessarily.
- [ ] Every button and link has an intentional destination.
- [ ] Social, email, and contact links are correct.

## Visual QA

- [ ] Desktop reviewed.
- [ ] Tablet reviewed.
- [ ] Mobile reviewed.
- [ ] No clipped text.
- [ ] No horizontal overflow.
- [ ] Images and SVGs load.
- [ ] Logo works on light and dark backgrounds where used.
- [ ] Favicon displays correctly.

## Structure and accessibility

- [ ] Exactly one intended H1 per page.
- [ ] H2s represent major sections.
- [ ] H3s and H4s are logically nested.
- [ ] Heading levels are not chosen only for visual size.
- [ ] Form fields have labels, if applicable.
- [ ] Keyboard navigation is reasonable.
- [ ] Links and buttons are distinguishable.

## Technical QA

- [ ] Domain works.
- [ ] HTTPS works.
- [ ] Preferred domain version is consistent.
- [ ] No obvious 404s.
- [ ] All local assets load.
- [ ] Forms submit correctly, if used.
- [ ] Success pages work, if used.
- [ ] Notifications work, if used.

## SEO basics

- [ ] Unique SEO title on each indexable page.
- [ ] Meta description on each indexable page.
- [ ] Canonical URL is correct.
- [ ] Intended H1 is correct.
- [ ] Heading hierarchy is correct.
- [ ] Open Graph metadata is present.
- [ ] Social image works.
- [ ] Structured data uses only real supported information.
- [ ] Internal links point to important pages.
- [ ] sitemap.xml includes indexable pages.
- [ ] robots.txt does not accidentally block the site.

## Security and business

- [ ] No passwords or private keys in public files.
- [ ] No private customer data in code.
- [ ] Form collection is appropriate for the business.
- [ ] Required privacy or legal pages are in place.

---

# 13. PROJECT HANDOFF TEMPLATE

Use this after launch or whenever you move the work to another chat.

```text
# [BRAND NAME] WEBSITE HANDOFF

## Current live URL
[URL]

## Hosting
[HOST]

## Domain registrar
[REGISTRAR]

## DNS provider
[DNS PROVIDER]

## Current approved pages
[LIST]

## Primary CTA
[CTA]

## Brand colors
[COLOR + CODE]

## Typography
[TYPOGRAPHY]

## Logo assets
[FILES]

## Forms
[FORM SERVICE / NONE]

## Professional email
[PROVIDER / NONE]

## SEO setup
[TITLE / META / CANONICAL / SITEMAP / ROBOTS / SCHEMA]

## Analytics
[SETUP / NONE]

## Known issues
[LIST OR NONE]

## Future pages or improvements
[LIST]

## Files required to continue
[LIST]

## Next single step
[NEXT STEP]
```

---

# 14. THE CORE WORKFLOW IN ONE LINE

**Brand already defined -> Website brief -> Homepage architecture -> Separate visual concept chats -> Winning direction -> GPT Sites working build -> Section-by-section refinement -> QA and SEO -> Deployment package -> Hosting -> Domain -> Optional forms and email -> Final testing**

The rule behind the entire process is simple:

**Decide first. Build second. Test third. Publish last.**