研究检索操作浏览器github未标认证来源可访问许可证需确认审计通过

design-tool-picker（设计工具选择器）

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

899

周安装

GitHub Stars

下载量

291

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：design-tool-picker（设计工具选择器）
来源仓库：https://github.com/majesticlabs-dev/majestic-marketplace
仓库路径：skills/design-tool-picker
安装命令：
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill design-tool-picker
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill design-tool-picker

简介

根据任务类型推荐合适的设计工具与工作流组合。

区分新代码编写、UI 迭代、视觉验证等不同阶段需求。
自动匹配 frontend-design、ui-ux-designer 等相关技能调用。
需明确当前项目所处阶段与技术栈以获取精准建议。
design-tool-picker 属于研究检索类 Skill，可作为该场景下的辅助能力补充。

SKILL.md

Design Tool Picker

When users ask "which design tool should I use?" or seem unsure about design tooling, guide them with this decision tree.

Quick Reference

Your Situation	Recommended Tool	Type	Invocation
Writing new UI code	`frontend-design`	skill	Loaded automatically
Need a design system template	`ux-brief`	command	`/majestic:ux-brief`
Refining existing UI iteratively	`ui-ux-designer`	agent	`Task(majestic-engineer:design:ui-ux-designer)`
Verifying visual changes match intent	`visual-validator`	agent	`Task(majestic-engineer:qa:visual-validator)`
Reviewing code for accessibility	`ui-code-auditor`	agent	`Task(majestic-engineer:qa:ui-code-auditor)`
Styling React components	`tailwind-styling`	skill	`Skill(majestic-react:tailwind-styling)`

Decision Flow

Question 1: Do you have code written, or are you starting fresh?

Starting fresh → Choose based on what you need:

Need design system from scratch: /majestic:ux-brief
Just need design guidance while coding: frontend-design skill (auto-loads)

Have code → Continue to Question 2

Question 2: Is the issue visual (layout, colors, spacing) or code quality (a11y, patterns)?

Visual issues → Continue to Question 3

Code quality → ui-code-auditor agent

Reviews source code for accessibility violations
Detects missing alt text, aria-labels, form labels
Finds animation anti-patterns, touch target issues
Returns findings with file:line references

Question 3: Can you run the UI and take screenshots?

Yes → Continue to Question 4

No → frontend-design skill

Provides design patterns for typography, color, motion
Reference while coding without needing running UI

Question 4: Do you want to iterate on the design or verify it's correct?

Iterate → ui-ux-designer agent

Takes screenshots, analyzes, implements changes
Multiple iteration cycles (default 10)
Progressive refinement through visual feedback

Verify → visual-validator agent

Checks if changes achieved intended goals
Validates accessibility, design system compliance
Returns structured pass/fail verdict

Tool Comparison

Screenshot-Based Tools (Visual)

Tool	Purpose	When to Use
`ui-ux-designer`	Iterative refinement	"Make this look better"
`visual-validator`	Verification	"Did my changes work?"

Both require browser tools and running UI.

Code-Based Tools (Static)

Tool	Purpose	When to Use
`ui-code-auditor`	Accessibility/quality audit	"Check my code for a11y issues"
`frontend-design`	Design guidance	"How should I style this?"

Work on source code without running UI.

Creation Tools

Tool	Purpose	When to Use
`ux-brief` command	Generate design system	"Create a design system for my project"
`tailwind-styling`	Tailwind patterns	"Help me use Tailwind effectively"

Common Workflows

New Feature with UI

/majestic:ux-brief if no design system exists
frontend-design skill while implementing
ui-code-auditor before PR to catch a11y issues
visual-validator to verify visuals match intent

Fix Visual Bug

ui-ux-designer if iterating to find the right fix
visual-validator to confirm fix worked

Accessibility Audit

ui-code-auditor for code-level violations
visual-validator for visual accessibility (contrast, focus states)

Design System Update

/majestic:ux-brief to update design system docs
visual-validator to verify components match spec

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.76%

按下载量换算104

Claude

29.56%

按下载量换算86

Cursor

19.79%

按下载量换算58

Gemini CLI

9.17%

按下载量换算27

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/majesticlabs-dev/majestic-marketplace

SKILL.md 来源

github.com

/majesticlabs-dev/majestic-marketplace/tree/main/skills/design-tool-picker

skills-sh

skills.sh

/majesticlabs-dev/majestic-marketplace/design-tool-picker

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

design-tool（设计工具）

下一个 Skill

design-trends-2026（2026 年设计趋势）