OpenCode voor design.

Wat OpenCode precies is

OpenCode is een open-source AI-coding-agent gebouwd voor de terminal, onderhouden door het team achter SST (Anomaly Innovations). Hij leest je repository, voert commando's uit, bewerkt bestanden en praat met een large language model — maar anders dan leverancier-gebonden agents levert hij geen eigen model. Je richt hem op welke provider en welk model je maar wilt en neemt je eigen key mee.

Hij draait als een terminal-UI (TUI), met een desktop-app en IDE-extensies bovenop dezelfde engine. Onder de motorkap gebruikt hij een client/server-architectuur, zodat de agent die het werk doet losgekoppeld is van de vorm waarmee je hem aanstuurt. Twee ingebouwde agents — build en plan — wissel je met de Tab-toets.

• Modelonafhankelijk: Modellen en providers komen van models.dev, een open catalogus. Je configureert ze in opencode.json met een provider/model-id-string en kunt providers die je niet geladen wilt hebben uitschakelen — zodat dezelfde design-workflow draait op Anthropic, OpenAI, Google, OpenRouter, lokale modellen en meer.
• Instructiebestand: OpenCode leest een AGENTS.md-bestand in je project (de cross-tool-standaard, ook compatibel met CLAUDE.md) voor projectregels — de natuurlijke plek om je designconventies vast te leggen. Draai /init om er een te genereren.
• Uitbreidbaar: Hij ondersteunt LSP-integratie, MCP-servers, thema's, keybinds en custom commando's, plus deelbare sessielinks voor samenwerking.

• Maintainer: SST / Anomaly Innovations (open-source project)
• Credential: je eigen API-key(s) voor model-providers — BYOK, geen vendor lock-in
• Licentie: MIT, open source

Waarom een open, elk-model-agent past bij designwerk

OpenCode heeft geen enkel “design-model” zoals een leverancier-agent dat heeft — en dat is precies het punt. Omdat hij modelonafhankelijk en open is, kun je dezelfde design-workflow draaien op welk model op dit moment het best is in frontend, hem later vervangen, of terugvallen op een lokaal model, allemaal zonder je setup te veranderen.

Maar modelkeuze alleen koopt geen smaak. Zoals elke coding-agent produceert OpenCode generieke UI tenzij je hem beperkingen geeft. Goede design-output komt voort uit drie inputs die jij aanlevert.

• Een design system: Echte tokens, primitives en conventies die de agent hergebruikt, zodat de output bij een merk past in plaats van terug te vallen op een generieke look.
• Een esthetische skill: Een samengestelde skill die echte smaak afdwingt — ingetogen beweging, merk-eerste hiërarchie, hooguit twee lettertypen en één accentkleur — en de agent zich op een richting laat vastleggen voordat hij bouwt.
• Concrete referenties: Echte referentiebeelden en meerdere states (desktop en mobiel, hover, leeg, laden), niet één enkele hero-shot.

De les: OpenCode geeft je modelvrijheid, maar smaak komt nog steeds voort uit een samengestelde designcontext. Open Design verpakt precies die inputs, en daarom passen de twee samen — beide zijn open-source en local-first (meer hieronder).

OpenCode voor designwerk opzetten, vanaf nul

Dit is het volledige pad van een schone machine naar een OpenCode die UI kan bouwen en verifiëren.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Leg je designregels vast: Zet je tokens, primitives en conventies in AGENTS.md (of een DESIGN.md die daaruit wordt aangehaald) zodat de output bij een merk past in plaats van terug te vallen op een generieke look. De instructions-optie in opencode.json kan via globs naar extra regelbestanden verwijzen.
• Kies een capabel model: Omdat OpenCode modelonafhankelijk is, kies je welke provider/model op dit moment het sterkst is in frontend voor de design-ronde — en houd je de rest van je workflow onveranderd.

De screenshot-naar-UI-workflow

De design-lus met de meeste hefboomwerking bij elke agent is een referentiebeeld omzetten in werkende, responsieve UI en itereren tot het klopt. Dezelfde vijfstappenvorm geldt in OpenCode.

