Design skills

Generate scientific diagrams as PNG images from natural-language descriptions, including neural network architectures, system diagrams, flowcharts, circuits, and biological pathways. A review step checks the image against document-type thresholds and may prompt a limited regeneration; inspect labels and scientific details yourself before use.

• Illustrating a neural network or system architecture
• Creating a study flowchart or biological pathway diagram
• Preparing a scientific figure for a paper, poster, or presentation

Plan and prepare slides for research talks, from conference presentations and seminars to thesis defenses. Get guidance on slide structure, visual design, timing, and review, with options for PowerPoint, LaTeX Beamer, or PDF workflows.

• Preparing a conference research talk
• Organizing slides for an academic seminar
• Building a thesis defense presentation

Refine web interfaces by checking visual hierarchy, spacing, typography, color, shadows, images, and layout. It helps turn inconsistent styling into a coherent system, including guidance for dark themes, accessible contrast, and clearer charts and dashboards.

• Auditing a web UI that feels cluttered or unpolished
• Creating consistent spacing and color scales
• Improving contrast and visual hierarchy

Plan distinctive websites and apps with expressive typography, intentional layouts, and purposeful motion. The skill helps shape a memorable visual moment, review design quality, and keep animations and page loading responsive and accessible.

• Planning a portfolio with a distinctive visual style
• Adding purposeful scroll reveals to a landing page
• Reviewing a site’s typography, layout, and motion

Review interfaces, forms, and navigation for usability problems using established heuristics. The skill identifies confusing labels, missing feedback, and task blockers, rates their severity, and suggests improvements, including checks for accessibility and manipulative design patterns.

• Auditing a confusing website or app
• Finding problems in forms and navigation
• Prioritizing usability and accessibility fixes

Choose and pair typefaces for websites, then improve readability with practical CSS guidance for size, line length, spacing, and hierarchy. The skill also covers responsive type and font loading, helping teams balance comfortable reading with page performance.

• Choosing fonts for a website or app
• Improving readability of articles or documentation
• Setting responsive type sizes and hierarchy

Review a product, feature, or roadmap from the customer’s first encounter through daily use. Identify unnecessary complexity, gaps in the experience, and specific cuts or fixes, then give a clear ship-ready or not-done verdict.

• Reviewing a feature or product design
• Finding what to remove from a crowded roadmap
• Checking onboarding, errors, and support flows

Help teams make UX decisions through explicit assumptions, testable hypotheses, collaborative sketching, and small user experiments. Choose lightweight ways to learn, track outcomes such as behavior change, and use evidence to refine or drop product ideas.

• Replacing lengthy UX specifications with shared sketches
• Testing a design assumption with a simple prototype
• Running a collaborative design session

Refine a shipped app that works but feels confusing, awkward, or slow. The guided process examines user needs, interaction friction, visual clarity, in-app wording, and performance, recording decisions and proposed changes in project documents for later sessions.

• Find friction in onboarding or frequently used app flows
• Make screens and interactions clearer
• Rewrite confusing in-app labels, errors, and upgrade prompts

Design the small interface responses people encounter every day, such as buttons, toggles, forms, and loading states. This skill helps define triggers, behavior, feedback, and changes over repeated use so interactions feel clear and responsive.

• Designing button and toggle states
• Adding feedback to form validation
• Improving loading and progress indicators

Analyze confusing product interactions using core human-centered design ideas such as signifiers, mappings, constraints, and feedback. The skill helps identify why users get stuck or make mistakes, then suggests ways to make actions clearer and errors easier to prevent or recover from.

• Investigating why an interface feels confusing
• Reducing repeated user mistakes
• Making controls and actions easier to discover

Design iOS interfaces that follow Apple platform conventions. The skill covers safe areas, navigation, native controls, Dynamic Type, Dark Mode, VoiceOver accessibility, SF Symbols, and gestures for layouts that adapt across iPhone and iPad screens.

