Design

UI/UX direction, visual design, and design systems

Showing 793-816 of 1859 skills

editorial-designer

by heyman333

Create distinctive, production-grade frontend interfaces with high editorial design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Animation 22 4mo ago

figma-design-sync

by ratacat

"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..."

Agents 45 3mo ago

style-guide

by michaelboeding

Analyze a codebase to extract its conventions, patterns, and style. Spawns specialized analyzer agents that each focus on one aspect (structure, naming, patterns, testing, frontend). Generates a comprehensive style guide that other skills can reference. Use when starting work on an unfamiliar codebase, or to create explicit documentation of implicit conventions.

Design 14 5mo ago

system-design

by Dwsy

Use when designing, architecting, or planning a new system from requirements or ideas - transforms concepts into navigable design catalog using EventStorming methodology, Mermaid diagrams, and progressive elaboration through 5 phases (Requirements, Big Picture, Processes, Data/Flows, Integration)

Code Gen 14 4mo ago

design-mastery

by wasintoh

World-class design system with extensible business type registry. Automatically selects appropriate design patterns based on business context. Anti-AI detection, trend-aware, production-ready design decisions. CRITICAL: Must be read before any UI creation task.

Design 79 5mo ago

design-excellence

by wasintoh

Design system and anti-patterns for professional UI. Ensures apps don't look "AI generated". Defines color palettes, typography, spacing, animations, and common anti-patterns to avoid. Used by Design Reviewer sub-agent to polish UI. Triggers: design review, polish UI, improve aesthetics, looks like AI made it, design system, style guide, make it beautiful.

Animation 79 6mo ago

vibe-orchestrator

by wasintoh

Master workflow controller for Lovable-style development. Creates working UI immediately from ANY prompt - no questions asked, no choices given. Routes to specialist sub-agents (ui-builder, dev-builder, design-reviewer, backend-connector, platform-adapter). Triggers: create, build, make, want, new project requests, app ideas, MVP, prototype, or any development request. This skill MUST be read first for any development task.

Code Gen 79 6mo ago

whitelabel-claude

by 147228

一键为 Claude Code 接入任意兼容 Anthropic Messages API 的大模型服务（DeepSeek、Kimi、OpenRouter、自建中转等），同时支持换皮为自定义品牌。自动探测已安装的 Claude Code 或从用户提供的 zip 包提取 cli.js，patch 后生成启动脚本和可分发包。当用户说"白标"、"换皮"、"接 DeepSeek/Kimi/OpenRouter"、"rebrand"、"/whitelabel"、"打包分发" 时触发。

Design 21 2mo ago

product-engineer-agent

by michaelboeding

Use this skill to design new products, iterate on product ideas, or develop product specifications. Triggers: "design product", "new product idea", "product concept", "product development", "product spec", "iterate on product", "product design", "invention", "prototype spec", "product requirements", "product engineering", "develop product" Outputs: Product specification, BOM estimate, feature breakdown, differentiation analysis.

Agents 13 5mo ago

brand-research-agent

by michaelboeding

Use this skill to analyze a brand from their website before creating content. Triggers: "analyze brand", "research brand", "brand guidelines", "brand profile", "understand brand", "brand colors", "brand voice", "before creating content for" Extracts: colors, typography, voice/tone, products, audience, competitive positioning. Outputs a reusable brand_profile.json that producer skills can use.

Code Review 13 5mo ago

frontend-design

by ocrbase-hq

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Animation 22 3mo ago

wireframe

by Magdoub

Progressive UX generation — Phase 1 generates 5 B&W wireframe options instantly (1 safe + 4 exploratory), then Phase 2 renders Clean + Polished color variants via 5 parallel Task agents (one per option). Supports wireframes-only or wireframes+visuals. Extracts optimization intent from arguments when present. Maintains persistent design context. Use when user says "wireframe", "prototype", "UX options", or "layout exploration".

Design 55 3mo ago