How AI, Plasmic, and Next.js Changed the Way We Build Websites

Marketing teams should not need a developer for every headline, landing page, or campaign update. But handing over a blank-canvas page builder often creates a different problem: drifting layouts, inconsistent messaging, fragile SEO, and tracking that breaks every time a page moves.

For Endertech’s new website, we wanted a better balance.

We rebuilt our marketing site around Plasmic and Next.js so marketers can control content and layout visually, while engineering preserves the systems that keep the site fast, searchable, consistent, measurable, and maintainable.

“Marketing velocity and engineering discipline should not be treated as opposites.”

This article explains how we designed a governed visual CMS—and how AI helped us move from a fresh Next.js repo on April 30, 2026 to a governed Plasmic-powered marketing site live on May 18, 2026. That’s less than three weeks from first commit, and about two weeks from the first Plasmic foundation commit on May 3, 2026 to launch.

The Old Website Tradeoff

Most organizations know this tradeoff:

• If every change requires engineering, marketing slows down. Landing pages wait in backlogs, campaigns launch late, and simple copy tweaks compete with product work.

• If marketing gets an unrestricted page builder, quality drifts. Pages diverge from the brand, layouts become ad hoc, SEO structure weakens, and the site becomes harder to maintain.

Designers worry about consistency. Developers worry about performance and long-term maintainability. Leadership worries about leads, rankings, and not having to rebuild the site again in a year.

We designed our new site to avoid that choice. The core idea:

“The best CMS implementations do not just enable editing. They encode the standards that make editing safe.”

Why We Chose a Governed Visual CMS Model

Plasmic is a visual CMS and page-composition layer. It lets non-developers create and edit pages in a design-tool-like interface. That made it a strong fit for our marketing and design teams.

But we did not want Plasmic to become a free-for-all canvas. Instead, we paired it with a Next.js application foundation and a coded component system that engineering controls.

At a high level, the architecture works like this:

• Next.js is the main application framework and routing layer.

• Plasmic Studio is the visual editor for most marketing pages.

• A catch-all Next.js route asks Plasmic which page matches a requested URL, fetches the data, wires up SEO tags, and renders the content through the shared site layout.

• Code-owned routes still handle things like the blog, portfolio listings, team profiles, contact flows, and API endpoints where structured data and logic matter more than visual composition.

Inside Plasmic, editors do not build from raw divs and ad hoc styles. They work with Endertech-authored React components that we register into Studio as reusable, branded building blocks.

This gives us the best of both worlds:

• Marketing can move quickly, assembling pages visually.

• Engineering defines the guardrails: design tokens, components, templates, SEO systems, analytics, redirects, and performance patterns.

How AI Helped Shape and Ship the System

AI was involved from the first strategy conversations through implementation and review—but it did not “build the site by itself.” Instead, we used AI as an accelerator around clear human direction.

“The goal was not to remove engineering from the website. It was to move engineering into the reusable systems that make marketing faster.”

Phase 1: Strategy and Framing in ChatGPT

The early work happened in ChatGPT. We used it as a thinking partner to:

• Clarify what a governed visual CMS should look like for a real marketing team.

• Decide where marketing should have full control (copy, imagery, section ordering) and where guardrails were essential (SEO, layouts, brand rules).

• Shape a communication strategy for the site—how pages should speak to buyers, what proof they should offer, and how they should frame risk and collaboration.

• Define an eight-band landing page model that could be reused across services, solutions, and campaign pages.

Those conversations turned into living documents, including:

• 01-communication-strategy.md – voice, proof, specificity, CTAs, and phrases to avoid.

• 02-landing-page-structure.md – the eight-band model and the strategic role of each section.

Phase 2: Implementation and Refinement in Cursor

Once the strategy was in place, we moved to Cursor, an AI-assisted IDE, to work directly against the Next.js repo.

Here, AI helped us:

• Inspect and navigate the growing codebase quickly.

• Implement and refine React components and utilities.

• Register components with Plasmic and wire up props and design tokens.

• Generate default content for page templates using our communication and layout rules.

• Update documentation as patterns evolved.

• Spot issues in SEO metadata, structured data, accessibility, and hydration behavior.

The system mature in three layers:

1. ET Primitives – foundational building blocks such as sections, containers, buttons, cards, media blocks, icons, prose areas, and headers. These are flexible but still branded and accessible.

2. ET Sections – opinionated full-width marketing bands built from primitives: heroes, card grids, split content bands, media feature rows, brand logo bands, FAQ/accordion sections, and CTAs.

