visual-spec
457Skill Claude CodeCodex
Analyzes raw requirements into visual specs and generates artifacts. Invoke when user runs /vspec:new for analysis or /vspec:verify for models and prototypes.
13,328 tagged Design and UX, measured the same way as everything else here.
Browse within: design-system 166agentic-ai 157agentic 152ai-tools 131skills 128ai-design 112byok 106agent 102desktop-app 93coding-agents 91ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87
Skill Claude CodeCodex
Analyzes raw requirements into visual specs and generates artifacts. Invoke when user runs /vspec:new for analysis or /vspec:verify for models and prototypes.
Skill Claude CodeCodex
Activate this skill for any UX, product design, or interaction design reasoning task. Use whenever the user asks for UX critique, design decisions, pattern recommendations, accessibility reviews, research methodology guidance, stakeholder communication strategy, AI/UX trade-off analysis, or dark pattern…
Skill Claude CodeCodex
Create, edit, export, and review draw.io diagrams. Use for native .drawio XML generation, PNG/SVG/PDF export, SVG overlap, border-overlap, label-intrusion, label-rect, short-terminal, text-contrast, text-emphasis, and text-overflow linting, layout adjustment, and AWS icon usage.
LovroPodobnik/refactoring-ui-skill
Skill Claude Code
Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.
Skill Claude CodeCodex
Turn any public URL into a production-grade 9-section design.md spec (colors, typography, components, layout, depth, motion, responsive, prompt guide) using the agent's own built-in tools — WebFetch, browser/screenshot, and file writes. Use when the user asks to "generate a design system from a URL", "extract brand…
Skill Claude CodeCodex
PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.
Skill Claude CodeCodex
Guidance for automating computer-aided design (CAD), software used to create technical drawings and 3D models. It covers connecting to AutoCAD and compatible CAD programs, creating files offline, and handling drawings, layers, dimensions, blocks, and models.
Skill Claude CodeCodex
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
Skill Claude CodeCodex
Frontend/design system skill for the svelteflare monorepo. Use this whenever the user wants to build or modify UI — pages, sections, components, layouts, forms, cards, tables, dialogs, dashboards, or landing pages. Also invoke for anything theme-related: light/dark mode, custom colors, design tokens, typography, or…
Skill Claude CodeCodex
Build modern Android apps with Material Design 3 and Jetpack Compose, including theming, navigation, adaptive layouts, and accessibility. Use for Android UI tasks.
Skill Claude CodeCodex
Brand identity and design system expert. Use when creating or enforcing brand consistency across UI, content, marketing materials, or code. Covers logo usage, typography, color systems, voice and tone, component design tokens, and brand governance. Activate when building new pages, writing copy, or reviewing designs…
Kappaemme-git/codex-design-audit-skill
Skill Codex
Evaluate website, web app, landing page, or frontend implementation quality with a structured design audit and scoring grid. Use when Codex is asked to review UI design, visual hierarchy, UX, responsiveness, accessibility, performance perception, copy clarity, frontend polish, or to produce a design/frontend…
yub369302-cyber/gathered-scenes-zine-skill
Skill Codex
Transform a user-supplied photo into a vertical 3:5 Gathered Scenes Zine poster that anchors truthful photography inside a spacious source-derived abstract illustration field, aggressively compresses dense foliage and other micro-detail into a few large quiet forms, integrates one high-chroma hue as compositional…
YuqingNicole/variant-design-skill
Skill Claude CodeCodex
AI-driven interactive design generation, style analysis, and UX evaluation with Impeccable design system. Context-aware output — auto-detects React projects (package.json with react dependency) and generates .tsx components; otherwise generates zero-dependency interactive HTML. Seven modes — (0) Design System: tokens…
Skill Codex
A guide for creating and editing fixed-page HTML layouts, InDesign presentations, architectural reports, and typeset documents. It also covers converting between HTML and InDesign files and filling existing InDesign templates.
Skill Claude CodeCodex
How to plan and design presentation decks — content architecture first, then a deliberate style system, then slide-by-slide craft. Use for EVERY deck request, before touching any slide tool.
markerikson/opencode-config-example
Skill Claude CodeCodex
Design patterns for data-dense dashboard UIs with dark themes. Use when building tables, charts, status panels, and data visualization components. Focuses on readability, information density, and consistent design systems.
verygoodplugins/streamdeck-mcp
Skill Claude CodeCodex
Design, theme, and author complete Stream Deck layouts for the user's hardware using the streamdeck-mcp tools. Use whenever the user wants a custom Stream Deck setup, asks for a themed deck (e.g. "hello-kitty Twitch deck", "retrowave music controls", "a dev deck for this repo"), wants buttons or dials configured for…
Skill Claude CodeCodex
Use when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.
braxtonROSE4/clone-any-website
Skill Claude CodeCodex
Reverse-engineer and pixel-perfect clone any live website, a single landing page or an entire site. Captures DOM, CSS design tokens, assets, fonts, and compiled-JS config data from the live page, reverse-engineers scroll animations and stateful interactions, rebuilds (raw-HTML mirror for static-export sites like…
vuralserhat86/antigravity-agentic-skills
Skill Claude CodeCodex
Guide for conducting comprehensive accessibility audits of code to identify WCAG compliance issues and barriers to inclusive design. This skill should be used when reviewing accessibility, ARIA implementation, keyboard navigation, or screen reader compatibility.
wuchubuzai2018/expert-skills-hub
Skill Claude CodeCodex
A design tool for creating the image materials used on WeChat red-envelope covers. It produces cover images, decorative attachments, speech-bubble attachments, and cover-story materials designed for WeChat’s submission rules.
Skill Codex
Design, build, compose, implement, review, and contribute polished product interfaces with Motion Lexicon components and motion primitives. Use this skill when a user asks for a complete React page, landing page, dashboard, settings screen, or product surface in the Motion Lexicon visual language; asks what motion…
Skill Claude CodeCodex
Read, verify, mutate, and round-trip HyperWeave living artifacts via the verb algebra instead of vision-parsing the SVG.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: