From 26bb7ef75a4d78097fece498279adf319533d75a Mon Sep 17 00:00:00 2001 From: PredictabilityAtScale <131020168+PredictabilityAtScale@users.noreply.github.com> Date: Sun, 19 Apr 2026 07:36:39 -0700 Subject: [PATCH] Improve website SEO metadata and crawl files --- README.md | 4 + website/index.html | 209 ++++++++++++++++++++++++++++++++++++ website/marketing-audit.md | 77 ++++++++++++++ website/robots.txt | 4 + website/sitemap.xml | 8 ++ website/styles.css | 212 +++++++++++++++++++++++++++++++++++++ 6 files changed, 514 insertions(+) create mode 100644 website/index.html create mode 100644 website/marketing-audit.md create mode 100644 website/robots.txt create mode 100644 website/sitemap.xml create mode 100644 website/styles.css diff --git a/README.md b/README.md index 278c341..7fcbcde 100644 --- a/README.md +++ b/README.md @@ -330,6 +330,10 @@ Prompt files use YAML front matter with these fields: | `tiers` | `object` | Named tier overrides | | `metadata` | `object` | `{ owner, tags, review_required, stable }` | +## Website + +The `website/` directory contains a standalone marketing website for PromptOpsKit. + ## License [MIT](LICENSE) diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..af7a2dd --- /dev/null +++ b/website/index.html @@ -0,0 +1,209 @@ + + + + + + PromptOpsKit | Open-Source Prompt Management Toolkit for Developers + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Open-source prompt infrastructure

+

Ship AI prompts with the same rigor as application code.

+

+ PromptOpsKit is a developer-first toolkit and CLI for authoring prompts in Markdown, + validating schema and variables before runtime, and rendering provider-specific request bodies + without locking you into a transport stack. +

+ +
npm install promptopskit
+npx promptopskit init ./prompts
+promptopskit validate ./prompts --strict
+
+ +
+

Why teams adopt PromptOpsKit

+
+
+

Predictable prompt changes

+

Store prompts in markdown with front matter so every change is diffable, reviewable, and auditable.

+
+
+

Portable provider output

+

Generate request bodies for OpenAI, Anthropic, Gemini, and OpenRouter while keeping network logic in your app.

+
+
+

Safer releases

+

Catch invalid schema, unresolved variables, and malformed composition before your production calls fail.

+
+
+
+ +
+

Prompt management features for engineering teams

+
+
+

Authoring format engineers already trust

+
    +
  • Markdown files with YAML front matter
  • +
  • H1 sections for system instructions and prompt template
  • +
  • {{ variable }} interpolation and strict checks
  • +
+
+
+

Composition and overrides without duplication

+
    +
  • includes for shared policy, tone, and safety blocks
  • +
  • Environment and tier-specific overrides
  • +
  • Deterministic precedence: base → env → tier → runtime
  • +
+
+
+

CLI for local and CI pipelines

+
    +
  • init, validate, render, inspect, compile, and skill
  • +
  • Pre-compile prompts to JSON/ESM artifacts
  • +
  • Use in pre-merge checks and release workflows
  • +
+
+
+

No transport lock-in

+
    +
  • Adapters return request body only
  • +
  • You keep control of auth, retries, headers, and observability
  • +
  • Integrates with existing HTTP and infra standards
  • +
+
+
+
+ +
+

PromptOpsKit quick start

+
+
+

1) Install and scaffold

+
npm install promptopskit
+npx promptopskit init ./prompts
+
+
+

2) Render for your target provider

+
import { createPromptOpsKit } from 'promptopskit';
+
+const kit = createPromptOpsKit({ sourceDir: './prompts' });
+const result = await kit.renderPrompt({
+  path: 'support/reply',
+  provider: 'openai',
+  variables: { user_message: 'How do I reset my password?' }
+});
+
+
+
+ +
+

Frequently asked questions

+
+
+

Is PromptOpsKit only for one model provider?

+

No. It supports OpenAI, Anthropic, Gemini, and OpenRouter adapters out of the box.

