thecandelastudio

PromptWeb · Step by step

PromptWeb Setup Guide

This page walks beginners through every click — from creating a GitHub repository to asking AI to design your website. No coding experience required.

Tip: Keep this page open while you work. When you finish, ask AI to replace the starter Home with your real design.
1

What PromptWeb is

PromptWeb connects WordPress and AI so you can build and update websites in plain English — without coding.

Basically, GitHub acts as a bridge between your WordPress website and your connected AI agent.

  • AI creates beautiful page designs from detailed prompts.
  • AI can follow design references from a screenshot or PDF.
  • AI can add dynamic website features when your site needs them.
  • Works with the WordPress ecosystem — forms, widgets, and compatible plugin elements can be used where needed.
  • You stay in WordPress admin; AI helps design and improve the site.
  • See your live website updates as AI improves pages — no coding required for normal users.

WordPress + PromptWeb AI = faster website creation.

2

Before you start checklist

  • ✓ You can log into this WordPress site as an Administrator.
  • ✓ PromptWeb plugin is installed and activated.
  • ✓ You have a free GitHub account (sign up at github.com if needed).
  • ✓ You can open an AI chat (we recommend Grok AI).
  • ✓ About 15–20 minutes for the first setup.
3

Create design GitHub repository

This repository will store only your website design files (not the PromptWeb plugin code).

  1. Step 3.1

    Go to github.com and sign in.

  2. Step 3.2

    Click the “+” icon in the top-right corner of the page.

  3. Step 3.3

    Click “New repository”.

  4. Step 3.4

    Fill in the form:

    • Repository name: something clear, e.g. promptweb-site
    • Visibility: Private (recommended) or Public
    • You may leave “Add a README” unchecked — PromptWeb will create one

  5. Step 3.5

    Click the green “Create repository” button.

  6. Step 3.6 — Important

    Copy the full repository name in this format:

    YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO

    Example: Akashmali6198/promptweb-site

    You will paste this into PromptWeb Settings → Repository.

4

Create GitHub token

A token is a secret password that lets PromptWeb read and write files in your design repository. You create it once and paste it into Settings.

  1. Step 4.1

    Open GitHub → click your profile photo (top right) → click Settings.

  2. Step 4.2

    In the left sidebar, scroll down and click Developer settings.

  3. Step 4.3

    Click Personal access tokens → then Tokens (classic) (or Fine-grained tokens if you prefer).

    Direct link (while logged in): github.com/settings/tokens

  4. Step 4.4

    Click Generate new token → Generate new token (classic).

  5. Step 4.5

    Fill in:

    • Note: e.g. PromptWeb design access
    • Expiration: choose a date you are comfortable with (or No expiration if you accept the risk)

  6. Step 4.6 — Required permission

    Under scopes, check at least:

    • repo — Full control of private repositories (needed so PromptWeb can create and update design files)

    If the repository is public-only, some users use a narrower scope, but repo is the simplest reliable choice for private design repos.

  7. Step 4.7

    Click green Generate token.

  8. ⚠ Warning — token shown once

    GitHub shows the token only one time. Copy it immediately and paste it into PromptWeb Settings. If you leave the page without copying, you must create a new token.

    Never share your token publicly. Do not commit it into GitHub files or chat screenshots.

5

Fill PromptWeb Settings (one by one)

Open WordPress Admin → PromptWeb (left menu). Fill the fields in this order:

  1. Field 1 — Personal Access Token

    Paste the token you just created.

  2. Field 2 — Repository

    Enter username/repo exactly as GitHub shows it.

    Example: Akashmali6198/promptweb-site

    Always include the repository name. One GitHub account can own many repos — AI must know which one.

  3. Field 3 — Branch

    Set to main (default for most new repositories).

  4. Field 4 — Auto-sync

    Turn Auto-sync ON so the live site updates when GitHub changes.

  5. Field 5 — Save

    Click Save Changes at the bottom of the settings form. Wait for the success message before continuing.

6

Initialize AI-Ready Repository

Where is the button? On the same PromptWeb Settings page, scroll to the section titled “Initialize AI-Ready Repository”. Click the primary button:

Initialize AI-Ready Repository

(If already initialized, the button may say Re-initialize Repository.)

What it creates (on GitHub + local cache):

  • pages/manifest.json — catalog of your pages (Home + this Setup Guide)
  • pages/static/home.html — starter welcome Home
  • pages/static/promptweb-setup-guide.html — this detailed guide
  • pages/dynamic/ — folder for future dynamic PHP pages
  • AI_INSTRUCTIONS.md — rules for AI agents
  • README.md — human + AI overview

Success means

A green success notice appears. Files exist in your GitHub repo. You can open /promptweb-setup-guide/ on the public site.

Error means

Usually: wrong token, wrong repo name, missing repo permission, or network issue. Re-check Settings fields and try again. Your GitHub connection settings are not wiped by Initialize.

Fresh testing start checkbox is optional — only use it when you intentionally want to wipe design pages and restore starter Home + Setup Guide. It never deletes your token/repo/branch.

AI recommendation & best results

Recommended AI:

  • We strongly recommend Grok AI for best design results with PromptWeb.
  • You can also use ChatGPT.

