Design AI Skills

Create beautiful, animated HTML presentations — lectures, pitch decks, conference talks, thesis defenses, class projects — from a topic, notes, a document or a PowerPoint (.pptx). Outlines the story…

Review, improve, or build a whole interface across usability, task flow, microcopy, system states, accessibility, theming, layout resilience and visual polish. Use for broad requests like "review this…

Park a design idea for a future cycle. Writes to .design/backlog/BACKLOG.md.

Licence-free UI system for web apps and sites: build, review or redesign dashboards, admin panels, settings/auth, tables and landing pages with exact tokens, a spec-driven page builder, a pre-flight…

Create, refine and review visual work for AI-slop, weak hierarchy and generic design. Covers UI, images, slides, print, charts and motion. Preserve approved direction; excludes prose-only tasks.

Presentation decks as code — pitch decks, product launches, idea pitches, board and quarterly reviews, tech talks. One self-contained HTML file with animated charts, diagrams, builds and cinematic…

The definitive frontend design skill — anti-AI-slop enforcement, CSS 2026 features, Motion/GSAP/Lenis animation stack, 3D web (Three.js/R3F/Spline), scroll-driven animations, View Transitions API,…

Create, inspect, refine, and redesign structured FormaSpec projects through the formaspec MCP server. Use for exact triggers such as “Use FormaSpec”, “Design this with FormaSpec”, “Refine this…

Use when Codex needs to create a new design system before a product has stable UI, components, or tokens. Trigger for greenfield products, new brands, app/site concepts, startup MVPs, reference-driven…

Design, redesign, build, audit and validate distinctive production websites with cinematic scroll reveals, product films, burst or exploded-view effects, reference-led design systems, purposeful…

Build websites in the Swiss / International Typographic Style — Müller-Brockmann grids, disciplined typography, ink-on-paper restraint, and the modern agency-grade idioms (arrow-in-circle CTAs,…

制作具有惊艳动画交互的 landing page（落地页/官网首页），也适用于个人作品集、设计师主页、工作室官网和实验型单页。用户只需给出一个主题或产品，本 skill 参考 Apple、Duolingo、Canva、Stripe、Linear、Awwwards 与 OS-HUD 实验作品集等模式，自动设计滚动叙事或单屏交互舞台、视差、微交互等效果，产出令人惊叹的单页网站。凡是用户提到…

Designs, generates, validates and optimizes self-contained animated SVG files that render wherever an image can be shown, such as GitHub README cards, banners and headers, loaders, badges, dividers,…

Derive a personal design taste profile from a folder of reference images you collected, then write it to TASTE.md for building websites and HTML/CSS that match your eye. Reads every image, analyzes…

Create a distinctive, product-specific creative direction for web and mobile interfaces. Use for new UI concepts, expressive landing pages, onboarding, branded product experiences, significant…

WCAG 2.2 Level AA accessibility audit for AI product surfaces - color contrast, focus order, ARIA usage, keyboard navigation, motion/animation, reduced-motion respect, alt text, and form label…

Generates a complete color system from a single brand color - perceptually even OKLCH ramps (50-950) plus WCAG-checked semantic design tokens (backgrounds, text, borders, focus ring) with light/dark…

生成、美化或重构 HTML 应用与网页时使用,涵盖 BI 看板、数据工作台、管理后台、监控页,以及官网、产品落地页、活动页、案例展示页。负责让页面美观、信息架构清楚、能真实渲染、不像后台模板或营销模板填空。只管 HTML 网页与应用的视觉和结构质量,不用于 PPT、PDF 或文档排版。

Create Agent4PPT full-slide-image and editable-mode PowerPoint decks and paired comparisons. For every editable page, generate a complete slide first, erase selected text with an image model, then…

Design, redesign, prototype, implement, animate, and audit high-quality WeChat Mini Program UI/UX. Use when Codex is asked for 微信小程序 UI/UX、学习或借鉴 App 截图与竞品流程、产品流程、页面架构、状态矩阵、三套视觉方向、知识卡动画、教学图解、动效系统、分镜与…

Conversation-first visual design gate for AI-driven UI design and implementation. Use when Codex must turn short human direction, screen requirements, concept art, Lazyweb/Mobbin references, or…

Guide and execute complete brand design systems for new brands, upgrades, and rebrands, including visual identity, photography direction, brand applications, and editorial/layout systems. Use real…

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples.…

Design or change REA investigation tools, CLI/MCP contracts, provider capabilities, and Evidence semantics.

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a…

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged…

Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and…

This skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP…

Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme…

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug…

HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards, TextFields, Dialogs; installing heroui-native;…

Capture a Textual terminal UI as an SVG using its headless test harness. Use when asked to make, attach, or preview a screenshot of deepagents-code/dcode or another Textual app, visually verify a TUI…

Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and batch-capable image generation. Use when user asks to create…

Create, inspect and deliver charts, PDFs, Word documents and spreadsheets, and open animated browser presentations.

Applies OpenAI's brand colors and typography to any artifact that should match the Codex/OpenAI look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design…

Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about…

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…

Select a consistent visual design system for PPT slides using radius/spacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes…

Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and…

Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.

Turns a static design (a Figma frame, dashboard, card set, app screen, or a UI on a photo background) into a pixel exact HTML replica that loads in from an empty state, then has every visual act out…

基于《商业模式新生代》的 Business Model Canvas，把用户提供的项目介绍、访谈、产品资料或商业计划整理成九模块商业模式画布卡片，交付 PNG 与可修改的 HTML。USE WHEN 用户调用 ljg-business-model、要求画商业模式画布、九宫格商业模式或把商业信息做成画布卡片。NOT FOR 普通商业分析、投资估值、Lean Canvas 或只解释商业模式概念。

Reviews diffs, PRs, release readiness, and publishing follow-through. Use when asked to review, triage issues or PRs, or ship. Not for debugging root causes or prose.

Create or edit articles and reports in the current iPolloWork Design session.

Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into…

In-chat fallback for the Timeline Inspector Refine agent. Use when the user runs `/refine live`, asks to "refine live", "go live", or answer refine jobs — but ONLY when no persistent agent is wired…

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for…