How We Turned a Client Project Into an AI-Powered Website Factory

The Context: An Experiment With Real Stakes

This project started as an internal experiment. At Sancrisoft, we'd been using Claude on client work for months, and I noticed we kept repeating the same patterns: discovery questions, architecture decisions, component structures, CMS setup. I would like to know if I can systematize this into something reusable for the team.

To validate the idea, I needed a real project. Not a demo. Not a fictional brand. Something with actual requirements and a real person who would use the result.

Joizeth Waldmann became my test case. She's a John Maxwell-certified coach with 15 years of experience, a growing audience, and a website that no longer reflected her brand's evolution. When I proposed redesigning her site as a proof of concept, she agreed.

The requirements were real:

• A modern, premium-feeling site that matched her coaching brand

• Bilingual support (Spanish and English) for her international audience

• A CMS that she could update herself without touching code

• Newsletter automation for her blog

• Workshop registration forms with email confirmations

I gave myself one constraint: 48 hours of focused work. Not because she demanded it, but because I wanted to stress-test what was actually possible with a structured AI-assisted system.

Where it stands now: The site is live at intenzio.vercel.app. Joizeth loved the redesign. My partners at Sancrisoft saw the results and immediately asked if we could productize the skill. But I want to be clear: this isn't a polished success story. The site isn't in full production yet, there are CRM integrations pending. And we're still deciding whether to offer the skill as a service or run more internal tests first. This is a case study of work in progress. That honesty is part of the point.

The Approach: Building With Intent

Phase 1 — Design Before Code

I started with discovery, but not the usual kind. Instead of jumping into Figma, I created a detailed prompt for an AI design tool (Gemini) that captured everything about the brand: colors, typography, content structure, animation styles, even the emotional tone the site needed to convey.

That prompt alone was 976 lines. It specified turquoise as the primary color, Playfair Display for headlines, glassmorphism for cards, and exactly which CSS animations to apply. I was essentially writing a complete design system before writing a single line of code. This front-loaded investment paid off at every stage that followed.

The approach reflects something we've formalized across our team: AI tools amplify structure. A vague prompt produces vague output. A detailed brief produces something buildable. The same principle behind the structured AI development workflow we use on client projects applies here, specificity at the input stage reduces rework at every stage downstream.

Phase 2 — From Mockups to Production Components

With AI-generated HTML mockups in hand, I fed them into Claude Code and asked it to convert them to Next.js 14 with TypeScript and Framer Motion animations. This is where Claude Code's agentic capabilities, the ability to navigate the file system, execute terminal commands, and chain multi-step tasks made a measurable difference.

The Build Timeline

Jan 14, morning: Initial Next.js 14 setup + project architecture

Jan 14, afternoon: Contentful CMS integration with Live Preview

Jan 14, evening: Newsletter automation system with webhooks

Jan 15: Forms, validations, email templates, i18n setup

Jan 16: Full bilingual support, final polish, Vercel deploy

48 commits. 31 React components. 3 days. A working, CMS-powered, bilingual marketing site deployed on Vercel with edge functions.

What Worked and What Didn't

What Worked

The modular CMS pattern proved its value immediately. Instead of creating rigid page types in Contentful (homePage, aboutPage, servicesPage) I created reusable modules: moduleHero, moduleGrid, moduleFaq. These can be assembled into any page configuration. The site owner can now rearrange entire pages from the CMS without touching code. For a coach managing her own content, this was the difference between a tool she'd actually use and one she'd eventually abandon.

This approach aligns directly with what we offer through our headless CMS development practice, flexible content architecture that separates structure from presentation and gives non-technical owners real control.

Giving Claude Code external memory turned out to be the most important architectural decision of the project. Claude Code doesn't magically remember everything across long sessions. Context gets compacted, sessions restart, continuity breaks. The workaround is simple but non-obvious: keep key decisions in files the AI can re-read. My PLAN-ARQUITECTURA.md became the single source of truth I referenced at the start of every new session. As Atlassian's documentation guidance frames it — documentation isn't overhead, it's institutional memory. With AI tools, that principle is literal. Your architecture docs become the AI's long-term memory.

This is also one of the core behaviors behind our AI development principles: we direct, AI executes. The documentation structure is what makes that direction consistent across sessions.

What Required Iteration

Email rendering was the most time-consuming challenge, and also the most predictable one. Anyone who has built HTML emails knows: what works in a browser fails in Outlook, Gmail, and Apple Mail simultaneously. I went through six commits in one day cycling through SVGs, external PNGs, inline PNGs, and finally HTML entities before finding a cross-client solution. Understanding email rendering compatibility across clients remains one of the domains where brute-force testing against real environments is still unavoidable. Claude Code helped generate variations quickly, but the validation loop was still manual. AI accelerates iteration; it doesn't eliminate it.

