Design AI Skills

Use when the user asks to convert, export, or save an HTML slide deck as a PDF ("save the slides as PDF", "export the deck to PDF", "make a PDF of the presentation"). Works on decks built by the…

Decide what a launch, landing or product page must say and prove before any design or motion work. Use for a landing page, launch page, waitlist, pricing page copy or conversion brief, including…

Use on any page build, redesign, or 'make it look better' request on a site that has (or needs) a saved Art Direction. Loads the direction before the first element is written, plans tokens in two…

Desenha sistema de progressão e engajamento — XP, níveis, quests, recompensas.

Use when a Grok Build task involves UI design, interface understanding, Figma, design systems, shadcn/ui, Tailwind, UX audits, Atomic Design, component specs, MCP, or design-to-code generation.

Convert existing HTML and CSS to Bullframe CSS. Use when migrating a page off Bootstrap, Tailwind, a hand-rolled stylesheet, or an older Bullframe version, and when asked to remove custom CSS in…

Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow…

Authoritative TypeScript signatures for `engine.design`, the only API edit code uses. Use this skill whenever you need the exact signature, prop path, or return type — especially before calling a…

Break a design brief into executable time-boxed tasks, each with a done-when line. Use immediately before a build session.

Figma design system to design.md — Extract Figma design system into a structured design.md. Use when user says 'generate design.md', 'extract design system', 'design tokens to markdown', 'create…

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

為既有的 reveal.js HTML 簡報加入效果：逐步出現（fragment）、Auto-Animate、3D 翻卡、GSAP 逐字動畫、Three.js、計時條、點圖放大、手機捲動模式，並控管效能、減少動態效果與離線。當使用者說「加動畫」「加特效」「逐步出現」「卡片翻面」「Auto-Animate」「GSAP」「讓簡報更生動」「有什麼效果可以加」時使用；簡報本體用…

Lightweight pitch deck critique. Reads an HTML pitch deck and returns 5 to 7 plain-language observations covering problem clarity, solution clarity, traction visibility, ask specificity, and design…

Produce high-quality design documents through research, divergent thinking, and iterative refinement

Technical reference for the drawn-by-code engine. Use it when writing or debugging a scene's code (scene.js), when rendering to MP4 or stills, when touching engine/ or a style kit, or when something…

Establishes a brand's visual direction and compresses it into a Creative Direction Brief with a paste-ready 'style block' that every downstream image prompt reuses, so all generated assets look like…

Use when choosing colors, typography, or layout/spacing for an Apple-style interface — semantic & dynamic system colors, Display P3 wide gamut, dark mode, the San Francisco type family, Dynamic Type,…

University-tier research and lecture decks. Citation-heavy, evidence-led, restrained. Use when the user asks for 'academic deck', 'research presentation', 'lecture slides', 'conference talk', 'thesis…

Domain navigator for accessibility, WCAG compliance, performance auditing, and code quality skills. Routes to the right skill for a11y remediation, WCAG 2.2 audits, Core Web Vitals, React quality, and…

ISA-101 design rules for Human Machine Interfaces in process automation, covering display hierarchy, color standards, alarm integration, navigation, and situation awareness. Use when designing,…

Use when someone gives a brand name and wants brand nouns, logo concept directions or AI logo prompts (Figma AI, ChatGPT, Midjourney, Ideogram), or wants help designing a logo that lasts, from brief…

Use when building reusable frontend systems, design tokens, component contracts, responsive layouts, CSS strategy, or design-system documentation and governance.

Use when reviewing UI/frontend code, conducting PR reviews for components, checking design system compliance, or after any UI component work.

Unified frontend direction skill for layout, visual identity, and motion choreography. Use when an agent needs crafted structure, stronger typography, better imagery choices, and section-aware…

