Design Skills for Claude Code, Codex and Your Agent.

Get targeted After Effects expressions, export guidance and project troubleshooting.

• After Effects
• Compositing

Build AI chat interfaces from editable React components.

• AI Interfaces
• React

Choose and review SwiftUI animation APIs for native interfaces.

• SwiftUI
• Apple Platforms

Convert and compress image assets with explicit quality and preservation options.

• Image Compression
• WebP

Convert Markdown into styled HTML for article publishing.

• Markdown
• Article Styling

Turn music and narrative beats into a frame-accurate edit plan.

• Audio Timing
• Editing

Find an existing icon and retrieve its SVG by a verified library ID.

• Icon Search
• SVG

Turn a design brief into independently reviewable build slices.

• Task Planning
• Dependencies

Design reusable UI component APIs with accessibility and distribution in mind.

• Component APIs
• Accessibility

Render data charts with exact values and frame-driven movement.

• Data Animation
• Charts

Design moving palettes, perceptual color transitions and consistent exports.

• Color Systems
• Motion Direction

Inspect real UI components and variants on a pan-and-zoom canvas.

• Component Variants
• Comparison

Choose a design direction against criteria agreed before comparison.

• Concept Evaluation
• Trade-offs

Keep live design alternatives in a named, movable comparison workspace.

• Design Exploration
• Canvas

Explain why a rendered layout feels unbalanced or disconnected.

• Composition
• Hierarchy

Audit rendered type against readability and the existing type system.

• Typography
• Readability

Create HTML/CSS feature walkthroughs based on a real application's interface.

• CSS
• Keyframes

Inventory product design inconsistencies and prioritize their repair.

• Design Debt
• Prioritization

Guide a design project through explicit phases and saved artifacts.

• Design Workflow
• Review

Turn a design specification into implementation checks.

• Design QA
• Handoff

Define how teams contribute to and evolve a shared design system.

• Design Systems
• Governance

Find where existing design tokens are bypassed or used inconsistently.

• Token Audit
• Migration

Translate a chosen design direction into reusable theme values.

• Tokens
• Tailwind

Repair page identity, indexing signals and social share previews.

• Metadata
• Social Previews

Coordinate Veo generation and AVTool video composition through MCP.

• Video Editing
• Genmedia

Resolve a design plan's unanswered decisions through a focused interview.

• Brief Discovery
• Constraints

Connect interface copy and motion to the user's emotional state.

• Interaction Design
• Emotional States

Build isometric stacks, exploded diagrams and layered web animations.

• Isometric
• Explainer

Animate an existing logo with one clear reveal and a faithful static fallback.

• Logo Motion
• Brand

Render transparent animated name straps and broadcast overlays.

• Lower Thirds
• Typography

Create reproducible mathematical and technical explanatory animations.

• Math Animation
• Python

Animate geographic routes, camera moves and labels from coordinated map data.

• Maps
• Routes

Define a consistent motion language before animating a multi-shot piece.

• Art Direction
• Styleframes

Write Motion Canvas scenes with generators, reactive signals and reusable nodes.

• TypeScript
• Canvas Animation

Seek, inspect, screenshot and render a running Motion Canvas editor.

• Motion Canvas
• Scene Review

Prepare the media a project actually needs without losing required assets along the way. This OpenDesign utility preserves asset slots, batches independent acquisition and distinguishes a submitted job from a ready file.

• Media Assets
• OpenDesign

Shape a motion brief into a connected film: plan beats, choreograph attention and preserve an editable timeline. OpenDesign’s official helper works inside its host workflow; it is not a standalone renderer.

• Motion & Video
• OpenDesign

Explore different ways users could complete the same task.

• Concept Exploration
• Alternatives

Rebuild a raster logo as smooth SVG and inspect a choreographed HTML reveal.

• Logo Animation
• SVG

Plan Seedance 2.0 prompts, references and connected video sequences.

• Video Prompts
• Continuity

Plan framing, focal hierarchy, camera movement and multi-aspect composition.

• Shot Design
• Composition

Turn Chinese stories or ordered artwork into silent hand-drawn narrative videos.

• Hand-drawn Video
• Storyboards

Render streaming Markdown with diagrams, code and explicit content controls.

• Streaming Markdown
• React

Create editable SVG path, icon and illustration animations.

• SVG
• Vector Motion

Create and repair Lottie animations against a real player, not just a valid JSON file. Text to Lottie targets the repository’s local Skia Skottie preview and exposes important values as editable controls.

• Lottie
• Motion
• Skottie

Apply component-specific CSS transitions and semantic motion tokens.

• Transitions
• Web Animation

Build, debug and measure purposeful interface motion.

• UI Motion
• Reduced Motion

Request targeted AI edits to existing footage through each::sense.

• AI Video Editing
• Editing

Generate video from structured prompts in a configured DeerFlow runtime.

• Video Generation
• Model Selection

Turn a reference video into a concrete design and motion reconstruction prompt.

• Video Analysis
• Shot Prompts

Create SVG draw-on explainers with a marker hand that follows each stroke.

• Whiteboard
• Explainer

Generate personalized recap videos from one template and validated records.

• Data Stories
• Recap

Stress-test existing UI with realistic extreme data and a dev-only comparison toggle; report failures before fixing them.

Component source, existing demo data and field limits; a running app and browser for visual verification.

• UI Stress Testing
• Edge-Case Fixtures
• Review Report