3. ET Page Templates – complete, editable page starters that encode landing-page strategy, proof structure, SEO-aware hero roles, and brand rhythm while leaving each section editable in Plasmic Studio.

Throughout, human judgment stayed on top: we accepted, edited, or rejected AI suggestions based on our standards for code quality, UX, and messaging.

What Marketers and Designers Can Control

From a marketing and design perspective, the new system feels like a powerful—but safe—visual CMS.

Day-to-Day Editing Experience

In Plasmic Studio, editors can:

• Create and revise landing pages without opening a ticket.

• Edit copy, headings, CTAs, and imagery directly on the page.

• Reorder sections to emphasize different stories for different campaigns.

• Start from complete page templates instead of facing a blank canvas.

• Insert branded Endertech sections such as heroes, card grids, split-content blocks, logo bands, and CTAs.

• Select portfolio items from CMS-backed dropdowns so case studies stay in sync without copy-paste.

• Preview changes on staging before publishing.

The key is that marketers work inside a system that already understands the brand, not a generic site builder.

The Eight-Band Landing Page Model

Most of our landing pages follow an eight-band structure that helps visitors answer simple questions: “Do they do what I searched for? Do they understand my problem? Have they done this before? Is talking to them worth my time?”

1. Hero – Confirms the topic or service in plain language and offers a clear CTA.

2. Problem-Fit – Helps visitors recognize their situation and constraints.

3. Credibility / Trust – Uses proof points or client logos to show we are real and experienced.

4. Planning / Risk Reduction – Explains how we clarify goals, requirements, dependencies, and risks before building.

5. Relevant Work / Case Studies – Connects the page to concrete portfolio examples.

6. Technical Specificity / Capabilities – Names platforms, systems, and workflows we work with.

7. Engagement / Ways to Work – Describes what collaboration looks like.

8. Final CTA – Offers a specific, consultative next step.

Templates encode this structure from the start. Editors can still add, remove, or reorder sections, but the default path already follows a buyer-aware narrative.

Design Support Built Into the Editor

Designers benefit because the design system is not just in Figma—it is embedded into the CMS:

• Color tokens for brand oranges, charcoals, and accents are registered in Plasmic.

• Typography roles exist for hero text, section headings, eyebrow labels, body copy, and supporting text.

• Layout primitives define section widths, padding, gutters, and grid patterns.

• Curated icon sets and platform marks keep visual language consistent.

• Controlled spacing and container-width options encourage rhythmic layouts instead of one-off decisions.

Editors do not have to remember the brand rules; the components enforce them.

The Engineering Guardrails Behind the Scenes

From an engineering perspective, the site remains a disciplined Next.js application with a clear component model. Plasmic is an interface to that system, not a replacement for it.

“Plasmic gave us the visual editing layer. The component system gave us the guardrails.”

Concrete Guardrails in the CMS

We made “guardrails” specific and practical:

• Registered ET components – Editors work with Endertech-built React components inside Plasmic instead of arbitrary HTML elements.

• Section templates vs primitives – Common marketing patterns are shipped as complete sections; lower-level primitives are available for special cases.

• Controlled prop choices – Spacing, alignment, width, card variants, media layouts, and heading tags are selected from intentional options, not free-form CSS.

• Advanced overrides as the exception – Free-form class name fields exist for edge cases but are clearly labeled as advanced controls.

• Design tokens in Studio – Colors and font scales come from the same tokens the codebase uses.

• Curated icons – Editors choose from approved icon sets and platform marks.

• Safe HTML defaults – Rich text slots and component defaults are designed to avoid invalid nesting that could cause hydration issues.

• Heading control – Components expose semantic heading choices (e.g., H2 vs H3) without changing visual styling, so page structure stays healthy.

• Reusable CTA patterns – Primary and secondary CTAs follow consistent patterns pointing to real destinations, not placeholder “#” links.

• CMS-powered selectors – Portfolio and case-study sections pull from structured content rather than ad hoc copy.

• Shared site layout – Plasmic pages use the same header, footer, and navigation as code-owned pages, keeping the experience unified.

The net effect: the easiest path for an editor is also a high-quality path.

Technical SEO, Performance, and Analytics Are Built In

We designed technical SEO, performance, and analytics as part of the architecture—not as last-minute tasks.

SEO Infrastructure, Not Just Meta Tags

• Centralized metadata handling – Titles, descriptions, canonical URLs, Open Graph, and Twitter tags are emitted systematically.

