Graphical: Building Visual Design Systems and Theme Context for Coding Agents

X postjoshpuckettAnnouncement

Josh Puckett has introduced Graphical, a tool designed to create visual design systems, style components, and supply context files for coding agents like Claude, Cursor, and ChatGPT.

Key points

  1. Graphical functions as a theme builder covering colours, typography, spacing, shapes, motion, and interactive states.
  2. The visual editor is currently compatible with Base UI components, but themes can be exported for use across frameworks or installed via shadcn.
  3. Downloads include design tokens, React source files, a GUI.md reference, setup instructions, and three skills designed for coding agents.
  4. Theme exports provide explicit component-level states, including hover, focus, disabled, and error treatments.
  5. Graphical is offered as a one-time purchase with support for unlimited projects and ongoing updates.

Why it matters

Coding agents frequently produce generic or inconsistent interfaces without strict styling guardrails. Delivering structured design tokens alongside dedicated guidelines (GUI.md) equips agents with the exact context needed to implement coherent frontend designs.

Analysis

Josh Puckett focuses Graphical on the workflow gap between visual interface styling and agentic code generation. Rather than manually describing design constraints in system prompts, users generate concrete token sets and instructions that agents can parse directly. While the built-in component editor specifically targets Base UI, the generated design context remains adaptable across modern frontend architectures.

Original post

joshpuckett

@joshpuckett · 5 October 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

3k likes162 replies4.6k bookmarks195.1k views

View on X
More posts in the 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 🕺
Selected replies (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!

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 6 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Josh Puckett, Adam Michela

    Graphical: Theme Builder for Design Systems and Coding Agents

    Graphical is a theme builder created by Josh Puckett and Adam Michela that allows designers and developers to create visual design systems and share them with coding agents such as ChatGPT, Claude, and Cursor.

    AI & LLMs· Tool

  • Link:Impeccable AI

    Impeccable: Design Vocabulary and Anti-Slop System for Coding Agents

    Impeccable is a design skill and plugin for AI coding agents such as Claude and Cursor. It provides models with a shared design vocabulary, detects common AI visual defaults, and integrates existing design systems directly into code.

    AI & LLMs· Tool

  • Link:Railly

    Tinte: Compile Design Systems into Agent Plugins

    Tinte is a CLI tool that compiles design systems into machine-readable plugins for coding agents such as Claude Code, Cursor, and Codex. Based on a single configuration file, it generates token APIs, LLM composition rules, and matching themes for editors and terminals.

    AI & LLMs· Tool

  • Repository:shadcn-ui/lint

    shadcn/lint: Agent-First Linter for Tailwind Design Systems

    shadcn/lint is a linter designed for Tailwind CSS (v4) that enforces design system boundaries with error messages tailored for AI coding agents. Instead of generic type errors, it provides actionable suggestions based on components, variants, and themes.

    2.2kstarsTypeScript

    AI & LLMs· Tool

  • X post:0xMarioNawfal

    Open-source repositories to upgrade UI design in AI coding agents

    An X post highlights open-source repositories designed to equip AI coding tools like Claude Code, Cursor, and Codex with design systems, MCP integrations, and anti-template guardrails.

    6.5kbookmarks264.2kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

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

Parts of this content were created with the assistance of AI.