官方 Official 需审批 Needs approval Skill Skill

Graphical — 调一套视觉主题,再交给编程助手用 Graphical — set a visual theme, then hand it to your coding agent

Graphical — set a visual theme, then hand it to your coding agent

调好颜色、字体和间距,再交给编程助手做界面。 Set colors, type, and spacing, then let your coding agent build the interface.

Graphical — 调一套视觉主题,再交给编程助手用 预览
预览:Chrome 实拍 graphicalui.com 首屏 Preview: Chrome capture of graphicalui.com above the fold
打开原文Open source

详细介绍Details

Graphical 是 Josh Puckett 和 Adam Michela 做的视觉主题工具,给用编程助手做界面的设计师和开发者。你在里面调颜色、浅色和深色、字体、间距、图标、圆角和阴影、动效,以及 Base UI 组件在不同状态下的样子。Base UI 是一套没有预设外观的界面零件。调完可以下载,也可以用 shadcn 装进项目(shadcn 是把组件源码直接放进你自己仓库的一种装法)。下载里有一份 GUI.md、浅色和深色的主题说明、安装步骤,以及三个给编程助手用的技能文件,让助手按你的设计语言改现有界面、做新界面。站点写一次买断,购买按钮现在是 $49。这是一条工具笔记:本库没有购买,也没有把主题交给任何助手。 Graphical is a visual theme tool by Josh Puckett and Adam Michela, for designers and developers who build interfaces with a coding agent. You set colors, light and dark, type, spacing, icons, corners and shadows, motion, and how Base UI components look in each state. Base UI is a set of interface parts without a preset look. You can download the result or install it with shadcn, which copies component source into your own repo. The download includes a GUI.md, light and dark theme notes, setup steps, and three skill files so an agent follows your design language on existing screens and new ones. The site says it is a one-time purchase, and the buy button currently reads $49. This is a tool tip: this library did not buy it and did not hand a theme to any agent.

它是什么What it is

Graphical 让你先定一套界面长什么样,再把这套规定交给编程助手。你调的是设计里那些反复出现的决定:颜色(含浅色和深色两套)、字体和行高、间距、图标家族、圆角描边和阴影、按钮与菜单的动效,以及 Base UI 组件在不同状态下的样子。Base UI 是一套不带现成皮肤的界面零件,Graphical 给它们配外观。导出有两条路:直接下载,或用 shadcn 装进项目。shadcn 的做法是把组件源码放进你的仓库,而不是只装一个远程包。下载物里有 GUI.md(给助手读的设计说明)、浅色和深色的主题参考、安装步骤,以及三个技能文件。页面说适合设计师、开发者,以及任何已经在用 ChatGPT、Claude、Cursor 或 Grok 做应用的人。 Graphical is where you decide how an interface should look, then hand that decision to a coding agent. You set the choices that repeat: colors for light and dark, type and line height, spacing, an icon family, corners, strokes and shadows, motion for buttons and menus, and how Base UI components look in each state. Base UI is a set of interface parts without a ready-made skin; Graphical gives them a look. You either download the files or install them with shadcn, which puts the component source in your repo instead of only adding a remote package. The download includes GUI.md (design notes for the agent), light and dark theme references, setup steps, and three skill files. The page says it is for designers, developers, and anyone already building an app with ChatGPT, Claude, Cursor, or Grok.

为什么推荐Why we recommend it 版权年份组件的 initialYear 是 2026。本环境的 X 连接未授权,没有打开这两人的帖子,作者名以页脚为准。页面 meta 描述是 “A tool to create visual themes, customize components, and build interfaces with your coding agent.” 首屏把 ChatGPT、Claude、Cursor、Grok 写成可切换的对象,意思是交给你已经在用的编程助手。FAQ 写明:给设计师、开发者和用编程助手做应用的人;包含主题编辑器、5 套可改的样式、主题 token、React 组件源码;每份下载含 GUI.md、浅色和深色主题说明、安装步骤和三个 coding-agent skills;组件编辑器对着 Base UI,React 源码可直接用;问「是否必须用 React 或 Base UI」,页面答 No,主题文件可以用于任何框架、组件库或语言。购买区标题 One-time purchase,正文写主题编辑器、一套起始样式和基础组件可用于不限数量的项目,主题编辑器的后续更新包含在内。本库没有下单,没有核对 Stripe 结账页的税额或地区限制。站点 HTML 没有写公开日期。未购买、未下载、未把 GUI.md 或技能文件交给 Cursor、Claude、ChatGPT 或 Grok。 The copyright widget’s initialYear is 2026. X was not authorized in this environment, so those posts were not opened; the names follow the footer. The meta description is “A tool to create visual themes, customize components, and build interfaces with your coding agent.” The hero swaps ChatGPT, Claude, Cursor, and Grok, meaning the agent you already use. The FAQ says it is for designers, developers, and anyone building an app with a coding agent; it includes the theme builder, 5 customizable styles, theme tokens, and React component source; each download includes GUI.md, light and dark theme references, setup instructions, and three coding-agent skills; the editor targets Base UI components and ships React source; asked “Do I have to use React or Base UI?”, the page answers No, and says the theme files can be used with any framework, component library, or language. The purchase block is titled One-time purchase and says the theme builder, launch collection of styles, and foundation components can be used in unlimited projects, with ongoing updates to the theme builder included. This library did not check out and did not verify tax or regional limits on the Stripe page. The HTML states no public launch date. Not purchased, not downloaded, and GUI.md and the skill files were not given to Cursor, Claude, ChatGPT, or Grok.

核验记录:来源、抓取与截图说明Verification log: sources, checks, and captures

