| name | landing-page |
| description | Create a new AILANG Parse documentation/landing page targeting a specific keyword or topic. Use when user says 'new landing page', 'new page for X', 'create a page about X', 'landing page for keyword X', or wants to add a documentation page to the docs/ site. Also use when the user references long-tail keywords, SEO pages, or competitor comparison pages. |
Create Landing Page
Generate a new AILANG Parse documentation/landing page that follows the established site conventions, uses shared infrastructure, and targets a specific keyword or topic.
Before You Start
-
Identify the target keyword — ask the user if not provided. Good long-tail keywords for AILANG Parse include:
- Feature-specific: "extract track changes from docx", "parse excel merged cells"
- Competitor comparison: "ailang vs unstructured", "llamaparse alternative"
- Use-case: "document parsing for legal review", "automated contract analysis"
- Format-specific: "parse odt files programmatically", "extract pptx speaker notes"
-
Check existing pages — avoid duplicating content already covered:
ls docs/*.html
-
Read the shared infrastructure to understand current conventions:
cat docs/js/site-data.js
cat docs/js/components.js
Page Template
Every new page MUST follow this structure. Use resources/template.html as the starting point.
Required Elements
-
<head> section — must include:
<meta charset="UTF-8"> and viewport meta<title> — format: {Page Title} — AILANG Parse<link rel="icon"> pointing to img/docparse-logo.svg<meta name="description"> — 140-160 chars, include the target keyword naturally- OG tags in raw HTML (not JS-injected — crawlers need them):
og:title, og:description, og:type (website), og:url
- Google Fonts preconnect + Instrument Sans/JetBrains Mono
- All 5 CSS files:
design-system.css, docparse.css, prism.css, docs-layout.css, components.css
-
<body> structure:
<div id="header-mount"></div>
<div class="page">
<section class="hero">
<div class="dp-docs-layout">
<aside class="dp-docs-sidebar">
<main class="dp-docs-content">
</div>
</div>
<div id="footer-mount"></div>
-
Scripts at bottom — in this exact order:
<script src="js/site-data.js"></script>
<script src="js/components.js"></script>
<script src="js/prism.min.js"></script>
<script src="js/prism-ailang.js"></script>
-
Sidebar scroll tracking — add this script after the main scripts:
<script>
(function() {
var links = document.querySelectorAll('.dp-docs-sidebar a');
var sections = [];
links.forEach(function(link) {
var id = link.getAttribute('href').replace('#', '');
var sec = document.getElementById(id);
if (sec) sections.push({ el: sec, link: link });
});
function update() {
var y = window.scrollY + 100;
var current = null;
sections.forEach(function(s) { if (s.el.offsetTop <= y) current = s; });
links.forEach(function(l) { l.classList.remove('active'); });
if (current) current.link.classList.add('active');
}
window.addEventListener('scroll', update, { passive: true });
update();
})();
</script>
Using Shared Data
Pricing/features — never hardcode. Use data-dp attributes:
<span data-dp="pricing.tiers.free.requests_per_month">500</span> requests/month
<span data-dp="formats.input_count">13</span> input formats
The inline text is the no-JS fallback. components.js replaces it from DP_DATA.
Available paths (check site-data.js for full list):
pricing.tiers.{free,pro,business}.{price_eur,requests_per_day,requests_per_month,ai_requests_per_month,max_file_size_mb}formats.{input_count,output_count}
Code examples — use external files via data-src:
<pre><code class="language-python" data-src="examples/sdk/quickstart.py">
# Inline fallback for no-JS
from ailang_parse import DocParse
</code></pre>
If the page needs a NEW code example, create the file in docs/examples/ and reference it. Existing examples:
examples/sdk/quickstart.{py,js,go,R} — SDK usage (Python, JavaScript, Go, R)examples/cli/install.sh — CLI installationexamples/cli/parse.sh — Basic parsingexamples/cli/convert.sh — Format conversionexamples/cli/ai-parse.sh — AI generationexamples/api/curl-parse.sh — curl quick startexamples/mcp/claude-desktop-config.json — MCP config
SEO Checklist
Copywriting Standards
Follow these rules for all prose on landing pages:
-
Lead with the differentiator. Cut throat-clearing paragraphs. Don't spend 2-3 paragraphs framing the problem before stating what AILANG Parse does differently. The reader found this page because they already have the problem.
-
Genericize competitor references. Prefer "PDF-first parsers", "other tools", or "most document processing pipelines" over naming specific competitors. Competitor names should only appear in: (a) data comparison tables on vs-pdf-conversion.html and benchmarks.html, (b) migrate-from-unstructured.html (inherent), (c) integrations.html (integration-specific code), (d) enhance/integration grid cards showing how to use AILANG Parse with other tools.
-
Callouts must add new information. Never create a callout that restates the preceding paragraph. If the callout says the same thing differently, delete one or the other.
-
FAQ answers: 1-2 sentences max. FAQ answers should be scannable. Keep both the HTML <details> content and the JSON-LD schema answers concise and matching.
-
No hedge language. Avoid "This is not a replacement — it's an upgrade" or "This is not an either/or decision." State the value directly. One diplomatic positioning statement per page maximum.
-
One instance of competitive positioning per page. The full comparison lives on vs-pdf-conversion.html. Other pages get one sentence about the architectural difference, then link to the comparison page. Don't repeat the "Unstructured converts to PDF, Docling converts to PDF" pattern on every page.
-
Confident, technical tone. Short declarative sentences. Use specific numbers (11ms, 96.6%, 53 test files) over vague claims. Don't over-explain — trust the reader to be technical.
Content Patterns That Work
Study these existing pages for inspiration:
- Feature deep-dive:
comments.html, track-changes.html, tables.html — problem/solution/how-it-works/example-output/use-cases/try-it/FAQ
- Competitor comparison:
vs-pdf-conversion.html, migrate-from-unstructured.html — side-by-side tables, specific data loss examples
- Integration guide:
mcp.html, claude-code.html, integrations.html — step-by-step setup with code blocks
Common CSS Classes
Use these from the design system rather than inline styles:
.dp-docs-layout, .dp-docs-sidebar, .dp-docs-content — page layout.dp-callout — info callout box with SVG icon.dp-config-table — comparison table.dp-preserved / .dp-lost — green/red status badges in tables.dp-btn, .dp-btn--primary, .dp-btn--secondary — CTA buttons.dp-faq, .dp-faq-answer — FAQ section.reveal, .reveal-delay-1 — scroll-reveal animation.hero, .subtitle — page hero sectionlanguage-bash, language-python, language-json, language-r, etc. — Prism syntax classes
After Creating the Page
-
Verify locally:
cd docs && python3 -m http.server 8765
-
Check mobile — resize to 768px, verify sidebar collapses and content is readable.
-
Validate structured data — paste the JSON-LD into Google's Rich Results Test.
-
Do NOT add the page to the nav in components.js unless it's a top-level section. Landing pages are discovered via search, not navigation.
