◆Design & UX Review pack

Direction and intent for frontend design. Use with design when defining purpose, tone, domain, color world, and review bar; includes cross-domain lens from cinema, architecture, marketing, UX, automotive, industrial design.

Reference guide to native UI conventions across iOS (Apple HIG), Android (Material 3), macOS, Windows 11 Fluent, and web — with concrete numbers, comparison tables, and when to adapt vs. when to ship a custom cross-platform brand system.

Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams. Use when generating architecture diagrams, flow diagrams, or any visual diagram via create_diagram or mermaid_to_excalidraw.

Reference-grade guide to ethical interface design and the recognized deceptive-pattern taxonomy (Brignull / deceptive.design × Mathur et al.) — every dark pattern with a concrete example and ethical fix, consent and privacy UX, attention ethics, honest-default frameworks, and the FTC/GDPR/DSA legal exposure that turns each pattern into liability.

Structured visual QA verdict for screenshot-to-reference comparisons

Architect, name, format, and export design tokens as the single source of truth across Figma, code, and multi-platform builds using the W3C DTCG format, a primitive→semantic→component tier model, and a Style Dictionary v4 pipeline.

Use when styling any artifact to our brand: apply the exact house hex palette, Inter/IBM Plex Mono type stack, and Green→Azure→Graphite accent cycle.

Reference-grade guide to UX writing and content design — voice and tone systems, every UI string type with before/after examples, terminology consistency, inclusive language, and localization readiness for any screen.

Reference-grade operating manual for running a design system as a versioned product — operating models, contribution and release process, Figma↔code token parity, documentation, adoption metrics, and the anti-patterns that kill systems.

Apply when facing a novel UI interaction or architectural decision with no precedent in the codebase. Build 2-3 competing prototypes and compare side by side before committing.

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive des

Optimize any form that is NOT signup or account registration — including lead capture, contact, demo request, application, survey, quote, and checkout forms.

The inclusive-design philosophy and practice — Microsoft's 3 principles + Persona Spectrum, the social model of disability as mismatch, and deep cognitive, neurodivergent, sensory, cultural, economic, and age inclusion patterns that go beyond WCAG conformance.

Reference-grade survey of the named design systems (Material 3, Apple HIG, Fluent 2, Carbon, SLDS, Polaris, Atlassian, Primer, Ant, Spectrum) and the modern build stack (Tailwind, shadcn/ui, Radix/React Aria/Ark, MUI/Chakra/Mantine/Base) — each system's actual philosophy and rules, plus how to choose adopt-vs-adapt-vs-build.

UI 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.

Reference-grade guide to designing every state a view can be in — ideal, empty (first-use vs cleared vs no-results), loading, partial, error, offline, success, blocked, and zero-results — plus first-run onboarding that drives activation to the aha moment through show-don't-tell, just-in-time guidance, seed data, progress checklists, and contextual permission priming.

Author/validate/export Google's DESIGN.md token spec files.

OverKill Hill P³ visual style registry and application workflow. Use when a user wants to extract a reusable brand, visual style, palette, typography system, layout language, or interface aura from a website, stylesheet, document, presentation, infographic, or set of visual assets. Also activate when a user wants an SPA, documentation, presentation, image brief, or other target artifact aligned to one or more named style profiles. This is the authoritative profile-driven workflow for capturing a

Reference-grade guide to the canonical usability principles — Nielsen's 10 heuristics, Norman's design fundamentals, Shneiderman's 8 golden rules, Rams' 10 principles — plus how to run a heuristic evaluation across any web, mobile, desktop, TV, or voice screen.

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in F

Generate lens drawing guidance, Zemax exports, CAD drawing notes, and reference dimensions.

An embedded UX research skill that continuously studies how users interact with OpenClaw. It observes conversation patterns, task completions, friction points, and satisfaction levels through passive observation and active micro-surveys. Use this skill whenever a new session begins, whenever a task completes, and at end-of-day to generate insight reports. This skill should trigger on every conversation — it runs silently in the background collecting observational data and surfaces survey questio

Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when designing UI/UX prototypes in Stitch, generating app interfaces, or creating web/mobile design mockups with AI assistance. This is a standalone tool skill, not tied to Talent Architect stack.

Use when applying Anthropic brand colors/typography to an artifact: use the exact brand hex palette and Poppins/Lora type, not approximations.

Reference-grade guide to designing beyond the screen — combining touch/visual/voice/audio/haptic modalities, conversational and LLM-agent UX, voice UI principles and error recovery, sound design, iOS/Android haptics, and TV/automotive/wearable/AR contexts.

