Design
UI/UX direction, visual design, and design systems
pencil-design
by chiroro-jr
Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.
web-design-guidelines-6
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
ui-ux-pro-max
by shining319
"Data-driven UI/UX design intelligence with 50+ styles, 21 palettes, 50 font pairings, and 9 framework stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Searchable design knowledge base for professional UI/UX implementation. 数据驱动的专业 UI/UX 设计智能，包含 50+ 设计风格、21 种配色方案、50 种字体配对，支持 9 种前端框架。可搜索的设计知识库，用于专业 UI/UX 实现。"
web-design-guidelines-8
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
web-design-guidelines-4
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
web-design-guidelines-9
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
web-design-guidelines-5
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
web-design-guidelines-2
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
web-design-guidelines-3
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
ui-designer
by shining319
"Senior UI/UX designer transforming product requirements into professional design solutions. Use when users need: (1) Page structure and information architecture, (2) UI layout and components, (3) Color schemes and visual specs, (4) Design specification docs, (5) User flow diagrams. Triggers: UI design, page design, interface design, interaction design, design specs, layout. 资深UI/UX设计师，将需求转化为设计方案。触发词：UI设计、页面设计、界面设计、交互设计、设计规范、页面布局、设计方案。"
web-design-guidelines-7
by ZackKorman
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
frontend-design-system
by oikon48
フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
z-index-scale
by dylantarre
Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index conflicts. Outputs CSS, Tailwind, or JSON.
svelte
by dylantarre
Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte component libraries, integrating design tokens, or building SvelteKit design system components.
angular
by dylantarre
Builds token-driven Angular components with signals and standalone components. Use when creating Angular component libraries, integrating design tokens, or building design system components with new control flow syntax.
shadow-scale
by dylantarre
Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows, modal depth, or dark mode shadow variants. Outputs CSS, Tailwind, or JSON.
react
by dylantarre
Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries, integrating CSS custom properties, or building Next.js design system components with forwardRef and composition.
storybook
by dylantarre
Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interactive examples, visual testing setups, or design system documentation sites.
vue
by dylantarre
Builds token-driven Vue 3 components with Composition API and TypeScript. Use when creating Vue component libraries, integrating design tokens, or building Nuxt design system components with composables.
radius-scale
by dylantarre
Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, card corners, or input styling. Outputs CSS, Tailwind, or JSON.
focus-states
by dylantarre
Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
figma
by dylantarre
Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.
component-docs
by dylantarre
Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.
aria-patterns
by dylantarre
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.