Skills#Claude Code #Codex #Cursor #Gemini CLI#Frontend #Design #Coding

Design skills and prompts for AI UI tools

TypeUI packages design skills, prompt files, and plugin configs so agent tools can produce UI with more structure and style guidance. It works across multiple assistants through MCP and per-tool plugins, with styles and examples stored in the repo.

1,902 stars•139 forks•TypeScript•Updated 2mo ago

Who it's for

Builders who want their AI tool to follow design systems, prompt patterns, and layout guidance while making screens.

What it delivers

You can ask for UI in plain language and get designs shaped by reusable style guidance instead of generic output.

What it does

Design skill packs

Reusable design skills live in `skills/` and are published in both `DESIGN.md` and `SKILL.md` formats.

Prompt libraries

`prompts/application` and `prompts/marketing` provide prompt material for different UI and content tasks.

Agent and editor plugins

`plugins/` contains installable bundles for Claude, Codex, Cursor, Cline, VS Code, Zed, and other tools.

MCP setup files

`.mcp/server.json` and `mcp_config.json` support connecting agents to TypeUI resources through MCP.

Design registry

`REGISTRY.md` and `registry-examples/` organize style variants and example looks for UI generation.

How to get it

1Run this command to install it locally

npx skills add https://github.com/bergside/typeui --skill typeui-fundamentals

2Run interactive prompts and generate a fresh SKILL.md (default) or DESIGN.md file.
```
npx typeui.sh generate
npx typeui.sh generate --format design
```
3Run interactive prompts and update existing output files in place.
```
npx typeui.sh update
```
4Generate a fully randomized local design system — useful for quickly seeding a starter…
```
npx typeui.sh randomize
npx typeui.sh randomize --format design
```
5Browse available registry specs from bergside/awesome-design-skills (with typeui.sh…
```
npx typeui.sh list
npx typeui.sh list --format design
```
6Pull a registry markdown file by slug. SKILL.md writes to provider paths; DESIGN.md…
```
npx typeui.sh pull <slug>
npx typeui.sh pull <slug> --format design
```

README

TypeUI - Build better UI with AI

TypeUI is an AI-first platform where you can use design skills, UI prompts, and other resources to enhance AI capabilities to generate better user interfaces and design when building websites and applications. The resources from this repository will work with any AI provider, given they support markdown files or general prompting.

Getting started

Install TypeUI where you build. Connect your AI coding tool to TypeUI MCP, then ask for UI in plain language while TypeUI supplies design systems, prompts, and layout variation guidance.

Codex _{Connect Codex to TypeUI MCP automatically with the TypeUI Codex plugin.} Install in Codex →	Claude _{Give Claude access to curated design guidance while it writes or refactors UI.} Install in Claude →	Cursor _{Use the TypeUI Cursor plugin while Cursor builds screens, sections, and variations.} Install in Cursor →
Grok _{Add the hosted TypeUI MCP server to Grok.} Open Grok guide →	Z.ai _{Add the hosted TypeUI MCP server to Z.ai ZCode.} Open Z.ai guide →	Hermes _{Install the TypeUI MCP plugin for Hermes Agent.} Open Hermes guide →
OpenClaw _{Add the hosted TypeUI MCP server to OpenClaw.} Open OpenClaw guide →	Eve _{Add TypeUI design skills to Eve agents.} Open Eve guide →	Mistral _{Add the hosted TypeUI MCP server to Mistral.} Open Mistral guide →
OpenCode _{Give OpenCode access to TypeUI design systems and prompts.} Install in OpenCode →	VS Code _{Connect GitHub Copilot in VS Code to TypeUI MCP.} Install in VS Code →	Antigravity _{Connect Antigravity to TypeUI MCP for UI generation workflows.} Open Antigravity guide →
Windsurf _{Connect Windsurf Cascade to TypeUI MCP.} Install in Windsurf →	JetBrains _{Connect JetBrains AI Assistant or Junie to TypeUI MCP.} Install in JetBrains →	Zed _{Add the hosted TypeUI MCP server to Zed.} Open Zed guide →
GitHub Copilot _{Add the hosted TypeUI MCP server to GitHub Copilot.} Open GitHub Copilot guide →	Cline _{Add the hosted TypeUI MCP server to Cline.} Install in Cline →	Qwen _{Add the hosted TypeUI MCP server to Qwen Code.} Open Qwen guide →
Amp _{Add the hosted TypeUI MCP server to Amp.} Open Amp guide →	Goose _{Add the hosted TypeUI MCP server to Goose.} Open Goose guide →	Lovable _{Add the hosted TypeUI MCP server to Lovable.} Open Lovable guide →
Replit _{Add the hosted TypeUI MCP server to Replit.} Open Replit guide →	v0 _{Add the hosted TypeUI MCP server to v0.} Open v0 guide →

Design skills

Check out all design skills. Available in both DESIGN.md and SKILL.md formats.

Agentic	Ant	Application
Artistic	Bento	Bold
Brutalism	Cafe	Claymorphism
Claude	Clean	Codex
Colorful	Contemporary	Corporate
Cosmic	Creative	Dashboard
Dithered	Doodle	Dramatic
Editorial	Square	Energetic
Enterprise	Expressive	Fantasy
Fiction	Flat	Friendly
Futuristic	Glassmorphism	Gradient
Immersive	Impeccable	Levels
Lingo	Power	Material
Matrix	Minimal	Modern
Mono	Neon	Neobrutalism
Neumorphism	Pacman	Paper
Perspective	Premium	Professional
Publication	Refined	Retro

Files in the repo

Repository payload•23 top-level entries

.agents— Agent-related files for TypeUI installs.
.claude-plugin— Claude plugin marketplace metadata.
.cursor-plugin— Cursor plugin marketplace metadata.
.github— GitHub workflows and templates
.mcp— 1 item
ai-tools-logos— 1 item
plugins— Plugins
prompts— Prompt files
registry-examples— 69 items
skills— The skills, one folder each
src— Source code
test— Tests
.gitignore
DESIGN.md— Design skill format and guidance.
LICENSE.md— License
llms-install.md
mcp_config.json
package-lock.json
package.json— Node package: install with npm
plugin.json
README.md— The README
REGISTRY.md— Registry of design skills and examples.
tsconfig.json

Discussion (0)

Ask about usage, or say what you built with it

No comments yet. Be the first to say what this is good for.

More skills

obra/

superpowers

obra/superpowersSkills

An agentic skills framework & software development methodology that works.

285k

1 add

Graphify-Labs/graphifySkills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k

1 add

Vincentwei1021/

anything2explainer

Vincentwei1021/anything2explainerSkills

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

anthropics/skillsSkills

Public repository for Agent Skills

176k

career-ops-hq/career-opsSkills

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k

addyosmani/agent-skillsSkills

Production-grade engineering skills for AI coding agents.

93k