TypeUI Design Skills
Registry of ~67 named visual style skills (Brutalism, Glassmorphism, Bento, Stripe-like clean, editorial, and more)—pull a SKILL.md + DESIGN.md aesthetic lock with one CLI command.
Overview
TypeUI Design Skills (bergside/awesome-design-skills, browsable at typeui.sh/design-skills) is a curated registry of named design-system skill files for Claude Code, Cursor, Codex, and other agentic tools. Each entry ships as a folder with SKILL.md (tokens, component rules, accessibility constraints, quality gates) plus DESIGN.md (human-readable intent). Instead of re-describing “make it feel like Linear/Stripe/brutalist” every session, you pull one style and Claude stays on that visual track. Magier’s 2026 design-skills roundup calls TypeUI out as the go-to library for locking a look before you build—especially useful for agencies switching client aesthetics and SaaS teams fighting AI-slop defaults.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
Browse styles at https://www.typeui.sh/design-skills, then pull one into your project:
npx typeui.sh pull brutalism
# or: glassmorphism, bento, editorial, clean, neobrutalism, paper, …Or clone the registry and copy a skill folder into `~/.claude/skills/` / project `.claude/skills/`.
TypeUI also exposes MCP + Claude/Cursor plugins via https://github.com/bergside/typeui — useful when you want live registry access instead of a one-off pull.
How to use it
1. Pick a named style that matches brand tone (or pull `basic` / `editorial` as Magier highlights). 2. Run `npx typeui.sh pull <slug>` so SKILL.md + DESIGN.md land in the project. 3. Ask Claude to build UI — it should follow the locked tokens, typography, and layout rules. 4. Customize tokens in the pulled files rather than starting from a blank skill. 5. Swap styles per client/brand by pulling a different slug into a scoped skills path.
Example prompts
- “Pull the brutalism TypeUI skill, then redesign our pricing page in that system.”
- “Use the editorial TypeUI skill to rebuild this marketing hero—no Inter, no card grid.”
- “Compare glassmorphism vs clean TypeUI skills for our SaaS dashboard chrome.”
- “Generate a DESIGN.md summary of which TypeUI style best matches these 5 reference URLs.”
Use cases and examples
- Lock Brutalist / Glassmorphism / Bento aesthetics before coding
- Agency multi-client style packs without re-briefing
- Kill Inter/purple AI-slop defaults with opinionated SKILL.md rules
- Pair with frontend-design or Impeccable for craft + style
- Prototype landing pages in a specific design language
Prerequisites
- Claude Code, Cursor, Codex, or another Agent Skills–compatible host
- Node.js for `npx typeui.sh pull`
- Permission to install third-party skills — audit SKILL.md first
- Optional: TypeUI MCP/plugin for live registry browsing
Tips
- One style per project/worktree beats stacking many style skills (context tax).
- Treat pulled SKILL.md as editable brand docs—tune hex values and typefaces.
- Pair with Playwright/webapp-testing so visual lock survives implementation.
- Preview styles on typeui.sh before pulling into a client repo.