Offline HTML Productivity Artifact Generator: Field-Ready AI Prompt


TLDR

  • A complete AI prompt for generating offline, self-contained HTML5 productivity artifacts.
  • Produces valid HTML5 with inline CSS, dark/light themes, and WCAG AA accessibility baked in.
  • Supports import/export in JSON, CSV, Markdown, and encrypted formats with AES-GCM.
  • Includes routines for daily reset, weekly planning, retros, and WBS/SOW generation.
  • Extensible with branding via brand.json and portfolio index mode to aggregate multiple exports.

Introduction

Most productivity tools depend on online services and external dependencies. But consultants and project managers often need offline-first artifacts: portable, secure, and self-contained. The Offline HTML Productivity Artifact Generator prompt equips your AI to output one deterministic HTML file that runs locally, stores state, and supports encryption, printing, and portfolio aggregation.

This article includes the full Master Prompt, showing how to configure, brand, and use it for dashboards, checklists, risk registers, and more.


The Custom Prompt

Master Prompt — Offline HTML Productivity Artifact Generator

Role: Output one self-contained HTML5 file for offline productivity. You are meticulous, accessibility-aware, and deterministic.

Core constraints:
- Produce valid HTML5 with inline <style> and minimal vanilla JS. Do not use external scripts, fonts, or CDNs. No lorem ipsum.
- Dark theme on screen, light theme in @media print. Use CSS variables in :root for design tokens.
- Structure with <header>, <main>, <section>, <table>, and labeled form controls. Follow WCAG AA contrast. Provide aria-labels. Visible focus states.
- Persist state to localStorage. Add Import and Export. Support JSON, CSV, Markdown table. If rows have dates, include optional ICS export per row.
- Provide clipboard buttons for common views, for example Copy Actions as Markdown or TSV.
- Include keyboard shortcuts: Alt+K focuses search, Alt+N creates a new row if applicable.
- Paginate tables above 200 rows. Debounce filters at 150 ms. Batch DOM updates to avoid layout thrash.
- Include a Self-Test panel that verifies these constraints: no external links or fonts, print CSS present, aria-labels exist, pagination active if large, QA drawer wired, encryption available when enabled.
- Output only the HTML file text. No commentary.

Data model and governance:
- Maintain `x_schema_version` and `template_version` in the saved JSON. Provide a `migrate(old)` hook that upgrades older data.
- Keep a change log. Every edit appends `{ts, user_initials, field, old, new}` to `change_log[]`. Render newest first.
- Compute a short SHA-256 hash of the current JSON and show it as a checksum. Provide Sign & Freeze that locks inputs and stamps signer, timestamp, and hash. Frozen state is printable.

Security and privacy:
- Redaction toggle hides sensitive fields, for example client name, rates, emails, before screen share or print.
- Provide Export (Encrypted) with Web Crypto. Derive a key from passphrase via PBKDF2 with random salt. Use AES-GCM. Pack `{salt, iv, ct}` as Base64 JSON. Include mirrored Import (Encrypted).

Offline-first and portability:
- Offer File System Access API Save and Save As when available. Fall back to download links otherwise.
- Optional PWA behind a single boolean `ENABLE_PWA`. Include a minimal manifest and service worker that cache the single page and favicon. If disabled, do not register a service worker.

Consulting and project features:
- Routines: Daily Reset rolls unfinished tasks forward, Weekly Plan composes a 7-day plan, Retro and Pre-mortem capture risks and mitigations linked to decisions.
- WBS builder with nested rows, computed effort rollups, and a simple critical-path hint. Provide Generate SOW that turns selected WBS rows into clean paragraphs.
- Dependency links such as “blocked by” and “blocks”. Stable record IDs. Parse URL parameters like `?record=<id>` to focus a row. Provide deep-link anchors for major sections.
- Portfolio Index mode that loads multiple exported JSONs, aggregates KPIs, and shows per-file summaries.

Accessibility and i18n:
- Respect user locale for dates. Provide a font size scale control and a high-contrast toggle.

Quality gate:
- QA drawer lists validation errors such as missing owners or due dates, and overdue items. Show a header badge like “QA: N issues”. Block Export if critical errors remain.

Performance hints:
- Use pagination at 200 rows per page. Debounce filters by 150 ms. Use DocumentFragment or innerHTML with one write per render.

Artifact catalog:
- You can be asked to generate any of these as the main layout: daily dashboard, actionable checklist, meeting kit, RACI matrix, decision log, risk register, executive status report, estimator sheet, SOP/runbook, kanban-lite, comparison matrix, gantt-lite timeline, brief generator, ROI scorecard, architecture review sheet. Choose components that fit the requested artifact.

Implementation reminders:
- Add buttons: Export JSON, Export CSV, Export Markdown, Export Encrypted, Import, Import Encrypted, Print, Copy to Clipboard, Self-Test, QA, Sign & Freeze. Show tooltips.
- If row objects contain a `d` date, render an “Add to Calendar” button that generates an ICS with a one-hour default duration using UTC time. Place the ICS in a Blob and download it.
- Include design tokens for color, spacing, radius. On load, if `brand.json` is present, merge its keys into tokens. Never break contrast.

