Design AI agent skills

3,804 skills in the archive. Read a skill’s instructions or open its original repository.

• Ant

  by @bergside

  Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

• Dramatic

  by @bergside

  High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.

• Flat

  by @bergside

  Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.

• Clean

  by @bergside

  Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.

• Dithered

  by @bergside

  Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

• Material

  by @bergside

  Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.

• Agentic

  by @bergside

  Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

• Skeumorphism

  by @bergside

  Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

• Pacman

  by @bergside

  Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.

• Creative

  by @bergside

  Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.

• Modern

  by @bergside

  Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.

• Paper

  by @bergside

  Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.

• Sleek

  by @bergside

  Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.

• Editorial

  by @bergside

  Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.

• Cafe

  by @bergside

  Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.

• Mono

  by @bergside

  Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.

• Minimal

  by @bergside

  Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

• Power

  by @bergside

  High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.

• Premium

  by @bergside

  Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.

• Roku

  by @bergside

  App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

• Artistic

  by @bergside

  High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

• Corporate

  by @bergside

  Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.

• Fantasy

  by @bergside

  Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

• Levels

  by @bergside

  Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

• Neobrutalism

  by @bergside

  Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.

• Basic

  by @bergside

  Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.

• Doodle

  by @bergside

  Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

• Futuristic

  by @bergside

  Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.

• Neumorphism

  by @bergside

  Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.

• Retro

  by @bergside

  Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.

• Glassmorphism

  by @bergside

  Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.

• Professional

  by @bergside

  Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

• Refined

  by @bergside

  Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.

• Spacious

  by @bergside

  Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.

• Matrix

  by @bergside

  A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements

• Contemporary

  by @bergside

  Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.

• Claymorphism

  by @bergside

  Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.

• Shadcn

  by @bergside

  Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.

• Friendly

  by @bergside

  Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.

• Gradient

  by @bergside

  Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.

• Neon

  by @bergside

  Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

• Colorful

  by @bergside

  Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.

• Cosmic

  by @bergside

  Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.

• Bold

  by @bergside

  Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.

• Patterns Of Enterprise Application Architecture

  by @ciembor

  Apply Martin Fowler-inspired enterprise architecture rules when choosing layers, service layers, transaction scripts, domain models, repositories, mappers, or DTOs.

• Designing Data Intensive Applications

  by @ciembor

  Apply Martin Kleppmann-inspired data-system rules when designing reliability, scalability, consistency, replication, transactions, streams, or schema evolution.

• Working Effectively With Legacy Code

  by @ciembor

  Apply Michael Feathers-inspired legacy-code rules when changing hard-to-test code safely with characterization tests, seams, sprout methods, or wrap methods.

• Implementing Domain Driven Design

  by @ciembor

  Apply Vaughn Vernon-inspired implementation DDD rules when building aggregates, domain events, repositories, application services, or context integrations.

• Domain Driven Design Distilled

  by @ciembor

  Apply Vaughn Vernon-inspired lightweight DDD rules when using bounded contexts, subdomains, context maps, and tactical modeling without excess ceremony.

• Domain Driven Design

  by @ciembor

  Apply Eric Evans-inspired DDD rules when modeling a complex domain, defining bounded contexts, protecting ubiquitous language, or designing aggregates.

• Clean Code

  by @ciembor

  Apply Robert C. Martin-inspired clean code rules when improving readability, naming, function design, responsibilities, or testable everyday code.

• Draft Wireframe

  by @jeremylongshore

  Wireframe a screen — text/ASCII by default, or hand-drawn HTML when the user says "sketch", "hand-drawn", "lo-fi HTML", "whiteboard", "graph paper", or "visual wireframe". Text mode produces a buildable ASCII spec Form and Prism…

• Draft Recon

  by @jeremylongshore

  UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the…

• Draft Flow

  by @jeremylongshore

  Use when asked to design a user flow, map how a user moves through a feature, create a wireframe or flow diagram, or document interaction design for a product brief. Examples: "design the flow for X", "map out the user journey",…

