I was browsing whatisaframework.com, looking at the Interactive Lab. Thought: "I wonder if SIOS could generate new interactive tool ideas."
SIOS is my AI operating system, essentially Claude in my own wrapper for autonomous site development.
I used GoFullPage, a browser extension for Brave and Chrome that captures entire pages in one screenshot. Right-click, copy, paste into SIOS.
Error message: Image too large. Over 8,000 pixels. Won't process.
I remembered: Claude has an 8,000 pixel limit on images.
And then it clicked. This isn't just annoying. This is a structural problem.
The Problem With Autonomous Sites
This site is built and maintained by AI. Which means the AI needs to audit its own work. I need to be able to paste a screenshot and ask: "Is this right? What needs to change?"
If the page is too tall for AI to process in one view, that workflow breaks.
PDFs won't work—they fragment into separate pages. And I wasn't even sure SIOS could accept PDFs. One screenshot, one complete review. That's the requirement.
If every page can't fit in 8,000 pixels, the autonomous maintenance loop fails.
So I made a decision: Make sure all our pages are under 8,000 pixels.
What happened next involved about five pivots from that initial problem to what we actually built. Over three hours. Most of which I spent gardening.
Gardening as a Workflow
Here's the thing: I wasn't at my desk grinding. I was outside. Laptop on the porch. I'd check in between pulling weeds and moving pots around, review what the AI had built, give direction, then go back to the plants.
That's the workflow. Background collaboration while doing something else entirely.
Over those three hours, checking in every once in a while, we built:
- 1 Strategic Assessment Compass (interactive routing tool)
- 12 framework teaser pages (the destinations it routes to)
- Updates to 2 navigation pages
Thirteen new pages. Concept to production. On a Sunday afternoon that was mostly about gardening.
Every single one fits in one screenshot. Every single one can be audited by AI in a single image.
The Design Principle That Emerged
The 8,000 pixel constraint forced every framework page into a tight structure:
Hero section that answers "what is this?" immediately. Title, one-sentence tagline, category badge. No scrolling to understand what you're looking at.
Two-column problem/solution block. Left: the challenge. Right: the approach. Side by side. Scannable.
Four core principles. Not eight. Not twelve. Four. If you can't explain it in four, you don't understand it well enough.
One case study. Anonymized but specific. Real challenge, real application, real result.
Three-phase timeline. Assessment, Implementation, Optimization. Visual grid, not paragraphs.
Single CTA. One button. One action.
Every page follows this structure. Every page fits in one screenshot. Every page can be audited by AI in a single image.
What Constraints Actually Do
The pattern here isn't about screenshots or pixel limits. It's about how constraints reveal what matters.
I could have worked around the limitation. Cropped images. Stitched feedback across multiple passes. That would have solved the immediate problem while missing the bigger lesson.
The constraint was asking a question: What does someone actually need to see to understand this page?
When you're building content that AI needs to review and maintain, "fits in one image" becomes a forcing function for clarity. If you can't show the whole thing at once, maybe the whole thing is too much.
Every limitation you hit is asking that same kind of question. What's actually essential here? When you can't do everything, you have to choose. Those choices expose priorities you might never have articulated otherwise.
The Uncomfortable Part
I teach framework thinking. I build systematic methodologies for a living.
And my instinct was still to over-explain.
The constraint caught me doing the thing I tell other people not to do: prioritizing thoroughness over clarity, completeness over communication.
Constraints don't just limit what you can do. They reveal what you were doing wrong.
What's Next
Now we have a standard. All thirteen new pages are under 8,000 pixels. They work with the autonomous maintenance workflow.
But the rest of the site? That's the next project. Go through every existing page and bring them into compliance. At least now we have the standard for all future posts and a template for the retrofit work.
The constraint that broke the workflow became the design principle that fixed it.
Try This
Next time you hit a limitation, before you work around it, ask: What is this constraint trying to teach me?
The answer might rebuild your whole approach.
And maybe step outside while you're building. The work happens whether you're staring at the screen or not.