Design AI Skills

AI image generation tool. Use when you need to generate reference images, illustrations, or visual content from text prompts.

Detect UX antipatterns (smells) in interface descriptions using the uxuiprinciples smell taxonomy. Returns structured findings with matched symptoms, severity, and step-by-step remediation recipes.…

Use when designing, critiquing, or implementing forms, inputs, validation, checkout, registration, payment, or any data-entry flow.

Use when building UI components, making design decisions for frontend work, reviewing UI implementation quality, or planning interaction patterns.

Redesign existing interfaces to premium quality while preserving product goals and functional behavior.

Create, edit, and verify polished browser-native HTML slide decks. Use when the user asks for an HTML presentation, browser-based PPT, weekly-share deck, technical talk, or a slide deck that must…

Apply a brand's defined visual system to any fixed-format piece that isn't a website — decks and presentations, one-pagers and sales sheets, social posts and graphics, blog/OG thumbnails, business…

Apply or adapt a dual-theme neo-glow control board for UI kits, design-system previews, settings surfaces, admin panels, control rooms, and dense operational interfaces. Use when Codex should build or…

Guidelines and instructions for Agent execution state rollback rules

WCAG compliance deep dive, screen reader patterns, keyboard navigation, and inclusive design.

Create distinctive, production-grade frontend interfaces with strong art direction. Use when building or restyling web components, pages, dashboards, landing pages, React apps, HTML/CSS layouts, or…

Deep design quality evaluation of AI-generated HTML against DESIGN.md. Use when the user wants to check if a generated screen looks like obvious AI output, assess design fidelity, or get actionable…

Comprehensive UX design companion based on all 30 Laws of UX from lawsofux.com. Analyzes components being built and recommends which laws apply with specific code-level fixes. Works as proactive…

Automatically routes to the best UI/UX design skills based on project type, industry, and aesthetic requirements. Acts as a design dispatcher that reads the UIUX-high-taste-skill collection and…

Use when you know what component, flow, or interface you need but not yet the right accessibility approach. Best for turning WCAG 2.2 requirements into an accessible implementation plan with WAI-ARIA…

Maps a reference (site, screenshot, Figma, CSS, brand book) to OpenDesigner dials, or writes its Taste Index. Copies structure and quality, never another brand's identity.

Use when the user asks to build iOS screens, SwiftUI views, UIKit layouts, mobile components, or any iOS app UI. Also use when styling, redesigning, or beautifying any iOS interface. Covers iOS 26…

Draw or refresh a static click-flow overlay on laid-out Figma screens from prototype reactions or explicit pairs, using the existing SVG recipe and verified targets.

UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 99 UX guidelines, 105 icon entries, 16 GSAP motion…

Build a complete presentation deck from a brief. Generates storytelling plan, slide operations, renders the deck, and runs QA. Requires extracted template contracts from /slides-extract. Use when the…

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.

Mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design…

Use this skill when picking a brand archetype, propagating it across product and marketing surfaces, or auditing brand-voice consistency. Trigger when designing the voice of microcopy, marketing…

AI tool integration into the design process, structured prompting for designers, creative AI usage with clear boundaries, and review workflows.

Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered…

Experimental DryUI layout-only skill that extracts page regions from references into colored blocks using a required mobile/tablet/desktop breakpoint blueprint. Use when testing responsive page layout…

Read and return detailed information about selected elements from the Design Mode overlay. Use when the user says 'what did I select', 'inspect element', 'show element details', 'read element', 'what…

顶尖 UX/UI 与高端 GSAP 动效工程师。强制以 Python 驱动的真随机化制造布局变异、严格的 AIDA 页面结构、宽幅编辑式字体排版（禁止 6 行折行）、无空隙的 bento grid、严谨的 GSAP ScrollTrigger（pinning、堆栈、scrubbing）、行内微型图片，以及大尺度的区块间距。

Build, document, and maintain design systems with design tokens, component specifications, pattern libraries, naming conventions, and governance processes. Conduct system audits, define component…

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

UIForge's token foundry — emits and ENFORCES a project's design signature before any component is built. Use at the start of any UI work, or when asked to set up a theme, design system, design tokens,…

Color-only audit that extracts, evaluates, and recommends improvements for the project's color system. Use when the user asks to audit colors, run a color review or color audit, fix their colors, or…

Logo design and brand identity systems - brand strategy (positioning, personality, voice), logo types (wordmark, lettermark, symbol, combination, emblem, mascot), geometric construction, SVG logo…

代码已经跑起来后（阶段 7 迭代微调）的设计评审横切——用户看到具体页面涌现审美反馈时使用：三段式追问（定位→对标→量化）把"感觉不对"翻译成可执行改动项，"选择题化"让用户做选择题而不是填空题，参数外显 Tweaks 让不确定的参数暴露成可调旋钮，所有修正反写回 design.md。覆盖…

Use whenever a website, landing page, marketing site, portfolio, microsite, homepage, any public-facing web page, an app screen (mobile, desktop, PWA, Expo), or a game's site, start screen, menu or…

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind,…

把 Figma 设计稿转成生产代码：Figma MCP 的取数与顺序、节点选择、令牌映射、翻译成项目既有约定、1:1 还原验收与差异定位。当用户给出 Figma 链接或 node-id、设计稿截图，要求实现设计、还原稿子、或抱怨「还原得不像」时使用。同时覆盖 Figma MCP 的连接与排错。

Takes an email someone admires (a screenshot, a forwarded email, a URL or HTML), keeps only its layout, and rebuilds it in the user's own brand in Figma using their EMAIL.md and components. Their…

Analizza, progetta, implementa e verifica il visual design di interfacce web e mobile. Usa quando una UI esistente o in sviluppo appare debole, rumorosa, incoerente o poco rifinita, oppure quando…

Creates the cards of a Facebook carousel ad at Meta's dimensions, as a series of coherent visuals. Use when the user wants a "Facebook carousel", a "carousel ad" or "several cards that swipe" for a…

Generate slop-free UI for React + Tailwind + shadcn/ui. Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, page, landing, app, or any web interface.…

Creates and integrates coherent icons, illustrations, imagery and visual assets for web and mobile interfaces.

Constructs a corporate .potx from nothing — slide master, layout set, theme colour and font schemes, placeholders — so decks built on it inherit the brand automatically. Not for fixing a deck against…

Design, implement, or improve a distinctive, conversion-focused landing page or marketing website. Use for homepages, product pages, launch pages, portfolios, pricing pages, waitlists, campaign pages,…

Xiaohongshu Card (Open Design) — use only when explicitly invoked, not for general design requests

当用户需要设计、重新设计、塑形、评审、审计、打磨、澄清、精简、加固、优化、适配、添加动效、配色、提取或改进前端界面时使用。涵盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置页、引导流程和空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、无障碍、性能、响应式行为、主题、反模式、排版、字体、间距、布局、对齐、色彩、动效、微交互、UX…

Create sophisticated, editorial-style data visualizations and infographics in the signature style of the Harvard Business Review (HBR). Use when developing presentations for academic or executive…

Independently verify a solution-debranding plan with full scans, relevant tests, two-brand checks, and explicit residual risk. Use when the user asks whether debranding is complete, correct, or safe…

Assemble or audit a brand kit - logo, colors, typography, spacing, usage rules - and pull real brand data via Brand.dev. Use when starting brand work, onboarding a client, or standardizing a brand.

Fix detached or missing variable bindings in Figma — typography (fontFamily, fontStyle, fontSize, fontWeight), padding/spacing (paddingTop/Right/Bottom/Left, itemSpacing, counterAxisSpacing), corner…

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the…