Design & UI

Design & UI skills give your agent taste, critique frameworks, and practical UI implementation knowledge for polished interfaces.

このトピックの 500 個のスキル

エージェントができること

  • Apply design systems and consistent visual language
  • Implement Tailwind and shadcn/ui patterns correctly
  • Critique and improve UI with structured design review
  • Handle typography, spacing, and color systems
  • Build accessible interfaces meeting WCAG guidelines
  • Create responsive layouts with mobile-first thinking

このトピックのスキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

steipete/clawdis

npx skills add steipete/clawdis

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

steipete/clawdis

npx skills add steipete/clawdis

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

steipete/clawdis

npx skills add steipete/clawdis

steipete/tmux

Control tmux sessions/panes for interactive CLIs: list, capture output, send keys, paste text, monitor prompts.

steipete/clawdis

npx skills add steipete/clawdis

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

mattpocock/skills

npx skills add mattpocock/skills

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

mattpocock/skills

npx skills add mattpocock/skills

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

mattpocock/skills

npx skills add mattpocock/skills

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

anthropics/skills

npx skills add anthropics/skills

claude-api

|-

anthropics/skills

npx skills add anthropics/skills

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists

anthropics/skills

npx skills add anthropics/skills

shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

shadcn-ui/ui

npx skills add shadcn-ui/ui

browser-use/cloud

Documentation reference for using Browser Use Cloud — the hosted API and SDK for browser automation. Use this skill whenever the user needs help with the Cloud REST API (v2 or v3), browser-use-sdk (Python or TypeScript), X-Browser-Use-API-Key authentication, cloud sessions, browser profiles, profile sync, CDP WebSocket connections, stealth browsers, residential proxies, CAPTCHA handling, webhooks, workspaces, skills marketplace, liveUrl streaming, pricing, or integration patterns (chat UI, subagent, adding browser tools to existing agents). Also trigger for questions about n8n/Make/Zapier integration, Playwright/ Puppeteer/Selenium on cloud infrastructure, or 1Password vault integration. Do NOT use this for the open-source Python library (Agent, Browser, Tools config) — use the open-source skill instead.

browser-use/browser-use

npx skills add browser-use/browser-use

VoltAgent/awesome-design-md

A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

VoltAgent/awesome-design-md

npx skills add VoltAgent/awesome-design-md

lobehub/pr

Create a PR for the current branch (targets `canary` by default), including splitting one cross-layer branch into ordered stacked PRs so a lower layer (db / shared package / server TRPC) merges before its callers (desktop / CLI / UI). Use when the user asks to create / submit a PR, or to split a branch because clients call a server contract that isn't on the trunk yet. Triggers on 'pr', 'create pr', 'submit pr', 'open a PR', 'pull request', 'split this PR', 'stacked PR', 'backend should merge first', '提 PR', '提个 PR', '新建 PR', '拆 PR', '后端先合', '分层合并'.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/store-data-structures

LobeHub Zustand store data-shape patterns. Use when designing store state, list/detail splits, normalized maps, reducers, messagesMap, topicsMap, or choosing shared type sources.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/microcopy

UI copy and microcopy guidelines. Use for user-facing copy, buttons, errors, empty states, onboarding, i18n wording, translation, or copy improvements in Chinese or English.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/modal

LobeHub imperative modal conventions. Use when creating or migrating modals, dialogs, popups, confirm flows, ModalHost wiring, createModal, confirmModal, useModalContext, or base-ui modal APIs.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/i18n

LobeHub i18n with react-i18next. Use for user-facing strings, locale keys, namespaces, useTranslation, t(), interpolation, zh-CN/en-US previews, hardcoded UI copy, or pnpm i18n.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/react

LobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, routing, desktop variants, layouts, or component state.

lobehub/lobehub

npx skills add lobehub/lobehub

addyosmani/agent-skills

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

addyosmani/agent-skills

npx skills add addyosmani/agent-skills

addyosmani/agent-skills

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

addyosmani/agent-skills

npx skills add addyosmani/agent-skills

bytedance/web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

bytedance/deer-flow

npx skills add bytedance/deer-flow

bytedance/frontend-design

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.

bytedance/deer-flow

npx skills add bytedance/deer-flow

composiohq/theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-skills

composiohq/webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-skills

composiohq/artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-skills

composiohq/mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-skills

leonxlnx/taste-skill

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/taste-skill

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/taste-skill

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

santifer/career-ops

AI-powered job search system built on Claude Code. 14 skill modes, Go dashboard, PDF generation, batch processing.

santifer/career-ops

npx skills add santifer/career-ops

sickn33/tailwind-patterns

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/multi-agent-brainstorming

Simulate a structured peer-review process using multiple specialized agents to validate designs, surface hidden assumptions, and identify failure modes before implementation.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/interactive-portfolio

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/api-patterns

API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/ai-agents-architect

Expert in designing and building autonomous AI agents. Masters tool use, memory systems, planning strategies, and multi-agent orchestration.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/react-ui-patterns

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/backend-architect

Expert backend architect specializing in scalable API design, microservices architecture, and distributed systems.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/shopify-development

Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/bash-linux

Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. Use when working on macOS or Linux systems.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/database-design

Database design principles and decision-making. Schema design, indexing strategy, ORM selection, serverless databases.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/frontend-design

You are a frontend designer-engineer, not a layout generator.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/brainstorming

Use before creative or constructive work (features, architecture, behavior). Transforms vague ideas into validated designs through disciplined reasoning and collaboration.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

Frequently asked questions

No. They give agents structured frameworks for critique and implementation — human judgment still matters for brand and product decisions.

こちらも見る

← すべてのトピック