• Designing a native-feeling iPhone app
• Planning iPad navigation and layouts
• Checking Dark Mode and Dynamic Type support

Turn a raster logo or screenshot into a smooth, editable SVG, then create a standalone HTML animation shaped around the brand’s character. The workflow includes geometry and motion checks, replay and speed controls, and reduced-motion support.

• Creating a logo reveal or brand intro
• Converting a PNG logo into animated SVG and HTML
• Adding a loading or hover animation to a logo

Plan UI animations and transitions around their purpose and mood. The skill offers guidance on timing, easing curves, motion style, and coordinating multiple elements, with practical patterns for feedback, loading, success, and error states.

• Designing button and card interactions
• Choosing timing and easing for a transition
• Creating loading, success, or error feedback

Control Adobe Photoshop from a command line on Windows through COM automation. Create or open PSD projects, adjust documents, layers, selections, and text, then export images in different formats. JSON output helps AI agents read command results.

• Creating or opening a PSD project by command
• Editing layers, selections, or text in Photoshop
• Resizing or cropping a document

Build or review WordPress-related interfaces using the WordPress Design System. Consult its component, pattern, and design token documentation to choose UI elements, colors, spacing, and typography that fit the system.

• Building a Gutenberg interface with WPDS components
• Choosing design tokens for color, spacing, or typography
• Reviewing a WordPress UI for design system alignment

Use this skill to build working frontend components, pages, or applications with a clear visual direction. It helps shape typography, color, layout, motion, and background details around the interface’s purpose and constraints, then implements the design in code.

• Building a web page for a defined audience
• Creating a distinctive interface or component
• Choosing a visual direction for an application

Build responsive interfaces with shadcn/ui components and Tailwind CSS utility classes. Use the skill to create accessible forms, dialogs, tables, and navigation, apply consistent themes and dark mode, or develop visual compositions with canvas-based design guidance.

• Building responsive application layouts
• Adding accessible forms, dialogs, or tables
• Creating consistent colors and theme tokens

Design interfaces by studying reference examples, setting visual rules, and balancing appearance with usability and accessibility. The skill also guides screenshot analysis, iterative design image generation, micro interactions, and documenting design decisions in project guidelines.

• Analyzing a reference interface
• Setting a color and typography system
• Refining a generated design image

Design and evaluate App Store screenshots and preview videos by mapping each slot to a user benefit, app screen, and layout. Create a 10-slot screenshot plan, a designer brief, or a comparison of competitor product pages.

• Planning headlines and app screens for each screenshot slot
• Preparing a design brief for an App Store product page
• Reviewing competitor screenshots and preview videos

Apply system-independent UI and UX principles to decisions about visual hierarchy, spacing, typography, interaction, and accessibility. Use it when a design system leaves a question open, when checking WCAG requirements, or when balancing visual style with accessible behavior.

• Choose layout and spacing when a design system has no rule
• Review an interface against accessibility principles
• Resolve a conflict between visual style and accessibility

Use TypeUI project design skills, brand kits, UI prompt libraries, and layout guidance while creating or refining interfaces with OpenClaw. It helps apply project context to visual decisions and explore layout options before implementation through the TypeUI MCP server.

• Build a landing page using a TypeUI project
• Compare pricing section layout variations
• Redesign a dashboard using a project design skill

Use TypeUI project design skills, brand kits, UI prompt libraries, and layout guidance while creating or refining interfaces with Hermes Agent. It helps apply project context to visual decisions and explore layout options before implementation through the TypeUI MCP server.

• Build a landing page using a TypeUI project
• Compare pricing section layout variations
• Redesign a dashboard using a project design skill

Use TypeUI project design guidance, brand details, reusable UI prompts, and layout ideas when creating or refining an interface. It helps an agent apply a selected project’s visual direction and generate alternative section layouts before implementation.

• Building a landing page with a TypeUI project
• Generating several pricing section layouts
• Redesigning a dashboard with a design skill