Design AI Skills

Nimbuu UI/UX Skill. Logic-driven interface design distilled from Refactoring UI, Practical UI, and Fundamentals of Creating a Great UI/UX. Three uses. (1) ALWAYS when starting a new project,…

Rules for building presentation slides that people can actually read — applies Alexei Kapterev's "Death by PowerPoint" principles plus a working checklist. Use whenever making or revising slides,…

Generate dark neon cyber-fantasy dashboards, glassmorphism surfaces, and gamified React and Tailwind UIs.

Anti-slop frontend design skill. Use this skill whenever the user asks to build, design, redesign, restyle, polish, or improve any web interface - landing pages, marketing sites, portfolios,…

Build production-ready immersive motion pages in the award-site mold — Three.js worlds (foggy heroes, glass product stages with sonar rings, drag-orbit dome galleries, scroll-driven camera journeys…

用代码制作或修改动态文字主导的产品介绍、技术成果展示、作品集与片头，结合 Canvas 排版、three.js 画面、节拍配乐和 MP4 输出。适用于 kinetic typography 或 motion reel，不用于角色叙事水彩动画。

Design, implement, or review mobile companion-app UI using the official Even Hub design system for Even Realities G2. Use for Even Hub screens, settings, components, colors, typography, spacing,…

统一前端设计质量系统，结合 taste-skill（审美品味）与 impeccable（结构严谨性）。完整流水线：设计读盘 → 塑形构建 → 审计评审 → 打磨完善。当用户需要设计、构建、审计、评审、打磨或重构前端界面时使用——落地页、SaaS UI、作品集、仪表盘、产品应用、组件。涵盖空间节奏、排版层级、色彩感知、动效物理、布局逻辑、无障碍、响应式设计、反模式检测、UX…

Build dark, cinematic, awwwards-style landing pages with seamless scroll choreography — endless/infinite scroll loops, pinned image-morph galleries, book page-flip feature sections, full-page book…

Visual and aesthetic design direction for web and UI. LIBERA Studio synthesis of impeccable design laws + high-end-visual-design pattern catalog. Self-contained for first-pass direction; optional…

Audit a palette or design for WCAG color contrast and legibility, and suggest compliant adjustments. Use when finalizing a palette, design tokens, or any text-over-color/imagery.

Guia designers sem experiência em código desde a instalação do Storybook até visualizar componentes do Figma funcionando como um catálogo interativo. Use esta skill quando o designer chamar…

This skill should be used when building or reviewing UI for accessibility — keyboard navigation, screen readers, ARIA, color contrast, focus states, accessible forms, or WCAG compliance. Trigger…

Visual design and UX for native app screens in SwiftUI (iOS and macOS), Jetpack Compose and Compose Multiplatform (KMP). Use whenever the user wants to design, build, restyle, redesign, theme or audit…

Build or refactor maintainable component styling when a task benefits from SCSS architecture, shared design tokens, or deliberate CSS reuse. Consider the project's stack and task size first. Use for…

Use Craft for standalone HTML pages and slide decks.

Create beautiful cut-and-layer collage art in .svg and .png using a collage philosophy, sourcing real open-licensed imagery and composing it into a single crafted piece. Use this skill whenever the…

Cook raw brandbooks into agent-ready skills. Use when a user wants to convert brand guidelines, a Figma library, PDF, presentation, website, asset archive, interview, or loose identity system into a…

A complete UI/UX engineering skill that combines frontend design, information architecture, UX writing, forms, design systems, data visualization, motion, accessibility, localization resilience,…

Create or enhance a data-rich, single-file HTML slide deck or pitch deck. Use when the user asks for a new presentation, to convert a PowerPoint (.pptx) or PDF into an HTML deck, or to improve an…

Bootstrap a complete, extendable design system for a BRAND-NEW mobile app and let the user pick a theme fast. The reference guideline is chosen by target platform — Android → Material Design, iOS →…

Analyze, audit, inventory, and document an existing Figma design system through the Figma MCP server — components, variables, tokens, patterns, design debt, usage rules, causal relationships — and…

Use BEFORE building, auditing, improving, or redesigning any frontend UI (a page, screen, component, dashboard, form, checkout, chat, or developer console). Confirms audit coverage and change depth,…

Build and review UI end to end. Carries four bodies of knowledge - Refactoring UI's value systems and hierarchy techniques, Shift Nudge's craft principles and UI patterns, the bans registry of refused…

Design operating system for web UI/UX work. Use when the user asks to design, build, redesign or audit a web interface: landing pages, SaaS products, admin panels, dashboards, components, forms,…

Use when designing UI/UX, frontend, landing pages, web apps, or generating studio images and Vietnamese typography overlays. Enforces the AGS 30-Gate Anti-Slop UI Linter, 5-Platform Studio Image…

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile…

This skill should be used when the user asks to "build a frontend", "create a React component", "add animations", "design a landing page", "make it look modern", "add animated backgrounds", "create…

Award-winning frontend design skill producing hand-crafted, human-quality interfaces. Generates landing pages, dashboards, web apps, components, and posters with distinctive typography, bold color…

Analyze mobile app screenshots, store listings, and reference products to extract product mechanics, UX patterns, visual Design DNA, platform conventions, and reusable design rules. Use when Codex…

Generate high-quality HTML slide presentations with beautiful templates. Make sure to use this skill whenever the user mentions slides, presentation, PPT, deck, keynote, 演示文稿, or 幻灯片 — even if they…

Use when the user wants a watercolor or painterly illustration — wet-on-wet washes, a hand-painted flower or botanical, generative/programmatic watercolor, paper-texture artwork, "水彩" — delivered as…

把一个技术概念/流程/系统转化为"剧场式"动画 HTML — 多场景 + 自动播放 + 章节导航 + 旁白与真实代码。适用于网络协议、底层原理、算法、架构原理等"看不见但需要看见"的主题。单文件 HTML，无构建步骤。

Make short hand-drawn films in JavaScript and Canvas 2D (pencil, ink, risograph, screen print, brush-pen doodles on photos, sand animation, pop-up paper) and export an MP4 with a synthesized score.…

Design and improve ANY web or app interface with a taste-first, anti-AI-slop workflow, then document the result in a project DESIGN_SYSTEM.md so every future page stays visually consistent. Universal:…

Brand-agnostic design reasoning system for Liquid Glass and glassmorphic interfaces on any platform (web, SwiftUI, mobile). Use when asked to use, apply, or redesign with Liquid Glass, glassmorphism,…

Use as the UI/UX quality gate for frontend work that materially affects web product surfaces: design/build/redesign/review/polish/refactor pages or component systems, screenshot/UX critiques, rescue…

Current website-building expertise for an AI: research, design, code, accessibility, performance, search and security. Research, design, build, audit, and prepare websites for release. Use for a new…

把路演、答辩、竞赛、课堂展示 PPT 的静态页（也可以是一整份课堂稿）做成电影感的动画页：实拍质感底图 + 循环动图 + PowerPoint 原生动画和平滑切换，文字保持可编辑，全部做在页面里。内含从多轮真实返工里总结出的审美与协作原则、做过的动画手法库（含被否掉的）、发散创意的方法，以及"生图出成套同构底图 → Python 合成 → COM 组装 →…

Add a new reusable motion / shape / filter primitive to lib/primitives/ with safety: JSDoc + sensible defaults + at least one consuming preset + passing snapshot tests + updated docs/lib-api.md +…

WCAG 2.2 Level AA rules for designing and building digital experiences. Load this before generating, editing, or reviewing any user interface: screens and components in Figma, HTML and CSS, React or…

Generate premium brand reference images for a design system, covering logo concepts, color and type boards, and product mockups. Use when a brief needs visual references or a brand kit before or…

Use the local figma_local MCP bridge to inspect, analyse, edit, copy-sync, re-layout, compose, archive, style, use design-system components and confirmed user preferences, read or write review…

Use when implemented interactive UI needs practical checks of keyboard navigation, visible focus, accessible names, form labels and errors, dialog focus, touch targets, color-only status, or reduced…

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

Traduz "problema de tela" em pedido técnico de UI/UX. Pega o que a pessoa descreve com as próprias palavras ou mostra num print ("sobra espaço vazio do lado", "o botão some quando eu rolo", "os cards…

Use when Codex needs to design, build, polish, or substantially redesign frontend UI: landing pages, websites, dashboards, web apps, components, prototypes, games, or visual QA for local interfaces…

Design and build cohesive web pages with custom visual identity — landing pages and portfolios get rich anatomy + section archetypes; any other page type (blog, about, pricing, contact, coming-soon,…

73 brand DESIGN.md files from real websites. Drop one into your project to generate consistent, brand-quality UI. Use when building UI that should match a specific design language, when a user…

Design, implement, or visually refine a web interface when the visible experience is a primary deliverable. Use for greenfield UI, redesigns, reference matching, and visual polish; skip backend-only…

Brand, company, product, feature, app, startup, and project naming workflow for generating, filtering, testing, and evaluating distinctive names. Use when the user asks to name something, rename an…