Design
1,149 skills.
Browse
color-expertnexu-io2.7KColor science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory.canvas-designnexu-io2.7KCreate beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.plan-design-reviewnexu-io2.7KSenior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.designing-beautiful-websitestristanmanchester2.7KDesign, implement, or critique website and web-app UX/UI: information structure, user flows, responsive layouts, visual systems, content, and interaction states. Use for a requested interface or visual-design change; do not expand a small component edit into an unrequested product redesign.swiftui-designnexu-io2.7KSwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.extract-designmanavarya092.7KExtract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'.muapi-ui-designsamuraigpt2.7KGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.aifrontend-slidesnexu-io2.7KOpenDesign as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Built as a decision-grade AI literacy deck for teams new to AI, leadership.nanobanana-pptnexu-io2.6KAI-powered PPT generation with document analysis and styled images via the NanoBanana stack. Combines image generation with structured deck output.theme-factorynexu-io2.6KApply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.design-consultationnexu-io2.6KBuild a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.ppt-keynotenexu-io2.6KAn operating-model redesign for a scaling logistics firm — the diagnosis, the target model, and the transition roadmap. Built as a decision-grade consulting deck for client sponsor, ops leaders.after-hours-editorial-templatenexu-io2.6KLuxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.figma-implement-designnexu-io2.6KTranslate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.platform-designnexu-io2.6K300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.brainstormingnexu-io2.6KTransform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.enhance-promptnexu-io2.6KImprove prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output.shader-devnexu-io2.6KGLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.field-notes-editorial-templatenexu-io2.6KEditorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.html-ppt-retro-quarterly-reviewnexu-io2.6KRetro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck with heavyweight slab headlines, clean cream paper sections, structured grids, and fast premium motion pacing (3 slides, each hold under 3s in video mode).minimax-pdfnexu-io2.6KGenerate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.steve-jobs-design-reviewwondelai2.6KReview designs, products, and features with Steve Jobs'' standards: ruthless simplicity, focus, and end-to-end excellence. Use when the user mentions "Steve Jobs review", "design review", "product review", "what would Steve do", "insanely great", "this feels too complicated", "too many features", "product taste", "saying no", or "is this good enough to ship". Also trigger when critiquing a UI, feature, or roadmap for focus and simplicity, cutting scope to the essential, or pressure-testing the wdigits-fintech-swiss-templatenexu-io2.6KSwiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file.figma-generate-designnexu-io2.6KBuild or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.figma-create-design-system-rulesnexu-io2.6KGenerate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.frontend-design-deslopsamber2.6KDesigns distinctive, non-generic UI — typography, OKLCH color, design tokens (DESIGN.md), layout, components, motion, dark mode, accessibility — for landing pages, SaaS apps, dashboards, ecommerce, decks, docs, portfolios, avoiding the AI-slop / Claude-esque default look. Use whenever building or styling any web frontend, app, dashboard, landing page, deck, or artifact, or when the user says "make it not look like AI", "de-slopify", "deslop", "less generic", "give it character", "design a UI foreditorial-burgundy-principles-templatenexu-io2.6KEditorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation.swiss-creative-mode-templatenexu-io2.6KSwiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.figma-create-design-system-rulesopenai2.6KGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.figma-usenexu-io2.6KRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.gsap-timelinenexu-io2.6KOfficial GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).figma-useopenai2.5K**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to propertieswiss-user-research-video-templatenexu-io2.5KSwiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file.figma-generate-designopenai2.5KUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discofigma-generate-librarynexu-io2.5KBuild or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.stitch-loopnexu-io2.5KIterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI.figma-code-connect-componentsnexu-io2.5KConnect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.modern-web-designfreshtechbro2.5KModern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessibility, or building performance-first interfaces. Triggers on tasks involving modern design trends, micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility compliance, performance optimization, or design system architecture. References animation skills (GSAP, Frafigma-create-new-filenexu-io2.5KCreate a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.card-xiaohongshunexu-io2.5KXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.wpdsnexu-io2.5KWordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.resume-modernnexu-io2.5KModern minimal resume, single A4 page, ready for print or PDF export.mockup-device-3dnexu-io2.5KStatic iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.article-magazinenexu-io2.5KHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.deck-swiss-internationalnexu-io2.5KOpenDesign's FY26 board pre-read: the open-core bet, growth vs burn, and the one decision the board must approve. Built as a decision-grade corporate strategy deck for board, CEO, CFO.animate-textpixel-point2.5KCurated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or similar stacks.frontend-designsickn332.5KDesign and implement a distinctive frontend within the product’s existing brand, accessibility, performance and framework constraints.doc-kami-parchmentnexu-io2.4KWarm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.presentation-creatorgetsentry2.4KCreate data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a deck", "create a data presentation", "build a Sentry presentation". Scaffolds a complete slide-based app with charts, animations, and single-file HTML output.frame-liquid-bg-heronexu-io2.4KWebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.