Pencil MCP: Design-Entwürfe werden in Sekundenschnelle zu Code, die Effizienz der Frontend-Entwicklung steigt um das 8-fache

Hallo zusammen, ich bin Liang Xiao, der Produkte für den internationalen Markt entwickelt. Bald ist Neujahr, und ich möchte vor dem Fest noch einen Artikel veröffentlichen, um meine neuesten Errungenschaften mit euch zu teilen.

Haben Sie beim Erstellen von Webseiten oder Apps jemals dieses Gefühl gehabt:

• Ich möchte eine schöne Seite erstellen, aber mein Design ist nicht gut
• Einen Designer zu finden ist zu teuer, und kostenlose Vorlagen sind nicht geeignet
• Endlich einen Design-Entwurf fertiggestellt, aber die Umsetzung in Code ist wieder ein Haufen Probleme

Ehrlich gesagt, als ich früher Frontend-Projekte gemacht habe, habe ich allein schon Stunden damit verbracht, die Stile anhand des Design-Entwurfs anzupassen. Der Abstand ist 2px zu klein, die Farbe stimmt nicht ganz, die abgerundeten Ecken wurden vergessen... Immer wieder, es war zum Verrücktwerden.

Die gute Nachricht ist: Mit Pencil, diesem MCP, können diese Probleme im Wesentlichen gelöst werden.

Ich habe es kürzlich für ein paar Seiten verwendet und festgestellt, dass es wirklich gut ist – von Design-Entwurf zu Code, die Effizienz hat sich direkt um ein Vielfaches erhöht. Und das Wichtigste ist, dass die von der KI generierten Design-Entwürfe von guter Qualität sind und die Code-Wiedergabe sehr genau ist.

In diesem Artikel geht es darum, was Pencil eigentlich ist, warum es sich lohnt, es zu verwenden, und wie man schnell damit anfängt.

01. Was ist Pencil? Einfach ausgedrückt

Einfach ausgedrückt ist Pencil ein Tool, das Design und Code miteinander verbindet.

Der bisherige Ablauf war wie folgt:

• Design-Entwurf in Figma erstellen
• Designer kennzeichnen Maße, Farben und Abstände
• Entwickler schreiben Zeile für Zeile Code anhand des Design-Entwurfs
• Nach dem Schreiben wird der Code mit dem Design-Entwurf verglichen und festgestellt, dass die Wiedergabe nur 70-80% beträgt
• Wiederholtes Anpassen, Kommunizieren...

Pencils Lösung ist:

Sie müssen Ihre Anforderungen nur in natürlicher Sprache beschreiben (z. B. "Entwerfen Sie für mich einen Musikplayer im Apple-Stil"), und die KI kann direkt einen Design-Entwurf auf der Leinwand erstellen und dann mit einem Klick den entsprechenden Code generieren (Next.js, Flutter, Vue usw. werden alle unterstützt).

Und das Erstaunliche ist, dass Sie während des Designs Anpassungen vornehmen können. Zum Beispiel:

• "Zu viel Lila, ändere es in etwas Grün"
• "Der Abstand soll etwas größer sein"
• "Orientieren Sie sich am Stil dieser Website"

Die KI hilft Ihnen in Echtzeit bei der Anpassung von Design und Code, ohne dass Sie selbst Hand anlegen müssen.

02. Warum ich denke, dass sich Pencil lohnt?

1) Die Effizienz ist wirklich hoch

Die traditionelle Art, einen Design-Entwurf für eine Seite zu erstellen, kann 4-6 Stunden dauern. Mit Pencil dauert es 20-40 Minuten.

Und die Code-Wiedergabe kann 98%+ erreichen, sodass Sie die Stile im Grunde nicht mehr anpassen müssen.

Ich habe es selbst ausprobiert und eine einfache Landing Page erstellt, vom Design bis zum Code, alles in allem etwa eine halbe Stunde.

2) Stabile Designqualität

