OD / 2026 · Vol. 01 / Issue Nº 26 Filed under Design · Intelligence Apache-2.0 · Made on Earth Live · v0.7.0
EN
Open Design
DownloadStar · 48.8K
Catalog · Nº 01

Skills — 132 composable design capabilities.

Each skill is a folder with one SKILL.md. Drop it in, restart the daemon, and the picker shows it.

Mode
Scenario
Platform
  • desktop23
  • mobile2
  1. 01 deck-swiss-international16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange) deck
  2. 02 deck-guizang-editorial电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘) deck
  3. 03 doc-kami-parchment暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印 prototype
  4. 04 video-hyperframesHyperframes / Remotion 兼容的连续帧动画, 可自动播放 video
  5. 05 frame-glitch-title数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero video
  6. 06 vfx-text-cursor光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句 video
  7. 07 frame-logo-outroLogo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕 video
  8. 08 deck-open-slide-canvas锁死 1920×1080 画布, React 组件级自由组合, 不绑模板 deck
  9. 09 8-bit-orbit-video-templateHyperframes-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. template
  10. 10 ad-creativeGenerate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration. design-system
  11. 11 after-hours-editorial-templateLuxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions. template
  12. 12 agent-browserBrowser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing. prototype
  13. 13 ai-music-albumFull-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks. audio
  14. 14 algorithmic-artCreate generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies. image
  15. 15 apple-higApple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS. design-system
  16. 16 article-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay. prototype
  17. 17 artifacts-builderSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). prototype
  18. 18 brainstormingTransform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work. design-system
  19. 19 brand-guidelinesApply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own. design-system
  20. 20 canvas-designCreate beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces. image
  21. 21 card-twitter推特金句 / 数据卡, 适合配推文 prototype
  22. 22 card-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览 prototype
  23. 23 color-expertColor science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory. design-system
  24. 24 competitive-ads-extractorExtract and analyze competitors' ads from ad libraries to understand messaging and creative approaches that resonate. design-system
  25. 25 copywritingWrite and rewrite marketing copy for landing pages, homepages, and ads. Useful as a copy chief partner during launches. design-system
  26. 26 creative-directorAI 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. design-system
  27. 27 d3-visualizationTeaches the agent to produce D3 charts and interactive data visualizations. Useful for editorial dashboards, reports, and explanatory graphics. prototype
  28. 28 data-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页 prototype
  29. 29 design-briefParse 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, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief". design-system
  30. 30 design-consultationBuild a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work. design-system
  31. 31 design-mdCreate and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth. design-system
  32. 32 design-reviewDesigner Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch. design-system
  33. 33 digits-fintech-swiss-templateSwiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file. template
  34. 34 docRead, create, and edit .docx documents with formatting and layout fidelity via OpenAI's document skill. prototype
  35. 35 docxCreate, edit, and analyze Word documents with tracked changes, comments, and formatting. Useful for design briefs, copy docs, and review-ready deliverables. prototype
  36. 36 domain-name-brainstormerGenerate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai. design-system
  37. 37 editorial-burgundy-principles-templateEditorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation. template
  38. 38 enhance-promptImprove prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output. design-system
  39. 39 fal-3dGenerate 3D models from text or images via fal.ai. Useful for game assets, AR previews, product mockups, and concept sculpting. image
  40. 40 fal-generateGenerate images and videos using fal.ai AI models. Production-grade catalogue covering Flux, SDXL, ideogram, and other community-hosted endpoints. image
  41. 41 fal-image-editAI-powered image editing with style transfer, background removal, object removal, and inpainting via fal.ai hosted models. image
  42. 42 fal-kling-o3Generate images and videos with Kling O3 — Kling's most powerful model family — via fal.ai. video
  43. 43 fal-lip-syncCreate talking head videos and lip sync audio to video via fal.ai. Useful for explainer avatars, multilingual dubbing previews, and social cuts. video
  44. 44 fal-realtimeReal-time and streaming AI image generation via fal.ai. Suited for moodboard exploration, draft variations, and rapid creative iteration. image
  45. 45 fal-restoreRestore and fix image quality — deblur, denoise, fix faces, and restore old documents using fal.ai's hosted restoration models. image
  46. 46 fal-trainTrain custom AI models (LoRA) on fal.ai for personalized image generation tailored to a brand, character, or style. image
  47. 47 fal-tryonVirtual try-on — see how clothes look on a person via fal.ai's hosted try-on models. Useful for ecommerce, lookbooks, and styling experiments. image
  48. 48 fal-upscaleUpscale and enhance image and video resolution using AI super-resolution models hosted on fal.ai. image
  49. 49 fal-video-editEdit existing videos using AI — remix style, upscale, remove background, and add audio via fal.ai's hosted video models. video
  50. 50 fal-visionAnalyze images — segment objects, detect, run OCR, describe, and answer visual questions via fal.ai vision models. image
  51. 51 faq-pageA Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering. Use when the brief asks for "FAQ", "help center", "questions", or "support page". prototype
  52. 52 field-notes-editorial-templateEditorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout. template
  53. 53 figma-code-connect-componentsConnect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically. design-system
  54. 54 figma-create-design-system-rulesGenerate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source. design-system
  55. 55 figma-create-new-fileCreate a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows. design-system
  56. 56 figma-generate-designBuild or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens. design-system
  57. 57 figma-generate-libraryBuild 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. design-system
  58. 58 figma-implement-designTranslate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent. design-system
  59. 59 figma-useRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue. design-system
  60. 60 flutter-animating-appsImplement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design. prototype
  61. 61 frame-data-chart-nytNYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带) video
  62. 62 frame-flowchart-stickySVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm video
  63. 63 frame-light-leak-cinema胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡 video
  64. 64 frame-liquid-bg-heroWebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报 video
  65. 65 frame-macos-notification拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告 video
  66. 66 frontend-designFrontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline. design-system
  67. 67 frontend-devFull-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites. prototype
  68. 68 frontend-skillCreate visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook. design-system
  69. 69 frontend-slidesGenerate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs. deck
  70. 70 full-page-screenshotCapture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports. image
  71. 71 gif-sticker-makerConvert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Useful for personalized chat stickers and avatar packs. image
  72. 72 gsap-coreCore GSAP API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults. Production-grade web animation primitives. prototype
  73. 73 gsap-reactGSAP React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR. Ships safe motion in React + Next.js apps. prototype
  74. 74 gsap-scrolltriggerGSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages. prototype
  75. 75 gsap-timelineGSAP Timelines with sequencing, position parameter, labels, nesting, and playback control. Useful for orchestrating multi-step motion sequences. prototype
  76. 76 hand-drawn-diagramsGenerate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths. prototype
  77. 77 hatch-petCreate, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly. image
  78. 78 html-ppt-retro-quarterly-reviewRetro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck with heavyweight slab headlines, clean cream paper sections, structured grids, and fast premium motion pacing (3 slides, each hold under 3s in video mode). template
  79. 79 image-enhancerImprove image and screenshot quality by enhancing resolution, sharpness, and clarity for professional presentations and documentation. image
  80. 80 imagegenGenerate and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references. image
  81. 81 imagenGenerate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets. image
  82. 82 login-flowMobile login and authentication flow screens prototype
  83. 83 marketing-psychologyApply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation. design-system
  84. 84 minimax-docxProfessional DOCX document creation and editing using OpenXML SDK. Useful for branded reports, polished proposals, and template-based authoring. prototype
  85. 85 minimax-pdfGenerate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports. prototype
  86. 86 mockup-device-3diPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图 prototype
  87. 87 nanobanana-pptAI-powered PPT generation with document analysis and styled images via the NanoBanana stack. Combines image generation with structured deck output. deck
  88. 88 paywall-upgrade-croDesign and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments. design-system
  89. 89 pdfExtract text, create PDFs, and handle forms. Useful for press releases, branded one-pagers, and printable design deliverables. prototype
  90. 90 pixelbin-mediaGenerate and edit images and videos with an 85+ API portfolio and build visually appealing website pages via Pixelbin. image
  91. 91 plan-design-reviewSenior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work. design-system
  92. 92 platform-design300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web. design-system
  93. 93 poster-hero竖版海报 / 朋友圈分享图, 强视觉冲击 prototype
  94. 94 ppt-keynote苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换 deck
  95. 95 pptxRead, generate, and adjust PowerPoint slides, layouts, and templates. Useful for executive decks, training material, and product reviews. deck
  96. 96 pptx-generatorCreate and edit PowerPoint presentations from scratch with PptxGenJS — MiniMax's production-tested deck pipeline. deck
  97. 97 pptx-html-fidelity-auditAudit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences. utility
  98. 98 release-notes-one-pagerRelease notes one-page HTML with highlights, Added, Fixed, Breaking changes, Known issues, and Upgrade note. Writes explicit "None" style sections whenever the user does not provide details. prototype
  99. 99 remotionProgrammatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics. video
  100. 100 replicateDiscover, compare, and run AI models using Replicate's API. Strong fit for image, audio, and video generation pipelines that swap models frequently. image
  101. 101 resume-modern现代极简简历, A4 单页, 适合打印或导出 PDF prototype
  102. 102 screenshotCapture desktop, app windows, or pixel regions across OS platforms. Useful for marketing screenshots, design reviews, and bug reports. image
  103. 103 screenshots-marketingGenerate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals. image
  104. 104 shadcn-uiBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly. design-system
  105. 105 shader-devGLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills. prototype
  106. 106 slack-gif-creatorCreate animated GIFs optimized for Slack with validators for size constraints and composable animation primitives. image
  107. 107 slidesCreate and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases. deck
  108. 108 social-reddit-card拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享 prototype
  109. 109 social-spotify-cardSpotify Now Playing 风格卡: 专辑封面 + 进度条 + 播放控制, 适配视频叠加 / 个人主页 prototype
  110. 110 social-x-post-card拟真 X 推文卡片 + 互动数据 (likes/reposts/views), 适配视频叠加或图卡分享 prototype
  111. 111 soraGenerate, remix, and manage short video clips via OpenAI's Sora API. Useful for cinematic shots, b-roll, and rapid concept video iteration. video
  112. 112 speechGenerate spoken audio from text using OpenAI's API with built-in voices. Useful for narrated explainers, lecture audio, and quick voiceover tracks. audio
  113. 113 stitch-loopIterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI. design-system
  114. 114 swiftui-designSwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode. design-system
  115. 115 swiss-creative-mode-templateSwiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions. template
  116. 116 swiss-user-research-video-templateSwiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file. template
  117. 117 taste-skillHigh-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop. design-system
  118. 118 theme-factoryApply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes. design-system
  119. 119 threejsThree.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing. prototype
  120. 120 ui-skillsOpinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces. design-system
  121. 121 ui-ux-pro-maxCatalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design. design-system
  122. 122 venice-audio-musicMusic generation queueing, retrieval, and completion endpoints via Venice.ai. Suited for jingles, background loops, and prototype scoring. audio
  123. 123 venice-audio-speechText-to-speech models, voices, formats, and streaming via Venice.ai. Useful for narration, voiceover, and conversational agent voices. audio
  124. 124 venice-image-editImage edits, upscaling, and background removal via the Venice.ai API. image
  125. 125 venice-image-generateImage generation endpoints and available styles via the Venice.ai API. image
  126. 126 venice-videoVideo generation and transcription workflows via the Venice.ai API. video
  127. 127 video-downloaderDownload videos from YouTube and other platforms for offline viewing, editing, or archival with support for various formats and quality options. video
  128. 128 web-artifacts-builderBuild complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts. prototype
  129. 129 web-design-guidelinesWeb design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. design-system
  130. 130 weread-year-in-review-video-templateWeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion. template
  131. 131 wpdsWordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites. design-system
  132. 132 youtube-clipperYouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export. video