Diagnose dropped frames in web animations: rendering cost, main-thread contention, per-frame React updates and inherited CSS variables.

Animation source and a reproducible interaction; browser profiling and a real target device to verify performance.

• Web Animation
• Frame Performance
• Diagnostic Review

Recreate a supplied screenshot in the existing app, then render at the reference viewport and correct visible differences.

Provide a readable reference image, its target viewport, project access and available assets. Browser rendering is needed to verify the visual match. No UIZZE account or MCP connection is required.

• Screenshot to Code
• Reference Matching
• UI Implementation

Route video requests to the right workflow, resume existing projects and coordinate HTML composition, media, preview and rendering.

The CLI requires Node.js 22+ and FFmpeg. Start with the core skills; creation workflows are installed on demand. Media services and cloud rendering may add requirements.

• HTML-to-Video
• Workflow Routing
• Video Production

Explain technical ideas through crafted isometric SVG mechanisms and model-driven interaction.

Node.js 20.10+ for the kit; Chrome or Chromium for checks. The skills CLI has a separate Node requirement.

• Isometric SVG
• Technical Explainers
• Interactive Figures

Write ExtendScript scripts to create and edit Illustrator documents, artwork and exports.

Adobe Illustrator CC or later; generated scripts execute in its ExtendScript environment.

• Vector Design
• Automation
• Illustrator

Start with the product's real objects and constraints before choosing a visual treatment.

An agent able to read project files; rendering support for visual checks. Paid UIZZE MCP is optional.

• UI Design
• Design Review

Translate a dimensioned modeling task into FreeCAD objects that remain inspectable and adjustable.

FreeCAD with its bundled Python; GUI work additionally uses bundled PySide and scenegraph work uses Pivy.

• 3D Design
• CAD
• Python

Generate and save image assets through a supported provider, using the project's configured credentials.

A supported provider API key and network access; model availability and usage charges must be checked separately.

• Image Generation
• Visual Assets

Generate or edit images through OpenRouter using reference images and a bundled Python script.

uv, the bundled Python script and an OPENROUTER_API_KEY with appropriate model access and credits.

• Image Editing
• Compositing

A strongly opinionated frontend guide for expressive landing pages, portfolios and interactive presentations.

A frontend project and any deliberately selected animation libraries; no single runtime is required by the guide.

• Frontend Design
• Motion
• Typography

Choose a macro for a command sequence, and a script when the modeling task needs logic.

Rhino 7 or later; Rhino 8 is the source's recommended environment for the unified Script Editor.

• 3D Design
• CAD
• Automation

Write Slang shaders and check how their inputs, resources and outputs connect to the renderer.

A Slang compilation and renderer environment appropriate to the target backend; host-side validation is needed for integration claims.

• Shaders
• GPU Graphics
• 3D Design

Map published Figma components to their matching code components with Code Connect.

Connected Figma MCP, access to published components and the codebase, plus current Code Connect entitlement and edit permissions.

• Figma
• Design Systems
• Developer Handoff

Document the repository paths, components and conventions an agent should use to implement Figma designs.

Figma MCP connection and access to the target codebase; the destination rule format depends on the coding host.

• Figma
• Design Systems
• Agent Rules

Create an editable Figma screen that stays connected to its design system.

Connected Figma MCP, target-file access, a published design system and the companion figma-use Skill for canvas operations.

• Figma
• UI Design
• Design Systems

Build a reusable Figma library, starting with design tokens and then adding components.

Figma MCP with editable-file access, repository access and the companion figma-use Skill plus helper references.

• Figma
• Design Systems
• Component Libraries

Implement a Figma design using the target repository's components and conventions, then compare the result with the design.

Connected Figma MCP, access to the selected design and the target repository, plus a runnable preview for visual validation.

• Figma
• Frontend Design
• Developer Handoff

Keep each accessibility finding connected to the affected element, proposed fix and verification result.

Python for the bundled tools, source access and a browser or assistive-technology setup for contextual validation.

• Accessibility
• Design Review
• Frontend

Review Apple-platform interfaces against platform-specific design and accessibility guidance.

Python 3 for the checker, which uses only the standard library; current Apple Human Interface Guidelines (HIG); and device or simulator access for behavior checks.

• Native UI
• Accessibility
• Design Review

Connect a real product proposition to page sections before generating the components.

A compatible React or Next.js project with Tailwind; referenced UI components and optional brand-analysis tooling may require separate setup.

• Landing Pages
• Copywriting
• Frontend

Plan and generate illustrations that explain key ideas at relevant points in an article.

An available raster-generation backend and the Skill's reference/configuration files; backend access and cost are separate.

• Editorial Illustration
• Content Design

Plan what each panel teaches before generating the comic pages.

An available image backend; Bun or an npx-based Bun runtime for the supplied PDF merge script.

• Comics
• Educational Design
• Storytelling

Generate an article cover around one central idea, with a defined composition and visual style.

An available raster image backend and the Skill's configuration and art-direction references.

• Editorial Design
• Cover Images

Keep relationships, labels and connector paths explicit in an inspectable vector file.

A text/code environment for SVG; Bun or npx-based Bun for the supplied PNG conversion script.

• Diagrams
• SVG
• Information Design

Run image generation and editing jobs through supported providers, including batch workflows.

Bun or an npx-based Bun runtime, complete provider adapters and credentials or login for the chosen supported route.

• Image Generation
• Batch Workflows
• Visual Assets

