Clash of Code · Devs vs Vibe Coders

Art direction review · 24 Oct 2026

Ten waysto start a fight

The same live match, the same season and the same real data, told as ten different worlds: five borrowed from games, then five built from developers' own tools. The eleventh blends your two favourites. Each one is a full landing page built to make people pick a side, judge the apps and add to the pot.

How to review

  1. Open each concept on your laptop, then on your phone.
  2. Press things: the vote buttons, the art, the join cards. Every concept has one signature interaction.
  3. Stick your dots. You have three: put them all on one concept or spread them.

Your dots

Loading your dots…

Your dots are saved, and everyone sees them on the prints.

Series 1 · Concepts 01–05

Game worlds

A Clash of Clans war map, an arcade fighter, a Splatoon turf war, a trading card game and a comic book.

Concept 01 · Clash of Clans × the motherboard

Base Raid

Your village is a motherboard. Your walls are keycaps.

The world
A sunny war map on a cartoon circuit board, with a Clash of Clans resource bar and BUILD and JUDGE buttons pinned to the corners, as in its October 2026 redesign.
Devs vs Vibe
The Keep, a fortress of keycaps and server racks, against The Spire, a floating tower of glowing prompt crystals and chat bubbles.
Signature
Every button is a keycap that presses down. Voting fires a cannonball or a sparkle bolt at the CPU, which carries the brief.
You share
Your troop card. Ada's says Lv 10 Backend Barbarian, weakness: CSS.
Watch out
The furthest from today's site: bright, light and illustration-heavy. Troop classes and the Judge Pass are new ideas, but its points are the app's real rules.
Open Base Raid

Concept 02 · 16-bit arcade fighting game

Insert Coin

Round 3. Fight.

The world
The site is an arcade cabinet: a marquee with chase lights, CRT screens, a printed move list and a control panel whose buttons are the sign-ups.
Devs vs Vibe
A hard-edged pixel dev with headphones and a keyboard shield against a soft, dithered mage with a glowing orb and a robot familiar.
Signature
A Street Fighter II HUD: the health bars read "votes ???" and the timer is the real countdown. Voting fires a special move. Press 1 or 2 to vote, and try the Konami code.
You share
Your fighter card, with stats from your bio. Ada gets PHP 5/5 and CSS 1/5.
Watch out
Arcade style is familiar ground, so this one wins on wit. The pixel portraits don't look like the real players.
Open Insert Coin

Concept 03 · Splatoon × laptop stickers

Turf War

Pick a colour. Cover the city.

The world
A night wall where two crews fight in glossy wet ink, with a laptop lid full of stickers from both camps.
Devs vs Vibe
Sharp, stapled black posters and terminal stickers against rounded, shimmering posters and holographic stickers.
Signature
Your cursor paints the wall. Voting sprays ink from behind the poster. Past rounds are painted turf where the territory is the real vote share.
You share
Your sticker: type a handle, pick a side and download it as a PNG.
Watch out
The heaviest page to draw. Slow machines may stutter for a moment when the ink first appears.
Open Turf War

Concept 04 · Trading card game

Holo Deck

Every player is a card. The public decides who stays in the deck.

The world
A midnight card table. The brief is the field card, both apps are in play, and each team's hand is fanned below.
Devs vs Vibe
Cut-corner machined-steel cards with falling code, like the Matrix, against rounded iridescent glass cards with galaxy sparkle. You can tell them apart from the outline alone.
Signature
Holo foil that follows your pointer. Voting lifts the card and stamps "Your pick". Knocked-out players are torn, grey cards.
You share
Your player card: name, handle, a move, your bio as flavour text and a verified seal. A booster pack tears open to reveal it.
Watch out
The most premium of the five, and the least cartoony: it reads as collectible more than battle.
Open Holo Deck

Concept 05 · Spider-Verse comic book

Issue #3

Every round is a new issue. You decide the ending.

The world
A printed comic page: halftone dots, misregistered ink and caption boxes that narrate the round. Captains' speech balloons carry the app pitches.
Devs vs Vibe
A </> smashing through a brick wall in angular cobalt panels, against a sparkle bursting from a prompt bubble in wavy coral ones.
Signature
The sealed vote reads "The result? Next issue!" Past rounds are back-issue covers, and the letters page is real judge feedback with replies from the editor.
You share
Your own comic cover.
Watch out
The longest page on a phone. The weekly-issue framing is also a ready-made format for emails and posts.
Open Issue #3

Series 2 · Concepts 06–10

Terminal & tech

Five more, built from the tools developers use every day: a terminal app, a merge conflict, a 1984 memory battle, a war-room computer and a boot menu. In 2026 the terminal is where both teams work, so the Vibe Coders get their own voice in every one: prompts, agent steps and sparkles.

