UI/UX, logos, slides, and image generation (7.4K skills)
Turn source content into infographics that explain comparisons, timelines, processes, and other structures. Choose from 21 layouts and 21 visual styles, then generate an image with your preferred language and format.
Turn a system description into a dark-themed architecture diagram in a single HTML file. It uses SVG, a scalable graphics format, to show components, connections, cloud boundaries, and security flows in a browser.
Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.
Create HTML landing pages, slide decks, and clickable prototypes using existing brand materials, screenshots, or product code. Explore layout and visual alternatives, then check the resulting files, interactions, and responsive behavior with available tools.
Create DESIGN.md files that combine exact design values with explanations for coding agents. Validate file structure and color contrast, compare versions, and export shared design settings to Tailwind or a standard design-token JSON format.
Create browser-based art and animations with p5.js, including visuals that respond to mouse input or sound. The skill guides concept development, coding, previewing, and exporting finished work as images, videos, or vector graphics.
Applies coordinated colors and fonts to slides, documents, reports, and HTML landing pages. Choose from ten preset themes using a visual showcase, or request a custom theme based on a description and review it before application.
Apply Anthropic's brand colors and typography to visual materials. The skill specifies heading and body fonts, background-aware text colors, and accents for shapes, with fallback fonts when Poppins and Lora are unavailable.
Design new interfaces or reshape existing ones with colors, typography, and layouts grounded in the subject and audience. It guides planning, implementation, and critique, including interface wording, purposeful motion, mobile layouts, and accessibility.
Create original posters and static artwork by first defining a visual direction, then expressing it through color, shapes, spacing, and restrained text. Deliverables include PNG or PDF artwork and a Markdown document explaining the design philosophy.
Create original generative art with p5.js, using particles, mathematical rules, and controlled randomness. Explore variations through interactive controls, reproduce results with a seed value, and save the artwork as a PNG.
Design new interfaces or reshape existing ones with colors, typography, and layouts grounded in the subject and audience. It guides planning, implementation, and critique, including interface wording, purposeful motion, mobile layouts, and accessibility.
Create banners for social media, ads, website heroes, and print formats. Compare multiple visual directions built in HTML/CSS using supplied assets, CSS graphics, or optional generated imagery, with PNG exports when browser capture is available.
Organize colors, spacing, and typography into reusable design tokens, or shared style values. Generate CSS variables, define component states, check for hardcoded values, and create HTML presentations that follow the same brand rules.
Build accessible interfaces with shadcn/ui components and Tailwind CSS styling. Create forms, tables, and layouts that adapt to screen size, then coordinate colors, spacing, and dark mode across the application.
Create logos, business card mockups, HTML presentations, banners, social images, and SVG icons. Define shared brand colors and typography, then carry those choices into visual assets and interface styling.
Search local design guidance to plan, build, review, or improve web, mobile, and desktop interfaces. Find suitable colors, font pairings, layouts, charts, and interaction patterns, with implementation advice matched to the project's technology.
Define a new product's visual style through product discovery and research. Get recommendations for fonts, colors, layout, spacing, and motion, preview font and color combinations, and document the shared design rules in DESIGN.md.
Turn an English description or mermaid source into a diagram with source files, an Excalidraw editing file, and SVG and PNG images. Rendering works offline, and flowcharts and sequence diagrams support editing individual shapes and arrows.
Review an iOS app’s appearance on a real iPhone using screenshots, Apple’s interface guidelines, and project design rules. Get scores for each design dimension and explanations of what would improve them.
Review a site's visual quality, find inconsistent styling, awkward spacing, unclear emphasis, repetitive AI-generated design patterns, and slow interactions. Fix the source code in focused commits and verify the changes with before-and-after screenshots.
Generate several AI design options, view them on a comparison board, and collect organized feedback. Use the results to explore visual directions and refine designs when a feature’s appearance is undecided or an existing interface needs improvement.
Review a UI/UX plan before implementation, score its design dimensions, and identify missing decisions. Through discussion, the skill adds concrete improvements directly to the plan so the review produces an updated plan.
Draft simple black-and-white screen layouts as standalone SVG files, with numbered explanations of each area. For multiple screens, create a flow overview and an optional static viewer page for browsing and zooming during review.