Design Claude Skills
2 394 design skills from 450 authors. They decide how things look — layout, type and interface behaviour. Half of them fit into 1 928 tokens or less — that is what one costs your context window when the agent loads it. 316 ship runnable scripts rather than instructions alone. 2 of them cannot work without an MCP server, most often rube. We also found 422 copies of these same skills sitting in other people's repositories — counted once here, not 422 times.
2 394 unique 450 authors 8 updated this month 195 from vendors
Converts UX/design intent into testable design specifications that feed requirements. Use when defining user flows, accessibility, or design constraints.
>- Test for WCAG 2.2 AA compliance with axe-core + Playwright, keyboard navigation audits, screen reader testing, ARIA pattern validation, and legal compliance mapping (ADA, EAA, Section 508). Automated tools catch 30-40% of issues — this skill covers automated and "keyboard navigation," "ARIA," "ADA compliance." regression — use visual-testing.
Launch and operate a local Codex drawing workspace: a lightweight vector board where the user and Codex share editable scene state through a browser UI, workspace-backed JSON, local API mutations, and SVG export. Use when the user wants to draw, edit, inspect, generate, refine, or export simple vector artifacts such as logos, icons, diagrams, badges, layout sketches, SVG assets, or visual scratchpad scenes.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
>- The moi workspace — the web UI the user chats from, extended with agent-authored applets (widgets, views) plus theme & config. Read this FIRST in two cases. (a) A message carries a hidden nothing else says so. (b) The user uses moi vocab — workspace, applet, widget, view, scratchpad, dashboard, or a `moi` command — or asks to build, edit, customize, or theme the workspace UI or its layout.
Use this agent when you need to verify that a UI implementation matches its Figma design specifications. This agent should be called after code has been written to implement a design, particularly after HTML/CSS/React components have been created or modified. The agent will visually compare the live implementation against the Figma design and provide detailed feedback on discrepancies.\\n\\nExamples:\\n- <example>\\n Context: The user has just implemented a new component based on a Figma design.\\n user: \"I've finished implementing the hero section based on the Figma design\"\\n assistant: \"I'll review how well your implementation matches the Figma design.\"\\n <commentary>\\n Since UI implementation has been completed, use the design-implementation-reviewer agent to compare the live version with Figma.\\n </commentary>\\n </example>\\n- <example>\\n Context: After the general code agent has implemented design changes.\\n user: \"Update the button styles to match the new design system\"\\n assistant: \"I've updated the butto...
Use this agent PROACTIVELY when design work isn't coming together on the first attempt. If you've made 1-2 design changes and the result still feels off, suggest using this agent with 5x or 10x iterations for deeper refinement. This agent takes screenshots, analyzes what's not working, implements improvements, and repeats N times to systematically fix design issues. Perfect when colors feel wrong, layouts aren't balanced, or the overall aesthetic needs work that single changes can't achieve. <example>Context: User asks to change button color but result still looks off. user: \"Change the button to blue\" assistant: [makes change, takes screenshot] \"The button is now blue, but I notice the overall color balance still feels off. Would you like me to use the design-iterator agent with 5 iterations to systematically improve the color harmony and visual balance?\" <commentary>PROACTIVE USE: After a simple change doesn't fully resolve the design issue, suggest the design-iterator to do deeper work.</commentary></ex...
Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\\n\\n<example>\\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\\nuser: \\\"I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678\\\"\\nassistant: \\\"I'll use the figma-design-sync agent to compare your implementation with the Figma design and fix any differences.\\\"\\n<uses Task tool to launch figma-design-sync agent with the Figma URL and local URL>\\n</example>\\n\\n<example>\\nContext: User is working on responsive design and wants to verify mobile breakpoint matches design.\\nuser: \\\"The mobile view doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34\\\"\\nassistant: \\\"Let me use the figma-design-sy...
This skill should be used when creating distinctive, production-grade frontend interfaces with high design quality. It applies when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when the user asks to build CLI tools, TUI applications, or terminal-based interfaces. Generates creative, polished code that avoids generic terminal aesthetics.
Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.
Decode garbled Russian/English wrong-keyboard-layout text (ЙЦУКЕН/QWERTY).
> Inspect, build, or extend Figma design systems — and optionally sync them to component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync design tokens from code', 'find detached instances', 'check WCAG compliance', 'export tokens to code', 'generate CLAUDE.md for design system', or wants to push a design system from code to Figma or back. The skill auto-detects the mode from request, or asks if unclear. After inspect, ALWAYS pauses and waits for explicit user decision before any build action. Phase 6 (sync to code) is OFF by default — only triggers on explicit user request. Does NOT implement Figma designs as code — use figma-implement-design for that. Does NOT create individual screens — use figma-generate-design for that.
Comprehensive SwiftUI accessibility audit against Apple HIG. Checks VoiceOver labels, Reduce Motion, Dynamic Type, color contrast, and accessible controls. Use before App Store submission or when adding new UI.
Audit for performance and battery - layout thrash, heavy animations, timers, background tasks. Identifies hotspots affecting smoothness and power consumption. Use before releases or when users report lag/battery drain.
HIG-first visual design audit for SwiftUI. Covers color systems, contrast, typography, spacing, icons, and accessibility visuals.
Conduct accessibility audits against WCAG 2.2 guidelines. Evaluate pages, components, and flows for conformance at A, AA, and AAA levels. Identify issues, assess severity, provide code fixes, and generate audit reports. Covers automated testing, manual testing, keyboard navigation, screen reader compatibility, color contrast, and semantic HTML.
Evaluate UI designs against usability heuristics, UX laws, interaction patterns, interaction design principles, information architecture, and content quality. Conduct heuristic evaluations, structured design critiques, pattern-based reviews, posture analysis, excise audits, IA evaluations, and UX writing reviews. Provides specific, actionable feedback grounded in established principles rather than subjective opinion.
Comprehensive design elevation system that automatically transforms functional visual outputs into polished, professional designs. Use when creating ANY visual output including presentations (pptx), spreadsheets (xlsx), dashboards, reports, HTML artifacts, PDFs, web pages, or data visualizations. Applies systematic design thinking grounded in Tailwind CSS as the canonical design token system. Structures decisions through functional patterns (what users interact with) and perceptual patterns (how the design feels), following Alla Kholmatova's design systems framework. Triggers on ALL requests for visual content creation, ensuring outputs look hand-crafted rather than template-based.
Build, document, and maintain design systems with design tokens, component specifications, pattern libraries, naming conventions, and governance processes. Conduct system audits, define component hierarchies, and establish shared design languages.
Jinja2 templates + CSS + data contract for TweakIdea evaluation reports
Standards for using DevExpress (DEXT) components in Delphi VCL applications
Standards for using DevExpress (DEXT) components in Delphi VCL applications
当 Bensz 系列 skills 在真实用户环境中因 skill 设计缺陷而出现 bug，或用户明确说“我想 report bensz skills bugs”“帮我公开上报 bensz skills 的 bug”时使用。该 skill 负责把 bug 规范化记录到 `~/.bensz-skills/bugs/`，并在用户明确要求公开报告时通过本地 `gh` 轻量上传到 `huangwb8/bensz-bugs`，全程严禁修改用户本地 Claude Code/Codex 中已安装 skills 的源代码。
Phase-1 (S7 of the comic-author suite) — turn ONE locked panel_spec into a deterministic content-SVG blueprint that becomes the bake condition (reference #1 of the agent mcp__codex__codex sidecar bake), by WRITING A PYTHON GENERATOR (never raw SVG in chat — LLMs botch coordinates). The HEADLINE comic-pivot rule: the image bakes NO bubbles at all — draw only characters + scene + leave negative-space SAFE ZONES; HTML/CSS owns the entire bubble. Every panel gets a content_svg (a figure OR a layout blueprint); a baked figure-panel must declare expected_literals verbatim. Single-source collision check is mandatory. Gated by comic-cross-layer-gate --gate blueprint. Use when the storyboard is locked and you need each panel's deterministic generation condition; do NOT use to bake the panel (that is comic-director) or to write the verdict-stamp/curve assets (that is comic-asset-ref-generator).
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 for brand compliance.
| 已完成 /pm-brainstorm 后，需要系统化收集需求、验证产品想法真伪、分析用户痛点 用户明确要求"需求调研""需求验证""验证痛点""分析用户痛点" 用户明确选择跳过 brainstorm，直接进入需求调研 用户用自然语言说"我想做一个XX""帮我规划XX产品""帮我设计一下需求" → 这些必须先路由到 start-super-pm → pm-brainstorm 用户显式输入 /pm-demand 时可直接进入，但必须通过前置门禁
> Synthesizes research notes and documents to surface cross-cutting themes, unexpected connections, and high-level insights not visible in individual pieces. Use when the user asks for an overview, thematic analysis, synthesis across notes, or to find patterns in their research collection.
>- Create original pixel-art "Clawd" crab emotes as pure SVG + CSS keyframe animations (no frame-by-frame GIFs, no raster sprites), and optionally export them to looping GIFs. Each emote is a tiny pixel crab doing an activity — holding a prop, wearing a hat, reacting — built from <rect>/<polygon>/<circle> and animated with @keyframes. Use this skill whenever the user wants to make, add, fix, or extend Clawd / pixel-crab / desk-pet emotes, mascot animations, "表情/图鉴" cards of an animated character, festival or daily-life crab stickers, or asks to turn such SVG animations into GIFs — even if they don't say the word "SVG". Also use it when fixing visual bugs in these emotes ("帽子悬空/hat floating", "脚断开/feet detached", a prop that looks disconnected from the hand), since the fixes follow specific structural rules documented here.
无障碍体验诊断助手适合内容创作者、市场营销、运营、内容媒体在用户提出“这个页面好用吗”这类问题，需要快速拆解目标、判断重点并形成可执行结果时使用，帮助基于输入材料生成问题归因、服务改进建议、SOP 或 FAQ 清单。
设计 Brief 助手适合内容创作者、市场营销、运营、内容媒体在用户提出“设计需求说清了吗”这类问题，需要快速拆解目标、判断重点并形成可执行结果时使用，帮助基于输入材料生成视觉诊断、设计改进建议、检查清单。
视觉质量诊断助手适合设计、运营、市场营销、内容创作者在用户提出“这张图够发布吗”这类问题，需要快速拆解目标、判断重点并形成可执行结果时使用，帮助基于输入材料生成摘要、诊断结论、行动建议和可复用交付物。
视觉质量诊断助手适合产品、运营、technical、software在用户提出“这张图够发布吗”这类问题，需要快速拆解目标、判断重点并形成可执行结果时使用，帮助基于输入材料生成摘要、诊断结论、行动建议和可复用交付物。
视觉质量诊断助手适合产品、运营、technical、software在用户提出“这张图够发布吗”这类问题，需要快速拆解目标、判断重点并形成可执行结果时使用，帮助基于输入材料生成摘要、诊断结论、行动建议和可复用交付物。
Style guides and implementation rules for frontend design. Works with design-discovery agent which handles context gathering and VS-based style recommendations. Contains detailed style guides, anti-patterns, and implementation checklists.
>- Generate a hand-drawn (sketch-style) architecture or flow diagram as a committable image (SVG + PNG). Use when the user wants a sketch-aesthetic diagram for a README, docs, or hackathon/Devpost submission that still has source and renders it with mermaid-cli — works on any viewer and on Devpost. '손그림 아키텍처', '스케치 도식', 'handDrawn', 'Devpost diagram', '손그림으로 그려줘', '아키텍처 손그림', 'sketch-style architecture'.
Extract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites.
Expert in AT-SPI2 (Assistive Technology Service Provider Interface) for Linux desktop automation. Specializes in accessible automation of GTK/Qt applications via D-Bus accessibility interface. HIGH-RISK skill requiring security controls for system-wide access.
Expert in macOS Accessibility APIs (AXUIElement) for desktop automation. Specializes in secure automation of macOS applications with proper TCC permissions, element discovery, and system interaction. HIGH-RISK skill requiring strict security controls.
Tailwind CSS utility-first styling for JARVIS UI components
Expert UI/UX designer specializing in user-centered design, accessibility (WCAG 2.2), design systems, and responsive interfaces. Use when designing web/mobile applications, implementing accessible interfaces, creating design systems, or conducting usability testing.
Master Shopify Liquid templating language. Use this skill for writing Liquid code, using objects, filters, and tags, accessing product/collection/cart data, creating dynamic content, handling conditionals and loops, and working with Liquid best practices. Essential for theme customization.
Build, customize, and deploy Shopify themes. Use this skill for creating new themes, modifying existing themes, understanding theme architecture, working with sections/blocks, and optimizing theme performance. Covers Skeleton theme, Dawn theme, layouts, templates, and the theme editor customization experience.
UX design skill for BMAD. Use for bmad:ux-design and bmad:user-flow to define interaction design and accessibility-ready UX artifacts.
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 tokens", "write a design.md", clone a site's style, or reverse-engineer a design system from a live page. Triggers on phrases like "design spec", "style guide from URL", "brand tokens", or any request that pastes a URL and asks for a design document.
Generate SAP BTP (Business Technology Platform) solution architecture diagrams as native draw.io (.drawio) files following the official SAP BTP Solution Diagram guidelines (Fiori Horizon design system) and open them via a configured draw.io MCP server. USE WHEN: user asks to create/draw/design/sketch a BTP diagram, BTP architecture, BTP landscape, BTP solution diagram, BTP reference architecture, SAP Business Technology Platform diagram, or wants to visualize SAP BTP services (CAP, Build, Integration Suite, SAC, AI Core, HANA Cloud, Cloud Foundry, Kyma, Workzone, etc.) and their interdependencies in draw.io / drawio / diagrams.net. DO NOT USE FOR: non-BTP architecture diagrams, generic flowcharts, sequence/UML diagrams, or diagrams that should remain in Mermaid/PlantUML.
Develops consulting proposals and runs the business development pursuit lifecycle from opportunity assessment through oral defense. Use when analyzing an RFP, deciding go/no-go on a pursuit, writing a proposal or executive summary, drafting a Statement of Work, building a pitch deck, articulating a value proposition, or developing win themes and competitive positioning for a client bid. Covers RFP scoring, evaluation-criteria breakdown, SOW scope and commercial terms, and outcome-led proposal structure. Front-loads RFP analysis and proposal writing, the two most common entry points.
Use when designing UI with OpenPencil — creating layouts via op CLI, batch design DSL, sandboxed JS scripts, or MCP tools. Covers PenNode schema, semantic roles, typography, color, spacing, and common component patterns.