shelfry.app/p/typeui

typeui

TypeUI 是一个面向 AI 编程场景的设计资源平台。它把整理好的设计风格、设计系统说明和 UI 提示词打包成 markdown 文件，并提供托管的 MCP 服务，让 Codex、Claude、Cursor、Windsurf、Copilot、v0 等二十多种 AI 工具在写页面或重构界面时，能直接读到这些设计规范。资源以 DESIGN.md 和 SKILL.md 两种格式分发，覆盖 Bento、粗野主义、黏土拟物、仪表盘、极简等多种视觉风格，还附带布局变体建议。由于只依赖 markdown 和通用提示，它不绑定某个模型厂商；接入方式也很轻量，装插件或加一个 MCP 地址即可，无需改动现有工程。

WebAI 工具 NOASSERTION

访问官网 GitHub

Stars

2.1K

Forks

152

语言

TypeScript

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 logo](./ai-tools-logos/light/codex.svg "os:48x48") 
    
    Codex](https://www.typeui.sh/docs/guides/codex)

Connect Codex to TypeUI MCP automatically with the TypeUI Codex plugin.

  [Install in Codex →](https://www.typeui.sh/docs/guides/codex)




  [![Claude logo](./ai-tools-logos/light/claude-icon.svg "os:48x48") 
    
    Claude](https://www.typeui.sh/docs/guides/claude)

Give Claude access to curated design guidance while it writes or refactors UI.

  [Install in Claude →](https://www.typeui.sh/docs/guides/claude)




  [![Cursor logo](./ai-tools-logos/light/cursor-icon.svg "os:48x48") 
    
    Cursor](https://www.typeui.sh/docs/guides/cursor)

Use the TypeUI Cursor plugin while Cursor builds screens, sections, and variations.

  [Install in Cursor →](https://www.typeui.sh/docs/guides/cursor)








  [![xAI logo](./ai-tools-logos/light/xai.svg "os:48x48") 
    
    Grok](https://www.typeui.sh/docs/guides/grok)

Add the hosted TypeUI MCP server to Grok.

  [Open Grok guide →](https://www.typeui.sh/docs/guides/grok)




  [![Z.ai logo](./ai-tools-logos/light/zai.svg "os:48x48") 
    
    Z.ai](https://www.typeui.sh/docs/guides/z-ai)

Add the hosted TypeUI MCP server to Z.ai ZCode.

  [Open Z.ai guide →](https://www.typeui.sh/docs/guides/z-ai)




  [![Hermes logo](./ai-tools-logos/light/hermes.svg "os:48x48") 
    
    Hermes](https://www.typeui.sh/docs/guides/hermes)

Install the TypeUI MCP plugin for Hermes Agent.

  [Open Hermes guide →](https://www.typeui.sh/docs/guides/hermes)








  [![OpenClaw logo](./ai-tools-logos/light/openclaw.svg "os:48x48") 
    
    OpenClaw](https://www.typeui.sh/docs/guides/openclaw)

Add the hosted TypeUI MCP server to OpenClaw.

  [Open OpenClaw guide →](https://www.typeui.sh/docs/guides/openclaw)




  [![Eve logo](./ai-tools-logos/light/eve.svg "os:48x48") 
    
    Eve](https://www.typeui.sh/docs/guides/eve)

Add TypeUI design skills to Eve agents.

  [Open Eve guide →](https://www.typeui.sh/docs/guides/eve)




  [![Mistral logo](./ai-tools-logos/light/mistral-ai.svg "os:69x48") 
    
    Mistral](https://www.typeui.sh/docs/guides/mistral)

Add the hosted TypeUI MCP server to Mistral.

  [Open Mistral guide →](https://www.typeui.sh/docs/guides/mistral)








  [![OpenCode logo](./ai-tools-logos/light/opencode.svg "os:48x48") 
    
    OpenCode](https://www.typeui.sh/docs/guides/opencode)

Give OpenCode access to TypeUI design systems and prompts.

  [Install in OpenCode →](https://www.typeui.sh/docs/guides/opencode)




  [![Visual Studio Code logo](./ai-tools-logos/light/vscode.svg "os:48x48") 
    
    VS Code](https://www.typeui.sh/docs/guides/vscode)

Connect GitHub Copilot in VS Code to TypeUI MCP.

  [Install in VS Code →](https://www.typeui.sh/docs/guides/vscode)




  [![Antigravity logo](./ai-tools-logos/light/antigravity.svg "os:48x48") 
    
    Antigravity](https://www.typeui.sh/docs/guides/antigravity)

Connect Antigravity to TypeUI MCP for UI generation workflows.

  [Open Antigravity guide →](https://www.typeui.sh/docs/guides/antigravity)








  [![Windsurf logo](./ai-tools-logos/light/windsurf.svg "os:48x48") 
    
    Windsurf](https://www.typeui.sh/docs/guides/windsurf)

Connect Windsurf Cascade to TypeUI MCP.

  [Install in Windsurf →](https://www.typeui.sh/docs/guides/windsurf)




  [![Junie logo](./ai-tools-logos/light/junie.svg "os:48x48") 
    
    JetBrains](https://www.typeui.sh/docs/guides/jetbrains)

Connect JetBrains AI Assistant or Junie to TypeUI MCP.

  [Install in JetBrains →](https://www.typeui.sh/docs/guides/jetbrains)




  [![Zed logo](./ai-tools-logos/light/zed.svg "os:48x48") 
    
    Zed](https://www.typeui.sh/docs/guides/zed)

Add the hosted TypeUI MCP server to Zed.

  [Open Zed guide →](https://www.typeui.sh/docs/guides/zed)








  [![GitHub Copilot logo](./ai-tools-logos/light/githubcopilot.svg "os:48x48") 
    
    GitHub Copilot](https://www.typeui.sh/docs/guides/github-copilot)

Add the hosted TypeUI MCP server to GitHub Copilot.

  [Open GitHub Copilot guide →](https://www.typeui.sh/docs/guides/github-copilot)




  [![Cline logo](./ai-tools-logos/light/cline.svg "os:48x48") 
    
    Cline](https://www.typeui.sh/docs/guides/cline)

Add the hosted TypeUI MCP server to Cline.

  [Install in Cline →](https://www.typeui.sh/docs/guides/cline)




  [![Qwen logo](./ai-tools-logos/light/qwen.svg "os:120x40") 
    
    Qwen](https://www.typeui.sh/docs/guides/qwen)

Add the hosted TypeUI MCP server to Qwen Code.

  [Open Qwen guide →](https://www.typeui.sh/docs/guides/qwen)








  [![Amp logo](./ai-tools-logos/light/ampcode.svg "os:94x48") 
    
    Amp](https://www.typeui.sh/docs/guides/amp)

Add the hosted TypeUI MCP server to Amp.

  [Open Amp guide →](https://www.typeui.sh/docs/guides/amp)




  [![Goose logo](./ai-tools-logos/light/goose.svg "os:48x48") 
    
    Goose](https://www.typeui.sh/docs/guides/goose)

Add the hosted TypeUI MCP server to Goose.

  [Open Goose guide →](https://www.typeui.sh/docs/guides/goose)




  [![Lovable logo](./ai-tools-logos/light/lovable-logo-icon.svg "os:48x48") 
    
    Lovable](https://www.typeui.sh/docs/guides/lovable)

Add the hosted TypeUI MCP server to Lovable.

  [Open Lovable guide →](https://www.typeui.sh/docs/guides/lovable)








  [![Replit logo](./ai-tools-logos/light/replit-color.svg "os:48x48") 
    
    Replit](https://www.typeui.sh/docs/guides/replit)

Add the hosted TypeUI MCP server to Replit.

  [Open Replit guide →](https://www.typeui.sh/docs/guides/replit)




  [![v0 logo](./ai-tools-logos/light/v0.svg "os:48x48") 
    
    v0](https://www.typeui.sh/docs/guides/v0)

Add the hosted TypeUI MCP server to v0.

  [Open v0 guide →](https://www.typeui.sh/docs/guides/v0)

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

  [![Agentic](./registry-examples/agentic.png "os:260x") 
    Agentic](https://www.typeui.sh/design-skills/agentic)




  [![Ant](./registry-examples/ant.png "os:260x") 
    Ant](https://www.typeui.sh/design-skills/ant)




  [![Application](./registry-examples/application.png "os:260x") 
    Application](https://www.typeui.sh/design-skills/application)








  [![Artistic](./registry-examples/artistic.png "os:260x") 
    Artistic](https://www.typeui.sh/design-skills/artistic)




  [![Bento](./registry-examples/bento.png "os:260x") 
    Bento](https://www.typeui.sh/design-skills/bento)




  [![Bold](./registry-examples/bold.png "os:260x") 
    Bold](https://www.typeui.sh/design-skills/bold)








  [![Brutalism](./registry-examples/brutalism.png "os:260x") 
    Brutalism](https://www.typeui.sh/design-skills/brutalism)




  [![Cafe](./registry-examples/cafe.png "os:260x") 
    Cafe](https://www.typeui.sh/design-skills/cafe)




  [![Claymorphism](./registry-examples/claymorphism.png "os:260x") 
    Claymorphism](https://www.typeui.sh/design-skills/claymorphism)








  [![Claude](./registry-examples/claude.png "os:260x") 
    Claude](https://www.typeui.sh/design-skills/claude)




  [![Clean](./registry-examples/clean.png "os:260x") 
    Clean](https://www.typeui.sh/design-skills/clean)




  [![Codex](./registry-examples/codex.png "os:260x") 
    Codex](https://www.typeui.sh/design-skills/codex)








  [![Colorful](./registry-examples/colorful.png "os:260x") 
    Colorful](https://www.typeui.sh/design-skills/colorful)




  [![Contemporary](./registry-examples/contemporary.png "os:260x") 
    Contemporary](https://www.typeui.sh/design-skills/contemporary)




  [![Corporate](./registry-examples/corporate.png "os:260x") 
    Corporate](https://www.typeui.sh/design-skills/corporate)








  [![Cosmic](./registry-examples/cosmic.png "os:260x") 
    Cosmic](https://www.typeui.sh/design-skills/cosmic)




  [![Creative](./registry-examples/creative.png "os:260x") 
    Creative](https://www.typeui.sh/design-skills/creative)




  [![Dashboard](./registry-examples/dashboard.png "os:260x") 
    Dashboard](https://www.typeui.sh/design-skills/dashboard)








  [![Dithered](./registry-examples/dithered.png "os:260x") 
    Dithered](https://www.typeui.sh/design-skills/dithered)




  [![Doodle](./registry-examples/hand-drawn.png "os:260x") 
    Doodle](https://www.typeui.sh/design-skills/doodle)




  [![Dramatic](./registry-examples/dramatic.png "os:260x") 
    Dramatic](https://www.typeui.sh/design-skills/dramatic)








  [![Editorial](./registry-examples/editorial.png "os:260x") 
    Editorial](https://www.typeui.sh/design-skills/editorial)




  [![Square](./registry-examples/square.png "os:260x") 
    Square](https://www.typeui.sh/design-skills/square)




  [![Energetic](./registry-examples/energetic.png "os:260x") 
    Energetic](https://www.typeui.sh/design-skills/energetic)








  [![Enterprise](./registry-examples/enterprise.png "os:260x") 
    Enterprise](https://www.typeui.sh/design-skills/enterprise)




  [![Expressive](./registry-examples/expressive.png "os:260x") 
    Expressive](https://www.typeui.sh/design-skills/expressive)




  [![Fantasy](./registry-examples/fantasy.png "os:260x") 
    Fantasy](https://www.typeui.sh/design-skills/fantasy)








  [![Fiction](./registry-examples/fiction.png "os:260x") 
    Fiction](https://www.typeui.sh/design-skills/fiction)




  [![Flat](./registry-examples/flat.png "os:260x") 
    Flat](https://www.typeui.sh/design-skills/flat)




  [![Friendly](./registry-examples/friendly.png "os:260x") 
    Friendly](https://www.typeui.sh/design-skills/friendly)








  [![Futuristic](./registry-examples/futuristic.png "os:260x") 
    Futuristic](https://www.typeui.sh/design-skills/futuristic)




  [![Glassmorphism](./registry-examples/glassmorphism.png "os:260x") 
    Glassmorphism](https://www.typeui.sh/design-skills/glassmorphism)




  [![Gradient](./registry-examples/gradient.png "os:260x") 
    Gradient](https://www.typeui.sh/design-skills/gradient)








  [![Immersive](./registry-examples/immersive.png "os:260x") 
    Immersive](https://www.typeui.sh/design-skills/immersive)




  [![Impeccable](./registry-examples/impeccable.png "os:260x") 
    Impeccable](https://www.typeui.sh/design-skills/impeccable)




  [![Levels](./registry-examples/levels.png "os:260x") 
    Levels](https://www.typeui.sh/design-skills/levels)








  [![Lingo](./registry-examples/lingo.png "os:260x") 
    Lingo](https://www.typeui.sh/design-skills/lingo)




  [![Power](./registry-examples/power.png "os:260x") 
    Power](https://www.typeui.sh/design-skills/power)




  [![Material](./registry-examples/material.png "os:260x") 
    Material](https://www.typeui.sh/design-skills/material)








  [![Matrix](./registry-examples/matrix.png "os:260x") 
    Matrix](https://www.typeui.sh/design-skills/matrix)




  [![Minimal](./registry-examples/minimal.png "os:260x") 
    Minimal](https://www.typeui.sh/design-skills/minimal)




  [![Modern](./registry-examples/modern.png "os:260x") 
    Modern](https://www.typeui.sh/design-skills/modern)








  [![Mono](./registry-examples/mono.png "os:260x") 
    Mono](https://www.typeui.sh/design-skills/mono)




  [![Neon](./registry-examples/neon.png "os:260x") 
    Neon](https://www.typeui.sh/design-skills/neon)




  [![Neobrutalism](./registry-examples/neobrutalism.png "os:260x") 
    Neobrutalism](https://www.typeui.sh/design-skills/neobrutalism)








  [![Neumorphism](./registry-examples/neumorphism.png "os:260x") 
    Neumorphism](https://www.typeui.sh/design-skills/neumorphism)




  [![Pacman](./registry-examples/pacman.png "os:260x") 
    Pacman](https://www.typeui.sh/design-skills/pacman)




  [![Paper](./registry-examples/paper.png "os:260x") 
    Paper](https://www.typeui.sh/design-skills/paper)








  [![Perspective](./registry-examples/perspective.png "os:260x") 
    Perspective](https://www.typeui.sh/design-skills/perspective)




  [![Premium](./registry-examples/premium.png "os:260x") 
    Premium](https://www.typeui.sh/design-skills/premium)




  [![Professional](./registry-examples/professional.png "os:260x") 
    Professional](https://www.typeui.sh/design-skills/professional)








  [![Publication](./registry-examples/publication.png "os:260x") 
    Publication](https://www.typeui.sh/design-skills/publication)




  [![Refined](./registry-examples/refined.png "os:260x") 
    Refined](https://www.typeui.sh/design-skills/refined)




  [![Retro](./registry-examples/retro.png "os:260x") 
    Retro](https://www.typeui.sh/design-skills/retro)








  [![Riso](./registry-examples/riso.png "os:260x") 
    Riso](https://www.typeui.sh/design-skills/riso)




  [![Sega](./registry-examples/sega.png "os:260x") 
    Sega](https://www.typeui.sh/design-skills/sega)




  [![Shadcn](./registry-examples/shadcn.png "os:260x") 
    Shadcn](https://www.typeui.sh/design-skills/shadcn)








  [![Geometric](./registry-examples/geometric.png "os:260x") 
    Geometric](https://www.typeui.sh/design-skills/geometric)




  [![Sketch](./registry-examples/sketch.png "os:260x") 
    Sketch](https://www.typeui.sh/design-skills/sketch)




  [![Skeumorphism](./registry-examples/skeumorphism.png "os:260x") 
    Skeumorphism](https://www.typeui.sh/design-skills/skeumorphism)








  [![Sleek](./registry-examples/sleek.png "os:260x") 
    Sleek](https://www.typeui.sh/design-skills/sleek)




  [![Spacious](./registry-examples/spacious.png "os:260x") 
    Spacious](https://www.typeui.sh/design-skills/spacious)




  [![Storytelling](./registry-examples/storytelling.png "os:260x") 
    Storytelling](https://www.typeui.sh/design-skills/storytelling)








  [![Terracotta](./registry-examples/terracotta.png "os:260x") 
    Terracotta](https://www.typeui.sh/design-skills/terracotta)




  [![Tetris](./registry-examples/tetris.png "os:260x") 
    Tetris](https://www.typeui.sh/design-skills/tetris)




  [![Vibrant](./registry-examples/vibrant.png "os:260x") 
    Vibrant](https://www.typeui.sh/design-skills/vibrant)








  [![Vintage](./registry-examples/vintage.png "os:260x") 
    Vintage](https://www.typeui.sh/design-skills/vintage)

Browse all major UI prompt categories from TypeUI Prompts.

  [![Hero Sections](./prompts/marketing/hero/1-centered-stack-with-big-image-below.svg "os:260x") 
    Hero Sections](https://www.typeui.sh/prompts/hero)

  [![Pricing Sections](./prompts/marketing/pricing/1-three-pricing-cards-in-a-row.svg "os:260x") 
    Pricing Sections](https://www.typeui.sh/prompts/pricing)

  [![Feature Sections](./prompts/marketing/feature/1-left-aligned-intro-with-six-up-icon-grid.svg "os:260x") 
    Feature Sections](https://www.typeui.sh/prompts/feature)

  [![CTA Sections](./prompts/marketing/cta/2-centered-headline-paragraph-and-dual-rounded-buttons.svg "os:260x") 
    CTA Sections](https://www.typeui.sh/prompts/cta)

  [![Content Sections](./prompts/marketing/content/1-two-column-split-copy-and-ctas-left-video-placeholder-right.svg "os:260x") 
    Content Sections](https://www.typeui.sh/prompts/content)

  [![Contact Sections](./prompts/marketing/contact/1-centered-heading-supporting-copy-and-stacked-form-with-dual-actions.svg "os:260x") 
    Contact Sections](https://www.typeui.sh/prompts/contact)

  [![Customer Logo Sections](./prompts/marketing/customer-logo/1-centered-kicker-and-single-wrapping-logo-row.svg "os:260x") 
    Customer Logos](https://www.typeui.sh/prompts/customer-logo)

  [![Team Sections](./prompts/marketing/team/1-four-column-grid-with-badge-role-and-contact-action.svg "os:260x") 
    Team Sections](https://www.typeui.sh/prompts/team)

  [![Social Proof Sections](./prompts/marketing/social-proof/1-centered-inline-stat-row.svg "os:260x") 
    Social Proof](https://www.typeui.sh/prompts/social-proof)

  [![FAQ Sections](./prompts/marketing/faq/1-centered-heading-with-single-column-accordion.svg "os:260x") 
    FAQ Sections](https://www.typeui.sh/prompts/faq)

  [![Testimonials](./prompts/marketing/testimonials/1-centered-single-testimonial-with-decorative-quote-mark.svg "os:260x") 
    Testimonials](https://www.typeui.sh/prompts/testimonials)

  [![Blog Sections](./prompts/marketing/blog/2-trending-topics-categorized-link-columns.svg "os:260x") 
    Blog Sections](https://www.typeui.sh/prompts/blog)

  [![Portfolio Sections](./prompts/marketing/portfolio/2-uniform-six-card-grid.svg "os:260x") 
    Portfolio Sections](https://www.typeui.sh/prompts/portfolio)

  [![Newsletter Sections](./prompts/marketing/newsletter/1-centered-stack-with-floating-avatar-portraits.svg "os:260x") 
    Newsletter](https://www.typeui.sh/prompts/newsletter)

  [![Event Schedule Sections](./prompts/marketing/event-schedule/2-centered-single-day-ruled-timeline.svg "os:260x") 
    Event Schedule](https://www.typeui.sh/prompts/events)

  [![Footer Sections](./prompts/marketing/footer/1-logo-links-and-copyright-centered-stack.svg "os:260x") 
    Footer Sections](https://www.typeui.sh/prompts/footer)

  [![Login Pages](./prompts/application/login/2-default-centered-card.svg "os:260x") 
    Login Pages](https://www.typeui.sh/prompts/login)

  [![Register Pages](./prompts/application/register/1-default-centered-card.svg "os:260x") 
    Register Pages](https://www.typeui.sh/prompts/register)

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

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`	Pull a specific registry markdown file by slug.

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

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

Run interactive prompts and update existing output files in place.

npx typeui.sh update

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

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

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 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

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

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

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.

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

  [![Skybridge](https://github.com/user-attachments/assets/88c401ee-b19b-4b78-9a7e-325337dba529 "os:300x") 
    Skybridge](https://www.skybridge.tech/?ref=typeui.sh)

Want to see your logo here? Become a sponsor.

核心功能

提供多种设计风格的设计系统与提示词
同时提供 DESIGN.md 与 SKILL.md 两种格式
托管 MCP 服务，一次接入多款 AI 工具
覆盖 Codex、Claude、Cursor、Copilot 等客户端
给出布局变体建议，减少模板化界面
不绑定模型厂商，可用通用提示方式使用

内容由编辑整理，部分信息来自 GitHub 与项目官网，版权归原作者所有。发现错误？报告问题

typeui

TypeUI - Build better UI with AI

Getting started

Design skills

UI design prompts

UI/UX Fundamentals

CLI commands

`generate`

`update`

`randomize`

`list`

`pull`

Local development

License

Pro version

Sponsors

核心功能