- Designer nutzen CLI-basierte Agenten wie Claude Code zunehmend wie eine Werkbank, um schnell etwas zu bauen und zu überarbeiten
- Mit Cursors visuellem Editor lassen sich Feinanpassungen wie Padding und Abstände sofort prüfen, was Prompt-Hin-und-her reduziert
- Wenn sich ein benötigter UI-Effekt nicht finden lässt, wird direkt ein kleines Playground-/Studio gebaut, um Optionen zu testen und den finalen Code ins eigentliche Projekt zu übernehmen
- Gute Referenzen werden per URL eingebunden, damit Techniken analysiert und angewendet werden; dieses Muster stärkt gleichzeitiges Lernen und Umsetzen
- Globale/projektbezogene Claude.md-Dateien werden schlank gehalten und bei Bedarf in Unterordner aufgeteilt, um aufgeblähten Kontext zu vermeiden
- Es setzt sich die Sichtweise durch, Claude Code nicht als Coding-Tool, sondern eher als Computer zu behandeln
Die AI-Workbench für Designer im Jahr 2026
- Das Bewusstsein wächst, dass die Stärkung von Skills (Muskeln) wichtiger ist als das perfekte Setup
- Die Tool-Wand jeder Werkbank sieht anders aus, und die Fixierung auf den „richtigen Stack“ führt oft zu Zeitverschwendung
- Philosophie und Herangehensweise halten länger als konkrete Tools, selbst wenn sich diese ändern
Cursor: In-App-Browser und visueller Editor
- Der visuelle Editor ermöglicht „sofort anpassen → sofort prüfen“ und erhöht damit die Geschwindigkeit beim Feintuning
- Auch ohne exakte Werte etwa für Padding kann man direkt im UI anpassen und iterativ optimieren
- Statt Prompt-Hin-und-her ist das direkte Arbeiten am Bildschirm für Designer natürlicher
- Die VS-Code-Erweiterung dient als Einstieg, der die Angst vor dem Terminal senkt
- Maus- und Scroll-Navigation in der App-UI sorgt gegenüber dem Terminal für Produktivitätsunterschiede
Wenn man es nicht findet, baut man es eben: die Playground-Strategie
- Fehlt die gewünschte Interaktion, wird ein persönliches Studio aufgebaut, in dem genau dieses Element experimentell getestet wird
- Für eine Sound-on/off-Animation mit Waveform an einem Hover-Video wurde eine Umgebung zum Testen von Optionen erstellt
- Sobald ein passender Zustand gefunden ist, wird der Code übernommen und an die Komponente im eigentlichen Projekt angebunden
- Einmal erstellte Effekte und Parameter lassen sich wiederverwenden und auf andere Icons und Elemente ausweiten
- Auch Tools wie ein Hologram Projector, der hochgeladene Videos in 3D darstellt, wurden auf dieselbe Weise gebaut
Wie man Effekte bearbeitet, die sich schwer in Worte fassen lassen
- Wenn man die von Entwicklern genutzten Code-Begriffe und Benennungen lernt, kann das Modell Effekte besser zuordnen
- Ausdrücke wie „glitchy“ oder „CRT scan lines“ führen direkt zur Code-Implementierung
- Wenn die Quelle eines guten Beispiels per URL eingebunden wird und die Technik daraus angewendet werden soll, steigt die Lerngeschwindigkeit
Externe Links einbinden und direkt umsetzen: Multi-Layer-Schatten
- Statt Borders wird eine Technik mit mehreren Schattenebenen genutzt, um Border + räumliche Tiefe zu erzeugen
- Auf Basis der Anzahl der Ebenen (z. B. 3) lässt sich der Effekt für stärkere Wirkung auf 5 Ebenen erweitern
- Für Buttons, Container und andere Elemente kann die Zahl der Ebenen variiert werden, um subtile Unterschiede zu gestalten
- Dieselbe Theorie wird wiederholt auf verschiedene UIs angewandt, um stilistische Konsistenz zu stärken
Geschmack per Skills/Sub-Agenten systematisieren
- Referenzsammlungen von Yakob, Jay Tompkins u. a. dienen als Lernmaterial zum Aufbau eines Visual-/Interaction-Audit-Agenten
- Das Compounding-Engineering-Plugin wirkt als Katalysator, um Skills und Agenten schneller zusammenzustellen
- Wird referenzbasiertes Auditing automatisiert, lässt sich ein manueller „Review-Improve“-Loop wiederholt betreiben
- Wenn alle Vorlieben eines Designers in einen einzigen Skill gepackt werden, sinkt dessen Nutzen; er muss bewusst chirurgisch präzise eingegrenzt werden
- Vorannahmen wie „immer subtil“ sollten vermieden werden; nötig sind Kriterien zur Unterscheidung von Akzent und Hintergrunddetail
Leva-Control-Panel: Regler für Details direkt im Code
- In React/Next.js lassen sich mit Leva Parameter als Knöpfe und Slider freilegen und sofort anpassen
- Werte wie Dauer und Tracer-Timing einer Hover-Eckenlinien-Animation können in Echtzeit getunt werden
- Schon eine natürlichsprachliche Anweisung wie „Leva anhängen und alles verbinden, was ich anpassen möchte“ kann das Setup automatisieren
- Auch wenn noch unklar ist, welche Parameter nötig sind, lässt sich die Erkundung mit „Erstelle passende Regler“ beginnen
Prinzipien für Claude.md: schlank, getrennt, lokalisiert
- In die globale Claude.md gehören nur wirklich allgemeine Regeln, und auch die Projekt-Claude.md sollte nicht zu einer überladenen Enzyklopädie werden
- Wenn persistente Memory-Dokumente zu groß werden, verschmutzt der Kontext und die Arbeitsqualität sinkt
- Mit Claude.md-Dateien pro Unterverzeichnis lassen sich bereichsspezifische Anweisungen trennen, sodass nur der nötige Kontext geladen wird
- Trigger-Sätze wie „UI-Control erforderlich“ können als globale Regel dienen, um dann etwa Leva automatisch zu verwenden
Haltung bei der Tool-Auswahl: raus aus der Setup-Optimierungsschleife
- Tool-Empfehlungen werden schon nach wenigen Monaten bedeutungslos, und Content-artige Botschaften über „10x Produktivität“ lösen überzogene Optimierungsschleifen aus
- Gerade nicht-technische Designer nehmen Ratschläge leicht wörtlich; ein prinzipienorientierter Ansatz dient hier als Schutz
- Wie bei Gitarren-Effektgeräten und Verstärkern entscheiden eher Geschmack und Ziel als eine einzig richtige Antwort über den Stack
- Der größte Verlust entsteht, wenn man „das System optimiert“ und dadurch nichts Reales mehr baut
Investitionsstrategie für Einzelpersonen mit begrenztem Budget
- Kostenlose Testphasen sollten aktiv genutzt und Überschneidungen zwischen Tools reduziert werden, um Rauschen zu verringern
- Wenn man oft an das Claude-Code-$20-Limit stößt, kann eine zusätzliche $20-Mitgliedschaft wie Factory den Modellzugriff verteilen
- Ein Hin-und-her zwischen UI-Erstellung mit Gemini 3 Pro in Factory und größeren Aufgaben in Claude Code ist möglich
- Das $100-Tier von Claude Code reduziert Limit-Stress und hilft, den Flow zu halten
- Effizienz entsteht auch dadurch, Claude Code für Aufgaben wie das Organisieren von Obsidian oder Linear wie einen „Computer“ zu nutzen
Tuneup Day: Experimente fest im Kalender verankern
- Ein halber Tag wird als „keine Produktion, nur Setup-Verbesserung erlaubt“ reserviert, um Experimente und Wartung gezielt durchzuführen
- Plugin-Installation, Ordnerorganisation, Tests neuer Workflows sowie konzentriertes Lesen von Interviews und Artikeln werden auf diesen Tag gebündelt
- Aufgaben für den nächsten Tuneup Day werden als Liste gesammelt und am Tag selbst ausgewählt und abgearbeitet
- Das trägt sowohl zu höherer Experimentiergeschwindigkeit als auch zum Vermeiden überzogener Optimierungsschleifen bei
Noch keine Kommentare.