1. Begin met de helderste visuele referenties die je hebt — en neem meerdere states mee (desktop en mobiel, hover, leeg, laden), niet alleen één hero-shot.
2. Wees specifiek in de prompt; vage prompts leveren generieke UI op.
3. Bereid een design system voor en vertel OpenCode waar de tokens en canonieke primitives staan (in AGENTS.md).
4. Draai een dev-server en laat de agent in een echte browser renderen, met herschaling naar breakpoints om het resultaat te controleren.
5. Itereer door OpenCode zijn implementatie terug te laten vergelijken met de screenshots — niet alleen te bevestigen dat het bouwt.

Verwijs naar bestanden met @ in de TUI voor een fuzzy-zoekopdracht in je werkmap, voer shell-commando's inline uit met een voorafgaande !, en stuur acties aan met /-commando's. Prompt dan met concrete beperkingen:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Houd prompts klein en gericht, commit goede iteraties en draai slechte terug (vertel OpenCode wanneer je terugdraait), zodat elke ronde voortbouwt op een schone basis.

AGENTS.md, MCP en deelbare sessies

Drie uitbreidingspunten maken OpenCode praktisch voor langdurig designwerk, en alle drie sluiten naadloos aan op een open design-workflow.

• AGENTS.md-regels: Projectregels staan in een AGENTS.md in de repo-root (of globale regels in ~/.config/opencode/AGENTS.md). Het is de duurzame thuisbasis voor je designconventies, gelezen bij elke ronde, en compatibel met de CLAUDE.md-bestanden die andere agents gebruiken.
• MCP-servers: OpenCode ondersteunt zowel lokale (command) als remote (URL) MCP-servers, geconfigureerd onder de mcp-sleutel — de draagbare manier om designcontext en externe tools binnen te halen die over agents heen werken, niet alleen in OpenCode.
• Deelbare sessies: Het /share-commando maakt een publieke link naar een gesprek voor samenwerking of review, en /unshare trekt die in — handig om feedback te krijgen op een design-ronde.

Dit zijn draagbare, multi-agent-capaciteiten — precies het soort dingen die Open Design is gebouwd om te orkestreren, in plaats van per project opnieuw te creëren.

OpenCode vs Codex vs Claude Code vs Cursor voor design

Er is geen enkele winnaar voor designwerk — elke agent heeft een andere kracht, en ervaren teams stapelen ze. Een eerlijke samenvatting:

Het terugkerende oordeel van de community is dat smaak van mensen komt: ze vallen allemaal zonder skills, referenties en beperkingen terug op een generieke esthetiek. Dat is het echte probleem dat opgelost moet worden — en het heeft de vorm van een design-tool, niet van een model, en precies daarom past een open agent als OpenCode zo goed bij een open designlaag.

Valkuilen, en hoe je de “AI slop”-look vermijdt

De meest voorkomende klacht over AI-gegenereerd design is dat het generiek oogt — zachte gradiënten, zwevende panelen, te grote afgeronde hoeken, dramatische schaduwen, een Inter-en-paars-sfeer die “schreeuwt dat een AI dit maakte.” Andere gemelde problemen zijn kapotte mobiele layouts en instructies die in de UI-tekst lekken. Geen van deze is uniek voor OpenCode; ze zijn wat er gebeurt wanneer welke agent dan ook draait zonder een samengestelde designcontext.

• Voeg een esthetische skill toe: Een samengestelde design-skill dwingt de agent zich op een echte richting vast te leggen in plaats van de standaard look.
• Verifieer in een echte browser: Render en controleer jezelf over breakpoints heen, zodat layouts niet stilletjes breken op mobiel.
• Lever tokens en referenties aan: Echte design-tokens en referentie-screenshots zijn de grootste hefboom op de outputkwaliteit.
• Leg regels vast in AGENTS.md: Zet stijlregels als “geen hero cards, maximaal twee lettertypen, merk-eerste hiërarchie” daar waar de agent ze elke ronde leest.

