Zu Hauptinhalten gehen

Eine neue Ära der Co-Entwicklung mit dem MCP-Server von Dev Mode

Am Hauptsitz von Sansan im 28. Stock des Shibuya Sakura Stage

Sansan hat seine Prozesse von der Gestaltung bis zur Implementierung revolutioniert, indem es den MCP-Server von Dev Mode und Code Connect genutzt hat. Eine neue Entwicklungsphase wird durch die Zusammenarbeit von Mensch und KI eingeleitet.

Die „KI-First“-MCP-Einführung von Sansan

Der Dev Mode-MCP-Server (Model Context Protocol) von von Figma ist ein Mechanismus, der darauf abzielt, die Design- und Entwicklungsprozesse zu integrieren und ein KI-gestütztes Entwicklungserlebnis zu bieten.

Die Geschäftsdatenbank „Sansan“ hat ihre Präsenz mit Visitenkarten-Management-Services gestärkt und seitdem eine breite Palette von Dienstleistungen unter ihrer Unternehmensvision „als unverzichtbare Unternehmensinfrastruktur zu dienen“ entwickelt, darunter die Accounting-DX-Lösung „Bill One“ und die Geschäftsprozessmanagement-Lösung „Contract One“. Insbesondere transformiert das Contract One-Entwicklungsteam den Workflow vom Design bis zur Implementierung, indem es den Dev Mode-MCP-Server und Code Connect nutzt und damit eine neue Ära der Entwicklung einläutet, in der KI und Menschen zusammenarbeiten.

Sansan begann etwa 2019 mit der Nutzung von Figma. Anfangs wurde es hauptsächlich von Produktdesigner*innen genutzt, aber später weitete sich der Einsatz auf Abteilungen wie die Ingenieur*innen, den Vertrieb und den Kundenservice aus. Figma ist zu einer gemeinsamen Plattform geworden, die interne und externe Stakeholder verbindet. Beispielsweise wird es genutzt, um der Kundschaft Prototypen zu präsentieren und zukünftige Feature-Konzepte zu vermitteln sowie um verschiedenen Abteilungen die Möglichkeit zu geben, Feedback zu geben. Während sich das Designsystem etablierte, wurde Figma zu einem vertrauten und zugänglichen Tool für alle bei Sansan.

Um mehr über das Designsystem von Sansan zu erfahren, besuche https://ui.one-design-system.sansan.com/?path=/docs/one-ui-component-library--docs

Herr Takenori Oshima, Leiter der Contract One Engineering Unit, erinnert sich: „Es ermöglicht einer Vielzahl von Mitgliedern, einschließlich derjenigen aus Vertrieb und Kundenerfolg, auf derselben Plattform zu interagieren. Dies führte natürlich zu einer Kultur, in der alles dort zusammengetragen wird.“

Zusätzlich übernahm Sansan den Slogan „KI First“ für 2025 und verkündete eine unternehmensweite Richtlinie, um die Einführung von KI zu beschleunigen. Um diesen Wandel zu verdeutlichen, startete das Contract One-Team die LLM-Woche und entschied vorübergehend, alle menschlichen Programmierarbeiten einzustellen und die Herausforderung anzunehmen, alles der KI anzuvertrauen.

Herr Oshima antwortet auf ein Interview

Herr Oshima fuhr fort: „Wir hielten es für wichtig, dass alle mindestens einmal etwas mit KI erreichen. Wir dachten, dass wir durch das Erleben von Erfolgen und Misserfolgen Diskussionen der nächsten Stufe führen könnten.“

Diese Initiative stellte jedoch eine beispiellose Herausforderung dar und drohte die Front-End-Entwicklung zum Stillstand zu bringen. Herr Takeshi Inoue von der Contract One Dev Gruppe leitete die Bemühungen, dem entgegenzuwirken. „Um für die LLM-Woche rechtzeitig bereit zu sein, beeilten wir uns, herauszufinden, wie wir KI effizient nutzen können. Zu dieser Zeit wurde der Dev Mode-MCP Server gerade gestartet. Zu der Zeit gab es innerhalb der Community keine Informationen, und die einzigen Hinweise, die wir finden konnten, waren auf der offiziellen Website von Figma. Durch Versuch und Irrtum passten wir die Eingaben an, bis wir sie schließlich nutzbar machen konnten.“

Herr Inoue antwortet auf ein Interview

Herr Oshima erklärte die Gründe für die Entscheidung, den Dev Mode-MCP-Server zu übernehmen: „Unsere Grundidee war, zuerst die LLM-Woche auszuprobieren und dann eine Entscheidung basierend auf den Ergebnissen zu treffen.“ Anstatt ganz streng auszuwählen, welche Ideen übernommen werden sollen, entschieden wir uns, alles mit Potenzial auszuprobieren. Figma stand innerhalb des Unternehmens bereits zur Verfügung, und aufgrund der Natur unseres Dienstes, der Verträge bearbeitet, waren die KI-Tools, die wir verwenden konnten, begrenzt. Mit anderen Worten, der Dev Mode-MCP-Server war uns vertraut und einfach einzusetzen.“

