NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
frontend-designer skill A skill that guides your agent through accessible, responsive component work: design tokens, modern CSS, patterns for React, Vue and Svelte.
CX Codex +1
335installs
web-design-expert skill Builds web layouts, visual brand identity, and OKLCH color palettes. Works when structuring page hierarchy and responsive designs before coding.
CX Codex +1
439installs
tailwind-v4 skill A skill that tells your coding agent how to set up Tailwind CSS v4: theme in CSS, design tokens, OKLCH colors and dark mode.
CX Codex +1
812installs
color-theory-palette-harmony-expert skill A skill for building color palettes and photo sequences: perceptual LAB and OKLCH spaces, earth-mover distance, warm and cool alternation.
CX Codex +1
430installs
figma-code-connect
official skill Creates and updates Code Connect templates that tie Figma components to code snippets. Use it for design-to-code mapping.
CX Codex GP ChatGPT
28installs
motion-designer skill A skill that turns your coding agent into a motion designer: timing specs, easing curves and handoff notes for UI animation.
CX Codex +1
1,600installs
app-store-screens skill Creates a set of 5 to 6 App Store screenshots at 1290×2796 resolution from brand specs and app screens. Useful when preparing graphic assets for App Store Connect.
CX Codex +1
1,700installs
build-a-brand skill Builds a practical brand identity or a 14-16-page PDF guidelines deck from an idea, website URL, reference brands, or product photos.
CX Codex +1
1,700installs
site-specification skill Turns brief website ideas or brand images into a JSON design specification with layout requirements, target audience, and Google Fonts.
CX Codex +1
2,100installs
ui-design skill Gives the agent a checklist for interfaces: accessibility, responsive layout, performance. Useful when it writes or reviews frontend code.
CX Codex +1
981installs
shadcn skill A skill with 58 shadcn/ui rules that tells your agent how to add components, build forms and keep accessibility intact.
CX Codex +1
724installs
chrome-extension-ui skill A rule set for Chrome extension interfaces: when to use a popup versus a side panel, how to keep navigation keyboard-accessible, how to handle loading and errors.
CX Codex +1
719installs
image-optimization skill A skill that walks your agent through compressing images and picking modern formats. Useful before a deploy, when pages drag on mobile networks.
CX Codex +1
656installs
diagram-to-image skill Converts Mermaid charts and Markdown tables into PNG images. Useful for X/Twitter posts and docs on platforms without native diagram support.
CX Codex +1
508installs
brand-designer skill Walks you through building a brand identity: logo concepts, color palette, typography and guidelines. Useful when the visual system has to live in your codebase.
CX Codex +1
1,300installs
ux-audit-rethink skill Runs a full UX audit of a product using the IxDF framework and proposes redesign options. Useful before a major interface overhaul.
CX Codex +1
843installs
typography-expert skill Curates typeface pairings, fluid clamp scales, and variable font axes while retiring overused defaults like Inter, Roboto, and Montserrat.
CX Codex +1
413installs
xiaohongshu-images skill Turns Markdown, HTML, or text into a styled page and a sequence of 3:4 images for Xiaohongshu. Use it to prepare article content for posting.
CX Codex +1
2,000installs
layout-paradigms-and-consistency skill Selects screen paradigms like feeds, boards, tables, and split views to maintain layout consistency across app pages and marketing funnels.
CX Codex +1
734installs
information-architecture skill Structures content, sitemaps, and taxonomies for web apps and documentation hubs. It guides your AI agent through a four-stage process from card sorting to tree testing.
CX Codex +1
634installs
poster-design-generation skill This skill turns a text brief into poster artwork through each::sense: movie key art, concert flyers, product and travel visuals. Useful when you need a layout with room for type.
CX Codex +1
2,100installs
canva-branded-presentation
official skill Creates on-brand Canva presentation decks from briefs, raw outlines, or design links. Useful when you need slides formatted to your brand kit.
CX Codex GP ChatGPT
26installs
data-visualization
official skill This skill routes web visualization tasks, from chart selection to maps, software diagrams, and exports. Use it when an agent needs to plan or review a data visualization.
CX Codex GP ChatGPT
26installs
color-accessibility skill Guides accessible palette design under WCAG AA and AAA standards, including support for color blindness. Helps style interfaces, charts, and form states.
CX Codex +1
619installs
web-design-guidelines skill This skill checks web interfaces against accessibility and UX rules. Use it to audit UI code, forms, or keyboard navigation.
CX Codex +1
896installs
sync-figma-token skill This skill diffs design tokens in code against Figma variables, reports drift, and applies changes only after you approve them.
CX Codex +1
676installs
contour-to-mesh skill Builds a Blender mesh straight from a contour or mask instead of approximate primitives. Useful when the silhouette has to match a front template exactly.
CX Codex +1
788installs
user-research-analysis skill A skill that turns interview transcripts and survey answers into themes, pain points and quotes you can act on.
CX Codex +1
612installs
agency-agents-ai-specialists skill Swap in a specialist persona — frontend, backend, reviewer, UX — and let it carry the task with its own workflow.
CX Codex +1
2,100installs
gsap skill A skill that teaches the agent GSAP animations: HUD panel entrances, status indicator transitions, scroll effects. Useful when the UI is built on Vue.
CX Codex +1
1,300installs
landing-page-design skill A skill that turns your agent into a landing page specialist, with reference files for building, diagnosing and validating pages.
CX Codex +1
447installs
design-systems skill Walks your agent through design tokens, a component library and accessibility rules in one project.
CX Codex +1
903installs
canva-translate-design
official skill Translates every text element in a Canva design and creates a separate copy. Use it to localize layouts without editing each text box by hand.
CX Codex GP ChatGPT
25installs
lower-thirds skill Builds an animated name-and-role caption in the bottom band of the frame: it enters, holds long enough to read, and exits. Handy for interviews, podcasts and talking-head clips.
CX Codex +1
1,700installs
21st-ui-build skill A skill for implementing pages and components in an existing web project: it reads your design context and tokens first, then searches 21st.
CX Codex +1
1,400installs
modal-and-overlay-patterns skill Rules for selecting and building overlays, from tooltips and drawers to blocking modals, using a unified shell and strict ARIA requirements.
CX Codex +1
686installs
operational-expert-tool-ui skill Sets interface rules for dispatch, warehouse and logistics tools: data density over breathing room, status visible at a glance.
CX Codex +1
689installs
prototype skill Renders a proposed page redesign into one self-contained static HTML file you can open in a browser and iterate on from chat.
CX Codex +1
524installs
present skill Builds decks for design reviews, research readouts and pitches: an interview and an approved story outline first, then the slides.
CX Codex +1
398installs
micro-interactions skill A skill that tells your coding agent how to animate buttons, toggles, checkboxes, loading indicators and notification badges.
CX Codex +1
1,400installs
1,401–1,440 of 2,133