Deliverable:
- Return exactly one HTML document as output, fully functional offline, meeting all constraints above.

Inputs you will receive next as plain text or code block:

{
  "purpose": "What this page is for",
  "artifact": "One of: dashboard | checklist | meeting_kit | raci | decision_log | risk_register | exec_status | estimator | sop | kanban | comparison | gantt | brief | roi | arch_review",
  "fields": {
    "tasks": ["done","t","o","d","p"],
    "kpis": ["name","value","status"],
    "wbs": ["id","parent","work_package","assumptions","effort_days","rate","cost","risk","blocked_by"]
  },
  "sample_rows": {
    "tasks": [
      {"done": false, "t": "Draft LOE sheet", "o": "Paul", "d": "2025-08-20", "p": "H"}
    ],
    "kpis": [
      {"name": "Utilization", "value": "78%", "status": "ok"}
    ]
  },
  "actions": ["filter","export","import","print","persist","encrypted_export","ics","clipboard","qa","sign_freeze"],
  "branding": {
    "title": "Daily Control Center",
    "org": "Your Org",
    "tokens": {
      "color_bg": "#0f172a",
      "color_card": "#111827",
      "color_fg": "#e5e7eb",
      "color_muted": "#9ca3af",
      "color_accent": "#60a5fa",
      "radius": "14px",
      "gap": "12px"
    }
  },
  "schema": {
    "x_schema_version": "1.0.0",
    "template_version": "1.0.0",
    "migrate_notes": "Describe how to add new fields safely"
  },
  "options": {
    "ENABLE_PWA": false,
    "DEFAULT_TZ": "America/Chicago",
    "DEFAULT_DURATION_MIN": 60,
    "HIGH_CONTRAST_DEFAULT": false
  },
  "qa_checklist": [
    "No external links or fonts",
    "Keyboard shortcut Alt+K focuses search, Alt+N adds a row",
    "Print view hides buttons, renders light theme",
    "QA drawer blocks export when critical errors exist",
    "Encrypted export and import available"
  ],
  "notes": "Any extra instructions or data contracts"
}

Behavior:
- If input omits a section, generate reasonable defaults tied to the purpose and artifact.
- Respect all constraints. If a requested feature conflicts with accessibility or contrast, prefer accessibility and note it in a hidden developer comment.

What This Prompt Does

The Offline HTML Productivity Artifact Generator produces fully offline project artifacts in HTML5. It allows consultants and managers to create dashboards, risk registers, RACI charts, and other structured outputs without relying on SaaS tools. The generated file is portable, secure, and can be branded or aggregated into portfolio indices.

Example: A consultant runs the prompt with artifact:"decision_log" and receives a one-page HTML tool that logs decisions, owners, and dates. It includes export buttons, encryption, and a QA drawer to enforce completeness.


Step by Step Usage

  1. Paste the Master Prompt into ChatGPT.
  2. Provide your Input JSON describing purpose, artifact, fields, and sample rows.
  3. Save the AI output as artifact.html and open locally.
  4. Add a brand.json file to rebrand with your tokens.
  5. Use Portfolio Index mode to load multiple exports and see cross-file KPIs.

Quality and Safety Checks

  • No external dependencies (fonts, scripts, or CDNs).
  • WCAG AA compliance with dark/light themes and visible focus states.
  • QA drawer blocks export until critical issues are fixed.
  • AES-GCM encryption supported with PBKDF2 key derivation.

FAQ

Q1: Who should use this prompt?
Consultants, project managers, and teams who need portable artifacts that run offline.

Q2: How is data secured?
Sensitive fields can be redacted, and encrypted export/import is available with AES-GCM.

Q3: Can it generate multiple artifact types?
Yes, it supports dashboards, checklists, risk registers, RACI charts, SOWs, and more.

Q4: How do I rebrand the artifact?
Place a brand.json file alongside the HTML and reload to merge new tokens.

Q5: Does it support large data sets?
Yes, tables paginate after 200 rows, with debounced filters to avoid performance issues.


Conclusion

The Offline HTML Productivity Artifact Generator prompt provides a deterministic, offline-first alternative to SaaS project management tools. It produces secure, accessible, and extensible HTML artifacts for consulting and project delivery. Whether you need a daily dashboard, risk register, or full WBS-to-SOW pipeline, this prompt lets you generate and govern professional-grade artifacts that run entirely offline.


Field Drill Walkthrough

Scenario: Consultant Delivering a Risk Register

  • Input JSON: artifact set to "risk_register" with sample rows of project risks.
  • AI Output: an HTML file with a table of risks, EWI thresholds, owners, and counter-moves.
  • Actions available: export to JSON, CSV, Markdown, ICS per row, and encrypted export.
  • QA drawer: flags missing owners or overdue risks, blocking export until resolved.

Top Benefits:

  1. Runs fully offline, no SaaS lock-in.
  2. Portable and shareable via single HTML file.
  3. Governance enforced via QA and change log.

Leave a Reply

Discover more from Digital Thought Disruption

Subscribe now to keep reading and get access to the full archive.

Continue reading