Früher gab es beim Generieren von Design-Entwürfen mit KI oft diese Probleme:

• Inharmonische Farbgebung
• Chaotische Abstände
• Uneinheitliche Schriftgrößen

Pencil verfügt über ein Designsystem und ästhetische Standards, sodass die generierten Design-Entwürfe von relativ stabiler Qualität sind. Sie sind zwar nicht unbedingt perfekt, aber zumindest nicht zu hässlich.

3) Unterstützung für verschiedene Technologie-Stacks

Egal, ob Sie Next.js, Flutter, Vue oder SwiftUI verwenden, Pencil kann automatisch den entsprechenden Code generieren.

Das ist wirklich praktisch für Leute wie mich, die Multi-Plattform-Entwicklung betreiben – ein Design-Entwurf, Code für mehrere Plattformen, alles vorhanden.

03. Wie installiert und verwendet man Pencil?

Im Folgenden teile ich meinen eigenen Installations- und Nutzungsprozess, der derzeit der einfachste sein dürfte.

Erster Schritt: Pencil MCP installieren

Suchen Sie direkt in Ihrer IDE (VS Code, Cursor usw.) nach "pencil".

Klicken Sie auf Installieren, gehen Sie nicht an andere Orte, um es herunterzuladen (um zu vermeiden, eine Raubkopie herunterzuladen).

Hinweis: Die Suche direkt in der IDE ist der sicherste Weg.

Zweiter Schritt: Lassen Sie die KI Ihnen bei der Konfiguration helfen

Wie konfiguriert man es nach der Installation?

Ehrlich gesagt, ich habe es anfangs auch nicht ganz verstanden. Später habe ich festgestellt, dass der einfachste Weg ist: Lassen Sie die KI Ihnen direkt bei der Konfiguration helfen.

Öffnen Sie Ihren KI-Programmierassistenten (Claude Code oder Codex) und sagen Sie ihm:

Ich habe "pencil" als MCP in dieser IDE installiert. Bitte hilf mir bei der Konfiguration, damit mein Claude Code, Codex und VS Code dieses MCP verwenden können.

Warten Sie dann, bis es Ihnen bei der Konfiguration hilft.

Dritter Schritt: Beginnen Sie mit Pencil zu entwerfen

Nach der Konfiguration sehen Sie auf der linken Seite Ihrer IDE ein Bleistiftsymbol. Klicken Sie darauf, um die Pencil-Leinwand zu öffnen.

Und dann sagst du dem AI-Dialogfeld auf der rechten Seite, was du entwerfen möchtest.

Zum Beispiel:

"Entwirf mir einen Musikplayer im Apple-Stil"

"Erstelle eine einfache Landing Page mit blauen Farbtönen"

"Erstelle etwas Ähnliches im Stil dieser Website"

Die KI generiert einen Entwurf auf der Leinwand. Wenn du nicht zufrieden bist, kannst du sie weiterhin anpassen lassen:

"Die Schrift ist zu klein, mach sie größer"

"Mehr Abstand"

"Eine sanftere Farbe"

So lange anpassen, bis du zufrieden bist.

Schritt 4: Code generieren

Sobald der Entwurf fertig ist, kannst du die KI den Code generieren lassen.

Du kannst direkt sagen:

"Generiere Next.js Code"

"Generiere Flutter Code"

"Generiere Vue 3 Code"

Die KI generiert automatisch den entsprechenden Code basierend auf deinem Entwurf.

Tatsächliche Ergebnisse:

04. Einige praktische Erfahrungen

Nach mehrmaliger Verwendung möchte ich ein paar Eindrücke teilen:

1) Beschreibe die Anforderungen konkret

Am Anfang sagte ich "Erstelle mir eine Website", aber das, was die KI generierte, war überhaupt nicht das, was ich wollte.

Ich habe später festgestellt, dass die Ergebnisse umso besser sind, je konkreter die Beschreibung ist.

Zum Beispiel:

Schlechte Beschreibung: "Erstelle mir eine Login-Seite"