主源是产品页 https://www.graphicalui.com/ ,撰写时 curl HTTP 200。页脚写 Created with care in California by Josh Puckett 与 Adam Michela,链接分别是 https://x.com/joshpuckett 与 https://x.com/soopa 。按钮文字是 Buy for $49,另有仅供读屏的 previously $99,并链到 https://buy.stripe.com/00wcN72rffd1bSl8dFc3m00 。HN item 49971356,标题 Graphical UI,作者 handfuloflight,2026-10-05T21:51:09.000Z(约 2026-10-06 05:51 CST),撰写时 Algolia 34pts。预览为 Chrome 实拍首页首屏裁 3:2 WebP。不打星。Primary source is https://www.graphicalui.com/, curl HTTP 200 at write time. The footer says Created with care in California by Josh Puckett and Adam Michela, linking https://x.com/joshpuckett and https://x.com/soopa. The button reads Buy for $49, with screen-reader text previously $99, and points at https://buy.stripe.com/00wcN72rffd1bSl8dFc3m00. HN item 49971356, title Graphical UI, author handfuloflight, 2026-10-05T21:51:09.000Z (about 05:51 CST on 2026-10-06), 34pts on Algolia at write time. Preview is a Chrome capture of the homepage above the fold, cropped to 3:2 WebP. Unrated.

对照Contrast

左列是产品页写明的事实。右列是本站口径:为什么放进 Cases,以及不要把它当成已经替你装进仓库的技能。 Left: what the product page states. Right: this library’s framing, and why this is not a skill we already installed in a repo.

Graphical Graphical 对照本站口径 This library’s framing

是什么 What it is

Graphical Graphical

视觉主题编辑器:调颜色、字体、间距、图标、形状、动效和 Base UI 组件状态,再交给编程助手。 A visual theme editor: colors, type, spacing, icons, shape, motion, and Base UI component states, then handoff to a coding agent.

对照本站口径 This library’s framing

Cases 里的设计工具笔记。补的是「先有一套设计语言,助手再照着做界面」。 A design-tool tip in Cases. It fills “decide the design language first, then let the agent build the interface.”

怎么带走 What you take with you

Graphical Graphical

下载或用 shadcn 安装。含 GUI.md、浅色和深色说明、安装步骤、三个技能文件,以及 React 组件源码。 Download or install with shadcn. Includes GUI.md, light and dark notes, setup steps, three skill files, and React component source.

对照本站口径 This library’s framing

页面说主题文件不绑定 React。本库没有下载这包文件,也没有在仓库里跑过安装。 The page says the theme files are not tied to React. This library did not download the package and did not run the install in a repo.

钱 Price

Graphical Graphical

一次买断。按钮写 Buy for $49,读屏文本写 previously $99。不限项目数,主题编辑器的后续更新包含在内。 One-time purchase. The button says Buy for $49, and screen-reader text says previously $99. Unlimited projects, with later theme-builder updates included.

对照本站口径 This library’s framing

这是页面上的标价。本库没有付款,也没有打开结账后的发票或退款条款。 That is the price printed on the page. This library did not pay, and did not open an invoice or the refund terms after checkout.

怎么试Try it

  1. 先看首页在卖什么 Read what the homepage is selling

    打开 graphicalui.com,看它怎么讲主题、组件状态,以及交给 ChatGPT、Claude、Cursor 或 Grok。页脚是 Josh Puckett 和 Adam Michela。Show HN 讨论在 item 49971356。点数会变,以你打开当天为准。 Open graphicalui.com and see how it describes themes, component states, and handoff to ChatGPT, Claude, Cursor, or Grok. The footer names Josh Puckett and Adam Michela. The Show HN thread is item 49971356. Point counts change. Use whatever the thread shows when you open it.

  2. 对照包含物和价格 Check what is included and what it costs

    页面向下有一次买断:$49,读屏文本写以前是 $99。FAQ 写 5 套可改样式、主题 token、React 源码、GUI.md 和三个技能。问是否必须用 React,页面答不必,主题文件可以拿到别的框架里用。 Further down, the one-time price is $49, with screen-reader text that it was previously $99. The FAQ lists 5 customizable styles, theme tokens, React source, GUI.md, and three skills. Asked whether React is required, the page says no: the theme files can go to another framework.

  3. 自己决定要不要买 Decide yourself whether to buy

    购买按钮指向 Stripe。买到的是主题编辑器和组件源码,不是本站代装的技能。本库没有付款,也没有把 GUI.md 交给任何编程助手试做一屏界面。 The buy button goes to Stripe. What you get is the theme builder and component source, not a skill this site installed for you. This library did not pay and did not ask any coding agent to build a screen from GUI.md.

边界Boundaries

  • 本库未购买、未下载、未执行 shadcn 安装,也没有把 GUI.md 或三个技能文件交给 Cursor、Claude、ChatGPT 或 Grok。 This library did not buy it, did not download it, did not run a shadcn install, and did not hand GUI.md or the three skill files to Cursor, Claude, ChatGPT, or Grok.
  • $49 和 previously $99 是页面上的文字。没有核对结账页的税、币种或退款。 $49 and previously $99 are the words on the page. Tax, currency, and refund terms on the checkout page were not checked.
  • 「主题文件可用于任何框架」是 FAQ 的回答。本库没有拿非 React 项目试过。 “Theme files work with any framework” is the FAQ’s answer. This library did not try them in a non-React project.
  • 站点没有写公开日期。2026-10-05 是 HN 帖的时间,不是页面上的发行声明。 The site states no launch date. 2026-10-05 is the HN post time, not a release line printed on the page.

相关案例Related cases