<!-- mcp-name: io.github.bergside/typeui -->

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.

<table width="100%"> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/codex"> <img src="./ai-tools-logos/light/codex.svg" alt="Codex logo" width="48" height="48" /> <br /><br /> <b>Codex</b> </a> <br /> _{Connect Codex to TypeUI MCP automatically with the TypeUI Codex plugin.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/codex"><b>Install in Codex →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/claude"> <img src="./ai-tools-logos/light/claude-icon.svg" alt="Claude logo" width="48" height="48" /> <br /><br /> <b>Claude</b> </a> <br /> _{Give Claude access to curated design guidance while it writes or refactors UI.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/claude"><b>Install in Claude →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/cursor"> <img src="./ai-tools-logos/light/cursor-icon.svg" alt="Cursor logo" width="48" height="48" /> <br /><br /> <b>Cursor</b> </a> <br /> _{Use the TypeUI Cursor plugin while Cursor builds screens, sections, and variations.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/cursor"><b>Install in Cursor →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/grok"> <img src="./ai-tools-logos/light/xai.svg" alt="xAI logo" width="48" height="48" /> <br /><br /> <b>Grok</b> </a> <br /> _{Add the hosted TypeUI MCP server to Grok.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/grok"><b>Open Grok guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/z-ai"> <img src="./ai-tools-logos/light/zai.svg" alt="Z.ai logo" width="48" height="48" /> <br /><br /> <b>Z.ai</b> </a> <br /> _{Add the hosted TypeUI MCP server to Z.ai ZCode.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/z-ai"><b>Open Z.ai guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/hermes"> <img src="./ai-tools-logos/light/hermes.svg" alt="Hermes logo" width="48" height="48" /> <br /><br /> <b>Hermes</b> </a> <br /> _{Install the TypeUI MCP plugin for Hermes Agent.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/hermes"><b>Open Hermes guide →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/openclaw"> <img src="./ai-tools-logos/light/openclaw.svg" alt="OpenClaw logo" width="48" height="48" /> <br /><br /> <b>OpenClaw</b> </a> <br /> _{Add the hosted TypeUI MCP server to OpenClaw.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/openclaw"><b>Open OpenClaw guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/eve"> <img src="./ai-tools-logos/light/eve.svg" alt="Eve logo" width="48" height="48" /> <br /><br /> <b>Eve</b> </a> <br /> _{Add TypeUI design skills to Eve agents.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/eve"><b>Open Eve guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/mistral"> <img src="./ai-tools-logos/light/mistral-ai.svg" alt="Mistral logo" width="69" height="48" /> <br /><br /> <b>Mistral</b> </a> <br /> _{Add the hosted TypeUI MCP server to Mistral.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/mistral"><b>Open Mistral guide →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/opencode"> <img src="./ai-tools-logos/light/opencode.svg" alt="OpenCode logo" width="48" height="48" /> <br /><br /> <b>OpenCode</b> </a> <br /> _{Give OpenCode access to TypeUI design systems and prompts.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/opencode"><b>Install in OpenCode →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/vscode"> <img src="./ai-tools-logos/light/vscode.svg" alt="Visual Studio Code logo" width="48" height="48" /> <br /><br /> <b>VS Code</b> </a> <br /> _{Connect GitHub Copilot in VS Code to TypeUI MCP.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/vscode"><b>Install in VS Code →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/antigravity"> <img src="./ai-tools-logos/light/antigravity.svg" alt="Antigravity logo" width="48" height="48" /> <br /><br /> <b>Antigravity</b> </a> <br /> _{Connect Antigravity to TypeUI MCP for UI generation workflows.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/antigravity"><b>Open Antigravity guide →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/windsurf"> <img src="./ai-tools-logos/light/windsurf.svg" alt="Windsurf logo" width="48" height="48" /> <br /><br /> <b>Windsurf</b> </a> <br /> _{Connect Windsurf Cascade to TypeUI MCP.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/windsurf"><b>Install in Windsurf →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/jetbrains"> <img src="./ai-tools-logos/light/junie.svg" alt="Junie logo" width="48" height="48" /> <br /><br /> <b>JetBrains</b> </a> <br /> _{Connect JetBrains AI Assistant or Junie to TypeUI MCP.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/jetbrains"><b>Install in JetBrains →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/zed"> <img src="./ai-tools-logos/light/zed.svg" alt="Zed logo" width="48" height="48" /> <br /><br /> <b>Zed</b> </a> <br /> _{Add the hosted TypeUI MCP server to Zed.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/zed"><b>Open Zed guide →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/github-copilot"> <img src="./ai-tools-logos/light/githubcopilot.svg" alt="GitHub Copilot logo" width="48" height="48" /> <br /><br /> <b>GitHub Copilot</b> </a> <br /> _{Add the hosted TypeUI MCP server to GitHub Copilot.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/github-copilot"><b>Open GitHub Copilot guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/cline"> <img src="./ai-tools-logos/light/cline.svg" alt="Cline logo" width="48" height="48" /> <br /><br /> <b>Cline</b> </a> <br /> _{Add the hosted TypeUI MCP server to Cline.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/cline"><b>Install in Cline →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/qwen"> <img src="./ai-tools-logos/light/qwen.svg" alt="Qwen logo" width="120" height="40" /> <br /><br /> <b>Qwen</b> </a> <br /> _{Add the hosted TypeUI MCP server to Qwen Code.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/qwen"><b>Open Qwen guide →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/amp"> <img src="./ai-tools-logos/light/ampcode.svg" alt="Amp logo" width="94" height="48" /> <br /><br /> <b>Amp</b> </a> <br /> _{Add the hosted TypeUI MCP server to Amp.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/amp"><b>Open Amp guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/goose"> <img src="./ai-tools-logos/light/goose.svg" alt="Goose logo" width="48" height="48" /> <br /><br /> <b>Goose</b> </a> <br /> _{Add the hosted TypeUI MCP server to Goose.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/goose"><b>Open Goose guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/lovable"> <img src="./ai-tools-logos/light/lovable-logo-icon.svg" alt="Lovable logo" width="48" height="48" /> <br /><br /> <b>Lovable</b> </a> <br /> _{Add the hosted TypeUI MCP server to Lovable.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/lovable"><b>Open Lovable guide →</b></a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/replit"> <img src="./ai-tools-logos/light/replit-color.svg" alt="Replit logo" width="48" height="48" /> <br /><br /> <b>Replit</b> </a> <br /> _{Add the hosted TypeUI MCP server to Replit.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/replit"><b>Open Replit guide →</b></a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/docs/guides/v0"> <img src="./ai-tools-logos/light/v0.svg" alt="v0 logo" width="48" height="48" /> <br /><br /> <b>v0</b> </a> <br /> _{Add the hosted TypeUI MCP server to v0.} <br /><br /> <a href="https://www.typeui.sh/docs/guides/v0"><b>Open v0 guide →</b></a> </td> </tr> </table>

