families / design
design
3d-asset-creation
A collection of skills for generating, texturing, and inspecting 3D models and materials using various AI agents and tools.
These skills differ by their specific focus on either model generation (e.g., high-poly, lego), material application (e.g., cloth, metal, paper), or scene composition and inspection (e.g., sky, leaves, orbit inspect).
- Generate a high-poly 3D model of a castle and apply a metal material to its towers.
- Create a 3D scene with falling leaves and a sky background, then inspect it using an orbit demo.
accessibility-audit-and-compliance
A set of skills for evaluating, planning, and remediating digital interfaces to meet WCAG standards and ensure inclusive user experiences.
These skills differ by their specific focus on either strategic planning, technical auditing, or specific visual/interaction remediation strategies within the broader accessibility domain.
- Conduct a full WCAG 2.1 AA audit of the checkout flow and list all critical barriers.
- Create a test plan for verifying keyboard navigation and screen reader compatibility on the new dashboard.
ai-design-integration
A set of skills for creating, auditing, and refining user interfaces that leverage or avoid AI-generated aesthetics and native AI capabilities.
The skills differ by their focus on either generating AI imagery, designing for AI-native interactions, or critically evaluating and removing generic AI-generated design patterns.
- Audit this landing page for common AI design tropes and suggest manual refinements.
- Design a chat interface that feels native to an LLM assistant rather than a generic web form.
gsap-motion-engineering
A specialized skill set for implementing, optimizing, and reviewing complex animations using the GSAP library and its ecosystem.
This cluster focuses specifically on the GSAP library and its associated plugins, frameworks, and performance metrics, distinguishing it from general animation principles, vocabulary, or other animation tools.
- Create a staggered timeline in React using GSAP to animate a product carousel with specific easing curves.
- Review this GSAP code for performance bottlenecks and suggest optimizations for the timeline rendering.
aesthetic-style-selection
Selecting and applying specific visual design aesthetics or artistic styles to creative projects.
These skills differ by the specific visual philosophy or artistic movement they enforce, ranging from raw industrial looks like brutalist to refined, curated approaches like museum-art or minimalist.
- Apply a brutalist design style to this landing page layout.
- Generate a minimalist logo concept using the soft aesthetic guidelines.
brand-identity-systems
A collection of skills for generating, extracting, and applying comprehensive brand identity assets including visual guidelines, logo systems, and launch media.
These skills differ by their specific focus on either generating new high-end visual identity boards, extracting existing brand elements, or applying specific organizational style guides to artifacts.
- Generate a premium brand-kit image board featuring a minimalist logo system and color palette for a new startup.
- Apply Anthropic's official brand colors and typography to a marketing slide deck to ensure visual consistency.
card-based-design-methods
A collection of design and analysis techniques that utilize physical or digital cards to organize information, facilitate user research, or structure creative thinking.
These skills differ by their specific application, ranging from analyzing user behavior through card sorting to using color-coded cards for brainstorming or general card creation.
- Analyze the results of a card sorting session to identify user mental models for navigation.
- Create a set of four-color cards to brainstorm and categorize features for a new mobile app.
color-design
A set of skills for creating, curating, and applying color schemes and treatments in visual design.
These skills differ by their specific focus on either defining systematic rules, selecting specific hues, or applying structural and tonal treatments to visual elements.
- Create a harmonious color palette for a new brand identity.
- Apply a duotone effect to a set of product photography.
ui-component-design
A set of skills for defining, specifying, and modeling the structure and behavior of user interface components.
These skills differ in their focus, ranging from high-level design and specification to detailed behavioral modeling via state machines.
- Create a detailed specification for a new modal dialog component including its states and transitions.
- Design a reusable web component for a data table with defined interaction states.
visual-content-creation
A set of skills for transforming text and data into various visual formats such as infographics, diagrams, and social media graphics.
These skills differ by their specific output format and purpose, ranging from data visualization (infographics) to structural explanation (logic diagrams) and platform-specific design (WeChat covers and layouts).
- Convert this long article about climate change into a step-by-step infographic.
- Create a logic diagram illustrating the user journey for our new app feature.
design-governance
A set of skills for managing the quality, consistency, and strategic alignment of design work through audits, reviews, and reporting.
These skills focus on evaluating, auditing, and governing existing design work rather than creating new visual assets or defining initial system components.
- Run a design debt audit on the current mobile app and generate a report.
- Create a design QA checklist for the upcoming release and schedule a review process.
diagram-creation
A set of tools for generating visual diagrams and flowcharts using various formats and platforms.
The skills differ by their specific output format or target platform, such as Excalidraw, Draw.io, or generic diagram generation.
- Create an Excalidraw diagram showing the user authentication flow.
- Generate a Draw.io XML file for a system architecture diagram.
editorial-design
A collection of skills for creating and managing visual and structural elements within editorial content, including portfolios, illustrations, and technical layouts.
These skills differ by their specific focus on distinct components of editorial production, such as structural chapters, visual illustrations, or technical implementation, rather than general design principles.
- Design a multi-chapter portfolio layout for a photography magazine.
- Create a set of custom illustrations to accompany a long-form article.
frontend-design
A collection of skills for creating high-quality, accessible, and aesthetically distinct user interfaces and web components.
These skills differ in their specific focus on aesthetic direction (taste/anti-slop), technical implementation standards (accessibility/responsiveness), or specific design methodologies and frameworks.
- Build a responsive landing page with a dark theme and strict WCAG compliance.
- Design a distinctive web component that avoids generic 'slop' aesthetics by applying curated art direction principles.
article-visual-creation
A set of skills for generating custom illustrations, cover images, and visual assets specifically for articles and editorial content.
These skills focus on creating static visual assets like illustrations and covers for written content, distinct from general UI component styling or generative code art.
- Create a hand-drawn 16:9 illustration for my blog post about quantum physics using the Grav character.
- Generate a professional cover image for a news article about the latest tech trends.
gestalt-principles
A set of perceptual rules that explain how humans group visual elements into coherent wholes based on spatial and visual relationships.
These skills differ by the specific visual cue—such as distance, shape, direction, or enclosure—that drives the perceptual grouping of elements.
- Group these scattered icons into logical clusters using proximity and similarity.
- Adjust the layout so the background elements recede and the main subject stands out using figure-ground principles.
html-visual-creation
A set of skills for generating various static HTML-based visual artifacts, including presentations, diagrams, prototypes, and wireframes.
These skills differ by the specific type of visual output they produce, ranging from animated presentations and diagrams to low-fidelity wireframes and high-fidelity prototypes.
- Create an interactive HTML prototype for a new mobile app dashboard.
- Generate a static HTML wireframe for a landing page based on this text description.
icon-creation-and-management
A suite of tools for generating, finding, and organizing icon assets and systems for design projects.
These skills differ by their specific function in the icon workflow, ranging from generating new icons and sets to finding existing ones in libraries or managing system-wide consistency.
- Generate a consistent set of 20 line icons for a mobile app dashboard.
- Find and export specific icons from the Iconsax library that match my brand style.
ai-image-generation
A collection of skills for creating, editing, and analyzing visual content using various AI models and local tools.
These skills differ by their underlying model providers (e.g., GPT, Baoyu, Fal), specific use cases (generation vs. analysis vs. editing), and platform integrations (e.g., XHS, local, React Native).
- Generate a photorealistic image of a cyberpunk city using the best available model.
- Analyze the composition and color palette of this uploaded sketch.
visual-layout-structuring
A set of skills for organizing visual elements into structured, aesthetically pleasing arrangements using grids, masonry, and layered compositions.
These skills differ in their specific structural approach, ranging from flexible masonry and rigid grids to complex layered and editorial compositions.
- Create a responsive masonry grid for a photo gallery that maintains aspect ratios.
- Repair a broken geometric layout by realigning elements to a strict 12-column grid.
maya-3d-production
A comprehensive suite of skills for executing the full 3D asset creation and animation workflow within Autodesk Maya.
These skills differ by their specific stage in the 3D production pipeline, ranging from initial modeling and topology to technical rigging, pipeline automation, and final visual look development.
- Create a high-poly organic model, retopologize it for animation, and UV unwrap the mesh.
- Write a Python script to automate the rigging setup and apply a specific lookdev shader to a character.
motion-design
A collection of skills for creating, animating, and structuring visual motion effects across web interfaces, editorial layouts, and specific stylistic treatments.
These skills differ by their specific application context, ranging from general UI interaction patterns and system-level motion architecture to niche stylistic effects like fisheye distortion or text typing simulations.
- Create a smooth scroll-triggered animation for a hero section using HTML and CSS.
- Design a dynamic editorial collage where images move and overlap in a rhythmic sequence.
product-visual-creation
A set of skills for generating, planning, and executing visual assets and design concepts for physical products.
These skills differ by their specific focus on either generating digital imagery, planning physical photography sessions, or conducting structured design processes for product development.
- Generate a set of lifestyle images for a new ceramic mug to use on our website.
- Plan a design sprint to finalize the packaging layout for our upcoming skincare line.
typography-systems
A collection of skills for establishing and refining typographic hierarchies, scales, and styles within a design context.
These skills differ by focusing on specific aspects of typography, such as line length optimization, scale generation, font selection, stylistic application, or overall hierarchy prioritization.
- Create a modular type scale for a new marketing website.
- Select a font pairing that balances readability with a brutalist aesthetic.
ui-design-and-review
A comprehensive suite for creating, prototyping, and auditing user interfaces based on specific design philosophies, platform guidelines, and visual standards.
These skills differ by their specific focus on either generative prototyping, adherence to specific platform or personal design philosophies, or retroactive code auditing.
- Generate three distinct visual prototypes for a new dashboard header and let me pick the best one.
- Audit my existing React component library for accessibility issues and design system compliance.
usability-evaluation
A set of methods and principles for assessing the ease of use and user experience of digital products.
These skills differ by focusing on specific evaluation techniques (like heuristic evaluation or click tests) versus foundational cognitive laws (Jakob's and Tesler's) or general planning frameworks.
- Create a detailed test plan for evaluating the checkout process of an e-commerce site.
- Apply heuristic evaluation to identify usability issues in a new mobile app interface.
user-experience-design
A collection of skills focused on designing, mapping, and optimizing the user's interaction and emotional journey through a product.
These skills differ by focusing on specific psychological principles, visual mapping artifacts, or structural flow optimization within the user experience lifecycle.
- Create a user journey map to identify pain points in the checkout process.
- Apply the peak-end rule to redesign the final step of the onboarding flow for a better lasting impression.
ux-strategy
A set of skills for defining, validating, and structuring user experience strategies, from high-level vision to detailed interaction design.
These skills differ by their focus on strategic definition (vision, briefs, principles), structural planning (IA, blueprints, maps), or tactical execution and validation (audits, writing, research, grilling).
- Create a service blueprint and information architecture for a new mobile banking app.
- Conduct a UX audit of the current checkout flow and draft a design brief for improvements.
visual-critique
A set of skills for analyzing and evaluating visual design elements, including hierarchy, color, typography, and brand consistency.
These skills focus specifically on the critical analysis and evaluation of existing visual designs rather than the creation, planning, or explanation of new ones.
- Critique the color palette and visual hierarchy of this landing page.
- Evaluate the brand consistency and information density of the provided dashboard screenshot.
web-visual-design
A collection of skills for creating and enhancing the visual aesthetics, layout, and motion of web interfaces.
These skills focus specifically on the visual presentation, layout structure, and motion design of web pages rather than backend logic or functional programming.
- Create a modern landing page with a blue glassmorphism layout and subtle scroll animations.
- Add a WebGL background grid and ambient particle effects to the hero section of my portfolio.