• Structured data via JSON-LD – Organization, services, portfolio items, team members, and blog posts can emit appropriate schema.

• Sitemap generation – The sitemap merges navigation pages, static marketing pages, blog content, portfolio content, team profiles, and other CMS-backed URLs, with sensible priority and change-frequency settings.

• Robots policy in code – We define index/follow behavior deliberately instead of leaving it to defaults.

• Noindex for 404s and dead ends – Missing or invalid pages return proper 404 responses with noindex, nofollow.

• 100+ legacy redirects – Old URLs from the previous site map to new destinations to preserve authority and avoid broken links.

• AI-era discoverability – An llms.txt file provides curated guidance for AI crawlers and tools.

After launch, an Ahrefs audit gave the new site a 94/100 health score. That does not guarantee rankings—but it is strong external validation that a visual CMS and editor-friendly workflow can still produce a technically disciplined site when the guardrails are right.

Performance-Minded Rendering

We stop short of claiming perfect Lighthouse scores—those depend on many factors—but we consciously avoided common CMS performance pitfalls:

• Incremental Static Regeneration (ISR) – Most Plasmic marketing pages are statically generated and revalidated on a reasonable interval (often around 300 seconds), balancing freshness and speed.

• Environment-aware behavior – Staging can revalidate more frequently for faster preview loops.

• Controlled images – Images flow through a shared image component that uses Next.js optimization patterns.

• Font loading with display: swap – Reducing layout shifts while keeping typography on-brand.

• Explicit remote image domains – Only allowed sources can serve images, avoiding performance and security surprises.

Analytics and Attribution Built for Real Campaigns

Analytics is another place where many page builders stumble. We baked tracking into the architecture instead of relying solely on snippets.

• Environment-gated GA4 and Google Ads scripts – Tracking only loads where it should, not in every environment.

• First-party visit tracking – We can capture visitor/session context, landing page, referrer, gclid, path history, and scroll depth.

• Attribution-aware forms – Contact and lead flows can preserve original landing page, visited paths, and source information.

• Signals to both GA4 and backend systems – Key engagement events can be mirrored into analytics and CRM-oriented systems.

For marketing leaders, the value is simple: the site is not just easier to edit; it is better at telling you which pages and campaigns are producing qualified engagement.

What This Means for the Business

Framed for business and marketing stakeholders, the governed Plasmic + Next.js system delivers several tangible benefits:

• Faster publishing – Marketing does not wait on developers for every landing page, while still respecting brand and SEO rules.

• Lower quality risk – Editors work with approved components and templates instead of reinventing layouts from scratch.

• Stronger SEO foundations – Technical SEO is handled as infrastructure, not luck.

• More consistent brand expression – Design tokens, patterns, and content guidelines keep pages aligned.

• Better campaign iteration – You can adjust offers, proof, and CTAs quickly while keeping analytics intact.

• Maintainability over time – Engineering can improve shared components once and have those improvements benefit many pages.

• Reduced launch and update risk – Redirects, metadata, sitemap logic, and tracking are designed in, not bolted on at the end.

Lessons for Teams Considering a Visual CMS or AI-Assisted Build

If you are weighing a headless CMS, a visual editor like Plasmic, or greater AI involvement in your workflow, we see two big lessons.

1. The Right Question About Your CMS

The key question is not just, “Can our team edit pages?”

A better question is:

“Can our team edit pages without lowering the quality of the site?”

That means thinking about design tokens, reusable components, page templates, SEO systems, analytics, accessibility, and content strategy before you turn on a visual editor.

2. AI Works Best Inside Clear Standards

AI gave us the most leverage when it operated inside well-defined constraints:

• Strategy docs that defined voice, proof, and landing-page structure.

• A component model with clear boundaries between primitives, sections, and templates.

• Review loops where AI could critique drafts against our own rules.

Instead of asking AI for generic “website copy” or “React components,” we asked it to apply specific standards. That kept the work from becoming generic or inconsistent.

Talk With Us About a Governed Marketing Site

A modern CMS should give marketing teams more control, but control alone is not enough. The system also needs to protect the standards that make a website valuable: clear messaging, strong design, technical SEO, performance, analytics, accessibility, and maintainable code.

That is why we rebuilt our own site the way we did—and why we help clients do the same.

If your team is exploring a Plasmic implementation, headless CMS architecture, website rebuild, or a governed marketing workflow, we would be happy to share what we have learned.

Talk with Endertech about a governed visual CMS for your organization.