Do I need a framework or a running server?

No for the default deliverable: the inliner makes one HTML file with local imagery and both fonts embedded for disk or sandboxed review. Building it needs Node.js 18+ and a one-time font download. A deployed copy can use adjacent local files. An existing/requested Next.js, React, Vue, Svelte or Astro app gets components and real routes with the same design, followed by the project’s own checks.

Are the product views screenshots, and what imagery costs extra?

The studio, schema, role controls, code sync and branch diff are HTML/CSS/SVG interactions, not raster screenshots. They are local demonstrations rather than a hosted CMS. Customer-story, content-library and avatar photos can use an available agent image tool, which may charge; approved supplied photographs or clearly labelled gaps are alternatives. Real people and customer endorsements need their own permissioned material.

How complete are the docs and release pages?

The docs have searchable sidebar navigation, empty state, scroll highlighting and copyable code, with environment references and explanatory callouts. Changelog supports category chips, search, result counts and a roadmap tab. Content is stored as local data for the agent to adapt; this includes no publishing backend or guarantee that fictional commands will work against your service until replaced and checked.

Contexa CMS Landing

Previews from the publisher

Explain a developer product through an interface visitors can try. Contexa CMS Landing combines a restrained green-accented grid with a selectable content table, request/response playground and supporting docs, pricing and account pages. The fictional CMS and travel-publisher workspace demonstrate the design; the local API responses, merge states and signup confirmations are not a running CMS service.

What you get

A light-first marketing site with a complete dark theme: dismissible announcement, sticky product navigation, calm centered hero, content-studio window, customer-wordmark row, asymmetric feature bento, model-sync demonstration, framework quickstart, content branches, security/status, customer story, pricing/comparison, FAQ, email CTA and inverted footer with an oversized faded wordmark. The bordered rails and changing split/stacked compositions keep code, proof and explanations distinct.
A code-built studio with workspace/environment/branch context, entry rows, status totals, owners, thumbnails, filters, search and empty-state recovery. Selecting a row updates the GraphQL/REST request and response panel; Run changes the local display. The template constructs JSON from its entry data and assigns a random 24–53 ms latency label, so neither “200 OK” nor the displayed timing measures a real endpoint.
Four interactive feature mockups for schema, collaboration, media and permissions, plus a replayable model-to-studio sync sequence with generated GraphQL/TypeScript views. Media choices and focal-point crop ratios update the preview; role tabs and permission switches demonstrate access settings. A branch diff offers loading, merged and reset states. These illustrate a product workflow without saving a schema, enforcing permissions, processing images through a CDN or merging a remote branch.
Matching docs, changelog/roadmap, signup, sign-in, contact-sales, customer-story, status, privacy, terms and not-found views. Docs include sidebar search/empty state, scroll highlighting, code copying, environment references, callouts and navigation; changelog combines area filters, search, counts and a roadmap tab. The status view has component rows, 90-day bars and incident labels populated from fixed sample data, not monitoring.
A self-contained offline HTML deliverable by default, with Instrument Sans, JetBrains Mono and photos embedded. A deployed static variant can retain local image/font files; an existing/requested framework receives components, data and real routes instead. The package supplies the reference implementation, section/style/image/motion/icon guides, sixteen photograph files, an inliner and a static validator. The photographs cover five travel-content assets, ten avatar crops and a story portrait; one avatar is cropped from that portrait.

Before you choose

Build the explanation around the visitor’s next developer decision: inspect an object, understand its response, try a relevant command and assess the real plan. Keep the richness of those interactions while naming their boundary. Local “200 OK”, merge, uptime and account states must remain demonstrative until backed by an actual service and approved product facts.

Good fit

An API, CMS, SDK or infrastructure team wants its core objects and workflow to explain the product more clearly than a decorative screenshot.
A developer-facing launch needs docs, releases, pricing, status, legal and account screens that share the same visual system.
A founder needs an offline review/demo file, or a team wants this design adapted into an existing React, Next.js, Vue, Svelte or Astro project.

Not for

A consumer, lifestyle or retail identity that would be poorly served by code panels, tight bordered cells and monospace metadata.
A database-backed CMS, editorial publishing system or live blog. Entries, documentation and release content are local page data until connected to additional services.
Production authentication, SSO, billing, uptime monitoring or security enforcement out of the box. The visible controls and success messages are interface demonstrations.

How to use

You say/contexa-cms-landing Build the marketing site for Contexa, a developer-first headless CMS, with docs and a changelog.

