Design AI Skills

This skill should be used when the user asks to 'create an agent', 'add an agent', 'write a subagent', 'agent frontmatter', 'when to use description', 'agent examples', 'agent tools', 'agent colors',…

Claude IS the pixel artist — designs and places every pixel directly via Python/Pillow (scripts/pixelstudio.py). No Aseprite, no MCP server. Creates sprites, characters, items, tiles/tilesets,…

Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.

Turns any topic or question into one self-contained, white, research-paper-style HTML study page with diagrams drawn in HTML/CSS, a concept map, and linked references. Use this whenever the user wants…

Conduct deep, structured research on any topic — markets, products, features, competitors, problems, industries, regulations, or opportunities. Trigger whenever the user wants to research, explore,…

读取用户在麦当劳中国的近期订单，生成「麦味人格」：7 页小票风故事卡、16 型图鉴和翻页报告（16 种程序员风格人格，含时段/品类/用券/连续下单等统计）。当用户想看自己的麦当劳点餐习惯、点餐人格、点餐报告、吃货报告、Wrapped，或想要一张可以晒的麦当劳卡片时使用。只读，不会下单。

Evaluate and improve the usability of existing front-end interfaces — either local source code or live websites by URL. Use this skill whenever the user has existing front-end code OR a live website…

Builds a talk as a beatdeck - a fixed 1920x1080 React stage where one click is one beat, with authored motion, presenter view, overview, and an offline self-contained build. Covers turning source…

Launches an autonomous, pixel-perfect UI implementation loop using Figma MCP and Chrome.

Comprehensive UI design guidance based on Refactoring UI principles covering design personality, color theory, layout strategy, visual hierarchy, typography, spacing, mobile-first responsive design,…

Build, critique, and refine academic posters from a paper, LaTeX project, reference draft image, HTML/CSS source, PPT/PDF outputs, or local figure assets. Use when Codex is asked to create or improve…

Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or…

Keep interface work anchored to the product it belongs to instead of a generic template. Sets a short design contract, builds from the components and tokens already in the codebase, covers the states…

앱스토어·플레이스토어 등록용 마케팅 스크린샷 자동 생성. 원본 앱 스크린샷에 기기 프레임(iPhone, iPad, Galaxy, Fold, Flip)을 씌우고 배경 그라데이션과 홍보 문구를 얹어 스토어 규격 PNG로 출력한다. Turns raw app screenshots into store-ready App Store & Google Play…

用 @unovis 加一份 design token 做風格統一的資料圖表：柱狀、折線、趨勢、甜甜圈／圓餅、分組或堆疊柱、目標 vs 實際、KPI、dashboard。使用者說「做個圖表／畫個 chart／視覺化這組數據／加個趨勢圖」時使用。只管單張圖；整份報告的圖文排版搭配 html-visualizer。

UX/UI design guidance for building, reviewing, and critiquing interfaces and frontend code. Use when designing screens or components, auditing usability or accessibility (WCAG 2.2, EAA), writing…

撰写产品需求文档(PRD)并生成可交互原型。触发条件：用户提到"需求文档"、"PRD"、"产品需求"、"写需求"、"原型"、"feature list"等关键词。集成 UI-UX-Pro-Max 设计系统，支持 Cloudflare Pages 部署。

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state…

Build a brand's design system with ux-skill and bring it into Figma as variables and components that match the code. Use when the user wants Figma variables, modes or components from a brand color, a…

Use this skill when the user wants to turn an article, lesson, product note, retrospective, method, or abstract idea into JUJU-style hand-drawn visual method images. It analyzes the content, asks for…

Deterministic design critique for HTML/CSS screens. Runs 73 slop guards extracted from the set of rules professional designers use in production-grade designs to catch the tells that make UI read as…

Use MagicPath through the magicpath-ai CLI to find, preview, inspect, install, export, create, and edit UI components and manage MagicPath skills. Trigger for MagicPath designs/components; personal or…

Draws fun, sharp isometric stickers (flat fill, thick black outline, extruded slab side) and animates them on a library of After Effects grade keyframe presets, replayed exactly the way lottie-web…

Light a 3D scene: sun, omni and spot lights, WorldEnvironment, sky, shadows and ambient.

Build, edit, redesign, render, and verify content-led, structurally diverse, clean, editable, reproducible PowerPoint `.pptx` decks. Use for scientific, lab, clinical, consulting, board, investor,…

