OpenDesign

Build hero pages and showcase sites with cinematic animations, AI-generated media through the MiniMax API, and generative art. This catalog entry introduces the frontend skill; running its complete workflow requires installing the upstream bundle.

• Building a hero page with cinematic animation
• Creating a showcase site
• Using AI-generated media in a web page

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

• Creating a Figma library from an existing codebase
• Updating a design library to match shipped components
• Aligning design references with implementation

Turn workflows and system flows into a whiteboard-style diagram with colored sticky notes and curved arrows. The skill produces a single HTML file, with branches, merges, and optional hover effects for onboarding or operational explanations.

• Illustrating a user onboarding flow
• Explaining operational procedures
• Presenting system structure

Turn photos into animated GIF stickers with a Funko Pop or Pop Mart look using the MiniMax API. Use the resulting images for personalized chat stickers or avatar packs.

• Making personalized chat stickers from photos
• Creating animated stickers with a collectible-toy look
• Preparing photo-based avatar packs

Create a single HTML file with a flowing, animated background and a prominent quote or headline. Use it for a video intro, a landing page's main visual, or a poster, with landscape and portrait layouts available.

• Creating a video intro with a short message
• Designing a landing page's main visual
• Making a poster with a flowing background

Analyze images with fal.ai vision models to detect objects, separate their regions, read text, and describe visible content. Ask questions about an image to check specific details in what it shows.

• Read text from an image
• Detect objects and separate their regions
• Describe an image and ask questions about it

Create HTML presentations with rich animations and visual style previews. Use the skill to build slides for online keynotes, embedded talks, or interactive briefs, with a preview of how the presentation will look.

• Creating slides for an online keynote
• Preparing a presentation to embed in a web page
• Building an interactive brief

Build and review web animations with GSAP's core API, including movement, rotation, fades, and staggered starts. Adjust timing and easing, meaning changes in speed, and adapt animations to screen size and reduced-motion preferences.

• Adding movement and fades to web page elements
• Animating multiple elements with staggered starts
• Adapting animations to desktop and mobile screens

Generate and edit project images with OpenAI's Image API, including UI mockups, icons, illustrations, social cards, and visual references. This catalog entry helps agents discover the skill; the complete workflow requires installing the upstream bundle.

• Creating UI mockup images
• Generating icons and illustrations
• Preparing social card images

Increase image and video resolution using AI super-resolution models hosted on fal.ai. This catalog entry helps agents discover the capability; running the full workflow requires installing the upstream bundle with its original assets, scripts, and references.

• Increasing image resolution
• Upscaling video resolution
• Requesting AI super-resolution processing

Create a custom animated Codex pet from text or reference images. Generate consistent poses, assemble them into a spritesheet, an image containing animation frames, and package the result with configuration files, visual checks, and preview videos.

• Create a Codex pet from a text concept
• Turn character art into an animated pet
• Repair inconsistent animation poses

Implement animated effects, transitions, and movement in Flutter apps. Use it when adding motion to native iOS and Android app interfaces, with support for turning requests for animation into implementation work.

• Adding animated effects to a Flutter app
• Implementing animated screen transitions
• Adding motion to iOS and Android app interfaces

Turn Figma designs into production-ready frontend code that closely matches the original visuals. Use it to hand design frames directly to a frontend agent and guide implementation toward a faithful reproduction of the design.

• Implementing a screen from a Figma design
• Handing Figma frames to a frontend agent
• Reproducing a design's appearance in code

Create landing pages, websites, and app interfaces with restrained composition and a clear visual presence. The skill draws on OpenAI's frontend production playbook to guide the appearance and arrangement of interface elements.

• Creating landing pages with restrained composition
• Designing visually composed websites
• Creating app user interfaces

Generate visual assets through Google Gemini's image generation API, including interface mockups, icons, and illustrations. The supplied entry helps agents discover the skill; running the full workflow requires installing the upstream bundle.

• Creating visual mockups of an interface
• Generating icons for a design
• Creating illustrations for visual materials

Generate website design references as separate horizontal images for each section. Keep a consistent palette while varying layouts, spacing, imagery, and calls to action, giving developers or coding agents concrete visual references for implementation.

• Create section-by-section landing page design references
• Explore different hero layouts
• Share visual references with developers

Build a three slide quarterly review or roadmap presentation with a retro blue, orange, and cream palette. The self-contained HTML includes a cover, three priorities, a timeline, key performance indicators, keyboard navigation, and animated transitions.

• Presenting a quarterly review
• Sharing three priorities with a team
• Showing a roadmap alongside key performance indicators

Create project-specific rules for turning Figma designs into code. Bring design tokens, shared values such as colors and spacing, together with naming conventions and lint rules for automated checks in one reference.

• Defining rules for implementing Figma designs
• Documenting shared design values and naming conventions
• Consolidating automated checking rules in one reference

Build websites, dashboards, and application screens with a clear visual direction and working frontend code. The skill covers typography, color, layout, responsive behavior, and interaction states while following existing project conventions and brand guidance.

• Building a landing page with a clear visual direction
• Designing a dashboard for everyday work
• Refining the appearance and behavior of existing UI

Generate mobile app screen concepts and connected screen flows for iOS, Android, or cross-platform products. The skill emphasizes readable text, consistent colors and navigation, and clean phone mockups. It produces images rather than implementation code.

• Visualizing an app concept across several screens
• Designing a first-time user introduction flow
• Exploring sign-in and account recovery screens

Create a blank Figma Design or FigJam file as the starting point for agent workflows. Use it to prepare a new workspace before building a design system or organizing workshop activities.

• Starting a blank Figma Design file
• Preparing a FigJam file for a workshop
• Beginning a scripted design-system workflow

Create a macOS-style notification banner from an announcement or message, complete with an app icon, title, and body. The single-file HTML design supports video overlays, product teasers, and social images, with light and dark appearances.

• Adding a notification banner to a video
• Creating a teaser for a product release
• Presenting an announcement as a social image

Build web animations with GSAP plugins for text, SVG graphics, dragging, scrolling, and layout changes. It guides plugin selection, registration, configuration, and cleanup, with examples for implementing effects and reviewing existing animation code.

• Animating headings one character or line at a time
• Adding SVG drawing and shape transitions
• Building drag interactions with momentum

Write or review animation code using GSAP’s helper functions. Convert input ranges, limit values, generate random variations, snap positions to fixed steps, and handle groups of elements for effects driven by scrolling, pointer movement, or repeated updates.

• Map scroll progress to movement or rotation
• Limit animation values to a safe range
• Add random positions or colors to elements