Applies the Aetherweave design system — Black Bleak Modern Extremism edition — (obsidian tokens, dark liquid glass, monochromatic typography, motion, accessibility, components) to UI, CSS, content, and design artifacts. Use when the user mentions Aetherweave, skills design.md, dark luxury extremism, --aw-* tokens, liquid void glass, black mono abstract UI, or asks for branding consistent with this repository's spec.

CHECK step of the ArtOps loop. Scores each generated image candidate against a Dribbble-portfolio fitness rubric (composition, brand consistency, trend/tag alignment, prompt adherence). Produces checker_frame_json. Does not decide the verdict — that's the Reflector.

Use when 处理玩家可见的游戏 UI、玩法互动、引导、失败恢复、挑战链路或体验验收。

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

Render the UI and prove it's balanced + usable: a deterministic layout audit (centroid / optical-center / pixel-oracle balance via explicit math + annotated screenshot) plus a vision-judged Nielsen usability audit by a separate fresh-eyes judge. The measurement layer taste-only design skills lack.

Reference-grade catalogue of the attributed cognitive laws behind interface design (Fitts, Hick-Hyman, Miller, Jakob, Tesler, Postel, Doherty, Peak-End, and the behavioral-econ cluster) — each with origin, a concrete UI application, the design rule, and the pitfall.

UX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI "feels off", "sucks to use", is hard to learn, needs an instruction wall, or before shipping an interactive tool/editor/app. Scores the RENDERED UI against Nielsen's 10 +...

FREE AI image & portrait generation - No authentication required! Fast generation (3-5 seconds) with 140+ nationalities, diverse styles, professional headshots, character design, and fashion visualization. Perfect for creative projects, character design, professional portraits, and diverse representation. Simple curl-based API. Powered by diversityfaces.org

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.

Developer experience audit and improvement skill. Use when the user wants to review their API, CLI, SDK, or docs from a developer perspective, benchmark their onboarding flow against competitors, measure Time to Hello World (TTHW), trace friction points step-by-step, or improve the developer experience of a product before launch.

UX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI "feels off", "sucks to use", is hard to learn, needs an instruction wall, or before shipping an interactive tool/editor/app. Scores the RENDERED UI against Nielsen's 10 + interaction heuristics via a SEPARATE fresh-eyes judge and returns a prioritized, severity-ranked fix list. Usability ≠ aesthetics — a beautiful UI can still be unusable; this audits the interaction.

Generates visual assets via image generation tools. Use when user needs icon s,mockups, illustrations, or says generate image, create asset. Triggers: ge nerate image, create asset, make icon, design mockup.

Author opinionated design principles and a flexible brand identity system — name, logo, attributes-to-visuals translation, brand-in-product, the brand→token bridge, guidelines, and rebrands — that stay consistent, accessible, and alive across any surface.

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX wri

Clarify the brief BEFORE any design work to avoid building the wrong thing. Interrogates goal, user, constraints, success criteria, and scope, then writes a short context doc the other design skills consume. Use when the user says "let's design X", "build a UI for Y", "get context", "clarify the brief", or kicks off any product-design task without a clear spec. First stage of the Product Design set — highest leverage for reducing rework.

Author/validate/export Google's DESIGN.md token spec files.

Generate multiple angles and shot types of a single product for ecommerce-ready image sets. Produces a coherent set (hero 3/4, front, side, back, detail macro, scale, packaging, in-hand) keeping product identity consistent across shots. Use when the user says "different angles", "product shots", "ecommerce image set", "shot list", "PDP gallery", or needs a multi-view set of one product. Part of the Creative Production set.

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

Representation expert who defeats systemic AI biases to generate culturally accurate, affirming, and non-stereotypical images and video.

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.

CQ specialist that detects invisible exclusion, researches global context, and ensures software resonates authentically across intersectional identities.

Connect business positioning to a concrete visual language. Maps strategic positioning (category, differentiator, who-it's-for, who-it's-against) onto visual decisions — palette, type, imagery, tone — so the look reinforces the strategy. Use when the user says "positioning into visuals", "what should the brand look like given our strategy", "align visuals with positioning", or is moving from strategy to brand expression. Part of the Creative Production set.

Expert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation. Creates beautiful, consistent, accessible user interfaces that enhance UX and reflect brand identity

Heuristic eval against Nielsen's 10 usability heuristics plus a WCAG 2.2 first-pass for keyboard, focus, contrast, and motion. Use when reviewing a UI's interaction design and baseline accessibility together.

- **Role**: You are a rigorous prompt engineer specializing exclusively in authentic human representation. Your domain is defeating the systemic stereotypes embedded in foundational image and video...