Daher hat Sansan schnell den Dev Mode-MCP-Server übernommen. Durch die Kombination mit Code Connect haben wir die Lücke zwischen Design und Implementierung geschlossen und den Weg für die großflächige KI-Bereitstellung in unserem Entwicklungsprozess geebnet.

Die Realitäten der Nutzung von MCP, die die Entwicklung neuer Funktionen beschleunigten

Das Contract One-Team, das den Dev Mode-MCP-Server und Code Connect bereitstellte, führte zuerst wiederholte Tests im Bereich der Neuentwicklung von Features durch. Herr Inoue spricht über diese Zeit wie folgt:

„Code Connect ist praktisch, weil es eine Vorlage erzeugt, nur indem man einen Code ausführt. Da das Designsystem jedoch nicht sehr ausgereift war, gab es eine Lücke zwischen dem Design von Figma und der Implementierung der React-Komponenten. Daher waren noch Aufgaben erforderlich, um diese Lücken allmählich zu schließen. Aber da wir bereits ein Designsystem hatten, verlief die Implementierung selbst meiner Meinung nach reibungslos.“

Herr Inoue, der die Entwicklungen über den Dev Mode-MCP-Server leitete.

Was die tatsächlichen Entwicklungen betrifft, hat Sansan den Dev Mode-MCP-Server proaktiv genutzt, um neue Bildschirme für Contract One zu erstellen. Die Funktion „KI Company Summary“, die im August 2025 veröffentlicht wurde, wurde mithilfe des Dev Mode-MCP-Servers implementiert. Herr Inoue: „Indem wir die Komponente, die wir in Figma erstellen möchten, auswählen und die vorbereiteten Prompts eingeben, können wir schnell Bildschirme von gewisser Qualität erzeugen. Auch wenn es nicht perfekt ist, kann das schnelle Zusammenführen des grundlegenden Rahmens die Arbeitsbelastung erheblich reduzieren.“

Natürlich ist es auch wichtig, effektive Wege zu entwickeln, um diese Tools zu nutzen. Herr Inoue: „Der Schlüssel ist, es nicht alles auf einmal machen zu lassen. Zuerst geben wir die Figma-URL an, damit das Gesamtbild erfasst werden kann. Dann zerlegen wir im nächsten Schritt die Komponenten. Durch diesen Workflow geben wir schrittweise Anweisungen. Zum Beispiel passen wir in Bezug auf CSS-Styling die Prompts an, um sie für die KI leichter verständlich zu machen, indem wir Beispiele unserer unternehmensinternen Definitionen bereitstellen. Es ist so befriedigend, wenn unsere Bemühungen die gewünschten Ergebnisse erzielen.“

Durch Versuch und Irrtum sammelten wir das Know-how, das dazu beitrug, den Dev Mode-MCP-Server in ein praktisches Tools für die Entwicklungsteams von Sansan zu verwandeln.

Der Entwicklungsstil von Sansan, definiert durch schnelle Plan-Do-Check-Act-Zyklen (PDCA)

Nach der Implementierung für Contract One verbreitete sich der Dev Mode-MCP-Server schnell innerhalb von Sansan. Herr Oshima reflektiert dies folgendermaßen:

„Der Dev Mode-MCP-Server war nicht exklusiv für Contract One. Er löste auch Initiativen in anderen Abteilungen aus, die sein Potenzial erkannten. Die Nutzung stieg im August so stark an, dass uns die Konten ausgingen und wir sofort mehr kaufen mussten. Einige Teams haben begonnen, Figma bereits in der Designphase zu nutzen, und es wird allmählich zum Standard im Unternehmen.“

Herr Oshima und Herr Inoue vom Contract One-Entwicklungsteam

Die Effektivität war bei Projekten ausgeprägter, in denen Informationen in Figma aggregiert wurden. „Wenn alle Informationen in Figma verfügbar sind, kann die Entwicklungszeit erheblich verkürzt werden.“ Obwohl die Bedingungen in bestehenden Projekten unterschiedlich sind und ein direkter Vergleich nicht möglich ist, ist der Eindruck, dass die Arbeitszeit bei neuen Entwicklungen um etwa die Hälfte reduziert werden kann. Ich glaube, dass die Interpretierbarkeit der Datenstruktur durch Menschen und KI zu einer höheren Effizienz führt. Während der LLM-Woche wurden 80 % der Pull-Requests von KI generiert. Allerdings gibt es aus Sicht der Arbeitsreduzierung noch viele Herausforderungen. Der Prozess ist teilweise effektiv, bietet jedoch Raum für Verbesserungen.“