Turn content into an infographic using a comparison, hierarchy, process or overview layout suited to the material.

An available raster image backend plus layout, style and configuration references.

• Infographics
• Information Design

Generate illustrated slides and assemble an image-based deck for sharing; individual slide objects are not editable.

A raster generation backend and Bun or npx-based Bun for PPTX/PDF assembly scripts.

• Presentations
• Editorial Design

Create a visually consistent series of Xiaohongshu image cards, with one main idea per card.

An available raster backend with suitable reference support, plus configuration and card-layout references.

• Social Graphics
• Content Design
• Image Cards

Turn source material into a readable HTML article with editorial typography, layout and illustrations.

The documented build uses Node/npm, Vite, React, TypeScript, and Reacticle. Document extraction and optional PDF output may require additional tools; generated imagery needs a separately available backend.

• Editorial Design
• HTML
• Longform

Prepare image prompts and run generation or editing through an available native image tool or the configured local API workflow.

Local API mode requires explicit Garden enablement, Node scripts, and configured credentials. Native mode depends on the host image tool. Model access, pricing, and supported parameters must be checked in that environment.

• Image Generation
• Prompt Design
• Image Editing

Establish a visual direction, build a representative interface and review it in the browser before expanding the design.

Needs a code-capable agent and browser-renderable frontend environment. Selected patterns may use React, Babel, charts, or other libraries; browser acceptance requires a suitable browser tool.

• Frontend Design
• Prototyping
• Design Systems

Build browser-based presentations with timed visual scenes and optional narration; recording is a separate step.

Uses Vite, React, TypeScript, and Node tooling. Optional TTS depends on the selected provider, credentials, and adapter; final recording needs browser capture or recording software.

• Presentations
• Motion
• Narration

Plan and assemble a Remotion product video from interface captures, shot instructions and a timed composition.

Requires a Remotion/Node environment, browser capture, and ffmpeg. Some components need Three.js-related packages; optional music analysis and Jianying export add separate dependencies. Review Remotion's applicable license independently.

• Product Video
• Remotion
• Motion Design

A pre-rendered camera journey controlled by scrolling, not a live 3D world.

The documented pipeline uses Higgsfield and a Monid video path, plus ffmpeg/ffprobe and a browser environment. Provider accounts, credits, model capabilities, and any optional image route require fresh verification.

• Scroll Animation
• Video
• Landing Pages

Generate alternative slide layouts from one content source, then use the local editor to preview and export them.

Requires Node.js 20+, npm, and the generator packaged with the skill. Use its local preview service for editing/export features; a generic static server does not provide those APIs.

• Presentations
• HTML Slides
• PPTX

Compose a coordinated set of app-store listing images from screenshots, captions and visual assets.

Requires the packaged Next.js editor, a supported Node/package-manager environment, and a browser. PNG export uses html-to-image; source captures, fonts, and other assets need appropriate usage rights.

• App Marketing
• Screenshots
• Localization

Turn source material into illustrated slides and assemble a PPTX with image-based, rather than individually editable, slide content.

Python 3, an available image-generation backend, and the repository's assembly and state-recording scripts. Referenced workflow documents are required for actual execution.

• Presentations
• Image Generation

Keep subtitle text and timing in a defined data structure before styling it on a video timeline.

A Remotion project, @remotion/captions, and the relevant transcription/import/display reference files.

• Video
• Captions

Set up a Remotion project and composition from a video brief, with a preview available during development.

Node.js, Git, package installation, Remotion Studio, and the related composition/layout references.

• Video
• React

Make a video editable in Studio by changing how its React source exposes layers, timing, and controls.

A Remotion version supporting the documented Interactive APIs; @remotion/paths is additionally needed for the described editable path interpolation.

• Video
• React
• Interaction

Build animated maps in Remotion, choosing the mapping technique, provider and data for the intended shot.

Remotion plus the selected technique's libraries and data; Mapbox requires a key according to the captured source.

• Video
• Maps

Write React markup that behaves like a video timeline rather than a webpage with CSS animation.

Remotion and feature-specific packages matching the project version; linked references determine additional media, effects, font, or export requirements.

• Video
• React
• Motion

Use a file-based design workflow for prototypes, presentation concepts, and reusable visual systems.

A file-capable agent and the repository's methodology, built-in guides, reference documents, and scripts. Export and import paths have their own prerequisites.

• Prototyping
• Design Systems
• Presentations

Give a loaded character or product model a defined playback and blending strategy.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Choose a shape representation before adding surface styling or animation.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Connect a gesture to the intended 3D object using the canvas and camera's actual coordinates.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Make a model readable with a deliberate lighting setup rather than indiscriminate brightness.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Match the shading model to the surface, then inspect it under the intended illumination.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Treat screen effects as an ordered rendering pipeline instead of unrelated filters.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Use custom vertex or pixel behavior when material presets cannot express the effect.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Assign each image its correct role before diagnosing a stretched or washed-out surface.

A working Three.js project and renderer; verify source examples against the installed release. Additional controls and loaders depend on the chosen path.

• 3D
• Three.js

Group research observations into themes while preserving their links to the original evidence.

Use an agent that can read the supplied transcripts or notes. Provide participant IDs and the design question; the skill synthesizes existing evidence rather than collecting interviews.

• UX Research
• Synthesis

Give one transition a clear purpose and a motion profile that supports the interface state change.

Provide the interface's before and after states, trigger and target devices. Use a runnable preview to check timing, interruption and reduced-motion behavior.