Design skills

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

<table width="100%"> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/agentic"> <img src="./registry-examples/agentic.png" alt="Agentic" width="260" /> <br /><b>Agentic</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/ant"> <img src="./registry-examples/ant.png" alt="Ant" width="260" /> <br /><b>Ant</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/application"> <img src="./registry-examples/application.png" alt="Application" width="260" /> <br /><b>Application</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/artistic"> <img src="./registry-examples/artistic.png" alt="Artistic" width="260" /> <br /><b>Artistic</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/bento"> <img src="./registry-examples/bento.png" alt="Bento" width="260" /> <br /><b>Bento</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/bold"> <img src="./registry-examples/bold.png" alt="Bold" width="260" /> <br /><b>Bold</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/brutalism"> <img src="./registry-examples/brutalism.png" alt="Brutalism" width="260" /> <br /><b>Brutalism</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/cafe"> <img src="./registry-examples/cafe.png" alt="Cafe" width="260" /> <br /><b>Cafe</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/claymorphism"> <img src="./registry-examples/claymorphism.png" alt="Claymorphism" width="260" /> <br /><b>Claymorphism</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/claude"> <img src="./registry-examples/claude.png" alt="Claude" width="260" /> <br /><b>Claude</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/clean"> <img src="./registry-examples/clean.png" alt="Clean" width="260" /> <br /><b>Clean</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/codex"> <img src="./registry-examples/codex.png" alt="Codex" width="260" /> <br /><b>Codex</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/colorful"> <img src="./registry-examples/colorful.png" alt="Colorful" width="260" /> <br /><b>Colorful</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/contemporary"> <img src="./registry-examples/contemporary.png" alt="Contemporary" width="260" /> <br /><b>Contemporary</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/corporate"> <img src="./registry-examples/corporate.png" alt="Corporate" width="260" /> <br /><b>Corporate</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/cosmic"> <img src="./registry-examples/cosmic.png" alt="Cosmic" width="260" /> <br /><b>Cosmic</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/creative"> <img src="./registry-examples/creative.png" alt="Creative" width="260" /> <br /><b>Creative</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/dashboard"> <img src="./registry-examples/dashboard.png" alt="Dashboard" width="260" /> <br /><b>Dashboard</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/dithered"> <img src="./registry-examples/dithered.png" alt="Dithered" width="260" /> <br /><b>Dithered</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/doodle"> <img src="./registry-examples/hand-drawn.png" alt="Doodle" width="260" /> <br /><b>Doodle</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/dramatic"> <img src="./registry-examples/dramatic.png" alt="Dramatic" width="260" /> <br /><b>Dramatic</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/editorial"> <img src="./registry-examples/editorial.png" alt="Editorial" width="260" /> <br /><b>Editorial</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/square"> <img src="./registry-examples/square.png" alt="Square" width="260" /> <br /><b>Square</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/energetic"> <img src="./registry-examples/energetic.png" alt="Energetic" width="260" /> <br /><b>Energetic</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/enterprise"> <img src="./registry-examples/enterprise.png" alt="Enterprise" width="260" /> <br /><b>Enterprise</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/expressive"> <img src="./registry-examples/expressive.png" alt="Expressive" width="260" /> <br /><b>Expressive</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/fantasy"> <img src="./registry-examples/fantasy.png" alt="Fantasy" width="260" /> <br /><b>Fantasy</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/fiction"> <img src="./registry-examples/fiction.png" alt="Fiction" width="260" /> <br /><b>Fiction</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/flat"> <img src="./registry-examples/flat.png" alt="Flat" width="260" /> <br /><b>Flat</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/friendly"> <img src="./registry-examples/friendly.png" alt="Friendly" width="260" /> <br /><b>Friendly</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/futuristic"> <img src="./registry-examples/futuristic.png" alt="Futuristic" width="260" /> <br /><b>Futuristic</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/glassmorphism"> <img src="./registry-examples/glassmorphism.png" alt="Glassmorphism" width="260" /> <br /><b>Glassmorphism</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/gradient"> <img src="./registry-examples/gradient.png" alt="Gradient" width="260" /> <br /><b>Gradient</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/immersive"> <img src="./registry-examples/immersive.png" alt="Immersive" width="260" /> <br /><b>Immersive</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/impeccable"> <img src="./registry-examples/impeccable.png" alt="Impeccable" width="260" /> <br /><b>Impeccable</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/levels"> <img src="./registry-examples/levels.png" alt="Levels" width="260" /> <br /><b>Levels</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/lingo"> <img src="./registry-examples/lingo.png" alt="Lingo" width="260" /> <br /><b>Lingo</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/power"> <img src="./registry-examples/power.png" alt="Power" width="260" /> <br /><b>Power</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/material"> <img src="./registry-examples/material.png" alt="Material" width="260" /> <br /><b>Material</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/matrix"> <img src="./registry-examples/matrix.png" alt="Matrix" width="260" /> <br /><b>Matrix</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/minimal"> <img src="./registry-examples/minimal.png" alt="Minimal" width="260" /> <br /><b>Minimal</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/modern"> <img src="./registry-examples/modern.png" alt="Modern" width="260" /> <br /><b>Modern</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/mono"> <img src="./registry-examples/mono.png" alt="Mono" width="260" /> <br /><b>Mono</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/neon"> <img src="./registry-examples/neon.png" alt="Neon" width="260" /> <br /><b>Neon</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/neobrutalism"> <img src="./registry-examples/neobrutalism.png" alt="Neobrutalism" width="260" /> <br /><b>Neobrutalism</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/neumorphism"> <img src="./registry-examples/neumorphism.png" alt="Neumorphism" width="260" /> <br /><b>Neumorphism</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/pacman"> <img src="./registry-examples/pacman.png" alt="Pacman" width="260" /> <br /><b>Pacman</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/paper"> <img src="./registry-examples/paper.png" alt="Paper" width="260" /> <br /><b>Paper</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/perspective"> <img src="./registry-examples/perspective.png" alt="Perspective" width="260" /> <br /><b>Perspective</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/premium"> <img src="./registry-examples/premium.png" alt="Premium" width="260" /> <br /><b>Premium</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/professional"> <img src="./registry-examples/professional.png" alt="Professional" width="260" /> <br /><b>Professional</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/publication"> <img src="./registry-examples/publication.png" alt="Publication" width="260" /> <br /><b>Publication</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/refined"> <img src="./registry-examples/refined.png" alt="Refined" width="260" /> <br /><b>Refined</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/retro"> <img src="./registry-examples/retro.png" alt="Retro" width="260" /> <br /><b>Retro</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/riso"> <img src="./registry-examples/riso.png" alt="Riso" width="260" /> <br /><b>Riso</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/sega"> <img src="./registry-examples/sega.png" alt="Sega" width="260" /> <br /><b>Sega</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/shadcn"> <img src="./registry-examples/shadcn.png" alt="Shadcn" width="260" /> <br /><b>Shadcn</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/geometric"> <img src="./registry-examples/geometric.png" alt="Geometric" width="260" /> <br /><b>Geometric</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/sketch"> <img src="./registry-examples/sketch.png" alt="Sketch" width="260" /> <br /><b>Sketch</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/skeumorphism"> <img src="./registry-examples/skeumorphism.png" alt="Skeumorphism" width="260" /> <br /><b>Skeumorphism</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/sleek"> <img src="./registry-examples/sleek.png" alt="Sleek" width="260" /> <br /><b>Sleek</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/spacious"> <img src="./registry-examples/spacious.png" alt="Spacious" width="260" /> <br /><b>Spacious</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/storytelling"> <img src="./registry-examples/storytelling.png" alt="Storytelling" width="260" /> <br /><b>Storytelling</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/terracotta"> <img src="./registry-examples/terracotta.png" alt="Terracotta" width="260" /> <br /><b>Terracotta</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/tetris"> <img src="./registry-examples/tetris.png" alt="Tetris" width="260" /> <br /><b>Tetris</b> </a> </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/vibrant"> <img src="./registry-examples/vibrant.png" alt="Vibrant" width="260" /> <br /><b>Vibrant</b> </a> </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/design-skills/vintage"> <img src="./registry-examples/vintage.png" alt="Vintage" width="260" /> <br /><b>Vintage</b> </a> </td> <td align="center" width="33%"> </td> <td align="center" width="33%"> </td> </tr> </table>

