UI/UX, logos, slides, and image generation (7.3K skills)
Design visually distinctive websites, landing pages, and portfolios as React components, reusable pieces of a web page. Use industry references to guide typography, color, layout, motion, and relevant 3D visuals that fit the brand.
Apply coordinated colors and fonts to slides, documents, reports, and HTML landing pages. Choose from ten preset themes or create a custom theme from a description, review it, and apply consistent styling across the artifact.
Create Marp presentation slides, written in Markdown, using seven themes for business, technical, academic, and creative content. The skill organizes headings, bullet points, whitespace, and images into a consistent presentation saved as a Markdown file.
Turn user data and interviews into research-backed personas, or representative user profiles. The toolkit also supports mapping user journeys, planning usability tests, and combining research findings to guide and validate design decisions.
Create original generative art with p5.js, including particle systems and flowing patterns. Get a written artistic concept and an interactive HTML viewer with adjustable parameters, reproducible variations, and PNG downloads.
Plan and build interfaces with visual choices grounded in the product and its audience. Guides color, typography, layout, motion, and interface wording, with review steps to keep the result specific to the brief.
Review interface code against the latest Web Interface Guidelines to check accessibility, design, and usability. Provide files or a file pattern, and receive concise findings with file names and line numbers for locating issues.
Create a consistent UI design system from brand colors. Generate design tokens, reusable values for colors, typography, and spacing, and support component documentation, responsive layout calculations, accessibility considerations, and clear handoff materials for developers.
Create and refine draw.io diagrams by editing XML files, adjusting labels, arrows, and spacing, and using AWS icons. Export transparent PNG images for slides, with guidance for readable Japanese text and consistent layouts.
Turn a written diagram request into a JSON specification and render a blueprint-style SVG. Create system architectures, request flows, state machines, or neural network diagrams as files for documentation, READMEs, posts, and slides.
Style materials with Anthropic's brand colors and typography. Apply distinct heading and body fonts, choose text colors for the background, and use coordinated accent colors for shapes, with fallback fonts when Poppins or Lora are unavailable.
Build a PowerPoint presentation with Morph transitions, which smoothly transform shared shapes between slides. Plan how objects move, resize, rotate, appear, and exit across a slide sequence, then deliver a single .pptx file.
Create PowerPoint presentations centered on GLB 3D models, with rotation, zoom, and Morph transitions that smoothly connect slides. The skill also guides model selection, color palettes, typography, and layouts that support the presentation’s subject.
Generate images from written descriptions through 9Router using a choice of image models. Check each model’s supported settings, request an image, and receive a URL, encoded image data, or image bytes for saving to a file.
Create animated HTML presentations from notes, a topic, or PowerPoint files. Compare three visual style previews, then build a browser-based deck with a fixed widescreen layout, editable text, and optional PDF export or web publishing.
Set brand styling from a website link or a plain-language description, preview it on a sample page, and save preferred delivery formats so future plugin pages and documents follow the chosen look and format.
Write and review interface text, including button labels, error messages, empty screens, and onboarding instructions. Get recommended wording, alternatives, and explanations tailored to the user's situation, tone, and character limits.
Review a Figma design, screenshot, or written description for usability, visual hierarchy, consistency, and accessibility. Receive specific findings, explanations, and prioritized improvements, with feedback tailored to the design stage and intended users.
Turn a design into a developer handoff document covering layout, shared design settings, component options, interactions, and screen-size behavior. Include loading and error states, animation details, and accessibility notes to clarify implementation requirements.
Review a design system for inconsistent names and hardcoded visual values, document component variants and accessibility behavior, or propose new interface patterns that follow existing rules. Produce structured audits, component references, and design proposals.
Design new pages and components, audit existing interfaces, or redesign their visual structure. It emphasizes varied layouts, consistent colors and typography, mobile checks, and extracting reusable design characteristics from screenshots or readable web pages.
Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.
Design charts, maps, and dashboards around the question readers need answered. Choose suitable chart forms, communicate findings through titles and labels, and check custom colors with a local palette validator to support clear visual distinctions.
Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.