Design Systems Skill
Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.
Browse reusable instructions for your AI tools. Copy and customize a prompt, or download a skill for a supported agent.

Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.
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 existing artists' work to avoid copyright violations.
Collection of 2026 Frontend Design Formulas (Liquid Glass, Bento, Neo-Brutalism, Eco-Dark).
Automate Zeplin tasks via Rube MCP (Composio). Always search tools first for current schemas.
Modifies an existing footwear outsole description to accommodate a higher heel design while preserving the original material, tread, and aesthetic concepts.
Generates a responsive HTML skeleton with a mobile-friendly menu using HTML, CSS, and JavaScript.
Develops and debugs OSL shaders for Cinema 4D Redshift, ensuring syntax compatibility, frame-based animation workflows, correct UV geometry mapping, and proper UI parameter definitions.
Distributes color palettes across 15 specific anime character categories, assigning 2-3 colors per category with evocative descriptions and hex codes.
Generate JavaScript and SVG code for geometric shapes (2D and 3D) using dynamic DOM creation and single continuous path lines for wireframes.
Generates detailed, realistic specifications for footwear by breaking down the design into specific components (Upper, Lining, Outsole, Insole, Strap, Buckle) and defining their color, material, texture, and wear characteristics.
Generates detailed technical descriptions and cost breakdowns for wearable costume concepts based on user-provided themes, budgets, and notes, while filtering out unsafe or licensed content.
Generate or categorize clothing items for a cold/winter environment using a specific 5-layer system (Underwear, Base, Middle, Insulation, Outer) and a numbered list format, while adhering to the character's aesthetic.
Generates detailed wearable costume design concepts with technical descriptions and cost breakdowns based on user input, while strictly adhering to safety and licensing constraints.
Generates a self-contained HTML/JavaScript application that interprets a custom string-based drawing language to render graphics on an HTML5 Canvas, adhering to specific parsing constraints to ensure compatibility.
Generates CSS keyframe animations where an object moves in straight lines, stops at turning points to rotate in place, and then continues moving.
Design hypothetical safety signs and pictograms in the style of ISO 7010 for various contexts (e.g., amusement rides, attractions, venues), including boarding sequences, warnings, and prohibitions.
Transforms generic or vague combat unit names into specific, high-power designations with unique abilities matching their archetype.
Generates a Cinema 4D Redshift OSL shader for a multi-color pulsing effect, strictly adhering to Redshift metadata syntax and variable scope constraints.
Implements a 3D perspective tilt effect on React cards based on mouse position relative to the element, combined with a cycling RGB gradient border glow that activates only on hover.
This skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, or implement polished frontend interfaces with a clear design system.
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, an...
Implement a React product card component that features a mouse-relative 3D tilt effect and a hover-triggered RGB glowing border using CSS pseudo-elements.
Generates country and city descriptions for a game series involving portals, monsters, and hunters, ensuring new locations are selected based on an exclusion list and maintaining a consistent narrative style.
Generates a complete, self-contained HTML file with JavaScript to visualize subtractive color mixing (simulating paint) using three overlapping circles (Red, Yellow, Blue). The visualization ensures overlaps display the correct secondary colors (Orange, Green, Purple).
Try another platform, a broader search, or fewer filters.
Explore all resourcesResource formats: Prompts are ready to copy into a conversation. Skills install into the compatible agent shown on their page.
How it worksInclude the instructions, intended platforms, author, and license. Submissions are reviewed before publication.