+
+
+

Does PromptOpsKit make HTTP requests?

+

No. It returns request-body payloads so your app controls auth, transport, retries, and headers.

+
+
+

Can we validate prompts in CI before deploy?

+

Yes. Use the CLI validate and compile commands in your CI pipeline to catch issues before release.

+
+
+

Is PromptOpsKit open source?

+

Yes. The project is MIT-licensed and maintained in a public GitHub repository.

+
+
+
+ +
+

Open source and production-ready defaults

+

+ PromptOpsKit is MIT-licensed and designed for teams that need testable prompt operations. + Use source prompts in development and pre-compiled artifacts in production for speed and reliability. +

+

+ Explore docs, examples, and API details in the repository. +

+ View repository +
+
+ + + + diff --git a/website/marketing-audit.md b/website/marketing-audit.md new file mode 100644 index 0000000..0fd8142 --- /dev/null +++ b/website/marketing-audit.md @@ -0,0 +1,77 @@ +# PromptOpsKit Marketing Audit and Website Plan + +## Scope + +This audit reviews the current repository messaging (especially `README.md`), identifies conversion and clarity gaps for a developer audience, and proposes a standalone marketing site in `website/`. + +## Current repo strengths + +1. **Strong technical depth**: README explains architecture, provider support, overrides, composition, and API details. +2. **Real implementation credibility**: examples and CLI coverage signal production intent. +3. **Clear open-source positioning**: MIT license and explicit no-lock-in approach are present. + +## Problems observed + +### 1) README is optimized for existing users, not first-time evaluators + +- The README has extensive details and many sections before a concise value hierarchy is established. +- New visitors must parse a lot of implementation material before understanding the product's outcome for teams. + +**Solution in marketing site** +- Lead with a short developer value proposition. +- Add an immediate “why adopt” section with three concrete outcomes. +- Keep quick-start command block near the hero. + +### 2) Value differentiation exists but is not tightly packaged for decision makers + +- Differentiators such as “request-body-only adapters”, “overrides precedence”, and “pre-compile for production” are present but spread across sections. + +**Solution in marketing site** +- Consolidate differentiators into scannable feature cards. +- Prioritize claims tied to operational outcomes: portability, release safety, and prompt governance. + +### 3) The repo currently lacks a purpose-built landing experience + +- There is no standalone page designed for top-of-funnel traffic from npm/GitHub/social links. +- No short narrative path from problem → capability → proof → CTA. + +**Solution in marketing site** +- Add a static, framework-free landing page under `website/`. +- Keep this independent from library docs and package build/publish flow. + +### 4) Design style in many AI-tool landers can feel generic + +- Common patterns include heavy gradients, oversized “chip” labels, and highly rounded cards/buttons, which can reduce trust for technical audiences expecting precision and seriousness. + +**Solution in marketing site** +- Flat background, restrained color system, low-radius corners, clear typographic hierarchy, and direct technical copy. + +## Reference review (developer-focused OSS/product pages) + +The proposed layout and copy structure were informed by public pages such as: + +- LangChain product page patterns (clear value prop + adoption outcomes + CTA). +- LangGraph/LangChain ecosystem positioning (choose abstraction level for different teams). +- Supabase developer homepage structure (modular capability sections and clear open-source framing). +- Temporal messaging style (developer reliability + production outcomes). + +## Information architecture for the new standalone website + +1. **Hero**: one-sentence positioning + install/docs CTAs. +2. **Why adopt**: three outcome-focused cards. +3. **Features**: engineering workflow capabilities in compact lists. +4. **Quick start**: real commands and code snippet. +5. **Open source close**: governance and repository CTA. + +## Packaging and distribution considerations + +- The site lives in `website/` and does not affect runtime library code. +- npm package remains unaffected because publish `files` includes only `dist/`. +- This setup supports future deployment to any static host without changing package outputs. + +## Next iteration recommendations + +1. Add social proof (logos or usage metrics) once available. +2. Add “Architecture” section with one diagram for include/override/render pipeline. +3. Add benchmarks for parse/compile/validate latency. +4. Add docs deep-links per audience (library user vs platform engineer vs AI infra team). diff --git a/website/robots.txt b/website/robots.txt new file mode 100644 index 0000000..9c262b0 --- /dev/null +++ b/website/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://github.com/PredictabilityAtScale/promptopskit/blob/main/website/sitemap.xml diff --git a/website/sitemap.xml b/website/sitemap.xml new file mode 100644 index 0000000..fce7eb0 --- /dev/null +++ b/website/sitemap.xml @@ -0,0 +1,8 @@ + + + + https://github.com/PredictabilityAtScale/promptopskit + weekly + 0.8 + + diff --git a/website/styles.css b/website/styles.css new file mode 100644 index 0000000..3a8f054 --- /dev/null +++ b/website/styles.css @@ -0,0 +1,212 @@ +:root { + color-scheme: light; + --bg: #ffffff; + --text: #101828; + --muted: #475467; + --line: #d0d5dd; + --surface: #f8fafc; + --brand: #0f172a; + --brand-contrast: #ffffff; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.6; +} + +.container { + width: min(1080px, calc(100% - 3rem)); + margin: 0 auto; +} + +.site-header { + position: sticky; + top: 0; + background: rgba(255, 255, 255, 0.96); + border-bottom: 1px solid var(--line); + backdrop-filter: blur(6px); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + min-height: 72px; +} + +.brand { + font-weight: 700; + color: var(--text); + text-decoration: none; +} + +nav { + display: flex; + gap: 1.25rem; +} + +nav a { + color: var(--muted); + text-decoration: none; + font-weight: 500; +} + +nav a:hover, +.site-footer a:hover { + text-decoration: underline; +} + +.hero { + padding: 5rem 0 3rem; +} + +.eyebrow { + margin: 0; + font-size: 0.9rem; + letter-spacing: 0.02em; + text-transform: uppercase; + color: var(--muted); +} + +h1, +h2, +h3 { + line-height: 1.2; + margin: 0 0 1rem; +} + +h1 { + font-size: clamp(2rem, 4.5vw, 3.35rem); + max-width: 16ch; + margin-top: 0.65rem; +} + +h2 { + font-size: clamp(1.6rem, 2.8vw, 2.25rem); +} + +.lead { + max-width: 68ch; + color: var(--muted); + font-size: 1.1rem; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin: 1.5rem 0; +} + +.button { + display: inline-block; + padding: 0.65rem 1rem; + border: 1px solid var(--line); + border-radius: 6px; + text-decoration: none; + color: var(--text); + font-weight: 600; + background: #fff; +} + +.button-primary { + background: var(--brand); + color: var(--brand-contrast); + border-color: var(--brand); +} + +.section { + padding: 3rem 0; + border-top: 1px solid var(--line); +} + +.grid { + display: grid; + gap: 1rem; + margin-top: 1.25rem; +} + +.grid.two { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid.three { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.card { + border: 1px solid var(--line); + border-radius: 8px; + background: var(--surface); + padding: 1.25rem; +} + +p { + margin: 0 0 1rem; +} + +pre { + margin: 1rem 0 0; + background: #0b1220; + color: #e2e8f0; + padding: 1rem; + border-radius: 8px; + overflow: auto; +} + +code { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; + font-size: 0.95em; +} + +ul { + margin: 0; + padding-left: 1.1rem; +} + +.site-footer { + border-top: 1px solid var(--line); + margin-top: 3rem; +} + +.footer-content { + min-height: 70px; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--muted); +} + +.site-footer a { + color: inherit; +} + +@media (max-width: 900px) { + nav { + display: none; + } + + .grid.two, + .grid.three { + grid-template-columns: 1fr; + } + + .container { + width: min(1080px, calc(100% - 2rem)); + } + + .footer-content { + align-items: flex-start; + gap: 0.5rem; + flex-direction: column; + padding: 1rem 0; + } +}