• UI Motion
• Design Guidance

Analyze participants' card groupings to propose navigation categories and identify ambiguous items.

Provide completed card-sort results, including each participant's placements, labels and the study method. The skill analyzes supplied evidence; recruitment and data collection are separate.

• UX Research
• Synthesis

Plan a first-click test to check whether people can identify where to start a task.

Provide the screen or prototype, user goal and recruitment criteria. The skill creates a test plan; running sessions and collecting clicks require a separate study setup.

• UX
• Design Guidance

Turn a brand color into a usable set of interface roles and foreground-background combinations.

Provide brand colors, interface roles and accessibility targets. Use actual component states and a contrast-checking tool to evaluate the proposed color combinations.

• Color Design
• Design Guidance

Make one component implementable by explaining its behavior as carefully as its appearance.

Provide the component's purpose, visual variants and target platform. The output is a specification for implementation and testing, not an implemented component.

• Design Systems
• Specifications

Design what the system says, what it expects back, and how it recovers when those two do not match.

Provide supported tasks, channel constraints and confirmation requirements. Voice flows also need device and speech-recognition testing; a written dialog alone cannot establish recognition quality.

• UX
• Design Guidance

Translate the interface hierarchy into dark surfaces instead of inverting its colors.

Start with an existing light-mode palette, component examples and media assets. Use a rendered interface to check dark-mode contrast, theme switching and image treatment.

• Color Design
• Design Guidance

Choose the graphic that makes the comparison understandable, not the chart that looks most elaborate.

Provide the actual data, field definitions, reader's question and display constraints. The skill guides chart design; data validation and chart implementation remain separate tasks.

• Data Visualization
• Design Guidance

Give visual decisions names and relationships that components can reuse.

Provide existing visual values, component examples and naming constraints. The skill defines token names and relationships; export tooling and framework integration require separate setup.

• Design Systems
• Specifications

Capture experiences that unfold between sessions rather than trying to reconstruct them in one interview.

Provide the research goal, participant criteria, time span and feasible recording tools. The output is a study plan; recruitment, check-ins and participant data collection still need to be carried out.

• UX Research
• Study Planning

Share a user's perspective while keeping direct evidence distinct from interpretation.

An agent that can read your research notes, a defined user or segment, and the design decision the map should inform.

• UX Research
• Synthesis

Make failures explain what happened and give people a way forward without losing their work.

An agent that can read the affected flows, known failure cases and the recovery actions your product actually supports.

• UX
• Design Guidance

Specify the path from the first field to a successful submission, including corrections and return visits.

An agent that can read the form brief, the required fields and validation rules, and any existing form screens.

• UX
• Design Guidance

Design what happens before, during, and after a gesture—not just the final swipe action.

An agent that can read the interaction brief, the target platforms, and the actions available through buttons or menus.

• UX
• Design Guidance

Review interface usability and document the evidence behind each finding, without presenting expert judgment as participant research.

An agent that can inspect the interface, a defined set of user tasks, and relevant domain constraints.

• UX
• Design Guidance

Give icons a consistent construction and naming system instead of collecting unrelated symbols.

An agent that can inspect representative icons, their intended sizes, and the required design and code formats.

• Design Systems
• Specifications

Give commissioned or recurring illustrations a shared visual language and a clear job in the interface.

An agent that can inspect visual references, product colors, and the screens and sizes where illustrations will appear.

• UX
• Design Guidance

Decide where information belongs before deciding what the navigation looks like.

Needs product content and user-task evidence; the source does not require a particular design application.

• UX Strategy
• Content Structure

Turn research objectives into questions that invite evidence instead of suggesting an answer.

Research goals, participant criteria, and session constraints are the primary inputs; no recording or recruitment service is supplied.

• UX Research
• Interviews

Reframe a product decision around what someone is trying to accomplish.

Requires user research or clearly labeled hypotheses; it does not collect interviews itself.

• UX Research
• Product Strategy

Connect individual touchpoints into the experience a person actually goes through.

Uses existing personas, research, and analytics; no automatic sentiment measurement is established.

• UX Research
• Journey Mapping

Define shared columns, margins and responsive behavior for related page layouts.

No named runtime dependency; requires real content constraints to select useful grid values.

• UI Design
• Responsive Layout

Show what is happening during a wait without misleading people about progress.

Accurate operation timing and progress capabilities must come from the product or implementation team.

• Interaction Design
• Loading UX

Prepare the interface for language differences, not just translated strings.

Needs target-locale text, fonts, and appropriate language or cultural review; no automatic localization platform is bundled.

• Design Systems
• Localization

Give engineering the behavior behind a small interaction, not just an animation reference.

No particular motion library is required; target-device testing is still necessary.

• Interaction Design
• UI Handoff

Make animation decisions reusable across components and teams.

Requires a token implementation or platform equivalent; the source does not mandate an animation framework.

• Design Systems
• Motion

Turn an information hierarchy into recognizable navigation controls and clear paths between destinations.

Needs an information hierarchy and task priorities; no navigation component package is provided.

• Interaction Design
• Navigation

Help new users reach a useful result before asking them to learn the whole product.

Needs product-specific activation definitions and instrumentation for any later measurement.

• Interaction Design
• Onboarding

Design the full retrieval experience, including the searches that fail.

Search services and query instrumentation are external to this guidance.

• Interaction Design
• Search

Reveal the operational work behind what the customer sees.

