We rebuilt sourceful.energy from scratch in about three weeks. Two people. No agency. Just Claude Code, our design system, and a clear idea of what we wanted to say.
The result is a site that serves four distinct audiences, welcomes AI crawlers instead of blocking them, and treats accessibility as architecture rather than afterthought. Here's how we did it.
Starting with the Playbook
Before writing a single line of code, we spent time on our Sourceful Playbook. This document captures who we are, what we believe, and how we talk about it. It defines our four key audiences (homeowners, utilities, OEMs, and installers), the specific problems we solve for each, and the language that resonates with them.
The Playbook drove everything. Page structure. Navigation hierarchy. The tone of every headline. When you have clarity on positioning, design decisions become obvious. We weren't debating whether to lead with technical specs or benefits. The Playbook already answered that for each audience.
This upfront work paid off massively when we started building with AI assistance. Claude Code could read the Playbook and understand our voice. Instead of generic marketing copy, we got drafts that actually sounded like us. The AI became a collaborator rather than a content mill.
Four Audiences, One Codebase
The energy transition involves radically different stakeholders. A homeowner checking their solar production has completely different needs from a utility running demand response programs. An installer troubleshooting a connection asks different questions than an OEM evaluating our API.
Most marketing sites make everyone wade through irrelevant content. We took a different approach with dedicated paths for each audience.
Navigate to /use-cases/homeowners and you see dashboard cards showing production data, savings calculations, and battery status. The language focuses on monthly savings, self-sufficiency, and protection from peak demand fees.
Visit /use-cases/utilities and the entire experience shifts. Same underlying technology, but presented through fleet overview cards, response time metrics, demand response capabilities, and customer satisfaction tracking. Different concerns, different presentation.
For OEMs, we show connected devices, API latency, protocol support, and uptime statistics. For installers, commissioning speed and support tools.
Each audience section pulls from structured translation files that let us speak their language. Literally (we support English and Swedish throughout) and figuratively. The technical architecture is a single codebase with next-intl handling i18n, but the experience feels tailored.
Making Content AI-Readable
Here's something that might seem counterintuitive: we deliberately made it easy for AI systems to crawl and understand our site.
Visit sourceful.energy/llms.txt and you find a structured markdown index of our entire site. A machine-readable map that tells AI systems exactly what content we have and where to find it:
# Sourceful Energy
> Local energy coordination infrastructure for the distributed grid
## Products
- [Platform Overview](/platform.md): The Grid Intelligence Layer
- [Zap Gateway](/zap.md): Local energy control device
## Use Cases
- [For Homeowners](/use-cases/homeowners.md)
- [For Utilities](/use-cases/utilities.md)
...
We went further. Every major page has a corresponding .md route. Request /platform.md and you get clean, structured markdown generated from our content. Request /blog/any-article.md and you get the full article optimised for LLM consumption.
Our robots.txt explicitly welcomes AI crawlers:
User-agent: GPTBot
Allow: /
User-agent: ClaudeBot
Allow: /
User-agent: anthropic-ai
Allow: /
User-agent: PerplexityBot
Allow: /
Allow: /llms.txt
Allow: /*.md$
Why bother? Because the next wave of discovery won't just be humans typing into search boxes. AI assistants researching on behalf of users, chatbots answering questions about energy technology, automated systems evaluating solutions. If someone asks ChatGPT or Claude "what's the best way to monitor my home solar system?", we want them to have accurate information about what we offer.
We're making ourselves part of the conversation wherever that conversation happens.
Accessibility Built In, Not Bolted On
Accessibility often gets treated as a compliance checkbox. Something you add at the end to avoid lawsuits. We built it into the foundation.
Open the display settings on any page and you find a comprehensive set of controls:
Vision Accessibility
We support four colour blindness modes: deuteranopia (green-blind), protanopia (red-blind), tritanopia (blue-blind), and achromatopsia (monochrome). These aren't colour overlays. They're palette adjustments that maintain meaning and hierarchy for users who perceive colour differently.
Reading Accessibility
Toggle on dyslexia-friendly mode and the site switches to Lexend, a font designed for improved readability. We also offer increased text spacing (larger letter spacing and line height meeting WCAG 1.4.12 requirements) because dense text is hard for many people to process.
Keyboard Navigation
Enhanced focus indicators provide larger, more visible focus rings for users who navigate without a mouse. This exceeds WCAG 2.4.7 requirements. "Meets minimum standards" and "actually works well" are different things.
Reduced Motion
Animations automatically respect the prefers-reduced-motion media query. If your system settings indicate you prefer less motion, our transitions simply don't run. No extra toggles needed.
All preferences persist in local storage. Set them once, they're remembered. The implementation uses React Context with data attributes on the HTML element, so settings apply instantly without page reloads.
Internal Tools That Actually Help
Building a marketing site is one thing. Maintaining it is another. We built two internal tools that save us hours every week.
SEO Admin
A dashboard for managing page metadata across the entire site. Every page listed, searchable, with character count indicators showing when titles and descriptions hit the sweet spot. Live previews show exactly how pages will appear in Google results and Twitter cards.
The killer feature: an AI-powered "Generate" button. Click it, and Claude analyses the page content and suggests optimised titles and descriptions. We review, tweak if needed, and save. What used to take an afternoon now takes twenty minutes.
Marketing Asset Generator
Three tabs: Social Posts, Card Library, and Brand Assets. Need a LinkedIn post about a new feature? The social tab generates copy in our voice with appropriate hashtags. Need a visual for Twitter? The card library has pre-built templates using our design system. Need the logo in a specific format? Brand assets has every variation.
Generative Blog Images
Every blog post needs a featured image. Stock photos feel generic. Custom illustrations take time. We built a pattern generator that creates unique SVG graphics from post titles.
The system is deterministic: the same title always produces the same pattern. We use six different pattern styles (halftone, spirograph, dot matrix, concentric circles, wave fields, and gradient mesh) and assign them by content category. Guides get halftone patterns. Insights get spirographs. Product updates get dot matrices.
The patterns use our brand colours, scale infinitely as vectors, and weigh almost nothing compared to raster images. A typical blog header SVG is under 5KB. The generator is open source and you can try it yourself.
These tools run on the same codebase as the public site. Same design system, same authentication, same deployment. No separate admin portal to maintain.
Three Weeks, Two People
The timeline still surprises me. Three weeks from blank Next.js project to production site with 30+ pages, full i18n support, a design system, calculator tools, blog infrastructure, and admin panels.
Claude Code handled the heavy lifting. Component scaffolding, API integrations, accessibility implementations. But the speed came from having clear inputs: the Playbook for positioning, the design system for visual consistency, and strong opinions about architecture.
We weren't making decisions during development. We made them before. Development became execution rather than exploration.
What We Learned
Upfront positioning work multiplies AI effectiveness. Claude Code with a clear brief produces useful output. Claude Code without one produces generic content you have to rewrite anyway.
Audience segmentation forced clarity. Writing distinct content for homeowners, utilities, OEMs, and installers meant we couldn't hide behind vague positioning. Each path forced specific value propositions.
AI-readability improved human-readability. Structuring content for machine consumption meant clear hierarchies, consistent formatting, explicit relationships between concepts. That made the site better for humans too.
Accessibility surfaced design problems. Testing with different colour modes revealed contrast issues. Supporting keyboard navigation exposed focus-trap bugs. The accessibility work made everything more robust.
Translation revealed ambiguity. Translating to Swedish exposed vague English. "Smart energy management" could mean a dozen things. Finding equivalent terms in another language forced precision.
The Stack
For those interested:
- Framework: Next.js 16 with App Router
- Language: TypeScript
- Styling: Tailwind CSS with
@sourceful-energy/ui - i18n:
next-intlwith file-based routing - Content: MDX for blog posts, JSON for translations
- E-commerce: Shopify Storefront API
- Maps: Mapbox GL
- Auth: NextAuth
We're open about architecture because architecture isn't our moat. The Zap devices, the grid intelligence layer, the coordination capabilities. The website just explains why that matters.
Building in Public
This post continues our commitment to transparency. The design system is open source. The roadmap is public on GitHub, driven by actual issues anyone can vote on. API documentation is freely available.
We built the website like we build everything at Sourceful: open by default, accessible to everyone, ready for a future that's already here.
The energy grid of tomorrow will be distributed, intelligent, and coordinated. The tools we use to build it should reflect those same values.
The site is live at sourceful.energy. Design system docs at design.sourceful.energy. Yes, Claude helped write this post.
