Vibe Code a Nonprofit Website
Free vibe coding prompt to build a WordPress nonprofit site. Donation flow, programs, impact stories, events, volunteer signup, and NGO schema. Full charity architecture.
Plan and produce a complete WordPress site architecture for a nonprofit
organization with donations, programs, volunteer signup, and donor
trust signals. Output should be production-ready.
═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Organization name: [ORG NAME]
- 501(c)(3) status: confirmed (US) or equivalent
- Mission: [MISSION IN ONE SENTENCE]
- Programs: [3-5 ACTIVE PROGRAMS]
- Annual budget: $[X]M
- Audience: individual donors + corporate sponsors + volunteers +
beneficiaries
- Goal: increase recurring monthly donors by 40%, recruit 100 active
volunteers
═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: warm cream (#f6efe1) + deep brand color (often blue or
green) + bright accent for CTAs + signal-green for donate buttons.
Override if user provides; AA-contrast for body.
- Type: high-contrast serif for headings (Lora, Source Serif Pro) +
Inter for body.
═══════════════════════════════════════════════════════════════
PLUGIN STACK (WP-CLI)
═══════════════════════════════════════════════════════════════
wp plugin install --activate
give
give-recurring
give-stripe
the-events-calendar
wordpress-seo
advanced-custom-fields
wp-rocket
fluent-crm
- Donations: GiveWP (best free + premium nonprofit plugin)
- Events: The Events Calendar
- CRM: FluentCRM (in-WP) or HubSpot for nonprofits (free up to 1M
contacts)
- Optional: Salsa or Bloomerang for serious donor management (off-WP CRM)
═══════════════════════════════════════════════════════════════
DATA MODEL
═══════════════════════════════════════════════════════════════
- CPTs:
- `program`, fields: program_name, mission_fit, beneficiary_count,
annual_budget, photos, video, related_stories, lead_program_director
- `impact_story`, fields: beneficiary_name (anonymized if needed),
program (relationship), story_text, hero_image, year, results
- `team_member`, fields: name, role, bio, photo, linkedin
- `event`, handled by The Events Calendar
- `partner`, corporate/foundation partners with logo, tier, partnership
story
- Taxonomies:
- `cause` (Education / Health / Environment / Hunger / etc.)
- `region` (where the org operates)
═══════════════════════════════════════════════════════════════
SITE MAP
═══════════════════════════════════════════════════════════════
1. Home
2. About (mission, leadership, board, financials)
3. Programs (index + program detail pages)
4. Impact / Stories (testimonials from beneficiaries)
5. Events (calendar)
6. Donate (one-time + monthly + corporate)
7. Volunteer (application form + roles)
8. Get Involved (donate, volunteer, advocate, employer match)
9. News (blog + press releases)
10. Annual Reports + Financials (PDFs)
11. Contact
12. Login (donor portal, GiveWP includes this)
═══════════════════════════════════════════════════════════════
DONATE PAGE, MOST CRITICAL UX
═══════════════════════════════════════════════════════════════
- Multi-step form (one screen at a time):
Step 1: Choose amount (suggested: $25 / $50 / $100 / $250 / Custom)
with "What this gives" labels per amount ("$50 = 10 meals")
Step 2: One-time or Monthly (monthly highlighted as default)
Step 3: Personal details (name, email, phone optional)
Step 4: Payment (Stripe with Apple/Google Pay + ACH for $250+)
- "Cover the transaction fee" toggle (default: yes, 2.9% + $0.30)
- "Make this gift in honor / memory of someone", optional with notification
to honoree
- Corporate matching gift lookup (Double the Donation integration)
- Tax receipt: auto-emailed immediately + downloadable from donor portal
- Thank-you page: personal video from ED + impact preview + share-to-social
- Donor wall: optional "Add me to donor wall" checkbox
═══════════════════════════════════════════════════════════════
HOME PAGE, BLOCK MARKUP
═══════════════════════════════════════════════════════════════
1. Powerful hero: full-bleed photo of beneficiary or program in action,
mission tagline overlay, primary Donate CTA + secondary Volunteer
2. Impact numbers strip (4 big numbers): donors / beneficiaries served /
programs / dollars raised
3. Featured story (rotating, real beneficiary impact story)
4. Programs grid (3-4 cards with photo + name + outcome)
5. Upcoming event (single featured event with date)
6. Donate band (gradient bg, "Your $50 = 10 meals" + CTA)
7. Newsletter signup ("Get the monthly impact update")
8. Trust footer: Charity Navigator / GuideStar / Candid seal text (NOT
image) + financial transparency link
═══════════════════════════════════════════════════════════════
PROGRAMS / IMPACT
═══════════════════════════════════════════════════════════════
- Program page template:
Hero photo, program name, eyebrow ("HEALTH" / "EDUCATION"),
beneficiary count + year context, mission fit, how it works (steps),
beneficiary stories, donate-to-this-program CTA, lead director card
- Impact story page template:
Hero photo (with consent, sometimes anonymized), beneficiary name (or
pseudonym), story, before/after results, "Donate to make this possible"
CTA
═══════════════════════════════════════════════════════════════
VOLUNTEER PAGE
═══════════════════════════════════════════════════════════════
- Why volunteer (3-bullet pitch)
- Roles available (program-specific cards with time commitment,
responsibilities, qualifications)
- Application form: name, contact, interests (checkboxes), skills,
availability, references
- After-submit: "We'll review and contact you within 5 business days"
- Optional volunteer portal (GiveWP + custom dashboard)
═══════════════════════════════════════════════════════════════
TRANSPARENCY & TRUST
═══════════════════════════════════════════════════════════════
- Annual reports PDFs prominent in About + footer
- 990 form (US) downloadable
- Charity Navigator / GuideStar / Candid Seal text (with link, not image)
- Privacy & data handling policy clear
- Board roster + bios
- Financial transparency: where every $1 goes (pie chart or breakdown
block)
═══════════════════════════════════════════════════════════════
ACCESSIBILITY (non-negotiable for nonprofits)
═══════════════════════════════════════════════════════════════
- WCAG 2.1 AA compliance
- Color contrast: AAA on donate button if possible
- Keyboard navigation: every CTA reachable via Tab
- Screen-reader-friendly forms with proper labels
- Alt text on every image describing beneficiary context (with consent)
- No motion that violates prefers-reduced-motion
═══════════════════════════════════════════════════════════════
SEO & SCHEMA
═══════════════════════════════════════════════════════════════
- Schema: NGO / Organization (with foundingDate, legalName, taxID),
Event (for events), Article (news), FAQPage
- Cause-related keyword targeting
- Google Ad Grants eligibility (apply if not already; K/month free)
ADDITIONAL SEO REQUIREMENTS (implement all of these):
On-Page SEO for Every Page:
- Yoast/RankMath meta title template: "[Page Title] | [Site Name]" (under 60 chars)
- Meta description per page: 150-160 chars, include primary keyword + CTA
- Exactly ONE H1 per page — use the real, human headline; keep keywords in the title and meta, not the visible H1
- Logical H2 > H3 heading hierarchy, never skip a level
- Headings should include secondary keywords naturally,
keep the section's real, human label (keywords in title and meta, not stuffed headings)
- Every image must have a descriptive alt attribute with keywords
- Internal links between related content using descriptive anchor text
Structured Data (JSON-LD via Yoast/RankMath + manual where needed):
- Primary schema types: Organization
- BreadcrumbList on all pages
- FAQPage schema on any page with an FAQ/accordion section
- Article schema on all blog posts (auto via Yoast)
- Validate schema with Google Rich Results Test before launch
Open Graph & Social Sharing:
- og:title, og:description, og:image, og:url on every page
- twitter:card=summary_large_image on every page
- Default OG image set in Yoast; per-page overrides for key landing pages
- OG images should be 1200x630px, branded, with clear text
Content SEO:
- Write real, useful body copy for every page (not just headings and CTAs).
Every major section needs at least 2-3 sentences of descriptive text
that search engines can index.
- Blog content strategy: 10 seed articles targeting long-tail keywords
related to "nonprofit / charity". List the titles and target keywords.
- Use the primary keyword once or twice where it reads naturally; keep the rest in titles and meta, never stuffed.
- Every CTA should use descriptive anchor text with the service keyword.
Technical SEO:
- XML sitemap split by post type (auto via Yoast)
- Canonical tags on all pages (auto via Yoast)
- robots.txt: allow all, point to sitemap
- 301 redirects plan for any renamed/moved content
- Breadcrumbs enabled via Yoast + schema
- Clean permalinks: pick one post-permalink base that fits the site (do not force /blog/ on a post-centric site); /%postname%/ is fine for pages
- Lazy load all images below the fold, eager load hero/LCP image
- Core Web Vitals targets: LCP < 2.5s, CLS < 0.1, INP < 200ms
SECURITY, ACCESSIBILITY & HONESTY (required):
- Escape all output (esc_html/esc_url/esc_attr), sanitize all input (sanitize_text_field + wp_unslash), and use a nonce + current_user_can() on every form handler and custom action. Emit JSON-LD with wp_json_encode().
- Target WCAG 2.2 AA: visible :focus-visible states, <label for> on every field, full keyboard operability, and @media (prefers-reduced-motion: reduce) around all motion.
- Never fabricate business data, testimonials, ratings, credentials, or stats; leave labeled {{TODO}} placeholders for anything the user has not supplied.
- PLUGIN INSTALL: some listed plugins are premium or not in the wordpress.org directory, so a single `wp plugin install` will error out. Split the list into free (wp.org) vs premium (upload/license), verify each slug, and note that gallery/group ACF fields and ACF Blocks need ACF Pro.
- Commit to ONE paradigm: a block theme (theme.json + block templates) OR a classic theme/builder — never mix them. If a plugin already owns a post type or feed (inventory, sermons, courses, job listings, podcast feeds), extend it — do not re-declare that CPT or emit a second, conflicting schema block.
═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis in donation amounts or CTAs
- No fake "X people just donated" social-proof popups unless real-time
data is connected (GiveWP can do this if you have volume)
- No countdown timers on year-end campaigns (real urgency, no fake
urgency)
- No "guilt-tripping" copy ("Don't be the reason a child goes hungry")
- No stock photos of "starving children", use real photos with consent,
or stories without faces
- No autoplay video with sound on hero
- No buried unsubscribe links in emails (legally required to be obvious)
- No "100% of your donation goes to programs" claims unless verified
- No "limited-time matching gift" without real corporate match agreement
═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
1. Site map
2. WP-CLI install commands
3. GiveWP setup + Stripe configuration
4. CPT JSON + register PHP
5. theme.json
6. Donate page multi-step flow + form fields
7. Homepage block markup
8. Volunteer application form fields + routing
9. Email automation (welcome, thank-you, monthly impact, year-end appeal)
10. Trust/transparency footer setup
11. Launch checklist (20 items)
This prompt gives ChatGPT or Claude a full WordPress build plan for a nonprofit or charity site built to raise money and recruit volunteers — a donation flow with suggested amounts and a recurring option, program pages that show outcomes, and impact stories backed by real numbers. It specifies a GiveWP donation setup, an events calendar, a volunteer signup, and an annual-report section as Gutenberg block markup. You get a plan for a site that converts supporters, not a digital brochure.
What does the nonprofit website prompt build?
The plan covers a homepage that leads with mission and measurable impact, program pages tied to outcomes, impact stories with real figures, and a donation flow with suggested amounts and a recurring-gift option. It specifies an events calendar, a volunteer signup form, leadership and board bios, and an annual-report or financials section that builds donor trust. NGO and Organization structured data is built in so search engines and grant researchers can read your mission, location, and legal status. If capacity is tight, our WordPress build service delivers the same architecture for a flat fee.
Who is this nonprofit prompt for?
It is written for charities and NGOs, community foundations, faith and cause-based organizations, and social enterprises that need online donations and volunteer sign-ups. It assumes you are raising funds and reporting impact, not running a purely informational page.
What’s inside the prompt?
- A business details block for your mission, programs, service area, and fundraising goals
- A plugin stack led by GiveWP for donations, with an events calendar, a newsletter tool, and caching
- A data model for programs, impact stories, events, and team members
- Gutenberg block markup for the mission homepage, program pages, and donation flow
- A volunteer signup form, an annual-report section, and a newsletter capture
- NGO and Organization structured data, plus a keyword plan around your cause
- Core Web Vitals targets and a launch checklist
Frequently asked questions
Does the donation flow support recurring and one-time gifts?
Yes. The GiveWP setup offers suggested donation amounts, a custom amount, and a toggle between one-time and monthly recurring gifts, with the option for donors to cover processing fees. Recurring donors are the backbone of a nonprofit budget, so that option is front and center rather than buried.
Can supporters sign up to volunteer or register for events?
Yes. The plan includes a volunteer signup form that captures interests and availability, plus an events calendar where supporters can register for fundraisers and drives. Both feed the same list you use for donation appeals, so engagement and giving stay connected.
How does the site build donor trust?
The spec includes impact stories with real numbers, program pages tied to outcomes, and an annual-report or financials section. Donors and grantmakers look for evidence that money turns into results, so the structure pushes you to show it rather than only describe the mission.
Will the organization be recognized as a nonprofit in search?
The SEO section adds NGO and Organization structured data with your legal name, mission, location, and contact details. That helps search engines and the AI tools donors increasingly use to vet a cause describe your organization accurately, and it supports eligibility for programs like the Google Ad Grant.
Which AI tools work with this prompt?
ChatGPT and Claude both return the full build. If a full website feels like more than your organization needs right now, it is honest to read do you even need WordPress first, and our free AI website prompts cover simpler options for smaller groups.
How to actually run this.
Copy the whole thing
All of it. Do not trim it down, every line is in there for a reason.
Swap in your details
Find the BUSINESS DETAILS part and drop in the real business. Name, what they do, all of it.
Paste and wait
Drop it into Claude for the first pass, or v0 if it is a landing page. Give it a minute.
Clean it up
Tweak the boring 10 percent. Spacing, mobile, that one cringe line. Ship it.
What’s next: from generated code to a website that works
The prompt did the hard 90 percent. What’s left is the boring 10 percent that turns a folder of code into a site people can actually find and trust. Here’s the whole checklist, in order.
1. Buy a domain
Grab your name at a registrar like Namecheap, Cloudflare, or Porkbun — about $10 to $15 a year for a .com. Skip the ten-year prepay and the upsells; you just need the domain and, ideally, the free WHOIS privacy most registrars now include.
2. Put it online
If the AI built you a static site (HTML, CSS, and JavaScript), you can host it for free: drag the folder into Netlify or Vercel, or connect a GitHub repo, then point your domain at it. If it built a WordPress theme, you need WordPress hosting — pick a managed host, install WordPress, upload the theme, and connect the domain. Either way, turn on HTTPS; it’s free and automatic on every modern host.
3. Wire up the parts AI skips
Generated sites almost always ship with a contact form that goes nowhere and a fake “success” message. Connect it to a real endpoint (Formspree, Web3Forms, or a plain mailto link) so leads actually reach you. While you’re in there: add a favicon, swap the placeholder images for your own compressed photos, and open the site on your phone to catch whatever breaks on a small screen.
4. Do the basic SEO and AI-search setup
This is what gets you found on Google and cited by ChatGPT, Perplexity, and AI Overviews. The essentials: a unique title tag and meta description on every page, one clear topic per page, an XML sitemap submitted to Google Search Console, basic structured data (Organization and FAQ schema), and an llms.txt file so AI crawlers can read you. If that reads like a foreign language, our SEO optimization service does it as a flat-fee pass, and our free SEO checklist walks the DIY route step by step.
5. Make it fast
AI builders love shipping four-megabyte images and render-blocking scripts. Compress your images, lazy-load anything below the fold, and run the page through PageSpeed Insights until Core Web Vitals turn green — speed lifts both rankings and conversions, so it’s the rare fix that pays twice. Our speed optimization service handles it if you’d rather not.
6. Get found locally, and measure it
Add analytics (GA4, or a lighter option like Plausible) so you can see what’s working instead of guessing. If you serve a local area, set up a Google Business Profile and use the exact same business name, address, and phone number everywhere — that consistency is what lands you in the map pack and in local AI answers.
7. Keep it alive
A website isn’t set-and-forget, especially on WordPress. Budget for backups, security, and updates so a routine plugin update doesn’t take the site down six months from now. Our care plans cover all of it from $290 a month, or you can do it yourself — you own all the code either way.
When it’s worth handing off
If any of these steps stall you — and hosting, DNS, and SEO stall a lot of people — that’s exactly what we’re for. We build the whole thing at a flat fee, ship it live, and hand you the code on GitHub, having read every line the AI wrote. Or take the free prompts and run with it yourself. Both outcomes are genuinely fine with us.
More from the stash.
Vibe Code a Music School Website
Free vibe coding prompt to build a music school website. Instruments, teacher bios, pricing, trial lesson booking, and structured data. One HTML file for…
Vibe Code a Pediatric Clinic Website
Free vibe coding prompt to build a pediatric clinic website. Appointment booking, parent resources, after-hours info, and structured data. One HTML file for ChatGPT…
Vibe Code a Florist Website
Free vibe coding prompt to build a florist website. Bouquet menu, flower subscriptions, delivery info, and Florist schema markup. One lush HTML file, ready…
No free weekend? We will build it for you.
This is the exact prompt we would use. Flat fee, real deadline, code is yours.