11.7K skills · sorted by relevance
Design web interfaces, build prototypes, and integrate changes into existing apps while respecting their visual rules and components. Choose direct code generation or Claude Code design commands, with an experimental browser canvas option for visual review.
产品设计 / UX 设计 (产品设计 / UX 设计 (Product Design / UX Design) — 数字产品的用户体验设计：从用户研究 → 信息架构 → 交互设计 → 视觉/UI → 可用性测试 → 设计系统的认知操作系统，面向 UX designer / product designer / interaction designer / UX researcher / design systems engineer / design lead，以及想入行、转岗、服务这行(设计外包、设计工具厂商、研究平台)的视角。覆盖: (a) 第一性张力 — **用户中心/研究驱动 (user-centered, 'you are not the user', research before pixels, observe behavior not opinions) ⇄ 商业目标/约束/交付 (business goals, north-star metrics, ship it, designer 服务于产品成功不是个人作品集)**; **设计直觉/品味/craft (taste, aesthetics, 'attractive things work better' — Norman 情感化设计) ⇄ 数据/实验/A-B 测试 (data-driven, metrics, experimentation, 'opinions are not data')**; **用户说的 (stated preference, 访谈里说喜欢) ⇄ 用户做的 (revealed behavior, 行为观察 > 自陈, usability test 看人真实卡在哪)**; **一致性/设计系统/规范 (consistency, design system, Jakob's law 用户带着别处的习惯来, 复用组件) ⇄ 创新/打破模式 (innovation, 该不该破规范)**; **减法/简化 (simplicity, Krug 'Don't Make Me Think', less but better — Dieter Rams) ⇄ 功能丰富/利益相关者塞需求 (feature creep, stakeholder pressure)**; **UX(体验/流程/研究) ⇄ UI(视觉/像素/组件)** 的职责之争, **designer 该不该写代码 (design engineer / 'should designers code')**; (b) 核心工作流 / pipeline (最标准、最易蒸高质量+CLI 化) — Double Diamond (发现 discover → 定义 define → 开发 develop → 交付 deliver) / Design Thinking (共情 empathize → 定义 → 构思 ideate → 原型 prototype → 测试 test) / Design Sprint (Jake Knapp 5 天冲刺); 完整链: 用户研究 (访谈/问卷/可用性测试/卡片分类) → persona / journey map / JTBD → 信息架构 IA + 用户流 user flow → 线框 wireframe (低保真) → 交互/原型 prototype (高保真) → 视觉 UI / 设计系统落地 → 可用性测试 usability testing → handoff 给开发 → 度量迭代 (北极星 / HEART 框架); (c) 工具栈 — 设计/原型 (Figma 绝对主导 / Sketch 衰退 / Adobe XD 已停更 / Framer 高保真+建站 / Penpot 开源 / Principle / ProtoPie 微交互); 协作白板 (FigJam / Miro / Mural); 用户研究 (Maze / UserTesting / Lookback / Dovetail 研究库 / Optimal Workshop 卡片分类树测试 / Hotjar / Microsoft Clarity 热图); 设计系统/交付 (Storybook / 蓝湖(中) / Zeplin / design tokens / Tokens Studio); 度量 (Amplitude / Mixpanel / 北极星指标); AI 新兴 (Figma AI / v0 by Vercel / Galileo AI / Uizard / Cursor 给 design engineer); (d) 知识正典 — Don Norman《The Design of Everyday Things》(affordance/signifier/mapping 圣经)、Steve Krug《Don't Make Me Think》(可用性入门)、Alan Cooper《About Face》《The Inmates Are Running the Asylum》(交互设计/persona 起源)、Jakob Nielsen 10 Usability Heuristics + NN/g 文章库、Jake Knapp《Sprint》、Jeff Gothelf《Lean UX》、Teresa Torres《Continuous Discovery Habits》、Erika Hall《Just Enough Research》、Julie Zhuo《The Making of a Manager》、《Refactoring UI》(Adam Wathan/Steve Schoger)、《Universal Principles of Design》、Laws of UX (Jon Yablonski)、《100 Things Every Designer Needs to Know About People》(Susan Weinschenk)、IDEO/Stanford d.school 设计思维材料; (e) figures/流派 — 认知心理/人因派 (Don Norman 认知科学奠基、Susan Weinschenk 行为心理、Kathryn Whitenton); 可用性工程派 (Jakob Nielsen 启发式/折扣可用性、Steve Krug、Jared Spool UIE); 交互设计/目标导向派 (Alan Cooper goal-directed/persona、Kim Goodwin); 设计思维派 (IDEO Tim Brown、David Kelley d.school); 精益/持续探索派 (Jeff Gothelf Lean UX、Teresa Torres continuous discovery、Marty Cagan《Inspired》产品发现); 设计系统/系统化派 (Brad Frost Atomic Design、Nathan Curtis design tokens、Alla Kholmatova); 视觉/UI craft 派 (Adam Wathan & Steve Schoger Refactoring UI、Dieter Rams 'less but better' 工业设计遗产); 设计领导/职业派 (Julie Zhuo、Aarron Walter 情感化设计、John Maeda); 移动优先 (Luke Wroblewski 'Mobile First'); (f) 行业话术/黑话 — affordance 可供性 / signifier 意符 / mental model 心智模型 / IA 信息架构 / heuristic evaluation 启发式评估 / usability 可用性 / a11y accessibility 无障碍 / WCAG / persona 用户画像 / journey map 用户旅程 / JTBD jobs-to-be-done / north-star metric 北极星 / HEART 框架 / wireframe 线框 / mockup / prototype 原型 / fidelity 保真度 (lo-fi/hi-fi) / design system 设计系统 / design token 设计令牌 / atomic design 原子设计 / component library 组件库 / handoff 交付 / red routes 关键路径 / dark pattern 暗黑模式 / Fitts's law / Hick's law / Jakob's law / Miller 7±2 / progressive disclosure 渐进披露 / above the fold / hamburger menu / skeuomorphism vs flat / micro-interaction / empty state / edge case / happy path / design debt 设计债 / dogfooding / dot voting / affinity mapping 亲和图 / card sorting 卡片分类 / tree testing / A/B test / NPS / SUS (System Usability Scale); (
The English summary is being prepared. Showing the original description.
Create and manage DESIGN.md as a shared reference for design direction, reusable design values, and visual rules. This catalogue entry introduces the skill; its complete workflow requires installing the upstream bundle.
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "extract design style", "analyze design", "design tokens from reference", "generate design from JSON", "design system from screenshot", "design profile", "style guide JSON", "visual effects analysis", "design with effects", "3d design analysis".
The English summary is being prepared. Showing the original description.
sparkle-design（公開 npm パッケージ）の新バージョンをリリースするための手順スキル。 package.json の version bump、CHANGELOG.md の更新、リリース PR 作成、PR マージ後の npm への stage、メンテナーによる 2FA 承認（npm stage approve）、承認後の git tag・ GitHub Release 作成までを一連の手順で実行する。 CHANGELOG 更新漏れと GitHub Release 作成漏れを防ぐためのチェックリストを含む。 「sparkle-design をリリース」「sparkle-design の新バージョンを切る」「vX.Y.Z をリリース」 「sparkle-design の CHANGELOG を更新」で発動。 English: "release sparkle-design", "cut a new sparkle-design version", "publish sparkle-design", "bump sparkle-design version".
The English summary is being prepared. Showing the original description.
**未導入プロジェクト向け**の sparkle-design 初期導入・セットアップを支援するスキル。 npm インストール、sparkle-design-cli による初回 CSS 生成、sparkle.config.json の 新規作成、AI ガード（Sparkle Design Guard）の導入、コンポーネント選択ガイドまでをカバー。 **導入済みプロジェクトでテーマ（primary / font / radius）を変えたい場合は `change-sparkle-config` スキルを使うこと** — この setup スキルは初期導入専用。 「Sparkle Design を導入」「sparkle-design をインストール」「デザインシステムをセットアップ」 「コンポーネントライブラリを追加」「どのコンポーネントを使えばいい」で発動。 English: "install sparkle-design", "add sparkle design", "set up sparkle design", "which component should I use"
The English summary is being prepared. Showing the original description.
Use more than 300 design rules drawn from Apple HIG, Material Design 3, and WCAG 2.2 accessibility guidance. Apply them when planning a shared app design for iOS, Android, and the web.
Read frontend source code to document colors, typography, spacing, components, and layout rules in DESIGN.md. Use it to understand an existing interface or prepare design guidance for Stitch without building or running the app.
Validate DESIGN.md files against the official Google specification using the `@google/design.md` CLI linter. Works with local files. Use when the user wants to lint a DESIGN.md, check spec compliance, find broken token references, verify WCAG contrast ratios, diff two versions, export tokens to Tailwind or DTCG format, or audit a design system file for structural correctness. Trigger on mentions of "validate DESIGN.md", "lint DESIGN.md", "check my design.md", "design.md spec compliance", "WCAG contrast check", "broken token references", "design token validation", "export design tokens", "diff design systems", "design.md audit", "@google/design.md", "npx design.md lint", "design system validation", "frontmatter tokens", or any request to verify a DESIGN.md file.
The English summary is being prepared. Showing the original description.
Contribute to OpenDesign by submitting a Skill or Design System, translating or improving documentation, or reporting a bug. The agent checks submissions and prepares a pull request, a proposed change, or an issue for review.
Import an existing React component library into Claude Design, including its styles, usage references, and previews. This lets the design agent build screens and prototypes using the same components already maintained in the source project.
Design Google Cloud infrastructure with Terraform, validate it locally, and assess the planned changes for security, cost, and reliability. The skill then imports templates into Application Design Center, deploys them, investigates failures, and checks the deployed services.
Create, fetch, validate, or export DESIGN.md design system files in the Google Stitch 9-section format. Fetch reference designs from 68 brands (Linear, Stripe, Vercel, etc.) via getdesign CLI, generate scaffolds from existing CSS custom properties and Tailwind tokens, or validate and export with the Google @google/design.md CLI. Pairs with minoan-frontend-design for implementation. Triggers on "DESIGN.md", "create design system file", "extract design tokens", "codify the design", "getdesign", "make it look like [brand]", "lint design", "validate DESIGN.md", "export design tokens", "export tailwind theme".
The English summary is being prepared. Showing the original description.
ClaudeDesign（claude.ai/design）とClaude Codeの連携。DesignSyncツールで デザインプロジェクトからプロトタイプHTML等を取得（インポート）、または ローカルのコンポーネントをデザインシステムプロジェクトへ同期（プッシュ）する。 「ClaudeDesignからデザインを取得して」「claude.ai/design のURLを取り込んで」 「デザインプロジェクトに同期して」「デザインシステムをプッシュして」 などのリクエスト、または claude.ai/design のURLが渡されたときに使用する。 取得したデザインのコード実装への適用は apply-design を使う。
The English summary is being prepared. Showing the original description.
Create DESIGN.md files that combine exact design values with explanations for coding agents. Validate file structure and color contrast, compare versions, and export shared design settings to Tailwind or a standard design-token JSON format.
Turn screenshots, reference links, and rough visual preferences into a reusable DESIGN.md, a record of design decisions, and practical handoff instructions for building prototypes, presentations, redesigns, or image remixes.
Customize Ant Design colors, spacing, corners, and typography using design tokens, shared values that control appearance. Configure global styles, individual components, dark mode, and CSS variables through ConfigProvider, and extract computed theme values when needed.
Create and improve web, mobile, and desktop interfaces in Penpot through connected tools. Reuse existing design patterns, build layouts and components, and inspect designs for readability, accessibility, spacing, and usability.
Design new pages and components, audit existing interfaces, or redesign their visual structure. It emphasizes varied layouts, consistent colors and typography, mobile checks, and extracting reusable design characteristics from screenshots or readable web pages.
游戏设计 (Game Design) — 设计游戏的规则 / 系统 / 机制 / 体验 的从业者认知操作系统 (以电子游戏为主, 含桌游 / 卡牌 / 棋盘游戏): 决定「玩家做什么、为什么有意义、每一刻的体验如何」的学科 —— 区别于游戏程序 (引擎 / 代码)、游戏美术 (视觉 / 音频)、游戏制作 (排期 / 预算 / 团队)。覆盖 (a) 核心设计理论与框架 (MDA 机制-动态-美学 Hunicke/LeBlanc/Zubek + Schell 的「透镜」+ Koster「乐趣即学习」理论 + Sid Meier「一连串有趣的决策」+ Salen & Zimmerman「有意义的游玩」/「二阶设计」/「魔法圈」+ Costikyan 论不确定性 + Suits/Huizinga 游戏哲学), (b) 系统与机制设计 (核心循环 + 游戏经济 sink/source/产出-消耗 + 正负反馈环 + 资源与成长系统 + 涌现 vs 脚本 Will Wright「可能性空间」+ Machinations 经济建模 Dormans + 支配 / 退化策略 + 正交设计 Garfield), (c) 关卡与遭遇设计 (灰盒 blockout + 节奏与张力 + 预告 telegraphing + 主线 vs 探索 + 环境叙事 + 锁钥 gating + 难度曲线), (d) 游戏手感与「juice」(Steve Swink《Game Feel》+ 即时响应 + 屏震 / 反馈 / 打磨 + 输入与镜头 + 「手感」是设计出来的不是附带的), (e) 玩家心理与 UX (Celia Hodent《The Gamer's Brain》+ 心流通道 挑战 vs 技能 Csikszentmihalyi/陈星汉 Jenova Chen + Bartle 玩家类型 + 动机与奖励节奏 + 新手引导 FTUE / 教学化 + 认知负荷 + 无障碍), (f) 平衡与调优 (Ian Schreiber《Game Balance》+ 对称 / 非对称 + 动态难度 DDA + 传递 / 非传递平衡 + nerf/buff + 消除支配策略 + 测试驱动调优), (g) 叙事与任务设计 (ludonarrative 失调 / 和谐 + 环境与系统叙事 + 分支 vs 线性 + Amy Hennig 角色驱动 + 任务结构), (h) 以玩家为中心的迭代流程 (Tracy Fullerton《Game Design Workshop》playcentric + 纸面原型 + 垂直切片 + 测试协议「看而不说 / 你不是你的玩家」+ 快速迭代 + game jam), (i) 类型与形态工艺 (roguelike/roguelite 与程序生成 Derek Yu + 平台跳跃 + RPG 系统 + 策略 4X + 解谜设计 Jonathan Blow + 多人 / PvP 平衡 + 桌游 / 卡牌设计 Reiner Knizia/Richard Garfield/Brenda Romero), (j) F2P / 长线运营 / 商业化设计 (核心 / 元 / 经济循环 + 抽卡 gacha / 开箱 loot box / 战令 battle pass 机制 + 留存 D1/D7/D30 + 转化 + 鲸鱼 + live ops 内容节奏 —— 并诚实处理掠夺式暗黑模式 / 强迫循环 / 剥削式商业化的伦理), (k) 设计师角色与工艺职业 (系统 / 关卡 / 叙事 / UX 设计师之分 + 通才 vs 专才 + 独立作者 vs 3A 团队 + 设计文档 + 传达设计意图 + GDC 工艺社区)。跨 3A / 独立 / 手游 F2P / 桌游。不含 游戏程序 / 引擎 (Unity/Unreal 编码 / 图形 / 网络同步) / 游戏美术 / 动画 / 音频 / 游戏制作 / 项目管理 / 排期 / QA / 游戏作为生意 / 发行 / 市场 / 电竞运营为终点 / 泛泛「我想做游戏」的 game-dev 教程 —— 本 skill 是「设计」学科: 规则 / 系统 / 机制 / 体验。 (Game Design — the cognitive operating system of practitioners who design the rules, systems, mechanics, and experiences of games (video games primarily, plus tabletop/board/card games): the discipline of deciding WHAT the player does, WHY it is meaningful, and HOW the moment-to-moment experience feels — distinct from game programming (builds the engine/code), game art (visuals/audio), and game production (schedule/budget/team). Covers (a) core design theory & frameworks (MDA Mechanics-Dynamics-Aesthetics Hunicke/LeBlanc/Zubek, Schell's Lenses, Koster's theory of fun = learning, Sid Meier 'a series of interesting decisions', Salen & Zimmerman 'meaningful play'/'second-order design'/'magic circle', Costikyan on uncertainty, Suits/Huizinga play philosophy), (b) systems & mechanics design (core loops, game economy sink/source/faucet-drain, feedback loops positive/negative, resource & progression systems, emergence vs scripting Will Wright 'possibility space', Machinations economy modeling Dormans, dominant/degenerate strategy, orthogonal design Garfield), (c) level & encounter design (blockout/greybox, pacing & tension, telegraphing, critical path vs exploration, environmental storytelling, gating & lock-and-key, difficulty curve), (d) game feel & juice (Steve Swink 'Game Feel', moment-to-moment responsiveness, screenshake/feedback/polish, input & camera, the 'feel' is designed not incidental), (e) player psychology & UX (Celia Hodent 'The Gamer's Brain', flow channel challenge-vs-skill Csikszentmihalyi/Jenova Chen, Bartle player types, motivation & reward schedules, onboarding/FTUE/tutorialization, cognitive load, accessibility), (f) balancing & tuning (Ian Schreiber 'Game Balance', symmetry/asymmetry, dynamic difficulty adjustment DDA, transitive/intransitive balance, nerf/buff, dominant strategy elimination, playtesting-driven tuning), (g) narrative & quest design (ludonarrative dissonance/harmony, environmental & systemic storytelling, branching vs linear, Amy Hennig character-driven, quest structure), (h) player-centric iterative process (Tracy Fullerton 'Game Design Workshop' playcentric design, paper prototyping, vertical slice, playtesting protocol 'watch don't talk / you are not your play
The English summary is being prepared. Showing the original description.
Use whenever the user wants to find, shortlist, vet, or enrich US design and creative agencies — graphic design, UX/UI, product design, brand identity, packaging, illustration, motion design, and creative direction. Triggers on "find me a UX/UI design agency for our SaaS product", "shortlist three brand-identity studios in NY", "packaging design firm for a CPG launch", or "pull contact info for these 10 design studio domains", even when described indirectly (brand refresh, design our app, build our visual system). Drives the ServiceGraph API (api.servicegraph.co) — a 100k+ US firm catalog filterable by industry, services, location, size, ratings. Defer to find-marketing-agency for marketing-led engagements where design is one of several services. Defer to find-web-developer when the deliverable is a built website. Skip in-house designer hires, "design me a logo" DIY asks, design-software comparisons, consumer/personal-design (weddings, hobby projects), non-US firms, individual freelancers.
The English summary is being prepared. Showing the original description.
Review interface designs with a senior designer's perspective. It scores each design dimension from zero to ten, explains what a top score requires, and flags generic AI-generated design patterns before UI changes are merged.
Create a blank Figma Design or FigJam file as the starting point for agent workflows. Use it to prepare a new workspace before building a design system or organizing workshop activities.
Review a design against Dieter Rams' ten principles using evidence from code, screenshots, copy, and measurements. Receive a scorecard, a verdict on whether to create, refine, or redesign, and a prompt for planning the next steps.