For best design output:

  • Give a detailed prompt (colors, style, sections, audience, business name).
  • Or attach a design screenshot as a visual reference.
  • Or attach a PDF reference (brand guide, mockup, brief).

Important policy — website URL as design reference

  • Right now we do not recommend giving a website URL as a design reference.
  • Why: in testing, URL reference matching is not reliable enough yet; output is often lower than expected; and there are privacy/respect concerns with other websites.
  • URL reference improvement is planned for a future update.
  • For now prefer: detailed prompt, screenshot, or PDF.
7

How to ask AI to design

  1. Open your AI (preferably Grok AI; ChatGPT or Claude also work).
  2. Make sure the AI can work with your GitHub design repository / MCP tools as configured for your setup.
  3. Copy the prompts below. Always start with the @GitHub read line so the AI loads the rules first.
  4. Always include the repository name from PromptWeb Settings → Repository.
  5. Keep AI Focused: In subsequent/main prompts, always mention @github and tag the AI agent. If you do not tag or mention GitHub, the AI may forget the repository context, leading to generic/random code recommendations rather than editing your actual website.
Critical: Replace YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO with your exact Settings value (example format: Akashmali6198/promptweb-site). Wrong repo = AI may edit the wrong project.

Copy-paste starter prompts

Click Copy on each box, paste into AI (Grok, ChatGPT, Claude, etc.), then replace the repository placeholder.

Always start every AI session with this line

It tells the agent to use GitHub and read the design rules before creating pages — which reduces random unrelated replies.

@GitHub Read README.md, AI_INSTRUCTIONS.md, and pages/manifest.json first.

FIRST MESSAGE (copy)

@GitHub Read README.md, AI_INSTRUCTIONS.md, and pages/manifest.json first.
Work only on repository: YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO

THEN ASK (copy)

@GitHub Read README.md, AI_INSTRUCTIONS.md, and pages/manifest.json first.
Work only on repository: YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO
Create my homepage and publish it.

FULL EXAMPLE (copy)

@GitHub Read README.md, AI_INSTRUCTIONS.md, and pages/manifest.json first.
Work only on repository: YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO
Create a modern homepage and publish it.
Use free images if needed.
Do not create folders outside pages/static or pages/dynamic.

REDESIGN EXAMPLE (copy)

@GitHub Read README.md, AI_INSTRUCTIONS.md, and pages/manifest.json first.
Work only on repository: YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO
Redesign my homepage with a modern layout, clear hero section, services section, and contact call-to-action.
Keep the site mobile-friendly. Publish when the design quality is high.
Do not create folders outside pages/static or pages/dynamic.

After AI creates pages, they appear in GitHub. With Auto-sync ON, PromptWeb brings them to your live site automatically. You can also click Sync Now in Settings as a backup.

8

Publish & Sync

  • Publish: AI should set the page status to publish when the design is ready (or use the publish tool / instruction in your prompts).
  • Auto-sync: When ON, PromptWeb detects GitHub changes and refreshes the live site for you.
  • Manual Sync Now: On PromptWeb Settings, use Sync Now after changing credentials or if you want an immediate refresh.
  • Cache note: If you do not see the new design immediately, wait a few seconds and hard-refresh the browser (Ctrl+F5 / Cmd+Shift+R). Some hosts also cache pages briefly.

Sync never deletes your GitHub connection settings (token, repository, branch).

9

Replace starter Home later

The starter Home is only temporary onboarding. After setup, ask AI to design your real homepage and publish it.

You may keep this Setup Guide page for reference, or ask AI to unpublish/remove it later if you no longer need it.

Example ask: “@GitHub Read README.md, AI_INSTRUCTIONS.md, and pages/manifest.json first. Work only on repository: YOUR_GITHUB_USERNAME/YOUR_DESIGN_REPO — redesign the home page as a professional business landing page and publish it.”

10

Common problems & fixes

Initialize fails / “not configured”

Save token + repository first. Confirm repository format is owner/name with no extra spaces. Confirm token has repo access. Click Save Changes, then Initialize again.

401 / 403 GitHub errors

Token expired, revoked, or missing permissions. Create a new token, paste it, Save, retry. For organization repos, SSO authorization on the token may be required in GitHub.

404 repository not found

Wrong repository string, or the token user cannot access that repo. Double-check Settings → Repository against the GitHub page URL.

AI edited the wrong project

You omitted the repo name or used the wrong one. Always paste the exact Settings → Repository value in every AI session. One GitHub account can have many repositories.

Page not showing on live site

Confirm page status is publish in pages/manifest.json. Run Sync Now. Hard-refresh the browser. Check Auto-sync is ON. Confirm Frontend is enabled in PromptWeb settings if you have that toggle.

Still see starter Home after AI design

AI may have left the page as draft, or Sync has not run yet. Ask AI to publish, then Sync Now. Clear/hard-refresh browser cache.

Lost my token

GitHub cannot show old tokens again. Generate a new token, paste into Settings, Save. Old token can be deleted in GitHub for safety.

Ready?

Connect GitHub → Initialize → Ask AI with your repo name

We strongly recommend Grok AI for best design results.

Back to Home