open-design

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.

Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.

Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.

Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.

Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.

Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.

Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.

A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering. Use when the brief asks for "FAQ", "help center", "questions", or "support page".

Analyze images — segment objects, detect, run OCR, describe, and answer visual questions via fal.ai vision models.

Edit existing videos using AI — remix style, upscale, remove background, and add audio via fal.ai's hosted video models.

Upscale and enhance image and video resolution using AI super-resolution models hosted on fal.ai.