Design
1,149 skills.
Browse
handoff-specowl-listener1.8KWrite 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 use `component-spec` (design-systems).empathy-mapowl-listener1.8KBuild a Says, Thinks, Does, Feels map for one user or segment. Use when sharing user understanding quickly. For a composite archetype with goals and behaviours use `user-persona`; for cross-session themes use `affinity-diagram`.naming-conventionowl-listener1.8KEstablish 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`.ui-ux-designerlotosbin1.8KUI/UX 设计师专家，精通界面设计、交互设计、用户体验和设计系统card-sort-analysisowl-listener1.8KAnalyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).design-rationaleowl-listener1.8KWrite rationale connecting decisions to user needs, business goals, and principles. Use when a decision needs defending in writing. For a live conversation, use `design-negotiation`.latex-postersk-dense-ai1.8KCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.metrics-definitionowl-listener1.7KDefine UX metrics and KPIs that connect design decisions to measurable outcomes. Use when choosing what to measure. For presenting the results afterwards, use `design-impact-reporting` (design-ops).ios-design-guidelinesehmo1.7KApple Human Interface Guidelines for iPhone. Use when building, reviewing, or refactoring SwiftUI/UIKit interfaces for iOS. Triggers on tasks involving iPhone UI, iOS components, accessibility, Dynamic Type, Dark Mode, or HIG compliance.design-review-processowl-listener1.7KEstablish review gates — criteria, checkpoints, and approval flow. Use when work ships without consistent review. For running one individual session, use `design-critique`.test-scenarioowl-listener1.7KWrite realistic usability task scenarios with success criteria and facilitation notes. Use when you have a study and need the tasks. For the surrounding study design, use `usability-test-plan` (design-research).premiumbergside1.7KApple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.opportunity-frameworkowl-listener1.7KIdentify, score, and prioritise design opportunities against impact and effort. Use when there are more ideas than capacity. For framing the one you choose, use `design-brief`.design-sprint-planowl-listener1.7KPlan and facilitate a design sprint from challenge framing through prototype testing. Use when compressing discovery into days. For ongoing team cadence, use `team-workflow`.design-system-adoptionowl-listener1.7KCreate 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).ui-ux-pro-maxdavila71.7KUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). 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: gclick-test-planowl-listener1.7KDesign first-click and click tests for findability and navigation. Use when testing whether people can locate something. For full task-based observation, use `test-scenario`.ui-designtencentcloudbase1.7KUse when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.editorialbergside1.7KMagazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.build-a-brandpika-labs1.7KUse when the user asks for build a brand or a task matching the examples below. Build a practical brand identity from any input — an idea, an existing website, a list of reference brands, product photos, or "I want to rebrand X". Default to a fast quick-brand path for founder-kit users, and offer the full 14-16-page guidelines as an opt-in upgrade. Use when someone wants a brand identity but does NOT need a full commerce launch (no Shopify, no product listings, no social posting). Trigger phrasebrand-identitytravisjneuman1.7KBrand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.figma-use-figjamfigma1.7KThis skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.figma-design-to-codefigma1.7K**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must Nui-design-systemdavila71.7KUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.frontend-designmager1.7KFrontend design skill that generates, restyles, and guides UI development in mager's actual design taste — concept-led interfaces that feel authored, tactile, expressive, and highly usable, spanning editorial warmth, bright modern product design, and high-contrast neon systems. Use this skill when building or reviewing any frontend UI.wireframeghaida1.7KDesign the structural anatomy of screens at wireframe fidelity — what goes where and why, before anyone argues about how it looks. Part of the Intent design strategy system. Produces lo-fi idea boards for divergent exploration, complete interactive grayscale wireframes with real labels and real hierarchy, and click-through prototypes that materialize flow logic from /journey. Trigger on: wireframe, wireframes, wireframing, thumbnails, "sketch the screen", "lay out this page", "what goes where oncritique-visual-hierarchyowl-listener1.7KCritique a rendered screen's hierarchy — entry point, eye flow, weight distribution, and emphasis. Use when attention lands in the wrong place. For establishing hierarchy in new work, use `visual-hierarchy` (ui-design).beautiful-shadowsmengto1.6KApply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.minimalbergside1.6KStripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.cleanbergside1.6KSimplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.quick-mockupscivitai1.6KCreate multiple UI design mockups in parallel. Use when asked to create mockups, wireframes, or design variations for a feature. Creates HTML files using Mantine v7 + Tailwind following Civitai's design system.critique-typographyowl-listener1.6KCritique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Use when reviewing type on a screen. For defining the scale itself, use `typography-scale` (ui-design).create-websitewondelai1.6KGuided journey from a blank page to a live, high-converting website, built message-first, then design, then conversion. Orchestrates ten skills phase by phase - one-page-marketing, storybrand-messaging, made-to-stick, top-design, web-typography, refactoring-ui, ux-heuristics, cro-methodology, scorecard-marketing, steve-jobs-design-review - asking the user questions at every decision point and recording results in the project docs/ folder (POSITIONING.md, WEBSITE.md, CREATE-WEBSITE-PLAN.md) so thframer-motiondylantarre1.6KUse when implementing Disney's 12 animation principles with Framer Motion in React applicationsenterprisebergside1.6KDark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.aesthetic-usabilityowl-listener1.6KApply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).brand-identityarnabbagxd1.6KCreate a visual identity brief for a brand — logo direction, color palette, typography, imagery style, and design system foundations. Use when the user says "visual identity", "brand identity", "logo brief", "logo direction", "design brief", "brand design", "color palette for my brand", "typography for my brand", "visual language", "design system", "brand look and feel", "what should my brand look like", or is briefing a designer or design agency. Also use when the user has a brand strategy and improve-appwondelai1.6KGuided journey from a shipped app that works but feels rough to a product that fits the job, flows without friction, reads clearly, and persuades honestly. Orchestrates nine skills phase by phase - jobs-to-be-done, ux-heuristics, design-everyday-things, refactoring-ui, microinteractions, made-to-stick, influence-psychology, high-perf-browser, steve-jobs-design-review - asking the user questions at every decision point and recording results in the project docs/ folder (CUSTOMER.md, DESIGN.md, POSinformation-architectureowl-listener1.6KDesign content structure, hierarchy, labelling, and the navigation model. Use when organising what exists. For the UI that exposes it use `navigation-patterns` (interaction-design); for user-generated grouping evidence use `card-sort-analysis` (design-research).neobrutalismbergside1.6KModern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.shadcnbergside1.6KShadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.frontend-designcustomware-ai1.6KStrict frontend design guardrails for building modern, minimal-visual-noise, airy, non-generic app UIs. Use whenever creating or changing frontend UI, React components, shadcn/ui themes, Tailwind styles, app layouts, or first-version product screens. This skill complements vertical/domain skills like CPQ, CRM, and similar app builders: follow the selected domain skill's workflow and layout requirements, then enforce this skill's shared visual rules for brand-aware theming, generous spacing, typocritique-compositionowl-listener1.6KCritique a rendered screen's composition — balance, whitespace, rhythm, and gestalt grouping. Use when a layout feels off but hierarchy is fine. For emphasis and eye flow specifically, use `critique-visual-hierarchy`.bentobergside1.6KModular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.tailwind-design-systemsickn331.6KBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.graphic-designercharlie9471.6KCreate LinkedIn post graphics. Decides between an HTML/CSS structured graphic or an AI-generated infographic based on the post content. Use this skill whenever the user says "design a graphic", "create a visual", "make an image", "graphic for my post", "LinkedIn image", or wants any visual content to pair with a LinkedIn post. Also trigger when the user finishes writing a post and wants a matching graphic.reference-design-contractnexu-io1.6KTurn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Use it before prototypes, decks, redesigns, or image remix work when the user needs a reusable visual direction rather than a one-off prompt.neumorphismbergside1.6KSoft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.refinedbergside1.5KCarefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.professionalbergside1.5KPolished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.