Concept 06 · The site is a terminal app

Terminal Velocity

Two panes. One brief. Watch them build.

The world
The whole page is a terminal app: titled panes, a status bar and a working command line, floating over a dithered war map whose blue-and-coral front line shows through every gap.
Devs vs Vibe
A Dev types the app by hand in a vim-style editor, typos and all. A Vibe Coder’s agent builds it from a prompt, thinking out loud and ticking off steps.
Signature
A split-screen replay of build week. Drag the divider and the front line moves with it, then springs back: “fair split”. Every command can be typed or tapped.
You share
Your clashfetch card, in the style of the neofetch screenshots developers already post. Type clashfetch kira to print anyone’s.
Watch out
The most developer-only of the ten. Public judges may miss the jokes, although every command also has a button.

Concept 07 · Git and the code editor

Merge Conflict

Two branches. One brief. You resolve the conflict.

The world
A light code editor of our own. The file tree is the menu, the brief is the file’s heading, and the two apps sit in a merge conflict.
Devs vs Vibe
The current branch in blue against the incoming branch in coral. Devs are square, Vibe Coders are round, and the season is a commit graph with one lane per team.
Signature
Giant conflict markers as the headline type. Voting is “Accept Devs” or “Accept Vibe Coders”: the other side strikes through and folds away. “Accept both” is greyed out, because judges pick one.
You share
Badges for your GitHub profile page, with a snippet to paste.
Watch out
The only light concept, and the calmest. Every developer gets the joke at once; people who have never seen a merge conflict won’t.
Open Merge Conflict

Concept 08 · The 1984 programming battle

Core War

Two programs. One memory. Human judges.

The world
Core War, the 1984 game where two programs fight over a computer’s memory, drawn as a glowing plane of 800 magnetic-core rings.
Devs vs Vibe
The Devs’ program is a “stone” that drops bombs placed by hand. The Vibe Coders’ is “paper” that copies itself everywhere. Square steel against rounded glow.
Signature
A real battle runs in the hero, and it’s never the same twice. Hover any ring to see its instruction, show the code or call a rematch. Your vote is written into one ring at the centre.
You share
Your warrior file. Your handle seeds a tiny battle, so the pattern on your card is yours alone.
Watch out
The most original and the nerdiest: it takes one sentence of explanation. The battle is labelled as an exhibition, not the vote.
Open Core War

Concept 09 · A 1983 war-room computer

Strange Game

Shall we play a game?

The world
A 1983 war-room computer and its glowing vector big board, in homage to the hacker films of the time. No film names and no nuclear imagery.
Devs vs Vibe
A coastline made only of right angles, with an island shaped like >_, against a soft coast of curves, sparkles and speech-bubble islands.
Signature
“SHALL WE PLAY A GAME?” lists programming’s holy wars, from tabs vs spaces to vim vs Emacs, and only Devs vs Vibe Coders is available. Voting means turning a key.
You share
A clearance badge on a lanyard, with a barcode made from your name.
Watch out
The film nod lands hardest with people over 35, but the holy-wars joke works on everyone. The map labels are small on phones.
Open Strange Game

Concept 10 · A boot menu that picks your side

Dual Boot

One machine. Two operating systems. Pick which one boots.

Dual Boot booted as the Devs: a black text console
Booted as Devs
Dual Boot booted as the Vibe Coders: Vibe OS, with warm frosted glass
Booted as Vibe Coders
The world
The page opens on a blue firmware screen with a boot menu. Pick a side and the whole site reboots into that team’s system. Judges get safe mode.
Devs vs Vibe
A black text console with [ OK ] boot lines against Vibe OS: warm frosted glass, an assistant orb and question bubbles for headings.
Signature
The reboot. The screen powers off like an old monitor, boots, and comes back as your side’s system. It remembers your choice.
You share
Your login screen: Ada’s console login, Grace’s lock screen or Jo’s judge profile.
Watch out
Three looks to keep in step for every new section. But it’s the only concept where picking a side is the very first click.
Open Dual Boot

Series 3 · Concept 11 New

The blend

Your two favourites in one: Holo Deck's trading cards, played inside Merge Conflict's editor. The cards are the show. The Explorer, the file tabs and the status bar are how you get around.

Concept 11 · Holo Deck × Merge Conflict

Deck Builder

Every file opens onto the card table. Your vote is the one save you get each round.

