UI/UX, logos, slides, and image generation (7.4K skills)
Audit and improve an existing website or app's interface while preserving its functionality and technology stack. Refine typography, colors, layout, and interaction states through focused changes, checking functionality after each update.
Guide an iterative review of a built interface against its design brief, using critique and adjustment to improve visual alignment. This catalogue entry points agents to the upstream workflow, which requires a separate installation.
Prepare media assets required by an existing OD Next plan. Reuse verified capabilities and suitable assets, acquire files, measure dimensions, and retrieve background job results while preserving required content, licensing constraints, and quality conditions.
Guide an AI agent’s interface work with a shared set of design constraints. Use it to keep many small UI elements coherent across an interface, with the full workflow available through the separately installed upstream bundle.
Review interface designs with a senior designer's perspective. It scores each design dimension from zero to ten, explains what a top score requires, and flags generic AI-generated design patterns before UI changes are merged.
Guide SwiftUI interface design with rules against generic AI styling, advice on design direction, guidance for handling brand assets, and reviews across five dimensions. Use it to shape and assess native app interfaces.
Use more than 300 design rules drawn from Apple HIG, Material Design 3, and WCAG 2.2 accessibility guidance. Apply them when planning a shared app design for iOS, Android, and the web.
Create vertical marketing posters and social sharing visuals with a large headline, vivid gradient background, and short information cards. The 9:16 layout brings product announcements or key messages together in one composition, with space for branding or a QR code.
Turn screenshots, reference links, and rough visual preferences into a reusable DESIGN.md, a record of design decisions, and practical handoff instructions for building prototypes, presentations, redesigns, or image remixes.
Present user research as a three-slide HTML deck with warm paper colors, minimalist typography, and subtle motion. Organize the research framing, participant breakdown, and behavioral evidence, with keyboard navigation and interactive donut-chart highlights.
Discover a UI/UX design resource during planning through this catalog entry. It identifies the upstream skill, but its pattern data, templates, and search tools require a separate installation before the full workflow can run.
Find images, logos, and screenshots already stored in OD Library and reuse them in the current project. Select assets by their metadata, copy them into the project, and connect the returned file paths to the page.
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.
Review and refine an existing web page or HTML artifact before sharing it. Improve visual hierarchy, copy, and restrained animation, while fixing responsive layouts and accessibility issues and preserving the original content and brand.
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.
Turn a written prompt into a hand-drawn Excalidraw diagram, with animated SVG output, an online editing link, and PNG export. Use it through Claude Code, Codex, Gemini CLI, or agents supporting standard skill paths.
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.
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.
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.
Design desktop landing page prototypes with varied layouts, large typography, dense grids, and GSAP animations tied to scrolling. Pages follow an attention-to-action structure, with explicit checks for heading length, grid completeness, and button text contrast.
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.
Build a mobile login prototype as a standalone HTML file. Choose phone and SMS verification, password login, or external account sign-in, with labeled inputs, password visibility controls, and clear loading and error states.
Create or update Figma screens from code or written descriptions. Use design system components and design tokens, shared values for visual styling, to translate application pages into Figma designs.
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.