The i18n middleware also needed a rewrite. My first implementation used client-side routing for language switching, which caused locale state to desync. Following Google's internationalization best practices, I rewrote it to use full page navigation, slightly less smooth on transition, but reliably correct. Correctness over elegance, especially on a bilingual site where the wrong language on load is a UX failure.

The Pivot: Extracting the System

The site was deployed. The redesign had landed well. I was about to close the project.

Then I paused.

I looked at what I had built and recognized something: I had followed almost the exact same process we follow on every marketing site at Sancrisoft. Discovery questions. Architecture decisions. Design prompts. Component structure. CMS patterns. Deployment checklist. The process was consistent, but it lived only in my head.

So I opened a new Claude Code session with a single prompt:

"Review everything inside /intenzio. This site was built with a system. Extract that system."

That session became the foundation of the marketing-site skill. This is the pattern we describe in our AI workflow guide: AI as a participant in systematizing knowledge, not just executing tasks. For a deeper look at how this same agentic approach plays out under production pressure in a regulated environment, the Claude Code healthcare case study documents a similar extraction, a 4-day HIPAA-compliant MFA implementation that also produced reusable patterns for the team.

The Results: One Project, Two Outputs

The Website (Intenzio)

• Live at intenzio.vercel.app

• 5 main pages + legal pages + blog

• Full CMS control via Contentful, no developer needed for content updates

• Bilingual (ES/EN) with automatic language detection

• Newsletter with automated blog notifications

• Workshop registration with email confirmations

• Deployed on Vercel with edge functions

The Skill (/marketing-site)

• 6 modular sub-skills: discovery, architecture, design-prompts, implementation, contentful, i18n

• Documented processes covering every repeating decision point

• A state machine that tracks progress across sessions, solving the memory problem structurally

• Auto-repair capabilities for common build errors

• Human-in-the-loop only at genuine decision points, not mechanical ones

The skill isn't magic. It's captured knowledge. Every time we use it at Sancrisoft, we're not starting from scratch, we're starting from the lessons of this project and every refinement since. That compounding is the actual value. One project that produces a deliverable has linear returns. One project that produces a system has exponential ones.

The AI in QA testing practices we apply across our engagements follow the same logic: invest once in the right structure, reuse it at scale with maintained quality.

Lessons for Teams Considering AI-Assisted Development

1. Document while you build, not after. I wrote the skill documentation during the Intenzio project, not as a retrospective. Decisions captured while the reasoning is fresh are qualitatively different from reconstructed notes. This is consistent with modular design pattern thinking, reusability requires intentional capture, not coincidence.

2. AI tools amplify patterns, not chaos. Claude Code was effective because I fed it structured inputs: a detailed 976-line design brief, clear architecture docs, consistent naming conventions. The principle that GitHub's research confirms at scale holds true at the project level: AI accelerates what is already structured. Garbage in, garbage out still applies.

3. Give the AI external memory. Keep key decisions in markdown files and reference them explicitly at the start of each session. CLAUDE.md, architecture docs, and decision checkpoints become the AI's working context. This is not a workaround, it is the intended pattern for production AI-assisted development.

4. The meta-skill is the real product. The website was the deliverable. The skill is the asset. One serves a single client; the other compounds with every use across the team.

5. Human judgment remains irreplaceable. The skill handles the how, not the what or why. A human still needs to understand the context, validate design choices, and decide when to break the rules. This is the principle at the center of our AI development principles: AI proposes, engineers approve.

6. Start with one project, extract later. I didn't set out to build a reusable system. I built a website, noticed the patterns, and codified them. Theory follows practice, not the other way around.

What This Means for Your Team

The question this project raises is not "can AI build websites faster?" it clearly can. The more interesting question is: what patterns in your own development process are you repeating without systematizing?

Every engineering team has recurring workflows that live in someone's head. Discovery rituals, CMS configuration decisions, deployment checklists, component naming conventions. AI-assisted development doesn't just speed up execution, it creates the forcing function to document and systematize those patterns in ways that compound over time.

At Sancrisoft, our web development team in Medellín applies this approach across client engagements, building not just the deliverable, but the documented, replicable process that makes the next project faster, more consistent, and easier to hand off. That is the compounding advantage of structured AI development.

If your team is building marketing sites, client platforms, or internal tools with repetitive architecture decisions, and you want to do it with the speed of a 48-hour sprint and the discipline of a production-grade system, that is the kind of problem we are set up to solve.

Schedule a consultation with our team. We'll walk through your current development workflow, identify where AI assistance creates the most leverage, and talk honestly about what a structured engagement looks like. No pitch, just engineers talking about what's actually possible.