Provide the product name and promise, core objects, supported frameworks/SDKs, real installation command, plan names/prices and intended CTA. Add docs topics and any confirmed customer quotes, security controls, residency, backups and SLA facts. Draft missing ordinary copy in the product’s own terms and list it for confirmation; omit unsupported certifications or security claims rather than inventing them.
Choose delivery from the actual project context. With no existing project, adapt the reference into one offline HTML file. For deployed static hosting, keep local images/fonts if preferred. In an existing/requested framework, inspect its conventions and split sections into components, move entries/frameworks/releases/FAQ/comparison/roles into data modules, and implement real routes. Preserve the same grid, type, theme and interaction design without silently migrating the app or embedding the old page in an iframe.
Map the CMS example to the product. API rows may become requests, queue rows jobs and hosting rows deployments; use meaningful states and realistic but identified sample IDs. Turn content branches into review or staged-rollout explanations, and replace the media bento with the actual differentiator if images are irrelevant. An SDK can use open-source/hosted options or omit pricing, use an API-key/waitlist CTA and remove status when no hosted service exists.
Rebuild the studio around those objects: agree workspace labels, table states/totals, owners, row selection, query schema and response examples. The faint hero query must match the playground. At widths below 1180px, the API panel becomes a tab; below 900px the side navigation hides, and below 760px the table retains title/status. Use five to ten rows as the guide’s starting range and check search/filter empty states rather than filling the table with unrelated sample travel entries.
Keep the hero’s hierarchy: announcement pill, two-line headline capped at 60px, one short subtitle and two intentional actions, followed by a divider and product window no wider than 1120px. Retain the 1280px bordered shell, hairline cells and occasional corner crosses. Green is the marketing accent; other status colors stay inside product UI. Avoid purple/violet/indigo, extra hero stats/badges and decorative screenshot or laptop imagery. Use Instrument Sans for reading and JetBrains Mono for code/IDs.
Write the section sequence as an explanation of real capabilities. Vary at least four layout families, avoid adjacent repeated compositions and keep headings/leads concise. Adapt schema/collaboration/media/roles, sync, quickstart and branches together so labels and generated examples agree. The collaborator sentence and schema addition are scripted examples; replaying sync or merge changes local visual state, not the customer’s content repository.
Set supported framework tabs and genuinely relevant commands, then rewrite docs code, environment variables and integration topics together. The guide allows two to six framework tabs and six to eight FAQs. Search and roadmap content come from local arrays, not a CMS. If removing a section or route, remove its links, route/title entries and ID-bound script block too: several blocks assume their markup exists. Keep home, not-found and at least three useful additional routes.
Align one to four plans with grid columns, comparison headings, every comparison row and group span. One price does not need a monthly/yearly switch; otherwise verify both prices and notes. Set security items from approved facts and replace sample uptime percentages, incident dates, regions and customer outcomes. The supplied status bars are fixed examples, and the billing toggle only changes presentation; neither establishes an SLA or payment subscription.
Use photography only for customer story, the customer’s content shown inside the product and matching avatars. The shipped five travel images fit a travel publisher; replace them for another domain, or reduce the studio to method/icons for an API. Generated avatars and story portrait remain disclosed stand-ins, never photos of named real customers. Use approved people photos for real quotes. An available agent image tool may charge; without it use supplied photos or labelled, sized gaps and identify outstanding assets.
Rebrand beyond headings: metadata/social image, site/customer/contact data, storage keys, domains, API/CDN paths, story route, sprite wordmarks, both marquee sets, commands/package scopes, code highlighter types, people, signup defaults, legal contacts/regions and footer wordmark. Keep actual customer permission, security evidence and pricing separate from placeholder prose. Replace sample names even in comments/scripts before delivery.
Test account/contact/newsletter states as demonstrations until connected. Signup validates name/email/workspace/terms and previews a slug/region, then a timer shows “Workspace created” and a sent-link claim; sign-in similarly displays magic-link or SSO success without authenticating. Contact promises a reply after local validation/timer. Replace those outcomes with service-confirmed behavior for production. Copy feedback also needs a real clipboard check because the fallback suppresses failure.
For offline delivery, use Node.js 18+ and initial internet access to download/embed the two font files alongside local images. Aim below 5 MB and stay under 8 MB. Check the inliner exit status as it can write output before reporting missing files/downloads. Run the static validator on the deliverable; local-files mode checks referenced assets, and framework mode still needs the host build/lint/type checks. A static pass does not execute routes, prove connectivity or validate factual claims.
Review light and dark at 390, 768, 1024, 1440 and 1920px, plus 360px overflow. Exercise every route and anchor, focus-trapped mobile menu/Escape, studio selection/search, API tabs, crop/permissions, sync replay, merge/reset, quickstart copy, billing/comparison, docs/changelog, FAQ and empty/error/success forms. Repeat key paths in the scripts-only iframe for the offline file. Reduced motion should reveal final states without streaming/counting effects; verify hidden-content fallback and console errors. Deliver the actual path, checks performed and outstanding content/photo/service gaps.

Requirements and costs

You bring: Product name, one-line promise and its core objects (entries, requests, jobs or deployments) · Supported frameworks or SDKs, the install command, and plan names and prices · Security facts, customers and quotes you can confirm (optional; gaps become listed placeholders)
Dependencies: Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent for the editorial photos (optional; without it you supply photos or get labelled slots)
Outside costs: Photos for the customer story, media library and avatars are generated with your agent's own image tool when one is available, which may incur that tool's usage charges. Without one, the agent uses your photos or leaves clearly labelled slots. Nothing else uses a paid service.
Publisher testing: v1.0.6 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT