mcpField
S
suggest-lucide-icons

suggest-lucide-icons

github.com/nweii设计与 UI10620 次安装1 周前更新
代码仓库

关于 suggest-lucide-icons

面向产品设计师和界面开发者的 Lucide 图标建议技能,可根据概念或截图语境筛选图标,并确认名称确实存在。

主要功能

  1. 01按概念与标签搜索图标
  2. 02结合截图判断界面语境
  3. 03验证图标名称并提供近似项
  4. 04给出三个候选及首选建议

适用场景

  1. 01为界面中的概念挑选图标
  2. 02检查手动组合的图标名称

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/nweii/agent-stuff --skill suggest-lucide-icons

安装后在 Claude Code 中输入/suggest-lucide-icons确认已加载。

附带文件scripts/lucide.py

详细介绍

推荐 Lucide 图标

从 Lucide 开源图标包中推荐最适合用来象征某个概念或适用于特定 UI 位置的图标。请广泛考量象征关联——涵盖文化、科学和设计,而不只是字面匹配。

输入

提供以下一项或两项:

  • 概念:要表达的想法、动作或含义
  • 截图:展示需要图标的 UI 上下文

目录脚本

scripts/lucide.py(Python 3,无依赖项)会从 unpkg.com/lucide-static@latest/tags.json 一次性获取完整的 Lucide 图标集,缓存约 24 小时,并在本地搜索和验证,因此无需逐个获取图标:

  • search "<terms>" — 按名称和语义标签搜索并排序概念相关的真实图标。每个结果都是确实存在的图标,并附有标签,方便了解它为何适用。
  • validate <name>... — 确认指定名称(例如手动组合的名称)。未匹配的名称会显示相近名称建议;只要有任何名称不存在,退出代码就会是非零值。

如果没有 Python 3,可直接获取该 URL(内容格式为 {name: [tags]}),或者通过 https://unpkg.com/lucide-static@latest/icons/<name>.svg 检查单个图标(200 表示存在,404 表示不存在;请跟随 302 重定向)。

命名规则

图标名称遵循严格规则——阅读搜索结果或构建复合候选名称时请遵守:

  • kebab-case:使用 arrow-up,而不是 Arrow Up
  • 国际英语:使用 color,而不是 colour
  • 分组变体:<group>-<variant> — 例如,badge-plus 基于 badge
  • 多个元素,尺寸不同:按从大到小的顺序排列 — 如果圆形更大,使用 circle-person
  • 带修饰符的元素:[element]-[modifier] — 使用 circle-dashed,而不是 dashed-circle;组合形式:circle-dashed-heart-broken

流程

  1. 构思关联 — 梳理关键概念、视觉隐喻和截图中的上下文线索,并将它们整理成少量搜索词。

  2. 搜索目录 — 从脚本结果中筛选候选项,而不是猜测名称:

    python3 scripts/lucide.py search "calendar schedule date"
    

    标签会说明每个图标为何适用。如果根据命名规则构建了复合名称,请在推荐前确认它是否存在:

    python3 scripts/lucide.py validate circle-dashed-heart-broken
    
  3. 列出 3 个已确认的候选图标 — 包括图标名称及其适用理由(象征含义、视觉清晰度、上下文适用性)。

  4. 推荐最佳选项 — 选出一个最合适的方案,并说明理由。

指南

  • 仅推荐经 search 确认(结果真实存在)或经 validate 确认(手动构建的名称)的图标——绝不编造名称。
  • 如果符合条件的候选图标少于 3 个,请在放弃前尝试更多搜索词。
  • 如果经过充分搜索后仍找不到合适的匹配项,请如实说明。
  • 对于截图,请根据具体设计上下文调整推荐。
  • 每个所需图标都应单独给出推荐。
  • 可通过多轮反馈持续完善建议。

输出格式

构思关联:[关键关联和隐喻]

候选图标:

  1. icon-name — 适用理由
  2. icon-name — 适用理由
  3. icon-name — 适用理由

推荐:icon-name — 说明它为何最适合[上下文]

评论

支持 Markdown