内容与媒体类 Agent Skills（共 12,604 条）
全库共 12,604 条 Skill 属于“内容与媒体”，分类由名称、路径与描述关键词在构建时推导。下面是其中 Star 最高的 100 条，已标注许可证与安全规则命中情况。在目录中看全部 →
- 1
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algo…
- 2
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. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
- 3
canvas-design
Create beautiful visual art in .png and .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. Create original visual designs, never copying exi…
- 4
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
- 5
slack-gif-creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
- 6
api-and-interface-design
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend…
- 7
critique
Produce a single-file HTML "design review report" that scores any artifact across 5 dimensions and proposes actionable fixes. Inspired by the *huashu-design* expert-critique flow.
- 8
Design System Source Context
This file is generated during setup and should be treated as source evidence for the design-system project. Use it before writing or revising DESIGN.md, previews, tokens, UI kit examples, or assets.
- 9
design-brief
Parse a structured design brief into a concrete DESIGN.md and optional visual preview. Agent, follow this workflow exactly.
- 10
doc-kami-parchment
Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.
- 11
G2 Design System UI Kit
Use this skill when generating Open Design artifacts that should follow the HiCatcat G2 AR glasses HUD design system. This plugin packages a browser-reviewable UI kit, local token CSS, and modular React role components.
- 12
html-ppt-zhangzara-cobalt-grid
> Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.
- 13
html-ppt-zhangzara-vellum
> Deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic.
- 14
hyperframes
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced t…
- 15
last30days
This skill adapts the upstream Last30Days workflow for Open Design. It includes the runtime-minimum Python engine under `scripts/`, but it does not add slash commands, provider settings, daemon routes, bundled API keys, or browser/social c…
- 16
open-design-landing
Build a single-page editorial landing site (or a slide deck — see the sibling [`open-design-landing-deck`](../open-design-landing-deck/) skill) in the **Atelier Zero** design system: warm-paper background, Inter Tight + Playfair Display, i…
- 17
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
- 18
social-x-post-card
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
- 19
video-shortform
Short-form (≤ 10s) is the sweet spot for current text-to-video models — they're great at one **shot** with one **idea**, weaker at multi-cut narratives. Plan one shot per call.
- 20
video-template-frame-product-promo-30s
Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forke…
- 21
web-prototype-taste-editorial
Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
- 22
web-prototype-taste-soft
Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`.
- 23
worker-visualizer
Produce a single self-contained `index.html` that moves heavy per-frame compute into a Web Worker and renders the result to a canvas, keeping the main thread at a smooth 60fps.
- 24
x-research
This skill adapts Dexter's original X/Twitter research workflow for Open Design. It is a workflow contract only; it does not add Dexter's `x_search` tool, X API credentials, provider settings, slash commands, daemon routes, or runtime modu…
- 25
audio-jingle
Three sub-modes. The active project's `audioKind` decides which one runs:
- 26
Design Refine
Use this plugin when the user wants to improve an existing Open Design artifact rather than create a new one.
- 27
Export To Next.js
Use this plugin when the user wants to hand an accepted Open Design artifact to a Next.js App Router project.
- 28
Export To React
Use this plugin when the user wants to hand an accepted Open Design artifact to a React app.
- 29
Export To Vue
Use this plugin when the user wants to hand an accepted Open Design artifact to a Vue 3 project.
- 30
frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
- 31
frame-glitch-title
Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.
- 32
frame-liquid-bg-hero
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
- 33
frame-logo-outro
Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
- 34
frame-macos-notification
Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
- 35
html-ppt-zhangzara-8-bit-orbit
> Pixel-art neon arcade aesthetic on a deep navy void.
- 36
html-ppt-zhangzara-broadside
> Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack.
- 37
html-ppt-zhangzara-creative-mode
> Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display.
- 38
html-ppt-zhangzara-grove
> Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent.
- 39
html-ppt-zhangzara-mat
> Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.
- 40
html-ppt-zhangzara-pink-script
> Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury.
- 41
html-ppt-zhangzara-signal
> Deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight.
- 42
html-ppt-zhangzara-studio
> Black canvas with electric-yellow type; high-voltage design studio aesthetic.
- 43
poster-hero
Vertical poster or Moments-style share image with strong visual impact.
- 44
pricing-page
Produce a single-screen pricing page that respects the active DESIGN.md.
- 45
vfx-text-cursor
Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
- 46
video-hyperframes
Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
- 47
8-bit-orbit-video-template
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
- 48
ad-creative
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
- 49
ai-music-album
Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.
- 50
algorithmic-art
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
- 51
audio-jingle
Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file s…
- 52
blog-post
A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- 53
blog-post
A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
- 54
brand-guidelines
Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.
- 55
canvas-design
Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.
- 56
chat-motion-overlay
Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready R…
- 57
community-registry-starter
A small community registry starter plugin used to verify Open Design marketplace install flows.
- 58
competitive-ads-extractor
Extract and analyze competitors' ads from ad libraries to understand messaging and creative approaches that resonate.
- 59
contact-widget
Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.
- 60
copywriting
Write and rewrite marketing copy for landing pages, homepages, and ads. Useful as a copy chief partner during launches.
- 61
create-hyperframes-launch
Use this plugin when the user wants a HyperFrames-ready HTML motion composition, launch animation, kinetic typography clip, product reveal, or social video made from code.
- 62
create-image-campaign
Use this plugin when the user wants image assets, posters, social visuals, ad concepts, or a small campaign image system from a creative brief.
- 63
creative-director
AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.
- 64
critique
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-ba…
- 65
critique-theater
Five-role Design Jury review that streams scored rounds, persists a replayable transcript, and ships through the daemon's Critique Theater protocol.
- 66
dating-web
A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when th…
- 67
dcf-valuation
Discounted cash flow valuation and intrinsic value analysis for public companies. Use when the brief asks for DCF, fair value, intrinsic value, price target, undervalued or overvalued analysis, or "what is this company worth?"
- 68
deck-open-slide-canvas
Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.
- 69
deck-swiss-international
Open Design's FY26 board pre-read: the open-core bet, growth vs burn, and the one decision the board must approve. Built as a decision-grade corporate strategy deck for board, CEO, CFO.
- 70
design-brief
Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, densit…
- 71
design-consultation
Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.
- 72
design-extract
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
- 73
design-md
Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.
- 74
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward…
- 75
diff-review
Render the patch-edit run's accumulated changes as a reviewable diff, surface it through a GenUI choice surface, and persist the user's accept / reject decision into the artifact manifest.
- 76
digital-eguide
A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when t…
- 77
doc-kami-parchment
Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.
- 78
domain-name-brainstormer
Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai.
- 79
ecommerce-image-workflow
Reference-product ecommerce image workflow for generating a compact set of product-faithful main, feature, and lifestyle images from real product reference photos. V1 requires uploaded product imagery and intentionally defers brief-only co…
- 80
email-marketing
A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use whe…
- 81
email-marketing
A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use whe…
- 82
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
- 83
emilkowalski-motion
Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.
- 84
eng-runbook
An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions "runbook", "ops doc", "on-call gui…
- 85
export-download-debugging
Diagnose and fix browser, preview, or Electron export/download failures, especially image export issues involving Save As, Blob/Data URLs, the File System Access API, createWritable failures, and 0 KB files.
- 86
export-nextjs-handoff
Use this plugin when the user wants an accepted Open Design artifact converted into a Next.js App Router handoff with clean components, styles, assets, and implementation notes.
- 87
extend-plugin-author
Use this plugin when the user wants to create, improve, validate, publish, or submit an Open Design plugin using the plugin spec, examples, and PR workflow.
- 88
fal-image-edit
AI-powered image editing with style transfer, background removal, object removal, and inpainting via fal.ai hosted models.
- 89
fal-lip-sync
Create talking head videos and lip sync audio to video via fal.ai. Useful for explainer avatars, multilingual dubbing previews, and social cuts.
- 90
fal-realtime
Real-time and streaming AI image generation via fal.ai. Suited for moodboard exploration, draft variations, and rapid creative iteration.
- 91
fal-restore
Restore and fix image quality — deblur, denoise, fix faces, and restore old documents using fal.ai's hosted restoration models.
- 92
fal-train
Train custom AI models (LoRA) on fal.ai for personalized image generation tailored to a brand, character, or style.
- 93
fal-upscale
Upscale and enhance image and video resolution using AI super-resolution models hosted on fal.ai.
- 94
fal-video-edit
Edit existing videos using AI — remix style, upscale, remove background, and add audio via fal.ai's hosted video models.
- 95
figma-code-connect-components
Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.
- 96
figma-create-design-system-rules
Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.
- 97
figma-create-new-file
Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.
- 98
figma-extract
Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.
- 99
figma-generate-library
Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
- 100
figma-use
Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.