演讲锻造系统。把每一页 PPT 讲成一句话，把整套 deck 导成一场演出，而不是把要点堆成一面字墙。 专门用于从零设计有气场、有记忆点、一眼不像 AI 做的演示文稿、汇报 deck、路演 pitch、产品 keynote。 适用场景：创业路演、产品发布、年度复盘、方案提案、技术分享、培训课件、述职汇报、招商招生。 核心方法论：一页一句话 / 黄金三秒 / 节奏编排 / 视觉锤 / 反 AI…

Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms,…

Positive reference library of modern, non-monotonous UI — the constructive companion to Anti-AI-Slop. Curated, copy-pasteable, accessible patterns sourced from trusted design authorities (MUI,…

The entry point for any brand work. Gathers the brand's existing assets itself from just a URL (crawling the site, following its links to social and press), diagnoses how much should change, routes to…

Apply or adapt a dual-theme liquid glass UI board for premium dashboards, workspace launchers, settings surfaces, design-system previews, and glossy interface concepts. Use when Codex should build or…

Multi-agent architecture, orchestrator patterns, tool design, agent loops, memory, error handling, handoffs

Use when one or more Apple app icon references, generated concepts, screenshots, SVGs, or icon packages need to become a reusable app-icon-gen style template.

Advanced accessibility patterns including ARIA, screen reader optimization, cognitive accessibility, and motor impairment design.

Premium UI design engineering skill for creating, redesigning, polishing, and judging product-specific interfaces with senior-level craft. Use when Codex works on frontend design, UX/UI, design…

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples…

Research a business and generate a tailored DESIGN.md. Use when the user wants to redesign a website, create a design system, or build a web presence for a specific business. Investigates the business…

Create polished video stories with cinematic editing, motion design, music, and AI narration using FFmpeg and Edge TTS. Use whenever the user asks to trim, combine, resize, crop, reframe, caption,…

The terminal assembler in Web Anatomy. Take a page structure plus its written copy and assemble them into one shareable wireframe with a coherent, single-exemplar design system (type scale, color…

Use when the user asks to build Android screens, Jetpack Compose layouts, Material components, or any Android app UI. Also use when styling, redesigning, or beautifying any Android interface. Covers…

Extract a design system from a website URL or local project into a structured token set (tokens.json, canonical) + a rendered DESIGN.md (Google Stitch-compatible) with semantic roles, essence, and a…

Read-only Figma technical canon and production gotchas. Load the reference needed for the current inspection, write, design-system operation or handoff; project rules and authorization prevail.

Award-winning SaaS UI/UX design persona reconstructed from the claude-fable-5 model. Apply to any web/UI task — building or restyling websites, landing pages, SaaS surfaces, components, or design…

Imagery, illustration, and iconography direction for web UI. Use for hero images, photo treatment, illustration style, icon sets, favicons, OG/social cards, decorative graphics, image-shaped holes,…

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js),…

Design and build high-quality web, product, and brand experiences. Use for bounded UI corrections through open site/product architecture, information architecture, UX, art direction, visual systems,…

Data-dense dashboard and admin panel design skill for AI agents. Enforces information hierarchy, data visualization clarity, high-density layouts, and professional SaaS-grade UI patterns.

Visual philosophy and art-direction for frontend. Use when creating high-concept work, campaigns, or when the user asks for a visual philosophy, manifesto, or unmistakable art-like aesthetic.

Use this skill whenever a design task involves the felt quality of an interface — beauty, polish, brand voice, persuasion, emotional response, marketing surfaces, hero sections, onboarding tone,…

Auto-orchestrating UI design skill that prevents generic AI-generated output. Detects project context and target platform, presents curated design style options, generates self-contained HTML screens…

Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex…

Experimental DryUI page-layout skill that builds colored block page prototypes with mobile-first container queries. Use when testing page layout, responsive regions, dashboards, shells, or full-page…

Apply design psychology — cognitive biases and behavioral principles — to review UI/UX work and generate ideas, recommendations, and critiques grounded in named principles. Use this skill whenever the…