Needs stakeholder and process evidence; does not access operational systems on its own.

• UX Strategy
• Service Design

Choose spacing by relationship and purpose, not by isolated pixel adjustments.

No specific token tool is required; application depends on the existing component system.

• UI Design
• Design Tokens

Describe what can happen next from every state of a component.

No named state-machine package is required; actual implementation and tests remain downstream work.

• Interaction Design
• Behavior Modeling

Let one component library change appearance without duplicating its structure.

Implementation uses the project's token system or platform equivalents; runtime switching must be built and tested.

• Design Systems
• Theming

Create a readable hierarchy from a small set of documented text styles.

Requires the actual font files or available platform fonts for meaningful visual validation.

• UI Design
• Typography

Decide what the study needs to learn before scheduling the sessions.

Requires a usable test artifact and access to participants; no recruitment or session platform is supplied.

• UX Research
• Usability Testing

Show the routes a user can take to complete one goal.

No diagramming application is required by the source; the chosen output format must preserve clear notation.

• Prototyping
• User Flows

Give product decisions a consistent user reference without inventing a customer story.

Requires genuine user evidence for research-grounded claims; supplied product URLs may need separate investigation.

• UX Research
• Personas

Choose what should be noticed first, then make the composition support that choice.

Needs real content and rendered review; no visual scoring tool is bundled.

• UI Design
• Composition

Make a low-fidelity screen precise enough to discuss behavior and content.

No particular wireframing tool is required; a usable brief must include content and state information.

• Prototyping
• Wireframes

Retrieve an existing brand mark or service icon in the form your project needs.

Needs network access to the registry or CDN. React, CLI, Figma, and MCP integrations are optional surfaces rather than prerequisites for simple URL retrieval.

• Brand Assets
• SVG
• Cloud Diagrams

Convert visual slides into a structured deck instead of placing screenshots behind editable text.

Requires the editppt CLI, suitable image-generation capabilities, and multi-agent execution for multi-page runs. PaddleOCR is an optional configured aid; offline hints have a different quality profile.

• Presentations
• PowerPoint
• Reconstruction

Connect the page's argument and its visual rules around a single intended conversion.

No single application runtime is required; implementation examples reference Tailwind values, IntersectionObserver, and optional motion tooling.

• Landing Pages
• Copywriting
• Web Design

Build an original, source-backed explainer with narration and a deliberately consistent visual language.

Requires the supplied Remotion/Node project, Python helper scripts, rendering capability, and a suitable TTS route. The documented Chinese and English defaults use different voice engines; multi-agent construction is part of the described workflow.

• Motion Graphics
• Video
• Remotion

Build and test the mark before expanding it into a full brand kit.

The source describes dependency-free Python helper scripts, while actual image rendering needs an available renderer such as CairoSVG, Inkscape, Chrome, or another supported option.

• Branding
• Logo Design
• SVG

Choose a foil treatment or a full-image angle-dependent transformation before building the card.

Requires image generation, Python, Blender, and a web runtime for the delivered viewer. The source mentions local dependency installation during the pipeline.

• 3D Design
• Collectible Cards
• Blender

Establish the desired screenshot first, then use it as the target for implementation.

Needs a target image, or image-generation access if none is supplied. Detailed tool requirements depend on the selected referenced workflow and were not established from the entry alone.

• Visual Iteration
• Game Design
• Prototyping

Build a short film from an art direction, not a sequence of slide transitions. Huashu Art Motion combines code-drawn scenes, character sprites and motion review in a local rendering workflow.

Local rendering requires uv, FFmpeg and Playwright Chromium. Supply existing character frames or use a separate image-generation workflow for human-like sprites; audio and fonts need their own assets and permissions.

• Art Animation
• Canvas
• Short Films

Plan an academic presentation around its argument, evidence and slide titles; a separate tool creates the PPTX file.

Requires a separate PPTX Skill. The entry lists markitdown, PptxGenJS, LibreOffice, and Poppler as implementation-related dependencies.

• Presentations
• Academic Research
• PowerPoint

Create a reusable design skill from visual references, design rules and tokens.

Needs file access, suitable reference-inspection tools, Node for validate.mjs, and browser review for visual confidence. Tool availability affects extraction fidelity.

• Design Systems
• Skill Creation
• Design Tokens

Apply a brand system to an HTML page or slide deck, using layout rules appropriate to the chosen format.

URL-based brand extraction needs Firecrawl. Default outputs avoid external JavaScript dependencies, while fonts or image assets may still require their own availability and rights.

• Web Design
• Presentations
• Brand Systems

Create charts with AntV G2 v5 using its marks, encodings, scales and interactions.

Requires @antv/g2 v5 or the documented browser bundle. Optional reference retrieval uses the external AntV context service.

• Data Visualization
• Charts
• JavaScript

Visualize network data with AntV G6 v5, including graph layouts and interactive exploration.

An application using @antv/g6 v5, a browser graph container, and network access if the documented reference-retrieval service is needed. Verify APIs against the installed release.

• Graph Visualization
• Networks
• AntV

Build a node-and-edge diagram editor with AntV X6, including connections, editing behavior and required plugins.

Use the documented @antv/x6 v3 API with a browser canvas and the required plugins. Fetching additional references needs network access. Check examples against your installed version.

• Diagram Editors
• Node Interfaces
• AntV

Generative art with p5.js: seeded particles, flow fields, and tunable parameters.

Needs: p5.js

• Images & Generative Art
• Generative art
• In OpenDesign