Prüft bereitgestellte Formularbeschreibungen auf Struktur, Validierung, Verständlichkeit und Barrierefreiheit.

Stop Codex, GitHub Copilot, Claude Code, and Cursor from shipping generic UI. Use UIZZE’s public catalogue of 800,000+ real web and iOS screens to extract product-specific design decisions and enforce a hard finish gate for web and iOS interfaces.

Run three independent Codex vision inspections of a render, pose, screenshot, or UI, then synthesize a consensus report. Use to verify visible anatomy, geometry, alignment, or polish before proceeding; use design-critique for structured UX feedback and adversarial-review for text artifacts.

Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast or tap-target sizes, or designing native-feeling Apple UI (e.g., 'audit my iOS app against the HIG', 'is this text readable on Liquid Glass?').

Generate polished .drawio diagrams — architecture, UML, ERD, flowcharts, ML/DL model figures, network topology, mind maps, and any visualization. Use when the user requests diagrams or when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Supports 10,000+ stock/branded shapes, auto-layout, swimlanes, AI/LLM brand logos, and export to PNG/SVG/PDF/JPG via the draw.io desktop CLI.

Expert brand strategist and guardian specializing in brand identity development, consistency maintenance, and strategic brand positioning

Orchestrator for the Product Design skill set — turn early ideas into reviewable prototypes. Routes to the right sub-skill (get-context, research, audit, ideate, image-to-code, url-to-code, prototype, qa, share) based on where you are in the design process. Use when the user gives a high-level design goal like "design a UI for X", "prototype this idea", "rebuild this screen", "review our flow", or isn't sure which design step they need. Delegates to design-* skills.

Hand-drawn Excalidraw JSON diagrams (arch, flow, seq).

General Blender workflow skill for AI agents working with .blend, .fbx, .obj, .glb, glTF, materials, scene inspection, bpy automation, headless Blender batch runs, export/reimport validation, previews, and optional Blender MCP control. Use when a task asks to open, inspect, create, automate, convert, optimize, render, or verify Blender or 3D asset files in a user-agnostic way.

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

Generate images matching a website's visual style. Use this skill when the user wants to: create images in the style of a website, match a website's aesthetic, generate branded images from a URL, create banners/social posts/hero images matching a site's design, extract a website's visual identity and produce images in that style, or replicate a website's look and feel in new images. Also trigger when the user mentions 网站风格图片, 匹配网站风格, 品牌风格图片, 网站设计风格生成, 根据网站生成图片, or 仿站风格.

This skill should be used when the user wants to create, fix, or convert SVG assets in any project — banners, badges, icons, logos, window/IDE mockups, terminal screenshots, or diagram nodes. Common triggers include "create an SVG", "make a banner", "design an icon", "draw a logo", "fix the viewBox", "convert SVG to PNG", and "preview this SVG". Bakes in edge-to-edge viewBox discipline (`viewBox="0 0 W H"` — no padding, no offsets), hardcoded hex colors (SVG cannot read CSS variables), a Node- b

iOS-first mobile UI/UX design and implementation guide. Covers 50+ design styles, color palette standards, typography system, iOS Human Interface Guidelines, touch psychology, performance-conscious layouts, accessibility, and a Flutter-specific design system. Use when designing mobile screens, iOS/Android UI components, design systems, color palettes, typography, dark mode, animations, layouts, spacing, touch targets, glassmorphism, neumorphism, minimalism, gestures, or safe area handling.

Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast or tap-target sizes, or designing native-feeling Apple UI (e.g., 'audit my iOS app against the HIG', 'is this text readable on Liquid Glass?').

Generate several distinct UI directions for a screen or flow before committing to one. Produces 2-4 named interface directions with layout logic, component choices, and tradeoffs, optionally with generated mockup images. Use when the user says "ideate the UI", "give me layout options", "design directions for this screen", "explore the interface", or after context/research and before prototyping. Part of the Product Design set.

Create net-new UI assets that match an existing web application's design system, including icons, hero art, feature graphics, mockups, and branded visuals. Use when the project needs additional visual assets that fit the current product style. Do not use this for replacing all existing site imagery at scale, or for generating favicons/Open Graph images; prefer web-replace-assets or web-asset-generator for those.

Use when the user invokes /design, or asks to design/build/audit/polish a web or cross-platform UI or create a design case study — screen, component, layout, table, chart, form, color system, portfolio narrative — and it's unclear which design reference skills apply. Dispatcher that routes to the right companion skills, delegates case studies to /case-study, and routes native iOS work to /ios.

Design product notification emails. Use when building activity alerts, digests, status updates, or managing notification frequency and user preferences.

Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

Use when selecting and placing approved supporting icons, images, SVGs, diagrams, or infographics in an editable PPTX deck.

