UI/UX, logos, slides, and image generation (7.4K skills)
Turns concepts, processes, and software architecture into diagram files. Choose a standalone HTML file containing SVG for browser viewing, or an editable Excalidraw whiteboard for flowcharts, sequences, and architecture sketches.
Create interactive visuals that explain code structure, execution flow, and performance comparisons. Use OpenClaw dashboard widgets to keep related metrics, tables, and charts available beyond a single explanation.
Build a disposable prototype to answer a design question. Explore logic and changing states through a shareable HTML demo, or compare distinct interface variations, then record the findings and carry validated decisions into real code.
Refine interface appearance and interactions by reviewing spacing, typography, rounded corners, shadows, animation, and clickable areas. Get concrete before-and-after recommendations for buttons, cards, forms, and other components, including hover, focus, and loading states.
Build iOS 26 interfaces with Liquid Glass, a translucent material that blurs backgrounds and responds to interaction. The skill covers buttons, cards, shape-changing transitions, and widgets using SwiftUI, UIKit, and WidgetKit, plus migration from existing blur effects.
Create icon assets for iOS and macOS projects using SF Symbols or Iconify API. Match existing colors and sizes, then generate PNG files at three resolutions with the metadata needed for Xcode asset catalogs.
Create browser-based HTML presentations from notes or PowerPoint files. Choose a visual direction through slide previews, then build slides with animations, keyboard and touch navigation, and layouts that fit the screen without internal scrolling.
Define a design direction for websites, dashboards, and web applications based on their purpose and audience. Guide typography, color, layout, and motion while using existing components and checking usability across mobile and desktop screens.
Turn existing interface code into shared design rules for colors, type, and spacing, with documented decisions and an interactive preview. Audit visual consistency across ten areas and identify specific places to improve.
Design and audit interfaces for Web, iOS, and Android using WCAG 2.2 accessibility guidance. Check screen-reader labels, keyboard navigation, contrast, and control sizes to identify barriers and guide implementation for people using assistive technology.
Explain concepts through detailed, interactive machines drawn from an angled view. The skill produces standalone HTML, SVG, or React components, with moving parts and numerical readouts driven by the same model so readers can explore how the idea works.
Build landing pages where scrolling advances video and visual effects. The skill guides interviews, visitor journeys, asset preparation, and HTML implementation, then checks screenshots across scroll positions, mobile layouts, and reduced-motion settings.
Create hand-drawn architecture diagrams, flowcharts, and sequence diagrams as editable .excalidraw files. Open them in Excalidraw to review or adjust the layout, or optionally upload them to generate a shareable link.
Create clear educational diagrams for scientific concepts, physical structures, workflows, and data. Output SVG, a scalable vector image format, inside one standalone HTML file with consistent styling and automatic light and dark modes.
Build or refine a 3D scene by comparing live screenshots with a target image. This skill repeatedly evaluates composition, lighting, materials, and detail, then guides revisions while checking that rendering speed remains acceptable for the target platform.
Design and generate simple, cute mascot images for products, brands, or communities, aiming for recognition at 32 × 32 pixels. Explore distinct concepts and color choices through separately generated square candidates with labeled design details.
Turn written requirements or Mermaid diagram text into interactive HTML diagrams of systems, workflows, sequences, data flows, and states. Explore connections, search the diagram, export images or video, and receive results from nine validation checks.
Guide an AI coding agent through frontend design work using 23 subcommands and examples of design patterns to avoid. A separate command-line detector checks 61 fixed rules without requiring an LLM or an API key.
Design and build landing pages, cinematic scrolling websites, or products with multiple screens. Define colors, typography, and motion before coding, then check screenshots, performance, readability, and visual consistency across the finished pages.
Create an installable font from photos of handwritten letters. The skill guides character identification, checks the resulting letter shapes, adjusts weight and smoothness, and exports font files for desktop or web use.
Create diagrams and wireframes in an open tldraw offline canvas through its local API. Add embedded JavaScript for interactive buttons, reactive shapes, and animations that remain part of the document after reloading.
Create poster or cover images that look printed with one or two inks, using a theme, phrase, or photo. Shape the layout, typography, and print texture, and receive the final prompt and design notes.
Explore a screen design through two or three interactive HTML mockups. Compare distinct layouts, information density, and visual approaches, with notes on each option’s strengths and trade-offs to help choose a direction before implementation.
Create text banners, character speech bubbles, and decorative frames, or convert images into ASCII art, pictures made from text characters. Choose local tools or free APIs for the task, and search collections of existing artwork.