Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

hypnotic-pattern

Hypnotic Pattern mesmerizes everyone who looks at it. The real-world version is attention design: loading animations, progress indicators, onboarding flows, and visual patterns that keep users oriented and engaged during a bounded experience. The line between helpful focus and addictive capture is the central design tension.

100 repo starsObserved in 1 repos
Design

major-image

In D&D, Major Image creates a multi-sensory illusion — visual, auditory, thermal, even olfactory — that persists and can be animated. It is convincing enough that creatures must actively investigate to see through it. The real-world version is the interactive prototype: the demo that makes stakeholders ask 'wait, is this real?' The answer is no, but the conviction is the point. Clickable Figma prototypes, scenario simulations, pitch decks with working demos, preview environments with synthetic data. Major Image is the spell that sells a future state before it is built.

100 repo starsObserved in 1 repos
Design

minor-illusion

Minor Illusion produces artifacts that are explicitly labeled as disposable and exist only to provoke reaction. If the artifact could be mistaken for finished work, you're casting the wrong spell.

100 repo starsObserved in 1 repos
Design

nano-banana-image-generator

Generate images using Google's Nano Banana (Gemini 2.5 Flash Image). Use when creating infographics, diagrams, thumbnails, social media graphics, or any AI-generated images. Costs $0.039/image.

100 repo starsObserved in 1 repos
Design

programmed-illusion

In D&D, Programmed Illusion creates an illusion that lies dormant until a specific trigger condition is met, then plays out its scene automatically. The real-world version is the conditional demo, automated preview, or triggered walkthrough: onboarding flows that appear when a user first visits, contextual tooltips that activate on hover, preview environments that spin up on pull request, automated scenario presentations that play when specific data conditions are detected. Programmed Illusion is the illusion that does not need a wizard present to cast it.

100 repo starsObserved in 1 repos
Design

seeming

Seeming is coordinated appearance change at scale: mass theming, batch rebranding, global copy tone shifts, and UI-wide presentation updates. The underlying structures stay the same. The spell is about coherent surface transformation, not structural reinvention.

100 repo starsObserved in 1 repos
Design

silent-image

In D&D, Silent Image creates a purely visual illusion — no sound, no smell, no substance. It looks real but falls apart if you interact with it. The real-world version is the static design comp: a high-fidelity visual mockup that shows exactly what something will look like but does nothing when you click it. Figma frames without prototyping links, screenshot mockups, rendered previews, static architecture diagrams. Silent Image is faster than Major Image because it skips interactivity. Use it when the only question is what does it look like.

100 repo starsObserved in 1 repos
Design

status-card

THE way to make a branded image card for a result, finding, leaderboard or quote. Runs a tested local Pillow renderer -> ready PNG. ALWAYS use this for cards; never hand-roll Pillow or HTML (a headless server has no browser).

100 repo starsObserved in 1 repos
Design

technical-diagram-skill

Create professional technical diagrams as standalone animated HTML files with SVG graphics, flowing effects, dark/light theme toggle, and export support. Use this skill when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, sequence diagrams, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify Mermaid into a polished technical diagram.

100 repo starsObserved in 1 repos
Design

xhs-images

小红书信息图系列生成器,支持多种样式选项。将内容拆分为1-10张卡通风格的信息图。当用户要求创建"小红书图片"、"XHS images"或"RedNote infographics"时使用。

100 repo starsObserved in 1 repos
Design