Deck Builder mid-vote: the ballot panel is open and a mini card flies from the picked app into the status bar
Lock it in, or press ⌘S, and the card flies into the status bar
Deck Builder on the Bracket A tab after voting in Bracket B: both vote buttons read Vote played
One vote per round: the other bracket reads "Vote played"
The world
A dark code editor whose files are card decks. Merge Conflict's Explorer is the menu, with a plain-English line under every file. Each section is a file with its own tabs, and the status bar carries the live match on every screen.
Devs vs Vibe
Holo Deck's materials, unchanged: cut-corner machined steel with prism foil against rounded iridescent glass with galaxy sparkle. The top edge of the status bar is the clash line, and your pick pushes it 5% toward the other side.
Signature
Voting is saving. Play a card and a ballot panel slides up. Lock it in and a mini card flies into the status bar, the tab's unsaved dot turns into a tick and the Explorer marks the round as voted. Both brackets sit in tabs, and judges get one vote between them, as in the real app.
You share
Your player card from the starter pack. The decks also open as a list in the style of git blame, so anyone can check who really writes code.
Watch out
Dark only, like Holo Deck. Between 1100 and 1275px wide the Explorer pushes the match into two rows, so the vote buttons sit below the fold on those laptops.
Open Deck Builder

If I had to ship one of the ten

My dot moves to Strange Game

It mixes both halves of your brief best. Base Raid answers the Clash of Clans half: a war map you want to play on. Strange Game is a war map too, with two coastlines and a front line, but every pixel of it is a computer. Its opening joke works on developers and everyone else: programming’s holy wars, and only one of them you can actually play. Its sign-up moment is built in, too: the console asks “Which side do you want?”

Runner-up: Terminal Velocity. It’s the purest answer to “more terminal”, and the one developers will screenshot. It’s also the least friendly to judges who don’t code.

If most of your judges aren’t developers, Base Raid is still the safer bet: it’s the easiest of the ten to love at first sight.

Worth stealing whichever you pick:

  • Dual Boot’s boot menu: make “pick a side” the first click, in any world.
  • Merge Conflict’s vote words: “Accept Devs” or “Accept Vibe Coders”, and “staged until voting closes” for the sealed count.
  • Core War’s live battle as a hero animation. It’s real, and never the same twice.
  • A shareable card with every player’s name and handle. All ten concepts show it works in any world.
  • Issue #3’s weekly-issue framing for the emails and posts that bring people back.

What the research says

Every concept follows these rules. Each note ends with what it changed in the designs.

Series 1 · Game worlds

Make the sides different worlds, not different colours

In a study of 1,285 sports fans, a team's distinctiveness drove how strongly people identified with it. Prestige had no effect.

Devs and Vibe Coders are built from different materials in every concept. Today's site mirrors them with a colour swap.

emerald.com · Sport team identification

Hand people themselves to share

Vercel's personalised conference tickets, with your face and GitHub handle, were claimed more than 30,000 times. "People are most interested in themselves."

Every concept has a card, sticker or cover with your name on it, ready to post.

dx.tips · Non-fungible tickets

The feedback is the fun

Balatro is the template: strip out its feedback and it's a calculator. "Juice" means a response within a tenth of a second of every action.

Buttons press in, counters roll and votes land with a hit. With reduced motion turned on, everything lands still.

blakecrosley.com · Balatro

Wrap the contest in a story

Advent of Code wraps every puzzle in lore. Persona 5's menus are praised because the interface tells the story.

Each hero narrates the round: "The Devs wrote their app's code. The Vibe Coders had AI write theirs."

technologyreview.com · Advent of Code

Make it easy, urgent and visibly alive

Hackyard, the reference in your notes, leads with a live countdown, builder counts and a reigning champion: "Build the week. Vote the weekend."

Every hero carries the countdown, the 2–2 scoreline, judges voted and the pot.

hackyard.tech

Build and Battle are the loop

On 8 October 2026, Clash of Clans revamped its interface to give Battle and Build equal weight, as mirrored halves of the game.

Clash of Code is the same loop: seven days of building, then the battle of the vote and the duel.

supercell.com · UI revamp

Ride the moment, kindly

The vibe-coding argument has moved on to who is accountable when it breaks. AI swept AtCoder's 2026 finals, but humans still lead on long builds.

A week-long build judged by real people is exactly the test nobody has run. The copy winks, and never punches down.

helloentrepreneurs.com · Vibe coding splits tech

Own the name

CodinGame already runs a 15-minute coding battle mode called "Clash of Code".

A look nobody could mistake for anyone else's, and the wordmark always travels with "Devs vs Vibe Coders".

codingame.com · Clash of Code

Polished is no longer enough

The 2026 trend reports agree: game mechanics, retro and pixel styles, loud colour and moving type, as long as they stay usable.

