feat(landing-page): agent design pages — rich layout, hero illustrations, and full localization#3972
Conversation
Build the first batch of per-agent detail pages under /agents/ for Claude Code, Codex, Cursor, and OpenCode, and turn the /agents/ hub into a supporting page that links into them. Each page renders from copy.agentGuides[slug]: a TL;DR, what-the-agent-is section, design patterns, real externally-sourced resource links, a with-Open-Design drive section, and an FAQ backed by FAQPage JSON-LD. en is hand-written and zh is hand-reviewed; the remaining locales reuse the en guide via the compact-locale fallback so no locale renders undefined. Targets long-tail intent like "claude code for design", "codex design", "cursor for designers", and "opencode design".
lefarcen
added
size/XL
🚀 Landing page previewThis PR is deployed to a Cloudflare Pages preview — not staging or production:
|
|
Hey @xne998808-ai! 👋 The direction is solid — turning the Assigned @nettee for review. A couple of things to help the review move fast:
If you'd like to drive this to merge once review feedback arrives, here's a one-liner for your coding agent:
|
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
Thanks for pushing the first batch of agent detail pages. The templates and guide content are in place, but I found one correctness issue that should be fixed before merge: the compact-locale routes currently publish English guide bodies under locale-specific URLs. I also left one follow-up on the hub’s structured data so the new leaf pages become the URLs search engines see for those four agents.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.Location: apps/landing-page/app/pages/agents/index.astro RIGHT line 160
Now that DETAILED agents have real /agents/<slug>/ leaf pages, this ItemList JSON-LD is stale for the four new pages because it still points every item at an in-page #slug anchor on the hub. That means the cards link to /agents/codex/ etc. in HTML, but the structured data still advertises the hub anchors as the canonical destinations, which weakens the new internal-link depth this PR is trying to create. Please emit /agents/${slug}/ for DETAILED slugs and keep the #slug fallback only for agents that do not have a dedicated page yet.
Inline comment could not be anchored: inline anchor is outside the PR diff anchorable ranges
…layout Replace the compact /agents/codex/ page with /agents/codex-design/, an opt-in long-form layout: a product-led hero band + CTA, an on-this-page TOC, deep how-to sections mixing prose, steps, code, comparison tables, and three custom illustrations, plus an expanded FAQ backed by FAQPage JSON-LD. The route carries the "design" keyword to target "codex design" and "codex for design" intent; the /agents/ hub now links there. The rich layout is gated behind an optional `rich` payload on copy.agentGuides[slug]: pages without it keep the compact shape, so this doubles as the template other agent pages can opt into later. en is hand-written and zh is hand-reviewed; the remaining locales reuse the en guide via the compact-locale fallback so none renders undefined.
…ut with hero illustrations Replace the two-column hero band with one centered full-measure column so the heading, hero banner, and body all share a single left and right edge, instead of stranding prose in a narrow left-aligned column while the heading wrapped mid-word. Widen the body to fill the measure and justify it. Drop the inherited 70ch max-width caps that were also catching the solution-page how-to steps, FAQ list, and template/system grids, so they fill the section width instead of stranding at ~707px on /solutions/ pages. Swap the placeholder line-art for warm editorial hero illustrations whose central hub carries the agent's real mark (the official OpenAI Codex emblem fused into the artwork), so the page is identifiable at a glance rather than relying on a pasted-on logo badge.
…s and localize all agent pages Add rich long-form detail pages for Cursor, Claude Code, and OpenCode that mirror the Codex page: a hand-structured how-to (what the agent is, why it is good at design, setup, the screenshot/preview loop, Figma, a comparison table, pitfalls, and how Open Design wraps it), an FAQ with JSON-LD, and a hero illustration with the agent's real logo fused into the artwork. Rename the per-agent routes to the `/agents/<agent>-design/` form to capture "<agent> design" search intent, point the /agents/ hub at them via DETAIL_ROUTES, and remove the old compact routes. Localize the agent guides across every landing locale. The new agent-guides.i18n.ts builds per-locale guides by spreading the English copy (so non-rendered compact fields stay type-complete) and overriding the rendered fields plus the long-form rich payload with translations; it is wired into compactInfoPageCopy so a compact locale renders fully localized agent pages instead of falling back to English. en and zh are authored directly; the other 16 locales are machine-translated and welcome native review.
xne998808-ai
changed the title
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
The long-form layout and locale coverage look substantially better on this head, but I found one remaining SEO metadata correctness issue in the new localized agent detail pages that should be fixed before merge.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.Location: apps/landing-page/app/pages/agents/codex-design/index.astro RIGHT lines 42-52
This jsonLd block hard-codes the English /agents/... URLs, so every localized route added by this PR (for example /zh/agents/codex-design/ and /ja/agents/codex-design/) will still emit structured data pointing back to https://open-design.ai/agents/codex-design/. The page shell is already locale-aware here: Layout emits a locale-specific canonical URL, alternate links, and <html lang>, but the BreadcrumbList items and Article.url now contradict that metadata on every localized agent page. That is a real SEO correctness bug for the new localization work, because search engines are told these localized pages are English-route articles instead of locale-specific documents. Please derive these JSON-LD URLs from the localized paths you already have here, for example by building absolute URLs from href('/agents/') and href(/agents/${ROUTE}/), and apply the same fix to the other three new agent detail pages.
Inline comment could not be anchored: inline anchor is outside the PR diff anchorable ranges
…gents/ hub Add the four agent design pages (Codex, Cursor, Claude Code, OpenCode) under AMR in the header's Agent dropdown, so they are reachable from the top nav and not only from the hub. Brand names are locale-invariant, so they are listed directly while the routes stay in lockstep with the hub's DETAIL_ROUTES. On the /agents/ hub, drop the first-party / supported / community tier split and list all adapters in one grid under a single description, and tighten the section rhythm so the long run of short sections reads less airy.
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
I rechecked the long-form agent detail pages on the current head. The earlier locale-copy fallback issue is fixed, but one blocking structured-data correctness bug remains in the new localized detail routes.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.Location: apps/landing-page/app/pages/agents/codex-design/index.astro RIGHT lines 43-52
This jsonLd block still hard-codes the English /agents/... URLs, so every localized route introduced by this PR (for example /zh/agents/codex-design/ and /ja/agents/codex-design/) emits structured data that points back to https://open-design.ai/agents/codex-design/ instead of the localized document. That matters because Layout already renders locale-specific canonicals and alternates for these wrappers, so search engines now get contradictory metadata on every non-English detail page. The evidence is that the breadcrumb items and Article.url here are built from ${SITE}agents/... rather than the localized href(...)/Astro.url.pathname values that the rest of the page uses. Please derive these JSON-LD URLs from the localized route, for example by building absolute URLs from href('/agents/') and href(/agents/${ROUTE}/), and apply the same fix to the sibling cursor-design, claude-code-design, and opencode-design pages because they share the same block.
Inline comment could not be anchored: inline anchor is outside the PR diff anchorable ranges
The agent detail pages' BreadcrumbList and Article JSON-LD hard-coded the English /agents/<route>/ URLs, so every localized route (e.g. /ja/agents/codex-design/) emitted structured data pointing back to the English document — contradicting the locale-specific canonical, hreflang, and <html lang> the layout already emits. Build the JSON-LD URLs from the localized path instead, on all four detail pages. Also point the /agents/ hub ItemList at each agent's dedicated leaf page (/agents/<route>/) instead of the in-hub #slug anchor when one exists, so the structured data matches the cards' real link targets.
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
I rechecked the changed landing-page ranges on the current head. The localized detail pages now use locale-aware JSON-LD, but one structured-data regression remains on the localized /agents/ hub and should be fixed before merge.
Location: apps/landing-page/app/pages/agents/index.astro RIGHT line 168
On the localized hub routes generated by app/pages/[locale]/agents/index.astro, this JSON-LD still publishes English-route URLs (https://open-design.ai/agents/...) even though the visible card links on the same page already use locale-aware href(...) values like /zh/agents/codex-design/. That leaves every non-English /[locale]/agents/ page with contradictory metadata: Layout emits a locale-specific canonical/hreflang set, but the ItemList here tells crawlers that the canonical destinations are the English pages instead. Because this PR’s goal is full localization for the agent landing surface, that is still a correctness bug in the changed metadata path. Please derive these URLs from the localized helpers you already have here, for example by building them from href('/agents/') and href(/agents/${DETAIL_ROUTES[a.slug]}/) (and the #slug fallback for non-detailed agents), so the structured data matches the locale-specific route being rendered.
Inline comment could not be anchored: inline anchor is outside the PR diff anchorable ranges
lefarcen
added
size/XXL
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Hey @xne998808-ai — the route rename (/agents/claude-code/ → /claude-code-design/, etc.), hero illustrations, and nav integration is a real step up from the first pass. One housekeeping ask before pool review picks this up:
The ## Validation section still reflects the original build (9015 pages built). The route renames and header.tsx integration change the page graph and the redirect surface, so the current numbers are stale. Could you drop updated pnpm --filter @open-design/landing-page typecheck + build output here — specifically new page count and any 301/redirect spot-checks you ran for the renamed slugs (the old /agents/claude-code/ links going around the web will need to land somewhere).
The hub's BreadcrumbList and ItemList structured data still emitted English /agents/... URLs on the localized /[locale]/agents/ routes, contradicting the locale-specific canonical the layout renders. Build them from the localized path (href / Astro.url.pathname) so the metadata matches the rendered route, mirroring the detail-page fix.
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
I rechecked the changed landing-page ranges on 36a189e. The locale-aware agent JSON-LD fixes look good, but the new list-normalization CSS still introduces one cross-page layout regression that should be fixed before merge.
Location: apps/landing-page/app/sub-pages.css RIGHT lines 2458-2496
These selectors are too broad for the components that already have their own list layout, so they regress more than the prose lists this hunk is trying to widen. In apps/landing-page/app/pages/solutions/design-system/index.astro the FAQ remains <ol class="faq-list"> with each row already numbered by .faq-index, and the how-to remains <ol class="solution-steps"> with each row already numbered by .solution-step-index; the same FAQ markup is used on the new apps/landing-page/app/pages/agents/*-design/index.astro pages, and the template/system galleries are still <ul class="solution-tpl-grid"> / <ul class="solution-system-grid">. Because this rule matches every ul/ol under .solution-page .info-section, it now adds extra padding-left plus a generated ::before marker to all of those list items, which duplicates the FAQ/step numbering and shifts every gallery card to the right with a stray coral dash. Please scope the normalization to the plain prose lists you actually want to restyle (for example a dedicated class on the rich article lists), or add explicit exclusions/overrides for .faq-list, .solution-steps, .solution-tpl-grid, and .solution-system-grid so the existing component layouts keep their own markers and spacing.
Inline comment could not be anchored: inline anchor is outside the PR diff anchorable ranges
…mponents The .solution-page .info-section ul/ol normalization added a coral dash / counter ::before and an indent to every list under a solution section, which double-numbered the FAQ (.faq-list) and how-to steps (.solution-steps) on top of their own indices, and prepended a stray coral dash that shifted the template / system gallery cards (.solution-tpl-grid / .solution-system-grid). Keep the list-style reset broad but apply the marker + indent only to plain prose lists, excluding those four components.
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
@xne998808-ai I rechecked the changed landing-page ranges on 286d5d6, with focus on the new localized agent detail routing, the locale-aware JSON-LD/canonical wiring, and the shared CSS changes that now apply across both the agent and solution pages. The current head resolves the earlier metadata regressions cleanly, and the long-form agent pages plus the /agents/ hub now line up with the localized route structure consistently. Nice improvement to the landing-page surface.
…uard The single agent-guides.i18n.ts (~1.4 MB of machine-translated agent copy for 16 locales) tripped the repo's 1 MiB changed-file blob guard. Split the data into four part files (~350 KB each) merged by a thin index, keeping the same buildLocalizedAgentGuides API and behavior.
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
The locale-aware metadata fixes and the richer agent pages look much better on this head, but one blocking public-route compatibility issue remains before these new URLs can safely replace the old ones.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.Location: apps/landing-page/app/pages/agents/index.astro RIGHT lines 76-80
DETAIL_ROUTES makes these four public detail pages change canonical URLs from /agents/<slug>/ to /agents/<slug>-design/, but this PR also deletes the old Astro generators and does not add matching rules to [apps/landing-page/public/_redirects]. As a result, every existing inbound link or indexed URL for /agents/codex/, /agents/cursor/, /agents/claude-code/, /agents/opencode/ and their locale-prefixed variants will 404 after deploy instead of transferring users and SEO equity to the new pages. That is a real compatibility regression on a public marketing surface. Please add explicit 301 redirects for the old paths to the new *-design routes in the same PR (following the redirect contract already documented in _redirects) before removing the old generators.
Inline comment could not be anchored: inline anchor is outside the PR diff anchorable ranges
… pages The agent detail pages were renamed from /agents/<slug>/ to /agents/<slug>-design/ and the old generators removed. Add 301 redirects (root and locale-prefixed) so any inbound link or indexed URL for the old paths transfers to the new page instead of 404ing.
nettee
left a comment
nettee
left a comment
There was a problem hiding this comment.
@xne998808-ai I rechecked the changed landing-page ranges on ffdddc2, with focus on the new localized agent detail routing, the locale-aware JSON-LD/canonical wiring, the old-to-new agent redirects, and the shared CSS changes across the agent and solution pages. The current head looks internally consistent in those paths, and I did not find actionable issues in the changed ranges. I could not rerun astro check in this prepared worktree because the landing-page dependencies are not installed here (astro: command not found), but the implementation under review lines up cleanly. Nice follow-through on the landing-page surface.
3 participants
Why
Speculatively improving the marketing site's agent long-tail pages. The
/agents/hub links to per-agent detail pages, but they had two problems: the long-form layout stranded body copy in a narrow, left-pinned column (and the same70chcaps mis-fired on the/solutions/pages, leaving their steps / FAQ / template grids squeezed into the left half), and the content existed only in English + Chinese — every other landing locale silently fell back to English even though the page chrome was translated. This brings the agent pages to layout and localization parity, and expands them from one agent (Codex) to four.What users will see
/agents/codex-design/,/agents/cursor-design/,/agents/claude-code-design/,/agents/opencode-design/— each a long-form how-to (what the agent is, designing with it, setup, Figma, a comparison table, pitfalls, "with Open Design", FAQ) with a warm editorial hero illustration that fuses the agent's real logo into the artwork. The/agents/hub cards link into them. The old/agents/<agent>/compact routes are gone./solutions/pages fixed — how-to steps, FAQ rows, and the template / design-system grids now fill the section width instead of stranding at ~707px.Surface area
apps/landing-page(/agents/<agent>-design/) + a reworked detail layout; the/agents/hub now links into themapps/landing-page/app/agent-guides.i18n.ts); en + zh authored directly, the other 16 locales machine-translated and welcome native reviewScreenshots
UI is in
apps/landing-page(marketing site), notapps/web/apps/desktop. Local preview while reviewing: run the landing-page dev server and open/agents/codex-design/,/agents/cursor-design/,/agents/claude-code-design/,/agents/opencode-design/(prefix any locale, e.g./ja/agents/claude-code-design/).Hero illustrations embed each vendor's own mark (referential use); the pages carry the standard "not affiliated" framing in copy. Screenshots to be added.
Notes
apps/landing-page/app/agent-guides.i18n.tsholds the per-locale agent translations; it is wired intocompactInfoPageCopyso non-en/zh locales resolve their own guides. Machine translations preserve the English structure exactly (ids/hrefs/code blocks verbatim) and were validated against the source before generation.astro checktypecheck and the static build (9015 pages) are green.