Applies Anthropic's official brand colors and typography to any artifact. Anthropic brand only.

• Brand & Design Systems
• In OpenDesign

Original posters and static visual pieces delivered as PNG or PDF.

• Images & Generative Art
• PNG / PDF
• In OpenDesign

Sets a distinctive visual direction, typography, and layout for new or existing web UI.

• Web & UI
• UI code
• In OpenDesign

Animated GIFs that meet Slack's size and dimension limits.

• Motion & Video
• GIF
• In OpenDesign

Applies or generates color-and-type themes for pages, slides, and documents.

• Brand & Design Systems
• In OpenDesign

Multi-component interactive HTML artifacts with React, Tailwind, and shadcn/ui.

• Web & UI
• HTML
• In OpenDesign

Product design consultation that proposes a full design system: aesthetic, type, color, layout, motion.

• Brand & Design Systems
• Design system
• In OpenDesign

Builds HTML/CSS from an agreed design direction, with project-specific review before release.

• Web & UI
• HTML

Designer's-eye QA of a built page: inconsistency, spacing, hierarchy, slop patterns; then fixes them.

• Design Review & Accessibility
• Review report
• In OpenDesign

Generates several design variants in parallel and opens a comparison board for feedback.

• Web & UI
• UI code

Creates Mermaid source, Excalidraw, SVG and PNG; element editing depends on the diagram type.

Needs: Excalidraw

• Diagrams & Data Visualization
• Diagram

Visual design audit of iOS apps on real hardware.

• Mobile Apps
• Review report

Reviews a design plan for completeness and experience risk before implementation.

• Design Review & Accessibility
• Review report
• In OpenDesign

Banners for social media, ads, website heroes, and print.

• Images & Generative Art
• Image

Brand voice, visual identity, messaging frameworks, and brand consistency.

• Brand & Design Systems

Brand identity, design tokens, UI styling, logo generation, and corporate identity programs.

Needs: Image generation service (Gemini, Atlas Cloud, or MuAPI)

• Brand & Design Systems

Three-tier design tokens, component specifications, and slide generation.

• Brand & Design Systems
• Design system

Strategic HTML slide decks with Chart.js, design tokens, and responsive layouts.

Needs: Chart.js

• Presentations
• HTML slides
• In OpenDesign

React UI styling with shadcn/ui, Tailwind and a separate canvas-design reference.

Choose the component, Tailwind-only or canvas path; check project versions and companion references.

• Web & UI
• UI code

UI/UX design intelligence for web, mobile, and desktop: layout, color, type, and UX rules.

• Web & UI
• UI code
• In OpenDesign

Adds, searches, fixes, styles, and composes shadcn components in a project.

Needs: shadcn/ui

• Web & UI
• UI code

Builds production-quality, accessible, responsive user-facing UIs.

• Web & UI
• UI code

Generates brand-identity concept boards as images, including logo, color and typography directions.

Needs: Image generation service

• Brand & Design Systems
• Image
• In OpenDesign

Anti-slop frontend design for landing pages, portfolios, and redesigns.

• Web & UI
• UI code
• In OpenDesign

Editorial layouts, layout variety, and GSAP motion in one frontend skill.

Needs: GSAP

• Web & UI
• UI code

Teaches high-end agency detail: type, spacing, shadows, cards, and motion.

• Web & UI

Generates and analyzes a design image first, then implements the matching page.

Needs: Image generation service

• Web & UI
• UI code

High-fidelity mobile screen concepts and flows via image generation.

Needs: Image generation service

• Mobile Apps
• Image
• In OpenDesign

Section-by-section website design references via image generation.

Needs: Image generation service

• Web & UI
• Image
• In OpenDesign

Brutalist interfaces fusing Swiss typography with terminal aesthetics.

• Web & UI
• UI code

Clean, monochrome, editorial-style interfaces.

• Web & UI
• UI code

Audits an existing interface, implements selected redesign changes and verifies the result.

• Design Review & Accessibility
• UI code

Writes a DESIGN.md for Google Stitch with an emphasis on visual distinctiveness.

Needs: Google Stitch

• Brand & Design Systems
• DESIGN.md

One skill to design, critique, audit, polish, animate, and refine interfaces.

• Design Review & Accessibility
• UI code
• In OpenDesign

Turns text, notes, or an article into a faceless explainer video with invented scene visuals.

Needs: HyperFrames

• Motion & Video
• Video

Imports Figma assets, brand tokens, and storyboards into a HyperFrames composition.

Needs: HyperFrames, Figma

• Motion & Video
• Video

Authors or edits a custom multi-scene HyperFrames video when no template fits.

Needs: HyperFrames

• Motion & Video
• Video

Animation rules, scene blueprints, transitions, and runtime adapters for HyperFrames.

Needs: HyperFrames

• Motion & Video
• Video

Creative direction for HyperFrames videos: palette, type, composition, voice-over, pacing.

Needs: HyperFrames

• Motion & Video
• Video

Punch-ins, zooms, reframes, Ken Burns moves, and 2D/3D keyframes for HyperFrames.

Needs: HyperFrames

• Motion & Video
• Video

Short design-led motion graphics: kinetic type, stat count-ups, logo stings, lower thirds.

Needs: HyperFrames

• Motion & Video
• Video

Turns a product URL, script, or brief into a product launch or promo video.

Needs: HyperFrames

• Motion & Video
• Video