All five go loud, keep the blue-vs-orange team colours (a proven clash pairing) and stay readable at 360px.

designrush.com · 2026 trends

Series 2 · Terminal & tech

The terminal belongs to both teams now

AI coding agents that run in the terminal brought vibe coding into the shell from late 2024. In 2026 the developers shipping fastest give their agents direct access to it.

No concept treats the terminal as the Devs' turf. The Vibe Coders speak in prompts, streamed agent steps and sparkles.

galtea.ai · Agents are bringing the CLI back

Developers already post their terminal

Neofetch was archived in April 2024, and fastfetch, its most popular replacement, has passed 12,000 GitHub stars. Posting your system-info screenshot is a rite of passage.

Every thing you share in this series is a terminal artifact: a fetch card, README badges, a warrior listing, a clearance badge, a login screen.

itsfoss.com · Neofetch archived

Terminal apps have a look people love

Bubble Tea, the Go library behind lazygit, has about 42,000 GitHub stars. Rounded borders, panes, spinners and a key-hint footer are instantly recognisable.

Terminal Velocity is a working terminal app in the browser, not a fake prompt you have to type into.

ossinsight.io · Bubble Tea vs Textual

Advent of Code took AI off its leaderboard

In 2025 it cut to 12 days, dropped its global leaderboard (AI was solving puzzles in under a minute) and asked players not to use AI.

Clash of Code is the opposite answer: instead of banning AI, give it a team.

thenewstack.io · Advent of Code and AI

Every developer has fought a holy war

vi versus Emacs was one of Usenet's original holy wars, and flame wars between the camps go back to at least 1985.

Strange Game opens on the holy wars (tabs vs spaces, vim vs Emacs) and offers the only one you can actually play.

wikipedia.org · Editor war

The first program battle had no best strategy

In Core War (1984), replicators, scanners and bombers play like paper, scissors and stone, so no warrior type wins every time.

Core War pits the Devs' bomber against the Vibe Coders' replicator, and the outcome changes every battle.

wikipedia.org · Core War

Side by side

Same content in all ten: R03 voting, Off By One vs Vibe Check, Chloe vs Kira, the $365 pot.

ConceptMoodDevs are made ofVibe Coders are made ofYou shareStrongest with
Series 1 · Game worlds
Base RaidClash of Clans × motherboardBright, toy-likeKeycaps, server racks, a terminal cannonPrompt crystals, chat bubbles, a glowing Tab keyTroop cardMobile gamers and the general public
Insert CoinArcade fighterDark, neon CRTSquare pixels, a keyboard shieldDithered glow, an AI familiarFighter cardDevs and anyone who grew up with arcades
Turf WarSplatoon × stickersNight street, glossyCrisp splats, terminal stickersSoft ink, holographic stickersStickerGen Z, creators, X and TikTok
Holo DeckTrading card gameDark, premium foilMachined steel, falling codeIridescent glass, galaxy foilPlayer cardCollectors, and sponsors who want polish
Issue #3Comic bookBright paper, loud inkAngular panels, code shrapnelWavy panels, sparklesYour own coverStorytelling and weekly episodes
Series 2 · Terminal & tech
Terminal VelocityA terminal appDark, crisp, truecolorA modal editor, compiler output, block lettersAn agent's streamed steps, spinners, a sparkleFetch cardDevelopers who live in the terminal
Merge ConflictGit and the editorLight, daylight code reviewThe current branchThe incoming branchREADME badgesEvery developer: the joke lands instantly
Core War1984 memory battleDark lab, glowing memoryA bomber placed by handA replicator that copies itselfWarrior cardCurious nerds and Hacker News
Strange Game1983 war roomCinematic vector glowA coastline of brackets and right anglesAn archipelago of curves and sparklesClearance badgeAnyone who loves 80s hacker films
Dual BootBoot menu, two systemsFirmware blue, then your side's systemA text consoleA liquid-glass systemLogin screenMaking pick-a-side the very first click
Series 3 · The blend
Deck BuilderHolo Deck × Merge ConflictDark editor, premium foilMachined steel, prism foilIridescent glass, galaxy foilPlayer cardDevelopers and collectors, with plain labels for public judges

For reference: today's site

The current Clash of Code landing page: a dark broadcast stage split by a glowing line
Current v2 · the broadcast stage1280 × 800

The v2 site is a sleek sports broadcast: a dark stage, cobalt and coral halves, and a glowing clash line between them. It is polished and accessible. But both teams are the same shape in different colours, and nothing on it plays like a game.

None of the ten concepts throws that work away. The content, the rules, the hidden tallies and the quality floor all carry over. Only the world changes.

Sources