• Crest Okr

  by @jeremylongshore

  OKR design — create objectives and key results with a North Star metric, input metrics tree, and cadence. Use when asked to "set OKRs", "define our objectives", "what should we measure this quarter", "design our OKR framework",…

• Atlas Present

  by @jeremylongshore

  Generate a polished HTML presentation page and Obsidian Canvas for big releases — new products, takeovers, major migrations. Non-technical audience. Use when asked to "present this", "release announcement", "show what we built",…

• Atlas Report

  by @jeremylongshore

  Render agent findings as a styled HTML report in the browser. Use when asked for "full report", "detailed report", "show in browser", or when CLI output exceeds the 40-line budget.

• Draft

  by @jeremylongshore

  UX designer — user flows, information architecture, wireframes, and interaction design.

• Core Web Vitals

  by @addyosmani

  Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix…

• Accessibility

  by @addyosmani

  Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

• Influencer Discovery

  by @aaron-he-zhu

  Use when the user asks to "find influencers", "build an influencer list", or "discover creators in [niche]"; produces a multi-platform candidate pool, per-influencer evidence profiles, authenticity red-flag screening, and a…

• Email Render Builder

  by @aaron-he-zhu

  Use when the user asks to "build the email HTML", "make this email responsive", "fix dark-mode rendering", or "QA the email across clients"; produces the coded HTML build — a responsive table layout, dark-mode + accessibility…

• Message House Builder

  by @aaron-he-zhu

  Use when the user asks to "build a message house", "write a PR-FAQ for our launch", or "define the launch narrative and value pillars"; derives from the positioning canvas a message house — tagline, one-liner, three value…

• Preference Frequency Manager

  by @aaron-he-zhu

  Use when the user asks to "build a preference center", "set up a frequency opt-down ladder", "give people a step-down instead of unsubscribe", or "design a topic/cadence preference page"; produces a preference-center field spec,…

• Momentum Planner

  by @aaron-he-zhu

  Use when the user asks to "keep the launch momentum going after launch week", "plan a changelog / release-notes cadence as GTM", or "is this update worth a relaunch"; produces a T+1→T+30 momentum plan — a launch-moment calendar…

