Design skills

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

higgsfield-motion-design

End-to-end motion-design / animated-ad creation flow on Higgsfield via the MCP connector. Use when the user wants to create motion design, animate a logo, make a video from an image, build an animated ad or brand promo, turn a product into motion, or says 'make a motion', 'motion design', 'animate this', 'make a video from my logo', 'animated brand', 'motion graphics', 'brand motion', 'kinetic graphics', 'promo video', or 'ad video'. Drives a storyboard-first pipeline: brief → storyboard sheet (GPT Image 2) → video (Seedance 2.0) — an AI-generated pixel video clip. Distinct from higgsfield-motion (the named camera/motion preset library) and from higgsfield-vibe-motion (deterministic Remotion code with crisp text); use vibe-motion instead when the text/logo must stay perfectly crisp, editable, and deployable as code.

206 repo starsObserved in 2 repos
Design
GitHub

higgsfield-vibe-motion

Use when the user asks about Vibe Motion, motion graphics, kinetic typography, animated text, brand animations, logo animations, infographic animation, presentation animation, data-driven video, or prompt-to-motion-graphic workflows. Vibe Motion is fundamentally different from video generation — it creates deterministic code-based motion graphics, not AI-predicted pixel sequences. Use this when the text/logo must stay perfectly crisp and editable (code). For a cinematic/kinetic AI-generated video ad built from a storyboard (pixel render, native audio), use higgsfield-motion-design instead.

206 repo starsObserved in 2 repos
Design
GitHub

html-draft

Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. Generates one HTML file using Tailwind v4 (browser CDN) for layout and D3 v7 (CDN) for SVG diagrams. User-invoked only — do NOT auto-trigger. Triggers on "/html-draft", "сделай blueprint", "технический чертёж", "архитектурная схема", "инженерная схема", "blueprint diagram", "engineering blueprint", "technical spec sheet", "architecture diagram", "system flow diagram".

206 repo starsObserved in 2 repos
Design
GitHub

parallel-design-variants

Use when you want several genuinely different design directions to choose from instead of one design you will iterate on — a page or UI redesign, a hero, a landing, a thumbnail layout — or a live/stream design bake-off where an audience votes. Triggers on "дай варианты дизайна", "несколько вариантов на выбор", "редизайн", "design options", "design bake-off", "/parallel-design-variants".

206 repo starsObserved in 2 repos
Design
GitHub

a2ui-rendering

Use when an agent renders rich UI back to a client surface (cards, dashboards, forms, modals) using the A2UI v0.8.0 declarative protocol. Required whenever the response should display structured components rather than plain text, or whenever the validate_and_emit_a2ui tool is in scope.

204 repo starsObserved in 1 repos
Design
GitHub

gds-agent-game-designer

Game designer for creative vision, GDD creation, and narrative design. Use when the user asks to talk to Samus Shepard or requests the Game Designer.

204 repo starsObserved in 1 repos
Design
GitHub

gds-game-architecture

Design scale-adaptive game architecture with engine systems and networking. Use when the user says "game architecture" or "design architecture"

204 repo starsObserved in 1 repos
Design
GitHub

ai-ui-generation

AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.

203 repo starsObserved in 1 repos
Design
GitHub

animation-motion-design

Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.

203 repo starsObserved in 1 repos
Design
GitHub

design-context-extract

Extract design DNA from existing app screenshots, live URLs, or screen recordings using Google Stitch. Produces color palettes, typography specs, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user provides, uploads, links, or points to a screenshot, URL, or video and asks to extract the design, analyze the animations or scroll behavior, audit an existing design, create a design system from a live app, or ensure new pages match an established visual identity.

203 repo starsObserved in 1 repos
Design
GitHub