HMDG Website Development AI

An AI-powered toolkit for automating the full website development lifecycle — from planning and design to SEO, marketing, and ongoing support.

Project Overview

This project is structured in 5 phases, each targeting a specific stage of the website development and automation process.

Phases

Phase 1 — Site Planner

HMDG Site Planner is an AI-powered tool that generates a sitemap and wireframe based on the client's prompt. It stops at planning — no website building.

Completed Tasks

• [x] Site Planner Questionnaires
• [x] Generate Sitemap based on the Questionnaires
• [x] Generate Wireframe based on the Sitemap
• [x] Generate Onboarding for Website AI Automation
• [x] Client Approval Flow (Yes / No validation)
• [x] Email Sending to Project Manager and Client

How It Works

The Site Planner follows a strict 5-screen flow:

1. Hero — Client describes their project and clicks Generate
2. Questionnaire — Client fills in 17 fields across 5 sections
3. Results — AI generates a structured plan with 4 tabs: Project Brief, Sitemap, Wireframes, and Dev Notes
4. Client Approval — Client reviews and either approves or requests changes (with revision + regenerate)
5. Send to PM — Approved plan is emailed to the HMDG Project Manager and CC'd to the client

Site Planner Questions

The following information is collected from the client to generate the sitemap and wireframe:

• Client or Business Name
• Client Email
• Business Type
• Business Location
• Services
• Goals
• Target Audience
• Features
• Tone and Voice
• Brand Style
• Showcase / Portfolio
• Integrations
• Competitor List
• Hosting Platform
• Site Language
• Project Description
• Additional Requirements

AI Output Structure

The AI returns a structured JSON plan containing:

• Project Brief — Business overview, target audience, goals, UVP, tone, features, and recommended pages
• Sitemap — SEO-friendly hierarchical page structure with slugs and purpose
• Wireframes — Per-page section breakdown with key messages and CTAs
• Dev Notes — Content strategy, SEO focus, integrations, and conversion priorities

Next Goal

The following features are planned for Phase 1 and are pending implementation. Do not implement until instructed.

• [ ] Create WordPress Plugin Dashboard for Project Manager
• [ ] Store Site Planner Results in Database
• [ ] Display Client Table (Data Table with search function)
• [ ] Assign Designer to Project
• [ ] Send Email Notification to Assigned Designer
• [ ] Add Project Status Indicator (Started, Not Started, Completed)

Feature Requirements (Documentation Only)

1. Project Manager Dashboard (WordPress)

A custom admin dashboard page inside the WordPress plugin, accessible only by users with the Project Manager role. It displays all completed Site Planner submissions received from clients.

2. Client Table (Data Table)

A fast, searchable data table displayed in the Project Manager Dashboard.

Columns:

Requirements:

• Search function to filter clients by name or email
• Fast loading — must not slow down WordPress admin
• Vanilla JavaScript only — no jQuery
• Paginated if the list grows large

3. Designer Assignment

The Project Manager can assign a designer to each project directly from the Client Table.

Available Designers:

The assignment is made via a dropdown selector in the Client Table row.

4. Email Notification to Designer

Once a designer is assigned, an automatic email is sent to the assigned designer. The email includes:

• Client Name
• Project Brief summary
• Sitemap overview
• Wireframe overview
• Any notes from the Project Manager

5. Project Status

Each project must have a status indicator visible in the Client Table.

Rules:

• When a designer is assigned → status automatically changes to Started
• Completed can only be set manually by the Project Manager
• Status cannot go backwards (e.g. Completed cannot revert to Started)

Phase 2 — Website AI Automation

Coming soon

Phase 3 — SEO AI Automation

Coming soon

Phase 4 — Marketing Consent + Clinik Integration

Coming soon

Phase 5 — Website Support Automation

Coming soon

Tech Stack

Getting Started

Shortcode Usage

Create any WordPress page or post and add the following shortcode:

[hmdg-website-development-ai]

The plugin will render the full branded UI on that page. Assets (Bootstrap, fonts, CSS, JS) only load on pages where the shortcode is actually present.

Admin Settings

Go to HMDG Planner → Settings in the WordPress admin to configure:

• AI Provider (Claude or OpenAI)
• API Key
• Model selection
• Max tokens

Use the Test API Connection button to verify your key before use.

API Key Requirements

Important: This plugin requires a paid API key to generate AI outputs. It will not function without one.

Anthropic (Claude) — Recommended

The default and recommended AI provider is Anthropic Claude.

• Get your API key at console.anthropic.com
• You must add billing / payment details to your Anthropic account before the key will work
• A free trial may be available for new accounts, but production use requires a funded account
• Recommended model: Claude Opus 4.6 (most capable — set in plugin settings)

OpenAI (GPT) — Alternative

• Get your API key at platform.openai.com/api-keys
• Requires a funded OpenAI account

Notes

• API keys are stored securely in WordPress options and are never exposed to the front end
• Usage is billed per request by the provider — Anthropic charges per input/output token
• If the Test API Connection button returns an error, check that your account has an active payment method and sufficient credits

Developed by HMDG