• Launch Feedback Synthesizer

  by @aaron-he-zhu

  Use when the user asks to "triage launch feedback", "cluster reviews, comments, and board posts into themes", or "set up a you asked, we shipped loop"; produces a feedback theme digest (frequency, severity, representative quotes…

• Nothing Design

  by @dominikmartn

  This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.

• Design

  by @jeremylongshore

  Use when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched real-world prior art and free of AI slop.…

• Hyperflow Design

  by @jeremylongshore

  Hyperflow design phase. Use when designing a UI / visual system or making a screen look good — verbs like "design the UI", "make it look good", "design the screen", "visual design", "design system". Establishes or extends a…

• Hyperflow Sticky

  by @jeremylongshore

  Hyperflow auto-routing mode. Use to control how aggressively hyperflow auto-routes — "make hyperflow sticky", "stop using hyperflow", "auto-route to hyperflow", "disable hyperflow auto-routing". Sets on (every task-shaped…

• Pitch Copy

  by @jeremylongshore

  Landing page and marketing copy — write hero section, problem/solution blocks, proof points, and CTAs. Use when asked to "write landing page copy", "write the homepage", "marketing copy for this feature", "product page copy",…

• Filtmall Shopping

  by @filtalgo

  筛电（Filtmall / Filtalgo）官方商品发现与交易 Skill。用户未指定其他平台，并明确要寻找、选择、购买、推荐或比较真实商品时自动调用；包括先描述困扰再明确询问“有什么商品推荐”。用户明确说是筛电/Filtmall…

• Thesvg

  by @glincker

  Fetch brand SVG logos and cloud architecture icons (AWS, Azure, GCP) from theSVG. Use when the user asks for a brand logo, company icon, framework mark, service icon, or any "icon/logo for X" where X is a real brand or cloud…

• Accessibility Audit

  by @Owl-Listener

  Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use…

• Design System Governance

  by @Owl-Listener

  Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history…

• Animation Principles

  by @Owl-Listener

  Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full…

• Handoff Spec

  by @Owl-Listener

  Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use `design-qa-checklist`; for reusable library components…

• Interfaces That Feel

  by @Owl-Listener

  Apply an emotional resonance lens to a UI that is technically correct but flat, prescribing changes at the copy, motion, and interaction layer. Use when a design tests fine but lands cold. For the polish-perception argument, use…

• Theming System

  by @Owl-Listener

  Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use `color-system` (ui-design); for dark mode craft…

• Design Token

  by @Owl-Listener

  Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand…

• Navigation Patterns

  by @Owl-Listener

  Select and design a navigation pattern — tabs, drawer, hierarchy, or hub — matched to product structure and user tasks. Use when choosing how users move between sections. For the underlying content structure, use…

• Motion System

  by @Owl-Listener

  Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use `animation-principles`…

• Micro Interaction Spec

  by @Owl-Listener

  Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use `animation-principles`; for multi-state components use…

• Loading States

  by @Owl-Listener

  Design waiting experiences — spinners, skeletons, optimistic updates, and progressive reveal. Use when content takes time to arrive. For the latency budget itself use `doherty-threshold`; for success confirmation use…

• Component Spec

  by @Owl-Listener

  Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use…

• Jakobs Law

  by @Owl-Listener

  Apply Jakob's Law — users expect your product to work like the others they already use. Use when deciding whether to innovate on a familiar pattern. For OS-mandated conventions specifically, use `platform-conventions` (ui-design).

• Feedback Patterns

  by @Owl-Listener

  Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use `loading-states`; for failures use `error-handling-ux`.

• Localization Design

  by @Owl-Listener

  Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use `ux-writing` (designer-toolkit).

• Doherty Threshold

  by @Owl-Listener

  Apply the Doherty Threshold — keep system response under 400ms to preserve user flow. Use when diagnosing perceived slowness or setting a performance budget. For what to show during unavoidable waits, use `loading-states`.

• Version Control Strategy

  by @Owl-Listener

  Define version control for design files, components, and libraries — branching, naming, and release. Use when file history is chaotic. For design system contribution rules, use `design-system-governance` (design-systems).

• Design Token Audit

  by @Owl-Listener

  Audit token usage across a product for coverage, drift, and hard-coded values. Use when tokens exist and you suspect they are being bypassed. For defining tokens in the first place, use `design-token` (design-systems).

• Gesture Patterns

  by @Owl-Listener

  Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use `platform-conventions` (ui-design).

• Design System Adoption

  by @Owl-Listener

  Create adoption strategy and enablement materials to drive design system usage. Use when the system exists but teams ignore it. For contribution and versioning rules, use `design-system-governance` (design-systems).

• Pattern Library

  by @Owl-Listener

  Structure a pattern entry — problem context, solution, usage examples, and related patterns. Use when documenting a recurring solution rather than a component. For a single component's API, use `component-spec`.

• Onboarding Design

  by @Owl-Listener

  Design the first-run experience — activation path, progressive disclosure, and time to first value. Use for a user's very first session. For the mechanics of the signup form itself, use `form-design`.

• Case Study

  by @Owl-Listener

  Craft a portfolio case study with narrative arc, process evidence, and outcomes. Use when telling a project's story to an external audience. For an internal stakeholder deck, use `presentation-deck`.

• Documentation Template

  by @Owl-Listener

  Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use `component-spec`.

• Hicks Law

  by @Owl-Listener

  Apply Hick's Law — decision time grows with the number of simultaneous choices. Use when a screen offers too many options at once. For how many items survive in memory afterwards, use `millers-law`.

• Naming Convention

  by @Owl-Listener

  Establish naming rules for components, tokens, and layers with patterns and worked examples. Use when names are inconsistent or being set. For what the tokens actually contain, use `design-token`.

• Presentation Deck

  by @Owl-Listener

  Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.