Overview
This document contains the custom instructions (system prompt) you paste into a Claude Project to create a reusable onboarding guide generator. Once configured, anyone in your organization can drop in a company name and a few details and receive a complete, polished, single-file HTML onboarding site — no design or coding skills needed.
🔍 Live Research
Claude searches the web for brand colors, locations, phone numbers, and organizational context before writing a single line of HTML.
🎨 Auto-Branded
Colors, typography, and visual tone are derived from what Claude finds about the organization — not a generic template.
📄 Single-File HTML
The output is one self-contained .html file: no dependencies, no CDN required, deployable anywhere or shared as an attachment.
⚠️ Fill-In Placeholders
Any data Claude cannot verify is left as a clearly marked amber placeholder — HR fills these in before distribution.
How It Works
- 1User sends a prompt — minimum: organization name and location. Optional: source documents, list of systems, department names, staff contacts.
- 2Claude searches the web for the organization's website, brand colors, logo colors, address(es), phone numbers, hours, and any publicly available operational context.
- 3Claude extracts brand variables — primary color, secondary color, font preferences, and overall visual tone — and maps them to CSS variables.
- 4Claude builds the content outline using any source data provided, then fills gaps with industry-standard onboarding sections for that organization type (dealership, school, hospital, nonprofit, etc.).
- 5Claude generates the HTML file — fully styled, anchor-navigated, with sticky header, sidebar TOC, and clearly marked placeholders for unverifiable data.
- 6User downloads and fills placeholders (highlighted in amber) — staff contacts, internal URLs, credentials, pay schedules, and any other private information not publicly available.
System Prompt
Copy the entire block below and paste it into your Claude Project's Custom Instructions field. Do not modify the prompt unless you understand the downstream effects — most customization should happen via user prompts, not by editing this.
You are an Employee Onboarding Guide Generator. Your purpose is to produce a complete, professional, single-file HTML employee onboarding website for any organization a user describes. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESEARCH PHASE — Always do this first ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Before writing any HTML, use web search to find the following for the organization: 1. Official website and "About" page 2. Brand / logo primary and secondary colors (check CSS stylesheets, brand pages, or dominant colors on their homepage) 3. Physical address(es) and phone number(s) 4. Business hours 5. Organizational structure clues (departments, roles mentioned on site) 6. Industry type (healthcare, education, automotive, nonprofit, retail, government, etc.) 7. Any specific software systems, platforms, or tools mentioned publicly 8. Any mission statement or values language to use in welcome copy Extract hex color codes when possible. If colors cannot be determined precisely, make a reasonable judgment from the visual palette of their website. Note your sources briefly before generating HTML. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SOURCE DATA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ The user may supply source data: existing onboarding documents, a list of systems, staff contacts, department names, or partial drafts. Prioritize all user-supplied data over anything you find via search. Merge research findings with source data; do not discard either. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML OUTPUT SPECIFICATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Produce ONE self-contained HTML file with ALL CSS and JS embedded. No external dependencies except Google Fonts (which loads from CDN). The file must work when opened locally with no internet connection (except fonts). REQUIRED PAGE STRUCTURE: -— sticky top bar with organization name/logo text and anchor nav links - Hero section — organization name, welcome message, location badges - Two-column layout: left sidebar with sticky Table of Contents (anchor links), right main content area - Numbered content sections (see CONTENT SECTIONS below) -
Input Variables
The system prompt handles the how. Your user prompt provides the what. Here is every piece of information Claude can use, from required to optional.
| Variable | Required? | Description | Example |
|---|---|---|---|
| Organization name | Required | Full legal or trade name of the organization | Mac Haik Georgetown |
| Location / city | Required | City and state help Claude search the right entity | Georgetown, TX |
| Website URL | Optional | Speeds up research significantly | machaikfordlincoln.com |
| Industry / org type | Optional | Helps Claude choose appropriate section names and systems | Automotive dealership (Ford, Lincoln, CDJR) |
| Core software systems | Optional | List any platforms you know the org uses | CDK Global (DMS), KPA (LMS), TrueSpot |
| Departments / roles | Optional | Helps Claude tailor role-specific sections | Sales, Service, Parts, F&I, BDC |
| Key contacts | Optional | Names and titles for the contacts table | HR Manager: Jane Smith (ext. 201) |
| Source documents | Optional | Upload or paste existing onboarding content to merge | Paste old Word doc or policy text |
| Brand colors | Optional | Override research if you know exact hex codes | #c8102e (red), #0d1b2a (navy) |
| Tone preference | Optional | Adjust the visual/copy personality | "More formal" / "Friendly and casual" / "Dark theme" |
| Additional sections | Optional | Request sections beyond the default set | "Add a section on student data privacy (FERPA)" |
Step-by-Step Usage
1. Set up the Project
- 1Go to claude.ai → click Projects in the left sidebar → New Project
- 2Name it something like "Onboarding Guide Generator"
- 3Open Project Settings (gear icon) → paste the full system prompt above into Custom Instructions → Save
- 4Optionally upload a sample/reference HTML onboarding file to the Project's knowledge base so Claude can see the expected style
2. Start a new conversation
Every new conversation inside the Project inherits the custom instructions automatically. One conversation = one organization's onboarding guide.
3. Send your opening prompt
The minimum viable prompt is just an organization name and city. Add more for better results. See the examples section below.
4. Review the research summary
Claude will briefly list what it found before generating HTML. This is your chance to correct errors or add missing info before the full output is produced.
5. Download and fill placeholders
Save the HTML file. Open it in a browser to see placeholders highlighted in amber. Edit the raw HTML in any text editor — no coding skills needed for placeholder fill-in. Search for [ to jump to each one.
class="placeholder" to quickly locate every item needing completion before distribution.
Example Prompts
These are ready-to-use prompts — paste one into a conversation in your Project and adjust as needed.
Minimal (research-heavy)
With systems list
With source data pasted in
With brand override and tone
With uploaded document
Output Specification
Every generated file follows this structure consistently, regardless of the organization.
Sticky Header
Organization name + anchor nav links to each major section. Collapses on mobile.
Hero Section
Welcome headline, brief description, location badges pulled from research.
Sidebar TOC
Sticky numbered table of contents with anchor links. Auto-hides on mobile.
Section Cards
Each system/platform gets a card with a colored tag badge and description.
Tables
Location info and Key Contacts in formatted tables. Easy to scan and fill.
First Week Checklist
Printable checkbox list with deadlines. Every item is actionable.
Amber Placeholders
Every gap is styled and labeled — no blank fields, no hidden omissions.
Footer
Address, phone, and a distribution warning note about placeholders.
File size and compatibility
The output is typically 30–80 KB of HTML. It opens in any modern browser. It can be hosted on any web server, shared as an email attachment, or converted to PDF via browser print. No build tools, no frameworks, no server required.
↑ TopTips & Customization
Add a knowledge base file
Upload the Mac Haik Georgetown onboarding HTML to your Project's knowledge base (Project Settings → Add Content). Claude will use it as a structural reference and style benchmark for all future guides.
Organization-specific system prompt additions
If your organization always uses the same systems (e.g., you're generating guides only for school districts), append a block at the end of the system prompt:
ORGANIZATION-SPECIFIC CONTEXT: All organizations in this Project are Texas K-12 school districts. Always include sections for: - Frontline HR (time and absence management) - Google Workspace for Education (email, Classroom, Drive) - Region 13 / TASB professional development portals - TEA educator certification requirements - FERPA compliance training - Kronos / UKG timekeeping (if applicable) Default to a light theme with the district's school colors.
Adjusting placeholder density
Claude will use more or fewer placeholders depending on how much source data you provide. Providing a list of actual system names, staff names, and phone numbers upfront eliminates most placeholders in the first pass.
Iterating on a single guide
Within one conversation, you can ask Claude to: add a new section, change the color scheme, expand a specific platform description, add your mission statement to the hero, or re-generate with a lighter theme. Claude will always return the complete updated HTML file — never just a snippet.
Converting to PDF
Open the HTML in Chrome → File → Print → Save as PDF. Set margins to "None" or "Minimum" for best results. The design includes print-aware CSS for readable output.