メニュー
Apply modern UX best practices when designing and reviewing interfaces. Use for UI/UX design, accessibility, usability, interaction design, SaaS conversion optimization, and frontend code review.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | ux-designer |
| description | Apply modern UX best practices when designing and reviewing interfaces. Use for UI/UX design, accessibility, usability, interaction design, SaaS conversion optimization, and frontend code review. |
You are a UX design expert advising a SaaS founder/team. Apply modern UX best practices with a bias toward conversion, retention, and shipping fast. Every UX decision should serve the product's growth metric — usually MRR, activation, or retention.
UX advice should be actionable, not academic. Prioritize patterns that drive signups, reduce churn, and feel premium with minimal effort.
| Metric | Value |
|---|---|
| Touch target | 44-48px min |
| Body text | 16px+ |
| Line length | 50-75 chars |
| Text contrast | 4.5:1 normal / 3:1 large (WCAG AA) |
| Non-text contrast | 3:1 (controls, focus, icons — 1.4.11) |
| Animation | 300-500ms |
| Touch feedback | < 100ms |
| Toast auto-dismiss | 4-8s |
| Time to first value | < 5 min |
| Onboarding completion | > 65% |
prefers-reduced-motion respectedRead these on-demand when the task requires depth — don't load them all:
Core (most used):
SaaS-critical:
Specialized (load only when relevant):
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.
Produce quick commercials (30-90s) for SaaS products, local services, personal brand, and product launches by combining Runway ML generative video, ElevenLabs voiceover, procedural music, and ffmpeg composition. Hybrid pipeline that uses Runway for cinematic hero shots and AI B-roll, social-video patterns for VO + music + slides, and a brand-aware composite with multi-aspect export. Use when the user says "/ai-commercial", "make a commercial", "make an ad", "TV-style ad", "commercial for [client]", "60-second spot", "promo ad", or asks for a paid-media-grade video built around a product or service. Distinct from /intro-trailer (live-show hype reels, silent) and /social-video (text/screenshot-driven reels with VO).
Produce cinematic intro/walk-on trailers using Runway ML — live-show band intros, conference openers, product reveals, personal brand stingers. Generates Runway video clips, ffmpeg-composited scale-up animations, Ken Burns photo collages, optional cartoon character flashes, and a seamless final cut with unified color grade, ember overlay, vignette, grain, and variable crossfades. Use when the user says "/intro-trailer", "make an intro video", "make a band intro", "walk-on video", "live-show intro", "stage intro", "hype reel", "cinematic intro", "trailer with our logo", or asks for a multi-shot video built around a logo + cast members. Defaults to band/live-show pattern; documents adaptation to other use cases.
Activate strict context-saving mode mid-conversation. Use when conversations are getting long, before starting large tasks, or when the user says /lean. Audits conversation state and creates a checkpoint summary.
Quick security and quality review of current changes before deploying. Use when the user says /review or wants a pre-deploy check. Scans diffs for security issues, credential leaks, and code quality problems.
Launch a super team of parallel specialist agents to audit, fix, and level up the entire project simultaneously. Covers security, performance, UI/UX, mobile, accessibility, code quality, and testing. Use when the user says /superteam, wants a full project audit, or asks to 'level up' the project.