Design skills

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

figma-autolayout-system

**ALWAYS use this skill** whenever designing or editing frames in Figma. This skill enforces best practices for Auto Layout on every frame, binding variables and components from published libraries, and performing a visual composition review with library examples. Triggers: 'design a screen', 'create a layout', 'add a section', 'build a component', 'use auto layout', 'apply variables', 'use library components', 'design with tokens', 'maintain visual consistency', or any design task in Figma where frames, spacing, or components are involved. Never hardcode spacing, colors, or radii — always resolve and bind from the design system. Use alongside figma-use (mandatory) and figma-generate-design (for full screens).

184 repo starsObserved in 1 repos
Design
GitHub

b2b-desktop-design-system

Generate modern B2B desktop design system specs — tokens, layout, information hierarchy — for Near delivery POC.

183 repo starsObserved in 1 repos
Design
GitHub

ban-pattern

Register AI-generated-looking UI patterns as prohibited rules in the design system. Use when user says "AIっぽい", "AI臭い", "これ禁止", "このパターンやめたい", "ban this pattern", "add to prohibited", or points out a generic/cookie-cutter UI element.

182 repo starsObserved in 1 repos
Design
GitHub

design-brief-generator

Generate comprehensive design briefs for design projects. Use this skill when designers ask to "create a design brief", "structure a design project", "define design requirements", or need help planning design work.

181 repo starsObserved in 2 repos
Design
GitHub

chemiscope-python

Author chemiscope visualizations in Python — build interactive structure/property explorers for molecules and materials. Use when creating chemiscope.show() / write_input() datasets, visualizing forces or vectors as arrows, atom-centered (per-environment) properties, custom shapes (spheres, ellipsoids, arrows, meshes), configuring map/structure display settings, or embedding chemiscope in Sphinx docs or a Streamlit app. Covers ASE / chemfiles / MDAnalysis / stk inputs and the JSON format.

181 repo starsObserved in 1 repos
Design
GitHub

gc-minimal-zine-poster-v0-1

Generate Minimal Zine Poster v0.1 poetic paper-poster prompts and the matching generated image. Use when the user gives a theme, sentence, object, mood, article idea, photo, or content brief and wants a quiet Japanese/Korean zine-like editorial poster with large negative space, aged paper texture, experimental typography, restrained color accents, and a generated bitmap image.

181 repo starsObserved in 1 repos
Design
GitHub

hm-designer

Validação visual de interface no padrão Higher Mind (Linear, Stripe, Apple, A24). Use antes de shippar qualquer visual novo ou refactor de UI. Avalia sofisticação, diferenciação, experiência, encantamento, usabilidade, beleza, pixel-perfect. Dark-first, editorial, cinematográfico, agent-first quando aplicável. Para validar fluxo cognitivo (ordem de decisão, microcopy), use /hm-ux-flow.

181 repo starsObserved in 1 repos
Design
GitHub

hm-ux-flow

Validação de fluxo cognitivo end-to-end. Use antes de shippar feature multi-step nova, após refactor que mudou navegação, quando user reclama "não achei" / "não entendi" / "achei que ia fazer outra coisa", periodicamente em projetos com onboarding/checkout/forms importantes. Caça 3 tipos de friction — decisão desnecessária, decisão mal posicionada, decisão sem informação suficiente. Para validar visual (pixel-perfect, dark-mode), use /hm-designer.

181 repo starsObserved in 1 repos
Design
GitHub

z-xkcd-panda-comic

当用户要求把文章、Markdown、笔记、链接内容或一个主题做成“xkcd 风格四格漫画”“四格漫画”“金馆长熊猫表情”“金教授熊猫脸”“熊猫梗图”“文章转四格漫画”“用幽默方式解释文章核心观点”“生成黑白熊猫漫画配图”时必须使用。本 skill 会读取内容、提炼核心表达和可幽默化冲突，产出 2x2 黑白手绘四格漫画；人物默认使用金馆长熊猫表情味更浓的熊猫 meme 角色，兼容金教授熊猫脸式夸张表情，优先生成黑白手绘风格 PNG，必要时再用 SVG 或文字叠加修正中文对白。

181 repo starsObserved in 1 repos
Design
GitHub