Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

workflow-system-design

系统设计。当 spec.md 前三章节(背景、目标、需求)已完整但设计章节为空时调用。按 spec.md 章节顺序逐个与用户讨论,每轮只处理一个 section。

155 repo starsObserved in 1 repos
Design

设计评审

来自8位产品领袖的10条洞察。如何有效进行设计评审和反馈。

155 repo starsObserved in 1 repos
Design

conventions-ux

Apply when building or modifying user-facing UI components.

154 repo starsObserved in 1 repos
Design

generating-figma-design

Use when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build a new card", "generate X". Produces a CSpec, compiles it to a scene graph, executes it in Figma via MCP, and verifies the output.

152 repo starsObserved in 1 repos
Design

learning-from-corrections

Use when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies each change as a DS learning or a hardcoded flag, persists learnings, and patches the active recipe.

152 repo starsObserved in 1 repos
Design

sketch-image-prompt

Transforms article content or summaries into minimalist hand-drawn style JSON prompts for AI image generation tools. Use this skill whenever the user wants to create any kind of visual from text content — including banners, article illustrations, inline diagrams, infographics, or concept visuals. Trigger on requests like "turn this into a visual", "create an image prompt", "make an illustration for this", "generate a diagram from this article", "I need a sketch for this section", or any request combining content analysis with image/visual prompt generation. Always use this skill when the user provides text content and wants an AI-ready image prompt output.

152 repo starsObserved in 1 repos
Design

video-storyboard-designer

专业 AI 视频分镜设计师。当用户想要创作视频、制作分镜脚本、生成 AI 视频提示词、规划视频内容结构时,必须使用此 skill。 覆盖所有视频类型:短视频、广告片、教育内容、品牌视频、Vlog、微电影等。 即使用户只说"帮我做个视频"或"我想拍 XX 主题的内容",也应触发此 skill。 输出专业分镜设计 + 可直接用于 即梦(Seedance 2.0) / Sora / Kling / Runway / Veo 等主流 AI 视频工具的提示词,其中即梦 Seedance 2.0 支持多模态 @ 引用语法专项输出。

152 repo starsObserved in 1 repos
Design

color-theory-palette-harmony-expert

Expert in color theory, palette harmony, and perceptual color science for computational photo composition. Specializes in earth-mover distance optimization, warm/cool alternation, diversity-aware palette selection, and hue-based photo sequencing. Activate on "color palette", "color harmony", "warm cool", "earth mover distance", "Wasserstein", "LAB space", "hue sorted", "palette matching". NOT for basic RGB manipulation (use standard image processing), single-photo color grading (use native-app-designer), UI color schemes (use vaporwave-glassomorphic-ui-designer), or color blindness simulation (accessibility specialists).

151 repo starsObserved in 4 repos
Design

dark-mode-design-expert

Master dark mode UI design with atmospheric theming, WCAG accessibility, and cross-platform best practices. Specializes in weather/sky/ocean-inspired color systems that adapt to time of day and environmental conditions.

151 repo starsObserved in 4 repos
Design

neobrutalist-web-designer

Modern web applications with authentic neobrutalist aesthetic. Bold typography, hard shadows (no blur), thick black borders, high-contrast primary colors, raw visual tension. Extrapolates neobrutalism to SaaS dashboards, e-commerce, landing pages, startup MVPs. Activate on 'neobrutalism', 'neubrutalism', 'brutalist', 'bold borders', 'hard shadows', 'raw aesthetic', 'anti-minimalism', 'gumroad style', 'figma style'. NOT for glassmorphism (use vaporwave-glassomorphic-ui-designer), Windows retro (use windows-3-1-web-designer or windows-95-web-designer), soft shadows, gradients, neumorphism.

151 repo starsObserved in 3 repos
Design