Home · 首页/Rankings · 排行榜/Design & Visual

Category ranking· 品类排行

The best AI skills for design & visual做设计与视觉最好用的

UI/UX review, design systems, brand visuals and image generation.UI/UX 评审、设计系统、品牌视觉、图像生成：让产品和素材更好看。

Task shortcuts按用途继续找

Open the matching picks in the full catalog.这些入口会带你去完整目录里看对应用途。

Design systems设计系统43 UI/UX reviewUI/UX 评审39 Image generation图像生成38

Editor rank · 编辑排名 Stars · 星标数 Updated · 最近更新

All Claude Code Codex Cursor Cline OpenClaw Hermes Anthropic Skills MCP Generic

All Low Medium

Editor's picks编辑精选榜单

2026-06-09 last re-ranked · 上次重排

#1Gold · 金

visual-explainer

★ Editor's Choice· 编辑首选

by nicobailon·updated 1mo ago

Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the

“

Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.

Claude CodeCodexMedium risk · 中风险$

—

rating · 评分

8.0k

stars · 星标

View看详情 →

#2Silver · 银

core-components

★ Runner-up· 次选

by ChrisWiles·updated 1mo ago

Core component library and design system patterns. Use when building UI, using design tokens, or working with the compon

“

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

Claude CodeCodexLow risk · 低风险$

—

rating · 评分

5.9k

stars · 星标

View看详情 →

#3Bronze · 铜

accessibility

★ Pair with #1· 推荐配套

by midudev·updated 1mo ago

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audi

“

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

Claude CodeCodexMedium risk · 中风险$

—

rating · 评分

5.3k

stars · 星标

View看详情 →

architecture-diagram

by Cocoon-AI·updated 1mo ago

Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, i

“

Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.

Claude CodeCodexMedium risk · 中风险$

—

rating · 评分

4.8k

stars · 星标

View看详情 →

ljg-card

by lijigang·updated 1mo ago

Content caster (铸). Transforms content into PNG visuals. Seven molds: -l (default) long reading card, -i infograph, -m m

“

Content caster (铸). Transforms content into PNG visuals. Seven molds: -l (default) long reading card, -i infograph, -m multi-card reading cards (1080x1440), -v editorial sketchnote (problem→failure→pivot→insight→naming, magazine + archive layout), -c comic (manga-style B&W), -w whiteboard (marker-style board layout), -b big-fonts attachment card (1080x1440, weathered 碑刻 style for 小红书). Output to /Downloads/. Use when user says '铸', 'cast', '做成图', '做成卡片', '做成信息图', '做成海报', '视觉笔记', 'sketchnote', '杂志', 'editorial', '漫画', 'comic', 'manga', '白板', 'whiteboard', '大字', '附件图', 'big fonts', '小红书卡片'. Replaces ljg-cards and ljg-infograph.

Claude CodeCodexMedium risk · 中风险$

—

rating · 评分

4.0k

stars · 星标

View看详情 →

gpt-image-2

by ConardLi·updated 1mo ago

面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好

“

面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。

Claude CodeCodexMedium risk · 中风险$

—

rating · 评分

3.7k

stars · 星标

View看详情 →

excalidraw-diagram

by coleam00·updated 1mo ago

Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, archite

“

Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.

Claude CodeCodexMedium risk · 中风险$

—

rating · 评分

3.0k

stars · 星标

View看详情 →

aesthetic

by mrgoonie·updated 1mo ago

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs

“

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

Claude CodeCodexLow risk · 低风险$

—

rating · 评分

2.1k

stars · 星标

View看详情 →

intelligent-prompt-generator

by huangserva·updated 1mo ago

一个 Claude Code Skills 项目，通过12个专业领域Skills，基于Universal Elements Library（1246元素）和社区提示词语料库（675条 source prompts）生成高质量AI图像提示词。

“

Claude CodeCodexLow risk · 低风险$

—

rating · 评分

1.3k

stars · 星标

View看详情 →

Why we didn't pick these为什么没选这些

Also common, but didn't make the picks同样常见，但未入精选

image-generation
Workflows that require stronger human review than this catalog entry documents.
需要比当前目录条目更严格人工复核的工作流。
web-design-guidelines
Workflows that require stronger human review than this catalog entry documents.
需要比当前目录条目更严格人工复核的工作流。
image
Workflows that require stronger human review than this catalog entry documents.
需要比当前目录条目更严格人工复核的工作流。

Didn't find what you need?没看到合适的 skill？

Tell us your pain points and we'll go look.把你的痛点告诉我们，我们会去找。

Compare top 3对比 Top 3 →Request a skill提交需求 →