UI design prompts

Browse all major UI prompt categories from TypeUI Prompts.

<table> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/hero"> <img src="./prompts/marketing/hero/1-centered-stack-with-big-image-below.svg" alt="Hero Sections" width="260" /> <br /><b>Hero Sections</b> </a> <br />_{17 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/pricing"> <img src="./prompts/marketing/pricing/1-three-pricing-cards-in-a-row.svg" alt="Pricing Sections" width="260" /> <br /><b>Pricing Sections</b> </a> <br />_{20 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/feature"> <img src="./prompts/marketing/feature/1-left-aligned-intro-with-six-up-icon-grid.svg" alt="Feature Sections" width="260" /> <br /><b>Feature Sections</b> </a> <br />_{16 layouts} </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/cta"> <img src="./prompts/marketing/cta/2-centered-headline-paragraph-and-dual-rounded-buttons.svg" alt="CTA Sections" width="260" /> <br /><b>CTA Sections</b> </a> <br />_{11 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/content"> <img src="./prompts/marketing/content/1-two-column-split-copy-and-ctas-left-video-placeholder-right.svg" alt="Content Sections" width="260" /> <br /><b>Content Sections</b> </a> <br />_{12 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/contact"> <img src="./prompts/marketing/contact/1-centered-heading-supporting-copy-and-stacked-form-with-dual-actions.svg" alt="Contact Sections" width="260" /> <br /><b>Contact Sections</b> </a> <br />_{9 layouts} </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/customer-logo"> <img src="./prompts/marketing/customer-logo/1-centered-kicker-and-single-wrapping-logo-row.svg" alt="Customer Logo Sections" width="260" /> <br /><b>Customer Logos</b> </a> <br />_{10 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/team"> <img src="./prompts/marketing/team/1-four-column-grid-with-badge-role-and-contact-action.svg" alt="Team Sections" width="260" /> <br /><b>Team Sections</b> </a> <br />_{8 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/social-proof"> <img src="./prompts/marketing/social-proof/1-centered-inline-stat-row.svg" alt="Social Proof Sections" width="260" /> <br /><b>Social Proof</b> </a> <br />_{11 layouts} </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/faq"> <img src="./prompts/marketing/faq/1-centered-heading-with-single-column-accordion.svg" alt="FAQ Sections" width="260" /> <br /><b>FAQ Sections</b> </a> <br />_{8 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/testimonials"> <img src="./prompts/marketing/testimonials/1-centered-single-testimonial-with-decorative-quote-mark.svg" alt="Testimonials" width="260" /> <br /><b>Testimonials</b> </a> <br />_{8 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/blog"> <img src="./prompts/marketing/blog/2-trending-topics-categorized-link-columns.svg" alt="Blog Sections" width="260" /> <br /><b>Blog Sections</b> </a> <br />_{8 layouts} </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/portfolio"> <img src="./prompts/marketing/portfolio/2-uniform-six-card-grid.svg" alt="Portfolio Sections" width="260" /> <br /><b>Portfolio Sections</b> </a> <br />_{7 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/newsletter"> <img src="./prompts/marketing/newsletter/1-centered-stack-with-floating-avatar-portraits.svg" alt="Newsletter Sections" width="260" /> <br /><b>Newsletter</b> </a> <br />_{4 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/events"> <img src="./prompts/marketing/event-schedule/2-centered-single-day-ruled-timeline.svg" alt="Event Schedule Sections" width="260" /> <br /><b>Event Schedule</b> </a> <br />_{4 layouts} </td> </tr> <tr> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/footer"> <img src="./prompts/marketing/footer/1-logo-links-and-copyright-centered-stack.svg" alt="Footer Sections" width="260" /> <br /><b>Footer Sections</b> </a> <br />_{7 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/login"> <img src="./prompts/application/login/2-default-centered-card.svg" alt="Login Pages" width="260" /> <br /><b>Login Pages</b> </a> <br />_{5 layouts} </td> <td align="center" width="33%"> <a href="https://www.typeui.sh/prompts/register"> <img src="./prompts/application/register/1-default-centered-card.svg" alt="Register Pages" width="260" /> <br /><b>Register Pages</b> </a> <br />_{5 layouts} </td> </tr> </table>

UI/UX Fundamentals

Use our official skill for UI/UX fundamentals based on years of experience, knowledge and data from the design world to make sure that any UI you generate together with the design skills and UI prompts from TypeUI will keep fundamental design principles in order, such as spacing, typography, color contrasts, and more.

Run this command to install it locally:

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

CLI commands

All commands run via npx typeui.sh. Add --help to any command to see its options.

	Command	What it does
🪄	generate	Generate a fresh SKILL.md or DESIGN.md from interactive prompts.
✏️	update	Re-run prompts and update existing output files in place.
🎲	randomize	Generate a fully randomized local design system.
📚	list	Browse available registry specs and pull one automatically.
⬇️	pull <slug>	Pull a specific registry markdown file by slug.

generate

Run interactive prompts and generate a fresh SKILL.md (default) or DESIGN.md file.

npx typeui.sh generate
npx typeui.sh generate --format design

update

Run interactive prompts and update existing output files in place.

npx typeui.sh update

randomize

Generate a fully randomized local design system — useful for quickly seeding a starter spec.

npx typeui.sh randomize
npx typeui.sh randomize --format design

list

Browse available registry specs from bergside/awesome-design-skills (with typeui.sh preview links), then pull one automatically.

npx typeui.sh list
npx typeui.sh list --format design

pull <slug>

Pull a registry markdown file by slug. SKILL.md writes to provider paths; DESIGN.md writes to the project root.

npx typeui.sh pull <slug>
npx typeui.sh pull <slug> --format design

Local development

If you want to use this locally these are the commands you need to run:

npm install

npm run build

Then use the following command instead of npx in your terminal:

node dist/cli.js --help

License

The CLI and public registry is open-source under the MIT License.

Pro version

Get access to enhanched design skill files, UI prompts for layouts and a private Discord community by getting the pro version and thus supporting our open-source work.

Sponsors

A huge thank you to the companies supporting our open-source work.

<table width="100%"> <tr> <td align="center" width="33%"> <a href="https://www.skybridge.tech/?ref=typeui.sh" target="_blank" rel="noopener noreferrer"> <img src="https://github.com/user-attachments/assets/88c401ee-b19b-4b78-9a7e-325337dba529" alt="Skybridge" width="300" /> <br /><b>Skybridge</b> </a> </td> </tr> </table>

Want to see your logo here? Become a sponsor.