Gute Beschreibung: "Erstelle mir eine einfache Login-Seite mit einem Logo oben, E-Mail- und Passworteingabefeldern in der Mitte und einem Login-Button unten, im Stil der Apple-Website"

2) Du kannst Referenzbilder hochladen

Wenn du ein gutes Design auf einer Website siehst, kannst du einen Screenshot hochladen und die KI als Referenz verwenden lassen.

Auf diese Weise ähnelt der generierte Entwurf eher deinen Erwartungen.

3) Iteration ist wichtiger als Perfektion auf Anhieb

Erwarte nicht, dass du auf Anhieb ein perfektes Design generierst, das ist unrealistisch.

Der richtige Weg ist: Generiere zuerst einen groben Entwurf und passe ihn dann Schritt für Schritt an.

Passe jedes Mal nur ein oder zwei Dinge an, z. B. "Mehr Abstand" oder "Eine sanftere Farbe", das ist am effizientesten.

4) Die Codequalität ist ziemlich gut

Ich habe es ein paar Mal ausprobiert und die generierte Codequalität ist ziemlich hoch:

Klare Codestruktur

Hoher Grad an Stilwiederherstellung (98% +)

Responsives Layout ist auch gut gemacht

Im Grunde kann man es übernehmen und leicht modifizieren.

05. Einige zu beachtende Punkte

Obwohl Pencil sehr nützlich ist, gibt es einige Dinge zu beachten:

1) Ästhetik hängt immer noch von dir ab

Die KI kann dir helfen, einen Entwurf zu generieren, aber du musst selbst beurteilen, ob er gut aussieht oder nicht.

Schaue dir also regelmäßig gute Designs an, um deine Ästhetik zu verbessern, damit du Pencil besser anleiten kannst.

Hier sind ein paar Orte, an denen du Designreferenzen finden kannst:

Dribbble

Mobbin (spezialisiert auf das Sammeln von mobilen UI)

Screenshots von verschiedenen exzellenten Websites

2) Komplexe Interaktionen musst du selbst schreiben

Pencil eignet sich für statische Seiten und reguläre Interaktionen, aber wenn es um komplexe Animationen, Gesten usw. geht, musst du den Code selbst schreiben.

Für die meisten Szenarien ist Pencil jedoch ausreichend.

3) Die Wahl des richtigen KI-Modells ist wichtig

Ich habe ein paar Modelle ausprobiert und festgestellt, dass Claude Opus 4.5 die beste visuelle Leistung bietet.

Wenn du andere Modelle verwendest, kann die Qualität des generierten Entwurfs geringer sein.

06. Effizienzvergleichsdaten

Zum Schluss teile ich eine Reihe von Daten, die ich selbst getestet habe:

Für mich liegt der größte Wert darin, die Energie von "Wie implementiere ich" auf "Welche Funktion mache ich" zu verlagern.

07. Zusammenfassung

Pencil verbindet im Wesentlichen Design und Entwicklung und ermöglicht es dir, den gesamten Prozess mit natürlicher Sprache zu steuern.

Wenn du auch in der Frontend-Entwicklung tätig bist oder deine eigenen Produkte entwickelst, empfehle ich dir dringend, Pencil auszuprobieren:Stabile Codequalität: 98%+ Wiedergabetreue, grundsätzlich keine Anpassung des Stils erforderlich

Unterstützung mehrerer Technologie-Stacks: Next.js, Flutter, Vue usw. können verwendet werden

Natürlichsprachliche Steuerung: Beschreiben Sie Anforderungen in menschlicher Sprache, AI generiert automatisch

Schließlich, wenn Sie auch an unabhängiger Entwicklung und KI-Programmierung arbeiten, können Sie gerne einen Kommentar hinterlassen:

Wie gestalten Sie normalerweise?

Haben Sie Pencil verwendet? Wie sind die Ergebnisse?

Ich werde jeden Kommentar sorgfältig lesen. Bis zum nächsten Mal.