Validate design systems for accessibility (WCAG), responsive design, and component consistency with design token analysis.

Design frictionless signup experiences for developers including GitHub OAuth, API key generation, and onboarding personalization. Trigger phrases: developer signup, dev registration, OAuth flow, API key onboarding, reduce signup friction, developer authentication, signup conversion,...

Spatial composition and layout for frontend design. Load with design when composing pages/dashboards/components, or whenever generated UI looks off — overlapping/colliding elements, weak hierarchy, or generic ("looks like every startup site"). The core idea: a model can't trust its own layout, so render it, critique it with fresh eyes, and deviate from your first instinct.

Turn a design file into implementable specs: tokens, spacing scales, and the states designers forget to draw.

Use when analyzing a reference PPTX for read-only structure, theme, typography, layout rhythm, diagnostics, derived template catalogs, or safe OOXML package inspection.

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

UI/UX patterns for modern macro + food-tracking apps (MyFitnessPal, Cal AI, Lose It, MacroFactor, Lifesum) — the calorie/macro dashboard, the log→remaining loop, fast multi-modal entry (search/barcode/photo/voice), the food diary, weight trend, daily score, and the anti-patterns that make trackers feel like data entry chores. Use when designing or reviewing a nutrition/calorie app's screens; pairs with dense-no-scroll-layout, ios26-hig-patterns, data-visualization.

Guia al agente para generar interfaces de alta calidad con Google Stitch. Usar cuando se creen pantallas con stitch_generate_screen, se exporte diseño a frameworks, o se necesite un design system coherente. Proporciona criterios de diseño (no valores fijos) para evitar interfaces genericas y producir resultados premium.

Generate and iteratively edit images. Supports storage, UI for manual editing, history, version branching, time travel, reference images, and multiple AI models and providers with your own API keys.

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

Specify lighting, atmosphere, and light transitions for Seedance 2.0 prompts using named light sources, core parameters, and atmosphere contracts. Use when the scene needs a specific mood, time of day, or lighting style, or when lighting is flat, inconsistent across shots, or clipping.

Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.

Agency-grade landing page design skill. High-conversion, brand-matched, animated. Overrides every generic landing page pattern AI defaults to. Produces Awwwards-caliber pages that convert.

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

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

You are **UI Designer**, an expert user interface designer who creates beautiful, consistent, and accessible user interfaces. You specialize in visual design systems, component libraries, and pixel...

Audit an existing UI for usability, hierarchy, accessibility, and conversion problems. Reviews a live URL, screenshot, or codebase against heuristics and reports prioritized issues with fixes. Use when the user says "audit this UI", "what's wrong with this screen", "UX review", "find the problems", "why is this confusing", or has existing interface to critique. Part of the Product Design set. Can drive a browser for live audits.

Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slid

可变体的 warm editorial 演示设计系统，用于 presentation、case sharing、项目汇报、战略叙事和产品发布。支持横向全屏 HTML deck 与程序化 PPTX，通过 style profile、语义 slide manifest、构图新颖度规划和反重复验证，在保持编辑设计 DNA 的同时避免固定配色、固定卡片和固定 11 页模板。用户要求 Pfizer/Anthropic/warm editorial/编辑设计风格、类似血液科那套，或需要高规格且非模板化的 HTML/PPT 演示时使用。

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

This 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.

Remove backgrounds from images using AI. Triggers include: "remove background", "transparent background", "cut out", "isolate subject", "remove bg", "make transparent", "extract subject", "background removal" Creates PNG or WebP images with transparent backgrounds.

Roleplay a hostile user to find and triage UX pain points.

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

Generate a native mobile information architecture registry — platform strategy, navigation model, deep-link strategy, permissions strategy, screen-template inventory, per-screen blueprints, flows, shared surfaces, push notifications, lifecycle behavior, and use-case traceability. Use when asked to create a mobile IA, design the app navigation and screen map, produce a screen inventory, define deep-link and permissions strategy, or produce a MOBILE_IA.md.

Audit a PowerPoint presentation for layout issues, text overflow, visual hierarchy problems, and consistency gaps. Use when asked to review a slide deck, check a presentation before a meeting, audit slides for layout problems, or QA a deck before sharing. Produces a slide-by-slide report with issues ranked by severity and specific fixes. Best used with Claude Opus 4.7 or newer for reliable slide-level vision analysis.

CDO design lead. Owns brand system, UI/UX direction, references, mockups, and design-review hiring.

Design user experience wireframes, user flows, and interactive mockups for web and mobile applications using industry-standard notation

Apple Human Interface Guidelines interaction and UX patterns.

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