设计
UI/UX 方向、视觉设计与设计系统
ux-ui
aviflombaum
UX/UI design principles for clean, intuitive interfaces. Use when designing layouts, improving usability, planning information architecture, or ensuring accessibility. Triggers on "user experience", "usability", "information architecture", "accessibility", "interaction design".
web-design
aviflombaum
Web graphic design for interfaces, layouts, and visual systems. Use when designing landing pages, dashboards, hero sections, or applying design aesthetics (Bauhaus, Pop Art, Retro, Futuristic). Triggers on "design a", "visual design", "landing page", "color palette", "typography".
brand-guidelines
JayZeeDesign
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
ui-design
JayZeeDesign
Use this to design a nice UI in single html as inspiration & UI exploration.
design-system-analyzer
NakanoSanku
Analyze any website's UI style using ChromeDevTools to extract precise CSS tokens, animations, and interaction states. Handles complex sites and anti-bot measures by guiding the user. Triggers on "analyze this site", "extract UI style", "create design system from [URL]", or "learn visual style".
ds
harshii0509
Designer-first skill bundle for non-technical founders and designers building their own products. Helps capture a Design Bible, review screens, and ship changes in plain English. Use when the user says "/ds", "designStack", "what skills do I have", "help me get started with my design", or runs with no argument for an overview.
design
neurofoo
Design Thinking process—Empathize, Define, Ideate, Prototype, Test. Use for product design, solving ambiguous problems, or when you don't know what users really need.
apple-hig-designer
axiaoge2
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.
go-viral-or-die
crealwork
Use when generating viral marketing ideas, growth hacking strategies, guerrilla marketing stunts, or attention-driven launch plans for any business. Applies when a user describes their business and wants bold, unconventional marketing ideas, or mentions "viral marketing", "go viral", "rage bait", "controversial marketing", "stunt marketing", "guerrilla marketing", "go viral or die", "Roy Lee", or "Cluely-style marketing". Don't use for SEO, paid ads, email marketing, traditional brand strategy, or crisis reputation management.
frontend-design
julianromli
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
ui-ux-pro-max
julianromli
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
resend-design-skills
julianromli
Use when needing Resend design resources. Routes to brand guidelines, visual identity, and other design sub-skills.
frontend-ui-integration
julianromli
Implement or extend a user-facing workflow in a web application, integrating with existing backend APIs. Use when the feature is primarily a UI/UX change backed by existing APIs, affects only the web frontend, and requires following design system, routing, and testing conventions.
web-design-guidelines
julianromli
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".
browser-workflow-generator
neonwatty
Generates, creates, or updates browser workflow files. Use this when the user says "generate browser workflows", "create browser workflows", "update browser workflows", or "iterate on browser workflows". Thoroughly explores the app's codebase to discover all user-facing features, routes, and interactions. Creates comprehensive numbered workflows with substeps that cover the full user experience.
ios-workflow-generator
neonwatty
Generates, creates, or updates iOS workflow files for testing web apps in Safari on the iOS Simulator. Use this when the user says "generate ios workflows", "create ios workflows", "update ios workflows", or "iterate on ios workflows". Thoroughly explores the web app's codebase to discover all user-facing features, pages, and interactions. Creates comprehensive numbered workflows with substeps that cover the full user experience when viewed on iOS Safari.
feature-interview
neonwatty
Deeply interviews the user about a feature idea before implementation. Use this when the user says "interview me about [feature]", "I want to create a new feature", "let's create a new feature", "new feature", "plan a feature", or describes a feature they want to build. Asks probing, non-obvious questions about technical implementation, UI/UX decisions, edge cases, concerns, tradeoffs, and constraints. Continues interviewing until the feature is fully understood, then writes a detailed implementation plan.
coder-frontend-design
OzeroHAX
Frontend design system practices: tokens, typography, color, layout, and component consistency.
frontend-design
xenitV1
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
tailwind-patterns
xenitV1
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
z-index-scale
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
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
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
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.