Merk op dat elke remedie draait om het geven van een samengestelde designcontext aan de agent — ongeacht welk model je draait. Die context met de hand onderhouden, per project, is precies het sleurwerk dat Open Design wegneemt.

Designen met OpenCode binnen Open Design

Open Design is de open-source designlaag waar de workflow hierboven steeds om vraagt. Het behandelt OpenCode als een first-party adapter en omhult hem met een samengestelde bibliotheek van skills en design systems, een gestructureerde render-pipeline en een lokale desktop-UI — zodat de designcontext die elke agent goed maakt er vanaf de eerste run is, niet elke keer met de hand samengesteld. Beide projecten zijn open-source en local-first, wat de combinatie een natuurlijke match maakt.

1. Installeer Open Design en kies OpenCode als je agent.
2. Authenticeer met je eigen API-key voor model-providers (BYOK) — credentials blijven op je machine en worden nooit via ons doorgesluisd.
3. Kies een willekeurige provider en model, plus een design system en een skill, en genereer vervolgens decks, prototypes en landingspagina's met consistente smaak.
4. Elk artefact en DESIGN.md-bestand staat in je eigen repo, niet in een gehoste cloud.

Dezelfde OpenCode-agent, dezelfde modelvrijheid — plus een echte, draagbare, open-source design-workflow eromheen. Het is local-first en Apache-2.0, dus niets over je werk of je credentials verlaat je machine.

Veelgestelde vragen

1. 01 Kan OpenCode echt designwerk doen? +

   Ja — met een esthetische skill, een design system en echte referentiebeelden in context produceert OpenCode responsieve UI van productiekwaliteit en kan hij die in een browser verifiëren. Omdat hij modelonafhankelijk is, draai je welk model op dit moment het best is in frontend. Zonder die samengestelde context neigt hij naar een generieke look, en dat is de kloof die Open Design dicht.

2. 02 Welk model moet ik gebruiken met OpenCode voor design? +

   Welk je maar wilt — OpenCode is provider-onafhankelijk via models.dev, dus je kunt Anthropic, OpenAI, Google, OpenRouter of lokale modellen achter dezelfde workflow draaien en op elk moment wisselen. De kwaliteit van de design-output hangt veel meer af van je skill, design system en referenties dan van het model alleen.

3. 03 Is Open Design gemaakt door het OpenCode-team (SST)? +

   Nee. Open Design is een onafhankelijk open-source project dat OpenCode integreert als agent. Het vult OpenCode aan met een local-first, open bibliotheek van skills en design systems.

4. 04 Heb ik een speciaal abonnement nodig om te designen met OpenCode? +

   Nee — OpenCode is BYOK. Je neemt je eigen API-key voor model-providers mee, en Open Design sluist je credentials nooit door. Er is geen vendor lock-in.

5. 05 OpenCode of Codex of Claude Code voor frontend-design? +

   Alle zijn sterk, en veel teams stapelen ze. OpenCode's voorsprong is dat hij volledig open-source en modelonafhankelijk is; Codex blinkt uit in gedelegeerde, gesandboxte builds; Claude Code staat bekend om specifieke, codebase-bewuste designbeslissingen. Met Open Design wissel je van agent zonder je design-workflow te veranderen.

6. 06 Hoe breid ik OpenCode uit voor designcontext? +

   Leg regels vast in AGENTS.md, voeg MCP-servers toe onder de mcp-sleutel voor draagbare tools en designcontext, en gebruik deelbare sessies voor review. Open Design levert een samengestelde bibliotheek van skills en design systems zodat je de setup per project overslaat.

7. 07 Is Open Design gelieerd aan OpenCode of SST? +

   Nee. OpenCode is een open-source project onderhouden door SST (Anomaly Innovations); Open Design is een onafhankelijk open-source project dat hem ondersteunt als first-party adapter.

8. 08 Zijn mijn bestanden en credentials veilig? +

   Ja — Open Design is local-first. Je bestanden, artefacten en DESIGN.md blijven in je eigen repo, en je credentials voor model-providers worden direct gebruikt door je agent, nooit via Open Design-servers geleid.