Catalog
TypeUI: a design system layer for AI coding tools
TypeUI gives AI coding agents like Claude and Codex a shared design vocabulary, so the UI they generate actually looks consistent instead of made-up on the spot.
What it is. TypeUI is an open-source design system built specifically to work with AI coding tools. Rather than letting Claude, Codex, Cursor, or Gemini invent spacing, type scales, and component patterns from scratch each time, TypeUI gives them a structured design language to pull from. It ships as a CLI and works as a skill or extension layer that plugs into whichever AI tool you are using.
Why it matters. Anyone who has used an AI coding agent to build a UI knows the problem: the first screen looks fine, the second screen looks slightly different, and by the fourth you have four different button styles and no coherent rhythm. TypeUI addresses that by acting as a shared reference the agent reads before it writes any code. The output still comes from the AI, but it is constrained to a consistent system instead of being improvised.
How to use it. Install it via the CLI and connect it to your AI tool of choice. For Claude or Codex workflows, TypeUI loads design tokens and component rules into the context before the agent starts generating. In Cursor, it works as a skill the editor can call on. From there, you prompt the way you normally would, except the agent now has an opinionated design layer to work within. If you are already running a project with its own tokens, the practical move is to map those to TypeUI’s structure early so you are not fighting the defaults later.
Limits. TypeUI is still young and the documentation reflects that. How well it actually constrains any given AI depends on how the model interprets the design rules, and a determined prompt can still produce drift. It is also primarily a tool for people already comfortable in the terminal and in AI-assisted development workflows, so if you are handing code generation off to a developer, the value lands there more than in your own hands.
More Tools
New Framer's biggest update yet puts AI agents directly into the design canvas and adds team branching and a community marketplace, which together change how a site goes from idea to live.
Framer 3.0: AI agents on the canvas, plus branching and a template marketplace
JUN 17
New Describe a campaign in plain English and Brew builds the copy, layout, audience targeting, and send logic in one pass, which saves the usual back-and-forth between a writer, a designer, and your ESP.
Brew: AI email builder that writes, designs, and wires up automations together
MAY 26
New Google's Stitch generates mobile and web UI screens from text prompts on a live canvas, then hands them off to Figma or your builder of choice in one click.