Design & Media

knownasnaffy Bundle

Turn Weixin/Wechat replies into readable image cards by rendering HTML into long PNG screenshots. Use when a Weixin direct-chat reply would exceed 150 Chinese characters, when the user asks for a card, a beautiful visual, or a poster-like output, or when the content benefits from HTML-based rendering such as charts, tables, curves, timelines, relation diagrams, comparison layouts, dashboards, or mixed text-image presentation. First write HTML, then render it into an image.

knownasnaffy Bundle

Create polished, editable SVG cover artwork for reports, articles, slide decks, social cards, ebook covers, posters, and landing-page hero images. Use when a user asks for an SVG cover, vector poster, social preview graphic, title card, thumbnail-style artwork, or branded cover image that should remain text-editable and easy to customize.

knownasnaffy Skill

Design eye-catching cover images for video content with AI — create professional cover art for video series, courses, podcasts, playlists, and social media video posts. NemoVideo generates cover images that communicate content value at a glance: bold title typography, thematic imagery, brand-consistent design, platform-optimized dimensions, and the visual quality that makes viewers perceive your content as premium before pressing play. Different from thumbnails: covers represent entire series, collections, and brands rather than individual videos. AI video cover maker, video cover image, course cover design, podcast cover art, playlist cover, video series cover, social video cover, video poster maker, content cover generator.

knownasnaffy Bundle

Dump the current STM32 LCD framebuffer via J-Link and convert it to PNG for visual comparison with Figma. Use when user asks to export, snapshot, dump, or capture what is currently displayed on device screen.

knownasnaffy Bundle

Generate daily Chinese classical poetry art cards — AI-generated landscape painting paired with poem text, delivered to chat. Use when the user asks for poetry illustration, poem art card, daily poem image, 诗词配图, 每日诗歌图片, or when a cron job triggers the daily poetry art task.

aaaaqwq Bundle

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient.

aaaaqwq Skill

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

aaaaqwq Bundle

This skill should be used when the user asks to "design system architecture", "evaluate microservices vs monolith", "create architecture diagrams", "analyze dependencies", "choose a database", "plan for scalability", "make technical decisions", or "review system design". Use for architecture decision records (ADRs), tech stack evaluation, system design reviews, dependency analysis, and generating architecture diagrams in Mermaid, PlantUML, or ASCII format.

aaaaqwq Bundle

Publish one piece of content across MoltX, Twitter/X, Discord, and Telegram with platform-specific formatting.

aaaaqwq Skill

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

aaaaqwq Bundle

Generate professional poster designs using each::sense AI. Create movie posters, event posters, motivational posters, product launch visuals, vintage designs, travel posters, and more with AI-powered creative generation.

ahang1598 Bundle

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Trigger scenarios — use when the user mentions any of: - UI design, frontend design, web design, interface design, 界面设计, 前端设计 - responsive layout, mobile adaptation, breakpoints, 响应式, 自适应, 适配 - animation, motion, micro-interaction, transitions, 动画, 动效, 微交互 - UX copy, microcopy, error messages, labels, UX 文案, 文案优化 - performance optimization, bundle size, rendering, 性能优化, 渲染, 加载速度 - accessibility audit, a11y, WCAG, 无障碍, 可访问性 - design review, design critique, UX evaluation, 设计评审, 设计审查 - typography, fonts, type hierarchy, 字体, 排版, 字号 - color palette, color scheme, theming, 配色, 色彩, 主题 - layout, spacing, visual rhythm, grid

ahang1598 Skill

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

ahang1598 Skill

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

ahang1598 Bundle

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.

ahang1598 Bundle

Create research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration.

ahang1598 Bundle

TDesign WeChat Mini Program UI component library by Tencent. Use when building WeChat mini apps with TDesign components (Button, Dialog, Input, Tabs, Chat, etc.), implementing TDesign design system, customizing themes/dark mode, or building AI chat interfaces in mini programs.

ahang1598 Bundle

Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.

ahang1598 Bundle

This skill should be used for any design-related tasks involving creating, editing, or modifying visual designs, UI screens, pages, layouts, or components, as well as converting designs to frontend code. Trigger phrases include: generate/create/design a page, design a screen, create a landing page, make a dashboard, design a login screen, modify the design, update the layout, change colors, add a component, edit design file, create wireframe, design a form, build a UI, generate homepage, create slides, design a presentation, generate style guide, create design system from website, extract design tokens, convert design to code, design to HTML, export as webpage, pixel-perfect reproduction, implement slide transitions, 生成设计指南, 提取设计风格, 网站风格转设计稿, 设计稿转代码, 转为前端代码, 生成HTML, 导出为网页, 一比一还原, 复刻设计稿, 设计稿出码, 切图, 幻灯片转网页, or Chinese equivalents like 生成页面, 设计页面, 创建界面, 修改设计稿, 调整布局, 修改样式, 生成设计, 做一个页面, 画一个页面. Routes all design work through the ardot MCP server.

ahang1598 Skill

Picset 单图文生图/图生图：面向独立生图任务和图片编辑场景，根据提示词或参考图生成单张图片。适用于创意单图、概念图、插画、示意图、logo、场景图等非电商上架图，以及基于已有图片的换背景、改风格、加元素等编辑操作。不走电商套图报价与 generate_commerce_images 链路；画布仅作为结果承接容器，生图本身不依赖画布。

