前言¶

做视觉落地时最常见的卡点是：参考图收了几十张，颜色、字体、组件形态各有说法，最后却拿不出一份能指导开发的说明。要么凭感觉口头描述，要么在素材堆里反复返工。

这个 Skill 的出发点是把这件事流程化：从已经收集的灵感里提取颜色、排版和 UI 模式，组织成一份文档化的设计方向，再按反馈迭代，直到可以直接进入实现。下面介绍它的定位、能力、启用方式和用法。

这是什么¶

davepoon-buildwithclaude-moodboard-creator，坐标 @user_31805bfd/davepoon-buildwithclaude-moodboard-creator，由社区作者 user_31805bfd 发布，版本 1.0.0，来源 community，分类 design-media。

它是一份指导性技能（基于通用 SKILL.md 格式），不负责生成图片，而是把「灵感 → 设计方向」这一步拆成可执行的步骤：提取关键视觉要素，按用户反馈反复修正，最终产出供实施使用的设计系统说明。官方建议的前置步骤是趋势调研或网站分析，也就是先有素材和判断，再用它做综合。

核心功能¶

1、分步提取视觉要素：从灵感素材中拆出颜色、排版、UI 模式三类信息，而不是笼统地记录「好看」。
2、组织成文档化的设计方向：把提取结果整理成结构化说明，作为后续实现的依据。
3、按反馈迭代优化：基于用户的修改意见循环调整，而不是一次产出就结束。
4、输出可供实施的设计系统：迭代收敛后得到可直接指导开发的描述。

安装与启用¶

当前资料中没有给出命令行安装入口，只能通过官方地址获取。按 SkillHub 的坐标方式引用即可。

https://www.skillhub.cn/skills/user_31805bfd/davepoon-buildwithclaude-moodboard-creator

@user_31805bfd/davepoon-buildwithclaude-moodboard-creator

需要注意两点：其一，标签显示 requires_api_key=false，调用时不需要额外的 API Key；其二，该技能来自社区来源（community），安装前建议自己过一遍内容。客户端侧（Cursor / Codex CLI / Claude Code）的安装路径差异，本次资料未核实到，不做说明，请以官方页面为准。

典型用法¶

按技能描述的工作流走一遍，大致是四步。

1、准备素材。先完成趋势调研或网站分析，把参考截图、配色截图、排版截图等灵感资料收集到位。
2、提取要素。让 Skill 从素材中提取颜色、排版和 UI 模式，逐项列出，而不是只给一段总结。
3、组织方向。把提取结果整理成一份文档化的设计方向，明确后续实现要遵循的视觉约定。
4、迭代收敛。把这份方向交给用户挑问题，按反馈反复修改，直到能直接作为设计系统交给实现阶段。

1. 收集灵感素材（趋势调研 / 网站分析的产物）
2. 提取颜色、排版、UI 模式
3. 组织成文档化的设计方向
4. 按用户反馈迭代，形成可实施的设计系统

适用场景与注意¶

适合：已经做完趋势调研或网站分析、手里有素材但缺一份可执行设计说明的团队；想让设计方向从「感觉」变成「文档」的人。

注意：它是流程和文档的整理工具，不生成图像，不能替代设计执行；输出质量依赖前面素材的质量和数量，素材不足时提取结果会空泛；当前页面显示安装数为 0、评分 100000、下载 809，社区技能使用人数较少，建议先小规模试一次再决定是否推广到团队；没有 API Key 要求，接入门槛低。

小结¶

这个 Skill 的价值在于把「灵感 → 设计方向」的中间环节固化下来：提取颜色、排版和 UI 模式，组织成文档，按反馈迭代，最后拿到能直接实施的设计系统。官方地址：

https://www.skillhub.cn/skills/user_31805bfd/davepoon-buildwithclaude-moodboard-creator