Headway

A Headway affiliated partner needed a production-ready website for the global forex broker that could drive registrations at scale. The site needed to be fast, SEO-compliant, and visually aligned with the Headway brand. No development team was available, so the entire build had to be executed solo under a tight 3-month timeline. Early in development, AI-generated output introduced recurring issues: meta titles and descriptions that exceeded Google's pixel limits, inconsistent design patterns across pages, and non-semantic HTML structures.

Technical Architecture

Built the entire website using Next.js with AI-assisted development tools, directing code generation through structured prompting. Every component, layout decision, and interaction was guided by my instructions. Manually configured the domain-to-hosting connection, set up a GitHub repository with Vercel integration for automated CI/CD deployments, and configured Cloudflare CDN with caching rules to ensure global performance.

UX/UI Decisions

Led the full visual direction including information architecture (site architecture in SEO terms), layout structure, color system, typography hierarchy, and responsive behavior. Defined the page hierarchy and content flow to optimize both user experience and search engine crawlability. The design maintains consistency with the Headway brand identity while optimizing conversion paths for forex registration.

SEO & Content Strategy

Directed and corrected all on-page SEO elements: semantic HTML structure, meta tag implementation, heading hierarchy, structured data markup, and image optimization. AI-generated markup was systematically reviewed against SEO best practices to ensure proper search engine indexing.

Challenge 1: Non-Compliant Meta Values

AI code generation tools consistently produced meta titles exceeding Google's 580px display limit and meta descriptions beyond the 920px threshold. Heading hierarchies were incorrect, schema data was improperly structured, and canonical tags were frequently missing or duplicated.

Challenge 2: Inconsistent Design Output

Without persistent design constraints, the AI produced visually inconsistent components across pages: mismatched spacing, typography that drifted from the brand system, and color values that varied between sections.

Solution: Custom System Prompts

I wrote custom system prompts (agentic instructions) that encoded SEO constraints and design rules directly into the AI's behavior. The SEO prompt enforced strict pixel limits for meta values, required semantic HTML structure, and mandated schema validation. The design prompt established a design system defining the exact color tokens, spacing scale, and typography hierarchy so every generated component stayed consistent with the Headway brand. This eliminated the need for manual correction on every output and turned the AI into a reliable, rule-following development tool.

Performance (Desktop)

100

Performance (Mobile)

94

Best Practices

100

SEO Score

100

Verified via Google PageSpeed Insights.

This project proved that AI-assisted development can deliver production-grade results when directed by someone with domain expertise. The key lesson was that ad-hoc prompting is not enough for consistency. Writing structured system prompts that encode SEO rules and design constraints transformed the AI from an unpredictable tool into a reliable one. For the next version, I would integrate a headless CMS to allow the affiliated partner to update content independently without requiring code changes or redeployment.