Interactive HyperFrames slide shows with fragments, branching, and presenter mode.

Needs: HyperFrames

• Presentations
• HTML slides

Developer slide decks with Markdown, Vue components, code highlighting, and animation.

Needs: Slidev

• Presentations
• HTML slides

WCAG 2.2 compliant interfaces with mobile accessibility and assistive-technology support.

• Design Review & Accessibility
• UI code

Brand-identity interview first, then generates and iterates a landing page through Stitch.

Needs: Google Stitch

• Web & UI
• UI code

Scalable design systems: tokens, theming infrastructure, component architecture.

• Brand & Design Systems
• Design system

Implements microinteractions, transitions, loading states and user-feedback patterns.

• Motion & Video

KPI dashboards: metric selection, chart choice, layout, and real-time patterns.

• Diagrams & Data Visualization
• Dashboard

Native Android UI with Material Design 3 and Jetpack Compose.

• Mobile Apps
• UI code

Native iOS UI following Apple's Human Interface Guidelines with SwiftUI.

• Mobile Apps
• UI code

Validates and repairs editable PPTX decks for geometry, accessibility, and package integrity.

• Presentations
• PPTX

Analyzes a reference PPTX for theme, typography, layout rhythm, and diagnostics.

• Presentations
• Review report

Authors coordinate-explicit JSON specifications for editable PPTX decks.

• Presentations
• PPTX

Selects and places approved icons, images, SVGs, and infographics in a PPTX deck.

• Presentations
• PPTX

React Native styling, navigation, and Reanimated animations.

Needs: React Native

• Mobile Apps
• UI code

Responsive layouts with container queries, fluid type, CSS Grid, and mobile-first breakpoints.

• Web & UI
• UI code

Guides real screen-reader checks of web apps with VoiceOver, NVDA and other readers.

Needs a runnable app, real screen readers and supported test platforms.

• Design Review & Accessibility
• Review report

Design systems with Tailwind CSS v4: tokens, component libraries, responsive patterns.

Needs: Tailwind CSS

• Brand & Design Systems
• Design system

Typography, color theory, spacing systems, and iconography for cohesive visuals.

• Brand & Design Systems

WCAG 2.2 audits with automated tests, manual checks, and remediation guidance.

• Design Review & Accessibility
• Review report

Reusable React, Vue, and Svelte component patterns and composition strategies.

• Web & UI
• UI code

Creates and edits draw.io diagram files (.drawio, .drawio.svg, .drawio.png).

Needs: draw.io

• Diagrams & Data Visualization
• Diagram

Generates Excalidraw diagrams and mind maps from natural language.

Needs: Excalidraw

• Diagrams & Data Visualization
• Diagram

Parallax, pinned sections, horizontal scroll, and text scroll animations.

Needs: GSAP

• Motion & Video
• UI code

Professional UI/UX design, components, and design systems in Penpot through MCP tools.

Needs: Penpot MCP

• Web & UI
• Design file

Power BI report design: chart selection, layout, readability, accessibility.

Needs: Power BI

• Diagrams & Data Visualization
• Dashboard

Visually inspects a running website and locates and fixes layout issues.

• Design Review & Accessibility
• Review report

Builds an animation from scratch, deciding purpose, tool, properties, curve, and duration in order.

• Motion & Video
• UI code

Gestures, springs, and transitions for React Native and Expo.

Needs: React Native / Expo

• Mobile Apps
• UI code

Reverse-lookup glossary that turns a vague motion description into its exact term.

• Motion & Video

Adapts Apple-inspired gestures, physical motion and spatial hierarchy to web interfaces.

• Web & UI
• UI code

Design-engineering guidance for polished web interfaces, interaction states and frontend review.

• Web & UI

Finds places in a UI that should animate, with parameter suggestions, and rejects the rest.

• Motion & Video
• Review report

Audits existing motion code and produces prioritized, self-contained implementation plans.

• Design Review & Accessibility
• Review report

Builds several genuinely different versions of a UI piece behind a live visual picker.

• Web & UI
• UI code

Reviews animation code for timing, interaction, and finish against a high craft bar.

• Design Review & Accessibility
• Review report
• In OpenDesign

Native-feeling page transitions with React's View Transition API.

Needs: React

• Motion & Video
• UI code

Animation-rich HTML slides from scratch or converted from PowerPoint (PPT) files.

• Presentations
• HTML slides
• In OpenDesign

Renders JSON specs into interactive terminal UIs with Ink.

Needs: Ink

• Web & UI
• Terminal UI

Generates or edits raster images: illustrations, photos, textures, sprites, mockups.

Needs: Image generation service

• Images & Generative Art
• Image
• In OpenDesign

Creates horizontal HTML decks with speaker view and sync, plus supporting assets and external resources.

• Presentations
• HTML slides
• In OpenDesign

Defines or applies brand guidelines for any product: color, type, logo, and voice.

• Brand & Design Systems

Captures brand identity once through a 10-question wizard for later documents and decks.

• Brand & Design Systems
• Design system

Converts a Markdown deck into branded slides.

• Presentations
• HTML slides

Design tokens, component documentation, responsive calculations, and developer handoff.

• Brand & Design Systems
• Design system

Data-driven personas, journey maps, usability testing frameworks, and research synthesis.

• UX & Research
• Research document

High-fidelity HTML prototypes, slides, animation, and visualizations; starts from three drafts.

• Web & UI
• HTML

WCAG 2.1 AA audit of a design or page: contrast, keyboard, touch targets.