Herr Inoue hat auch die Ergebnisse ruhig analysiert. „Während der LLM-Woche zeigten einige Kennzahlen tatsächlich einen Rückgang der Produktivität. Dies ließ uns erkennen, wie wichtig es ist, die Bereiche klar zu identifizieren, in denen KI wirklich glänzen kann und in welchen nicht. Genau deshalb ist es wichtig, das gewonnene Wissen zu teilen, einschließlich der Erfolge und Misserfolge. Die Implementierungsgeschwindigkeit hat sich deutlich verbessert und viele Teammitglieder haben die Nützlichkeit des Tools kommentiert. Es ist zum Beispiel üblich, dass nach einem Sprint-Review Änderungen vorgenommen werden. Wenn wir jedoch Updates über Figma erhalten, können wir diese Änderungen sofort umsetzen. Dieser Prozess eignet sich besser für eine schrittweise Verbesserung als dafür, sofort etwas Perfektes zu liefern. In der Lage zu sein, Designs basierend auf Benutzerreaktionen zu überarbeiten, ist ein großer Vorteil.

Herr Oshima: „Der Dev Mode-MCP-Server passt perfekt zur aktuellen Phase von Contract One, die kontinuierliche Zyklen von Releases und Verbesserungen beinhaltet. Insbesondere die KI-Funktionen befinden sich noch in der Erkundungsphase. Durch die Nutzung des MCP können wir jedoch schnell den PDCA-Zyklus abschließen. Ich glaube, das ist seine größte Stärke.“

Herr Inoue: „Contract One ist ein Produkt, das von einer breiten Palette von Menschen genutzt werden kann, nicht nur im juristischen Bereich, sondern auch im Vertrieb und im Backoffice. Genau deshalb möchten wir die Benutzeroberfläche intuitiver und benutzerfreundlicher gestalten. Zu diesem Zweck wollen wir den MCP-Server von Dev Mode nutzen, der es uns ermöglicht, schnell und effektiv auf Veränderungen zu reagieren. Unser Ziel ist es, die Vollständigkeit von Code Connect zu diesem Zweck weiter zu verbessern.“

Eine neue Entwicklungsphase basierend auf Menschen-KI-Zusammenarbeit

Herr Oshima stellt sich vor, die Nutzung von KI über die UI-Entwicklung hinaus auf den gesamten Prozess auszuweiten. „Wenn wir eine UI als eine einzelne Komponente betrachten, sollten wir sie innerhalb eines Programms als solche behandeln können. Dies wird den gesamten Entwicklungsprozess erheblich beschleunigen. Menschen können Ideen auf Figma diskutieren und die KI kann die Umsetzung übernehmen. Wenn wir diese Arbeitsteilung erreichen können, glaube ich, dass es zu einer viel interessanteren Welt für Ingenieur*innen führen wird. Eine der wichtigsten Herausforderungen besteht darin, implizites Wissen auszudrücken. Für Teile, bei denen die Antwort unabhängig von der betrachtenden Person dieselbe ist, können wir diese der KI überlassen. Bei Dingen, bei denen die Interpretationen von Person zu Person variieren, führt das Überlassen an KI jedoch zu Inkonsistenzen. Die Klärung der Lücke zwischen den beiden wird den Umfang der KI-Nutzung noch weiter erweitern.“

Herr Oshima und Herr Inoue im Gespräch

Unternehmensweit tritt Sansan in eine Phase des „diskontinuierlichen Wachstums“ ein, die den aktuellen Verlauf übertrifft.

Herr Oshima: „Selbst mit Contract One streben wir ein Wachstum an, das über unsere aktuelle Entwicklung hinausgeht. Deshalb müssen wir unsere Entwicklungsgeschwindigkeit schnell beschleunigen. Wir glauben, dass ein Workflow, der einen nahtlosen Übergang vom Design zur Umsetzung in Figma ermöglicht, der entscheidende Durchbruch sein wird. Wenn wir ein Framework schaffen können, in dem Menschen und KI harmonisch zusammenarbeiten, hat der MCP-Server von dev Mode das Potenzial, ein zentrales Tools in diesem Ökosystem zu werden.“ Die weitere Verfeinerung dieses Frameworks wird es uns ermöglichen, ein Entwicklungsniveau zu erreichen, das alle zufriedenstellt, ähnlich der „Autonomation“ (Mensch-Maschine-Zusammenarbeit) von Toyota, bei der Menschen sich auf Urteilskraft und Kreativität konzentrieren können, während Maschinen die Operationen übernehmen.

So kannst du mit Figma Designs skalieren

Großartiges Design hat das Potenzial, dein Produkt und deine Marke von der Masse abzuheben. Aber Großes entsteht nur gemeinsam. Figma vereint Produktteams in einem schnellen und inklusiveren Design-Workflow.

Kontaktiere uns, um mehr darüber zu erfahren, wie du mit Figma dein Design skalieren kannst.

Wir zeigen dir, wie dich Figma unterstützen kann:

  • Zusammenführung aller Schritte des Designprozesses an einem Ort – von der Ideenfindung über den Entwurf bis hin zur Umsetzung von Designs
  • Schnellere Design-Workflows dank unternehmensweit genutzter Designsysteme
  • Inklusivität bei den Abläufen im Produktteam dank intuitiver und benutzerfreundlicher webbasierter Produkte

Connect with our team

By clicking “Submit” you agree to our TOS and Privacy Policy.