ahang1598 Bundle

产品图片的图形商标检测与相似度搜索。当用户提到商标检测、图形商标搜索、Logo侵权检查、商标相似度分析、图片商标风险评估、产品图片商标筛查、graphic trademark detection, logo infringement, trademark similarity, trademark risk, image trademark screening, Ruiguan时触发此技能。即使用户未明确说"商标检测"，只要其需求涉及将产品图片与已注册的图形商标进行比对或评估商标侵权风险，也应触发此技能。

ahang1598 Bundle

Create a presentation using the Simple Dark Mode template and its retained reference file. Use when the user selects or names Simple Dark Mode. Create clean dark-mode presentations with bold typography, simple sections, charts, and imagery.

ahang1598 Bundle

Create a presentation using the Simple Light Mode template and its retained reference file. Use when the user selects or names Simple Light Mode. Create clean light-mode presentations with spacious typography, simple sections, charts, and imagery.

yanacuti1121 Skill

Design and implement internationalization (i18n) — RTL layout, text expansion budgeting, locale-aware APIs, cultural color semantics, pseudo-localization testing, and Vietnamese-specific considerations. Use when asked about "RTL", "right-to-left", "internationalization", "localization", "i18n", "l10n", "translate the app", "text expansion", "Arabic/Hebrew layout", or "support multiple languages". Do NOT use for: translation content itself — that is a human/MT workflow. Do NOT use for: font loading — use `typography-system`.

yanacuti1121 Skill

Build and customize UI components with shadcn/ui — component installation, CSS variable theming, Radix UI primitive composition, variant patterns with cva(), dark mode wiring, and extending components without forking. Use when asked about "shadcn", "shadcn/ui", "shadcn component", "radix primitive", "cva variants", "shadcn theme", "extend shadcn", "shadcn dark mode", "shadcn form", "shadcn dialog", "shadcn button variants", or "how to customize shadcn components". Do NOT use for: full design system token architecture — see design-system-gen. Do NOT use for: animation patterns — see motion-design.

yanacuti1121 Skill

Lock a specific visual aesthetic before building UI — choose one of 8 design anchors (Swiss, Industrial, Brutalist, Aurora Maximalism, Chaotic Maximalism, Retro-Futuristic, Organic, Lo-Fi) and apply its palette, typography, and texture tokens consistently throughout the build. Use when the user says "make it look like X", names a visual style, wants a specific aesthetic mood, or asks to avoid generic AI output. Do NOT use when the project already has an established design system — apply that system instead.

yanacuti1121 Skill

Generate a complete design token system for a new project — color palette, typography scale, spacing, shadows, and border radius — tailored to the product type (SaaS, e-commerce, healthcare, fintech, creative, etc.). Use when starting a new project with no design system, when the user asks to "set up design tokens", "create a design system", or "what colors/fonts should I use for a [product type]". Do NOT use when the project already has tokens — use ui-redesign instead.

yanacuti1121 Skill

Design a complete typography system — font pairing, type hierarchy, micro-typography (line-height, letter-spacing, measure), web font performance (font-display, preload, system stacks), and Vietnamese diacritic considerations. Use when the user asks to "choose fonts", "set up typography", "fix text spacing", "font pairing", "type scale", or "web font loading". Do NOT use when a design token system already exists — extend it instead. Works standalone or as a layer on top of design-system-gen output.

yanacuti1121 Skill

Practice the design-engineering discipline — bridging design intent and implementation, working directly in code, component exploration workflow, design tool to code handoff, and building UI systems that stay true to their design spec. Use when asked about "design engineering", "design engineer", "design in code", "design-to-dev handoff", "bridge design and development", "design system in code", "component playground", "Storybook for design", "Figma to code", "interactive prototyping in code", or "when to use design tools vs code". Do NOT use for: building an actual design system token spec — see design-system-gen. Do NOT use for: specific animation implementation — see motion-design.

yanacuti1121 Skill

Apply high-taste UI/UX principles to frontend work: visual hierarchy, spacing discipline, typography, color restraint, and anti-slop patterns. Use when the user asks to "make it look better", "improve the UI", "make it more professional", "it feels off", or when delivering any frontend work that involves visual appearance. Do NOT use for pure logic/backend work with no visual output.

yanacuti1121 Skill

Anti-slop frontend framework cho AI agents — layout, typography, motion, spacing chuẩn thay vì boilerplate UI nhàm. Dùng khi muốn AI build UI có aesthetic thực sự.

tangchunwu Bundle

基于文档内容自动生成配图。AI 智能分析文档结构，归纳核心要点， 为每个主题生成符合特定风格的配图。支持封面图生成和自定义图片比例。 使用场景：当用户需要为文档、文章、笔记生成配图时。 关键词：配图、插图、illustration、generate images、document images

tangchunwu Bundle

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

tangchunwu Skill

Check existing code against your design system for spacing, depth, color, and pattern violations.

tangchunwu Skill

Show current design system state including direction, tokens, and patterns.

kk20300113-png Skill

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead. Use when asked to "design system", "brand guidelines", or "create DESIGN.md". Proactively suggest when starting a new project's UI with no existing design system or DESIGN.md. (gstack)