Skills tagged design: 96 agent skills for Claude Code
ad-creative — When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text.
algorithmic-art — js with seeded randomness and interactive parameter exploration.
amazon-dynamodb — Designs, reviews, and debugs DynamoDB data layers from design axioms — enumerates access patterns, chooses partition/sort keys and GSIs.
api-and-interface-design — Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.
app-platform-designer — Transform natural language application descriptions into production-ready DigitalOcean App Platform specifications.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
architecture-designer — Use when designing new high-level system architecture, reviewing existing designs, or making architectural decisions.
brainstorm-ideas-existing — Brainstorm product ideas for an existing product using multi-perspective ideation from PM, Designer, and Engineer viewpoints.
brainstorm-ideas-new — Brainstorm feature ideas for a new product in initial discovery from PM, Designer, and Engineer perspectives.
brainstorming — You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior.
brand-guidelines — Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.
cad — Create/edit parametric CAD models, organize CAD projects, export STEP/STL/3MF/GLB files, resolve prompt references, and measure geometry with cadgen.
cad-viewer — Start CAD Viewer and return review links for CAD and robot-description files.
canvas-design — pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece.
captions-overlay — Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of.
cli-developer — Use when building CLI tools, implementing argument parsing, or adding interactive prompts.
copywriting — When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages.
create-prd — Create a Product Requirements Document using a comprehensive 8-section template covering problem, objectives, segments, value propositions, solution.
customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.
cut-the-curve — The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut.
design-md — Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
design-style-picker — Batch-generate and compare visual design directions so a user can choose the style they actually want.
dfam-check — Measure mesh files against Design for Additive Manufacturing (DfAM) rules and report printability findings per process (FDM, SLS, SLA/DLP, metal PBF, MJF).
docx-creator — docx) and export existing Word/WPS manuscripts to PDF (Word 转 PDF / 试读版 / 排版修复), preserving revisions, tables and images.
dxf — Generate, regenerate, and validate 2D DXF drawings from Python build123d sources.
embedded-captions — Add captions or subtitles to an existing single-subject talking-head video without editing the footage.
enhance-prompt — Transforms vague UI ideas into polished, Stitch-optimized prompts.
excalidraw-use — Place existing images onto an Excalidraw whiteboard, turn a slide deck into clean per-slide images first.
faceless-explainer — Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture.
figma — Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components.
flutter-expert — Use when building cross-platform applications with Flutter 3+ and Dart.
frontend-design — Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
hyperframes-keyframes — js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.
hyperframes-studio — Use when building or editing a HyperFrames project that people open in Studio: how the timeline should be laid out so it reads well (one caption track.
idea-refine — Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking.
image — When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners.
interaction-design-board — Generate several genuinely different, runnable HTML interaction prototypes for one product surface, combine them in an interactive Design Board.
interview-me — Extracts what the user actually wants instead of what they think they should want.
job-stories — Create job stories using the 'When [situation], I want to [motivation], so I can [outcome]' format with detailed acceptance criteria.
json-canvas — canvas) with nodes, edges, groups, and connections.
llm-icon-finder — Finding and accessing AI/LLM model brand icons from lobe-icons library. ), or request icons in SVG/PNG/WEBP formats.
motion-doctrine — GATEWAY — load FIRST before composing any HyperFrames animation or video.
motion-graphics — A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup.
outcome-roadmap — Transform an output-focused roadmap into an outcome-focused one that communicates strategic intent.
popups — When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes.
pptx — potx file is involved in any way — as input, output, or both. potx), layouts, speaker notes, or comments.
product-launch-video — Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos.
product-name — Brainstorm 5 unique, memorable product names with rationale aligned to brand values and target audience.
product-vision — Brainstorm an inspiring, achievable, and emotional product vision that motivates teams and aligns stakeholders.
sdf — SDFormat/SDF model and world authoring, validation, and simulator handoff.
seam-craft — Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master.
sendcutsend — com orders using its ordering guide, catalog, and specs.
seo-competitor-pages — Generate SEO-optimized competitor comparison and alternatives pages.
seo-image-gen — AI image generation for SEO assets: OG/social preview images, blog hero images, schema images, product photography, infographics.
shadcn-ui — Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization.
sharp-edges — Identifies error-prone APIs, dangerous configurations, and footgun designs that enable security mistakes.
slack-gif-creator — Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts.
slideshow — Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation.
spec-driven-development — Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet.
srdf — MoveIt2 SRDF authoring, validation, and planning-semantics workflow.
stakeholder-map — Build a stakeholder map using a power/interest grid, identify communication strategies per quadrant, and generate a communication plan.
step-parts — Find, evaluate, and download common purchasable CAD parts from step.parts, including named off-the-shelf actuators, servos, motors, electronics boards.
stitch::code-to-design — ) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. , requests to "save", "migrate", or "upload").
stitch::extract-design-md — md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.
stitch::extract-static-html — Extract self-contained static HTML from a built web application or React components by inlining CSS and images.
stitch::generate-design — Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.
stitch::manage-design-system — Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
stitch::react-components — Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs.
stitch::react-native — Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
strategy-red-team — Red-team a PRD, roadmap, or strategy by attacking its load-bearing assumptions before reality does.
talking-head-recut — Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes.
taste-design — Semantic Design System Skill for Google Stitch.
terminal-screenshot — Render a terminal CLI program's colored output to a PNG so Claude can actually SEE the real visual result — color contrast, alignment, background blocks.
theme-factory — Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc.
threat-modeling-with-aws-security-agent — Run an AWS Security Agent threat model review on spec/design documents. md for security posture changes, or STRIDE analysis.
ui-designer — Extract design systems from reference UI images and generate implementation-ready UI design prompts.
urdf — URDF robot description authoring and validation.
user-personas — Create refined user personas from research data — 3 personas with JTBD, pains, gains, and unexpected insights.
user-stories — Create user stories following the 3 C's (Card, Conversation, Confirmation) and INVEST criteria with descriptions, design links, and acceptance criteria.