• Design Review & Accessibility
• Review report

Structured design feedback on usability, hierarchy, and consistency.

• Design Review & Accessibility
• Review report

Developer handoff specs from a design: layout, tokens, component states, breakpoints.

• Brand & Design Systems
• Handoff spec

Audits, documents, or extends an existing design system.

• Brand & Design Systems
• Design system

Synthesizes interviews, surveys, and test notes into themes and recommendations.

• UX & Research
• Research document

Plans, conducts, and synthesizes user interviews, surveys, and usability tests.

• UX & Research
• Research document

Writes interface microcopy, error messages, empty states and action labels.

• UX & Research

GSAP core API: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

GSAP in Vue, Svelte, and other non-React frameworks: lifecycle, scoping, cleanup.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

GSAP performance: transforms, avoiding layout thrash, will-change, batching.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

GSAP plugins: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG and physics.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

GSAP in React and Next.js with the useGSAP hook, refs, context, and cleanup.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

Scroll-linked animation with ScrollTrigger: pinning, scrub, triggers, parallax.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

GSAP timelines: position parameter, nesting, and playback control.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

gsap.utils helpers: clamp, mapRange, interpolate, snap, wrap, pipe.

Needs: GSAP

• Motion & Video
• UI code
• In OpenDesign

Presentation-ready color palettes and font pairings for PPT and design tasks.

• Brand & Design Systems

A consistent visual system for PPT slides from radius and spacing recipes.

• Presentations

Turns photos of people, pets, objects, or logos into four captioned GIF stickers.

• Motion & Video
• GIF
• In OpenDesign

Generates, edits, and reads editable PowerPoint (PPTX) slide decks.

• Presentations
• PPTX
• In OpenDesign

GLSL shaders: ray marching, SDFs, fluids, particles, procedural visuals.

Needs: GLSL / WebGL

• Images & Generative Art
• Generative art
• In OpenDesign

Implements single PowerPoint slides with PptxGenJS.

Needs: PptxGenJS

• Presentations
• PPTX

Quickly de-slops UI code by fixing spacing, hierarchy, typography, and small layout issues.

• Design Review & Accessibility
• UI code

Creates or updates a DESIGN.md from an existing product repository or public website.

• Brand & Design Systems
• DESIGN.md

Audits and fixes ARIA, keyboard, focus, contrast, and form errors.

• Design Review & Accessibility
• Review report

Finds and fixes janky CSS/JS animation and scroll-linked motion.

• Motion & Video
• Review report

Audits a product surface against its own design evidence and writes implementation plans.

• Design Review & Accessibility
• Review report

Analyzes Stitch projects and writes a semantic DESIGN.md.

Needs: Google Stitch

• Brand & Design Systems
• DESIGN.md
• In OpenDesign

Rewrites vague UI ideas into polished, Stitch-optimized prompts.

Needs: Google Stitch

• Web & UI
• In OpenDesign

Converts Stitch designs into React + Vite dashboards with TanStack Query.

Needs: Google Stitch

• Web & UI
• UI code

Walkthrough videos from Stitch projects with Remotion transitions and zooms.

Needs: Google Stitch, Remotion

• Motion & Video
• Video
• In OpenDesign

Integrating and customizing shadcn/ui components: discovery, install, best practices.

Needs: shadcn/ui

• Web & UI
• UI code
• In OpenDesign

Converts frontend code into a Stitch design via static HTML and design-system extraction.

Needs: Google Stitch

• Web & UI
• Design file

Extracts a complete DESIGN.md from frontend source code in any framework.

• Brand & Design Systems
• DESIGN.md

Extracts static HTML from a running page; remaining external assets and dynamic behavior need checking.

• Web & UI
• HTML

Generates, edits, and varies screens in Stitch from text or reference images.

Needs: Google Stitch

• Web & UI
• Design file

Creates, updates, and applies design systems in Stitch through MCP tools.

Needs: Google Stitch

• Brand & Design Systems
• Design system

Converts or syncs Stitch designs to modular React + Vite components.

Needs: Google Stitch

• Web & UI
• UI code

Converts or syncs Stitch HTML designs to React Native components.

Needs: Google Stitch, React Native

• Mobile Apps
• UI code

Craft-first interface design for dashboards, admin panels, SaaS tools, and settings pages.

• Web & UI
• UI code

Polishes interface typography, surfaces, icons and microinteractions; reviews frontend details.

• Web & UI

Audits and improves web accessibility following WCAG 2.2.

• Design Review & Accessibility
• Review report

Applies motion design principles: timing, easing, choreography, and animation fundamentals.

• Motion & Video

End-to-end user research assistant: qualitative and quantitative, guides and plans.

• UX & Research
• Research document

Implements Material Design 3 tokens, components, and adaptive layouts.

• Mobile Apps
• UI code

Purposeful interaction motion, or a review of existing animation, after Kowalski, Krehel, and Tompkins.

• Motion & Video

Color naming, theory, spaces, palettes, ramps, gradients, conversions, and contrast.

• Brand & Design Systems
• In OpenDesign

Renders data as bar, line, pie, radar, Sankey, mind-map, and flow charts through the AntV API.

Needs: AntV API

• Diagrams & Data Visualization
• Chart image

Creates infographics from a given text.

Needs: AntV API

• Diagrams & Data Visualization
• Image

Writes and reviews interface copy with tone guidance, editing passes and usability checks.

• UX & Research