Generate Muted Zine Poster v0.1 poetic paper-poster prompts and the matching generated image. Use when the user gives a theme, sentence, object, mood, article idea, photo, or content brief and wants a…

Generate reusable image prompts for Chinese article illustrations in a fixed Ian-style minimal white-paper hand-drawn sketch style, with only the IP character and color palette left for the user to…

Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

Use Sites to build websites, including landing pages, portfolios, dashboards, portals, trackers, hubs, and internal tools. Always use Sites when the project contains `.openai/hosting.json`.

查询教育邮箱（.edu 邮箱）相关两类信息：(1) 用 edu 邮箱能享受哪些产品/服务的教育优惠、学生折扣或免费福利；(2) 各大学/院校的 edu 邮箱怎么申请。当用户询问某个网站/软件/AI 产品有没有学生优惠、教育优惠、免费教育版，或反过来问"有哪些教育邮箱能用 X"、"edu 邮箱能享受哪些产品"、"学生认证怎么做"，或问"美国/某地有哪些大学能申请 edu 邮箱"、"XX 大学的…

Create, import, discover, approve, or skip project charter. No-arg form is an interactive wizard.

视觉认知设计协作者。帮助教师、研究者、创作者把知识转化为 观众能接收、理解、记住的视觉叙事。基于认知科学与教学设计， 但使用者无需了解这些理论。输出：HTML slide deck，可直接使用。

Build Zalo Mini Apps - lightweight web apps running inside Zalo super-app. This skill provides ZaUI components (Button, Input, Modal, Tabs, Avatar, etc.), JavaScript APIs (authorize, getUserInfo,…

The element-animation craft layer that makes Remotion output look designed instead of default — everything that moves WITHIN the shot (camera movement is the companion skill klik-cam). Read and obey…

Use when generating, editing, composing, or iterating on images — illustrations for reports/web, posters with Chinese or English typography, pitch-deck slides, UI mockups, infographics, pixel art,…

Creates code-based visual assets — SVG icons, OG image HTML templates, social banners, and icon sets. Use when generating visuals as code (vector/HTML), NOT raster images — for raster generation see…

AI-optimized browser automation CLI with context-efficient snapshots. Use for long autonomous sessions, self-verifying workflows, video recording, and cloud browser testing (Browserbase).

Use when recreating a reference website or brand hub in this Hydrogen plus Weaverse repo, especially when deciding whether to reuse sections, add global styles, update theme schema, or resolve…

Configures Claude Code hooks and Codex hooks.json/notify callbacks. Use when adding guardrails, preflight, audit trails, worktree automation, or budget enforcement.

Strip explanatory copy out of user interfaces. Use when writing, editing, or reviewing any UI text, including headings, empty states, button labels, toggle and setting descriptions, helper text,…

Expert Angular v20 developer skill. Covers Signals, Components, Templates, Directives, DI, Routing, Forms, HTTP Client, SSR/Hydration, Testing, i18n, Animations, Drag and Drop, and Best Practices…

Build an evidence-aware, mobile-first personality or role quiz on any topic, with explainable scoring, a live WYSIWYG layout workbench, editable visual systems, and release-ready QA. Use for…

生成苹果简约风格的竞品分析 HTML 报告，含 Chart.js 数据可视化。使用波特五力、蓝海策略、竞争定位地图等分析框架。适用于竞品分析、市场定位、竞争优势评估。

Reads page analytics and click data from Humblytics, generates A/B test hypotheses with element selectors, and launches no-code split tests via the Humblytics MCP. Use when creating A/B tests, split…

Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants…

Design and build websites with film-inspired visual systems, director-driven art direction, storyboard-first layout planning, and cinematic motion. Use when the user asks for a cinematic site,…

Use when planning, prompting, generating, editing, routing, finishing, or QAing AI-created images, GIFs, videos, style frames, image-to-video clips, social ads, cinematic brand assets, motion studies,…

Build click-through cinematic web showcase pages with dynamic transitions and runtime style switching. Use when users ask for PPT alternatives, interactive launch pages, or high-end storytelling…

Apply platform accessibility best practices to SwiftUI, UIKit, and AppKit code. Essential companion to any SwiftUI, UIKit, or AppKit skill — always use together. Use whenever writing, editing, or…

You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.

Generate professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics with automatic PNG export. Use this skill whenever the user asks to create a visual note, knowledge card,…