ai-agent

TypeUI: AI-driven UI design

Get better UI with TypeUI, a tool.
1,774 stars132 forksTypeScriptGuide quality 8/10Updated 7/4/2026100% free · open source
What it does

TypeUI is an AI-powered tool that helps founders build better user interfaces by generating high-quality UI code

When to use it
  • When you need to quickly prototype a new web application and want a solid UI foundation
  • When your design team is overwhelmed and you need to automate UI generation
  • When you want to experiment with different UI layouts and designs without manually writing code
Ready-to-paste prompt
typeui generate --component button --style material
Heads up: Make sure you have Node.js 16 or higher installed, as TypeUI requires it to run
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/typeui && curl -fsSL https://workflowstacks.com/api/skills/typeui/claude-skill -o ~/.claude/skills/typeui/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How TypeUI: AI-driven UI design works
Codeflow
Free to inspect

TypeUI: AI-driven UI design is a small TypeScript project (~2.9k lines across 29 code files, plus 8 test files). You install it into your AI tool with one command; there is nothing to run yourself. Last commit 2 months ago, Other license, has a test suite.

Size
Small codebase
~2.9k lines · 29 code files · 24 min skim
Setup
Install as a skill / plugin
Add it to Claude Code (or your AI tool) with one command — 4 skills inside. Nothing to run yourself.
Runs on
Inside your AI tool
Helper scripts use Node.js
TypeScript 75%Python 11%JavaScript 11%Rust 2%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    src/cli.ts
    Where the program starts running
What's in each folder
src/Core code — the actual logic21 files
prompts/Prompts, skills & agent definitions18 files
skills/Prompts, skills & agent definitions6 files
plugins/Sub-packages / plugins53 files
registry-examples/Folder69 files
ai-tools-logos/Folder23 files
.claude-plugin/Plugin manifest — what gets installed1 files
.cursor-plugin/Plugin manifest — what gets installed1 files
READMEHas testsDocumentedOther licenseUpdated 2 mo ago
Quick Actions
Details
Creator
bergside
Language
TypeScript
Category
ai-agent
Published
3/3/2026

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.