Graphical: Visuelle Design-Systeme und Themes für Coding-Agents

X-PostjoshpuckettAnkündigung

Josh Puckett hat Graphical vorgestellt. Das Tool dient dazu, visuelle Designsprachen zu entwerfen, Komponenten zu stylen und Design-Kontexte für Coding-Agents wie Cursor, Claude oder ChatGPT bereitzustellen.

Das Wichtigste

  1. Graphical ist ein visueller Theme-Editor zum Definieren von Farbpaletten, Typografie, Spacing, Effekten, Motion und Komponenten-Zuständen.
  2. Der Editor ist aktuell auf Komponenten von Base UI abgestimmt, die erzeugten Themes lassen sich jedoch framework-unabhängig oder via shadcn einbinden.
  3. Downloads beinhalten neben Design-Tokens und React-Quellcode auch eine GUI.md-Datei, Referenzen für Light- und Dark-Mode sowie drei spezifische Skills für Coding-Agents.
  4. Theme-Exporte enthalten explizite Statusdefinitionen auf Komponentenebene wie Focus, Error, Disabled und Hover.
  5. Das Produkt wird als Einmalkauf für unbegrenzte Projekte inklusive zukünftiger Builder-Updates vertrieben.

Warum das relevant ist

Coding-Agents generieren häufig standardisierte oder inkonsistente Benutzeroberflächen. Durch die Bereitstellung strukturierter Design-Tokens zusammen mit maschinenlesbaren Vorgaben (GUI.md) erhalten KI-Modelle klaren Kontext, um einheitliche und ansprechende Interfaces zu erstellen.

Einordnung

Mit Graphical adressiert Josh Puckett die Lücke zwischen manuellem UI-Design und der Code-Generierung durch KI-Assistenten. Statt Prompts mühsam mit Farbcodes und Styling-Regeln anzureichern, exportiert das Tool ein definiertes Regelwerk, das Agenten direkt beim Aufbau und Refactoring von Komponenten anwenden können. Der visuelle Editor stützt sich derzeit auf Base UI, entkoppelt die Design-Tokens jedoch so, dass sie auch für andere Stacks nützlich bleiben.

Original-Post

joshpuckett

@joshpuckett · 5. Oktober 2026

Introducing Graphical. It's a simple, powerful, and fun tool to design visual languages, style components, and work with coding agents to create interfaces that look memorable and feel unique. I hope you'll check it out at t.co/crX3W8hHCz! t.co/x2EMDYGnuH

2979 Likes162 Antworten4585 Lesezeichen195.097 Aufrufe

Auf X ansehen
Weitere Posts im Thread (12)
  1. @BarisGirismen @withgraphical you found another of the several easter eggs :)
  2. @joeyabanks @withgraphical thank you Joey!
  3. @csinco @withgraphical the style/system/skills probably could, but the editor right now is only compatible at the moment with @base_ui components
  4. @morganknutson @withgraphical thanks Morgan! 🙏
  5. @jonnym1ller @withgraphical all gas no brakes!
  6. @samfcheng @withgraphical thank you for the kind words, Sam! 🙏
  7. @johnroodepic @withgraphical Yes! The theme exports includes component-level state definitions like focus, error, disabled, hover, etc. so your agent has those treatments defined. You can also customize every state yourself in the Graphical editor t.co/7xZKKdVnTE
  8. @colderoshay @withgraphical thanks Cole!
  9. @dmcgco @withgraphical thank you David, just the start!
  10. @purplehazenue @withgraphical Absolutely, we’re just getting started!
  11. @dsabar @withgraphical thank you for noticing! I'd trade you some of that cool Fall weather for this heat wave we're having 🥵 t.co/cD25Q7YUTu
  12. @_katherholt @withgraphical 🕺
Ausgewählte Antworten (5)
  • @dsabar @joshpuckett @withgraphical Oh, absolutely LOVING that the sample weather widget automatically detects what city you are in for immediate "ownership" and relatability of what you are seeing! Teeny tiny attention to detail like this is awesome. t.co/IZ6BOMnsHn
  • @emmettshine @joshpuckett @withgraphical Yessssir! 🙌✨✨🔥🧯🚒
  • @jonnym1ller @joshpuckett @withgraphical Good lord you are relentless. This looks incredible
  • @_katherholt @joshpuckett @withgraphical oh my lord
  • @colderoshay @joshpuckett @withgraphical so good, josh!

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 6. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Josh Puckett, Adam Michela

    Graphical: Theme-Builder für Design-Systeme und Coding-Agents

    Graphical ist ein Theme-Builder von Josh Puckett und Adam Michela, mit dem Entwickler und Designer visuelle Themes und Design-Systeme erstellen und an Coding-Agents wie ChatGPT, Claude oder Cursor übergeben können.

    KI & AI· Tool

  • Link:Impeccable AI

    Impeccable: Design-Vokabular und Anti-Slop-System für Coding-Agents

    Impeccable ist ein Design-Skill und Plugin für KI-gestützte Coding-Agenten wie Claude oder Cursor. Es stattet LLMs mit einem standardisierten Design-Vokabular aus, erkennt typische KI-Designfehler und bindet bestehende Design-Systeme direkt in den Code ein.

    KI & AI· Tool

  • Link:Railly

    Tinte: Design-Systeme als Plugins für Coding-Agents kompilieren

    Tinte ist ein CLI-Werkzeug, das Design-Systeme in maschinenlesbare Plugins für Coding-Agents wie Claude Code, Cursor und Codex übersetzt. Aus einer zentralen Konfigurationsdatei erzeugt das Tool Token-APIs, Regelwerke für LLMs sowie Themes für Editoren und Terminals.

    KI & AI· Tool

  • Repository:shadcn-ui/lint

    shadcn/lint: Agent-fokussierter Linter für Tailwind-Design-Systeme

    shadcn/lint ist ein Linter für Tailwind CSS (v4), der Design-System-Regeln so formuliert, dass KI-Coding-Agenten sie direkt verstehen und korrigieren können. Statt kryptischer Typprüfungen liefert das Tool Fehlermeldungen mit konkreten Handlungsempfehlungen.

    2178SterneTypeScript

    KI & AI· Tool

  • X-Post:0xMarioNawfal

    Open-Source-Repositories für besseres UI-Design mit Coding-Agenten

    Ein X-Post stellt quelloffene Repositories vor, mit denen KI-Werkzeuge wie Claude Code, Cursor und Codex hochwertigere Benutzeroberflächen statt generischer Standard-Designs erzeugen können.

    6477Lesezeichen264.163Aufrufe

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.