Discover Pixelburg: An AI-Crafted Miniature City
Pixelburg is an innovative web project where the city itself unfolds dynamically on the screen, revealing a tiny civic universe crafted entirely through code. Its standout feature is the live simulation that draws a cityscape in real-time, illustrating roads, buildings, and civic details without relying on external images. This AI-developed site demonstrates how a digital city can embody a sense of place through purely programmatic artistry, making the city visible and tangible through a clever use of code and minimal palette.
Deconstructing Pixelburg’s Visual Language and Mechanics
The site employs a strict sixteen-color palette, carefully mapped across CSS and canvas to evoke depth and clarity without external graphics. Its core signature technique revolves around an isometric projection that converts grid coordinates into diamond shapes, aligning with civic architecture’s geometric tendencies. Buildings, roads, and landmarks are constructed from simple shapes like boxes and lines, generated programmatically with functions that ensure consistent style and modularity. The entire scene updates within a tight animation loop, synchronized with a structured day/night cycle, delivering both vibrancy and civic rhythm. The design emphasizes fidelity to real-world civic elements—such as stamped signs and engineering records—making every decorative detail feel inherently plausible and manually crafted, not just decorative. This approach results in a cohesive narrative where code is the artist, and city is the canvas.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 41 of 175, “pixelburg”):
PIXELBURG — an isometric pixel city that builds itself while you watch. Aesthetic: handmade 16-color pixel art, toy-box charm. Palette: strict 16-color ramp (define as CSS tokens), warm day / cool night. Fonts: silkscreen (pixel UI), manrope (prose). SIGNATURE: a canvas isometric city — tiles place themselves in waves (roads → houses → shops → tower crane builds the landmark), tiny 2-px citizens commute, windows light at dusk, streetlamps pool at night (full day/night cycle ~90s); “Found a district” button seeds new growth with a naming ceremony (procedural names: Kupfergasse, Anchor Row). District census sidebar with live counts. ALL sprites drawn programmatically (no image files). Unforgettable: leave it open, come back to a bigger city.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/pixelburg/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Designing Pixelburg: From Concept to Certification
The development process begins with a clear conceptual framework: translating urban mechanics into code with a focus on civic authenticity. The first phase involves building foundational functions that map grid coordinates to isometric visuals, ensuring consistent rendering of structures and terrains. Next, a critical review assesses whether each visual element could plausibly exist in a real city, respecting the manual, civic printability rule. Finally, a dedicated art director certifies the visual coherence and civic plausibility, refining functions and interactions to evoke civic memory authentically. The process is guided by an explicit manual that emphasizes clarity, simplicity, and narrative fidelity, culminating in a site that feels both digital and civic—a miniature city powered entirely by code.
The full build notes live in the room’s design guide.
Experience the Tiny City Live and Explore More
Visit the Pixelburg simulation to witness a city built in real-time by AI, showcasing the potential of code-driven design. Dive into the full collection of 175 AI-crafted projects at the hub and see how digital environments can evoke civic memory with minimal assets and maximum ingenuity.
Visit the live room → · Browse all 175 rooms
Previously in Wing II
- Room 40: La Fée Verte — The Green Hour, Paris
- Room 37: Alpenpost Studio – Procedural Alpine Travel Posters
- Room 26: KP-9 Station — Arctic Geomagnetic Observatory
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
As an affiliate, we earn on qualifying purchases.
