Development
Plugin
typeui
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.
Plugin Signal65/100Solid
maintained81
capable37
documented75
adopted69
Install on Claude Code
> /plugin marketplace add bergside/typeui> /plugin install typeui@bergside
Stats
1,736
Stars
132
Forks
Maintained
Maintenance
TypeScript
Language
1mo ago
Last commit
5mo ago
Created
Repo: bergside/typeui
What's inside
Skills
4/typeuiUse TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces./typeuiUse TypeUI with Hermes Agent to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces./typeuiUse TypeUI with OpenClaw to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces./fundamentalsUniversal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements. Use when making design decisions not covered by a specific design system, validating principle compliance, or resolving conflicts between
MCP
1README
1TypeUI - 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.
Design skills
Check out all design skills. Available in both DESIGN.md and SKILL.md formats.
UI design prompts
Browse all major UI prompt categories from TypeUI Prompts.
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.
Want to see your logo here? Become a sponsor.
File tree
218bergside/typeuiView on GitHub
.agents/
plugins/
marketplace.json
.claude-plugin/
marketplace.json
.cursor-plugin/
marketplace.json
.github/
plugin/
marketplace.json
.gitignore
.mcp/
server.json
ai-tools-logos/
light/
ampcode.svg
antigravity.svg
claude-icon.svg
cline.svg
codex.svg
cursor-icon.svg
eve.svg
githubcopilot.svg
goose.svg
hermes.svg
junie.svg
lovable-logo-icon.svg
mistral-ai.svg
openclaw.svg
opencode.svg
qwen.svg
replit-color.svg
v0.svg
vscode.svg
windsurf.svg
xai.svg
zai.svg
zed.svg
DESIGN.md
LICENSE.md
llms-install.md
mcp_config.json
package-lock.json
package.json
plugin.json
plugins/
antigravity/
typeui/
mcp_config.json
plugin.json
README.md
rules/
typeui.md
claude/
typeui/
.claude-plugin/
plugin.json
.mcp.json
README.md
cline/
typeui/
index.ts
package.json
README.md
codex/
typeui/
.codex-plugin/
plugin.json
.mcp.json
assets/
logo.svg
README.md
cursor/
typeui/
.cursor-plugin/
plugin.json
assets/
logo.svg
mcp.json
README.md
grok/
typeui/
.mcp.json
plugin.json
README.md
skills/
typeui/
SKILL.md
hermes/
typeui/
__init__.py
config.yaml
MANIFEST.in
plugin.yaml
pyproject.toml
README.md
typeui_hermes/
__init__.py
__pycache__/
__init__.cpython-313.pyc
schemas.cpython-313.pyc
tools.cpython-313.pyc
schemas.py
skills/
typeui/
SKILL.md
tools.py
openclaw/
typeui/
config.json
index.js
openclaw.plugin.json
package.json
README.md
skills/
typeui/
SKILL.md
opencode/
typeui/
index.js
opencode.json
package.json
README.md
README.md
vscode/
typeui/
.mcp.json
plugin.json
README.md
zed/
typeui/
Cargo.lock
Cargo.toml
configuration/
default_settings.jsonc
installation_instructions.md
extension.toml
LICENSE.md
README.md
src/
typeui_zed.rs
prompts/
application/
login/
2-default-centered-card.svg
register/
1-default-centered-card.svg
marketing/
blog/
2-trending-topics-categorized-link-columns.svg
contact/
1-centered-heading-supporting-copy-and-stacked-form-with-dual-actions.svg
content/
1-two-column-split-copy-and-ctas-left-video-placeholder-right.svg
cta/
2-centered-headline-paragraph-and-dual-rounded-buttons.svg
customer-logo/
1-centered-kicker-and-single-wrapping-logo-row.svg
event-schedule/
2-centered-single-day-ruled-timeline.svg
faq/
1-centered-heading-with-single-column-accordion.svg
feature/
1-left-aligned-intro-with-six-up-icon-grid.svg
footer/
1-logo-links-and-copyright-centered-stack.svg
hero/
1-centered-stack-with-big-image-below.svg
newsletter/
1-centered-stack-with-floating-avatar-portraits.svg
portfolio/
2-uniform-six-card-grid.svg
pricing/
1-three-pricing-cards-in-a-row.svg
social-proof/
1-centered-inline-stat-row.svg
team/
1-four-column-grid-with-badge-role-and-contact-action.svg
testimonials/
1-centered-single-testimonial-with-decorative-quote-mark.svg
README.md
registry-examples/
agentic.png
ant.png
application.png
artistic.png
bento.png
bold.png
brutalism.png
cafe.png
claude.png
claymorphism.png
clean.png
codex.png
colorful.png
contemporary.png
corporate.png
cosmic.png
creative.png
dashboard.png
dithered.png
dramatic.png
editorial.png
elegant.png
energetic.png
enterprise.png
expressive.png
fantasy.png
fiction.png
flat.png
friendly.png
futuristic.png
geometric.png
glassmorphism.png
gradient.png
hand-drawn.png
immersive.png
impeccable.png
levels.png
lingo.png
luxury.png
material.png
matrix.png
minimal.png
modern.png
mono.png
neobrutalism.png
neon.png
neumorphism.png
pacman.png
paper.png
perspective.png
power.png
premium.png
professional.png
publication.png
refined.png
retro.png
riso.png
sega.png
shadcn.png
sketch.png
skeumorphism.png
sleek.png
spacious.png
square.png
storytelling.png
terracotta.png
tetris.png
vibrant.png
vintage.png
REGISTRY.md
skills/
fundamentals/
accessibility.md
SKILL.md
spacing-principles.md
typography-principles.md
ui-principles.md
ux-principles.md
src/
cli.ts
config.ts
domain/
designSystemSchema.ts
generation/
existingDesignSystem.ts
randomDesignSystem.ts
runDesignGeneration.ts
runGeneration.ts
runPull.ts
io/
updateSkillFile.ts
prompts/
designSystem.ts
registry.ts
registry/
registryClient.ts
renderers/
claudeRenderer.ts
codexRenderer.ts
cursorRenderer.ts
index.ts
openCodeRenderer.ts
shared.ts
skillMetadata.ts
types.ts
ui/
banner.ts
test/
existingDesignSystem.test.ts
randomDesignSystem.test.ts
registryClient.test.ts
renderers.test.ts
runDesignGeneration.test.ts
runPull.test.ts
skillMetadata.test.ts
updateSkillFile.test.ts
tsconfig.jsonFAQ
typeui is a Claude Code plugin with 4 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes typeui, typeui, typeui. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is typeui?
- 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.
- How do I install typeui?
- Run these in Claude Code: /plugin marketplace add bergside/typeui then /plugin install typeui@bergside. Then prompt normally.
- Does typeui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is typeui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.