Inspiration Art Direction：从真实参考做出站点与演示稿

灵感艺术指导

将创意简报转化为精心设计的页面，通过使用 Inspiration 库中的真实参考，而非默认模板。运行将在用户项目中生成三个文件：

• .inspiration/references.md：样张（5 到 8 个已查看的参考，以及每个参考能为你带来什么）。
• .inspiration/direction.md：设计方向，每个决策都对应到具体的样张。
• 构建结果，以及截图和检查报告，存放在 .inspiration-out/ 目录下。如果项目存在 .gitignore 文件，请在首次写入前将 .inspiration-out/ 添加到其中。

何时使用

• 当用户提出类似“为一个落地页设计”、“给这个网站一个外观”、“英雄区应该是什么样”、“查找参考并构建它”、“为这个演示文稿进行艺术指导”等请求时。
• 当用户在构建前希望获得一份书面设计方向，或者认为输出结果过于模板化、像个 AI 产物，希望达到高级、编辑风、大胆或独特的效果时。
• 不适用于：仅查找参考（请使用 inspiration-references），仅获取调色板和字体工具包（请使用 inspiration-brand-kit），或者完全不涉及视觉设计问题的代码变更（例如 CSS 错误、重构）。

硬性规则

1. 真实性。 只描述你实际通过工具图像打开所见的图片内容。标题、why 字符串和标签（facets）只是线索，不是证据。切勿引用你未曾查看的参考。
2. 绝不复制。 采纳原则而非像素。不要整体搬用布局，绝不重复使用参考中的文案、图片、插图、logo 或授权字体。每个样张必须说明你选择放弃什么。
3. 预算。 规划大约 12 次有计量限制的工具调用（参见下方预算表）。记录每次调用的成本，包括出错的部分。批量调用：get_image 最多接受 6 个 ID，get_inspiration 接受一个 ID 列表。
4. 画板（Boards）为可选。 除非用户要求，否则不得调用 save_to_board、create_board 或 add_to_board。
5. 命名。 将来源称为“Inspiration 库”或“VASA.Works 的 Inspiration”。链接项使用 https://inspiration.vasa.works/item/<id> 以及工具返回的 image_url 值。切勿将第三方网站链接作为项的来源。字体厂商或许可页面以及画板 URL 是允许的。

步骤 0：设置检查

检查是否存在名为 search_inspiration 的工具，前缀可以是 mcp__plugin_inspiration_inspiration__（针对 Claude Code 插件安装）、mcp__inspiration__、mcp__Inspiration__ 或直接是 mcp__Inspiration__（无前缀）。如果宿主将工具列为“延迟加载”，则通过宿主的工具搜索功能加载该工具也算作可用。本技能中提到的工具名称均不带前缀。

• 如果可用： 继续。
• 如果缺失： 阅读 references/setup.md，为用户提供针对其客户端的一次性设置步骤，然后继续进入下方的“无库模式”，除非用户表示想先连接。
• 如果调用返回 {"error": "subscription_required"}，表示服务器已连接但未登录：提供 references/setup.md 中的登录步骤。

步骤 1：简报与主题清单

在搜索之前，记录以下内容（仅针对你无法从仓库或对话中推断出的信息进行提问）：

• 它是什么： 用一句话说明产品或主题，以及访问者必须理解的一件事。
• 受众： 受众是谁，他们已知什么，什么能让他们信任。
• 必须包含的内容： 真实标题、证明（用户实际拥有的数据、logo、引述）、可用的产品视觉素材、行动号召（CTA）、法律或定价内容。列出它们；这将决定页面有哪些部分。
• 限制条件： 技术栈、现有组件、品牌资产（logo、颜色、含许可的字体）、无障碍需求、截止日期、浅色/深色偏好。
• 是否有现有品牌？ 如果 .inspiration/brand-kit.md 或 .inspiration/tokens.css 存在，则将其视为现有品牌。如果存在，设计方向必须对其进行扩展，而非替换。注意任何与品牌匹配的“website-styles”标识符，用于按品牌排名（brand 参数）。
• 页面结构： 页面需要的顺序化部分（例如：英雄区、logo 墙、特性、工作原理、定价、常见问题、行动号召、页脚）。标记其中 2 到 4 个支撑核心论点的部分；这些部分需要单独搜索。

如果提示没有提供任何内容（只有一句话，没有证据、定价或视觉素材），不要停下来询问：在简报中以明确标记的占位符形式列出缺失项，然后继续。

将此内容作为 .inspiration/direction.md 的第一部分，以便用户可以尽早修改。

步骤 2：研究计划

阅读 references/research.md，了解针对不同页面类型的查询配方、过滤条件示例以及预算表。默认计划如下：

#	调用	计量调用	目的
a	list_facets(category="website-sections")	否	获取 subtype， style， mood， layout， typography 的标准词汇
b	1 到 2 次情绪搜索	是	跨类别（不使用 category 或 website-sections 限定）的总体感觉
c	2 到 3 次部分搜索	是	category="website-sections"，每个关键部分一次，filters={"subtype": ["hero"]} 等
d	1 次跨类别搜索	是	纹理：fonts， website-styles， branding 或 editorial-print，根据简报需求选择
e	可选 1 次 similar_items(id)，在首次 get_image 批次之后	是	从实际看过的最强候选中进行扩散和漂移；如果第一批次已有足够多样性则跳过
f	2 次 get_image([...6 ids])	是	查看候选列表
g	1 次 get_inspiration([保留的 ids])	是	获取调色板十六进制值、排版说明以及保留集的完整描述
h	可选 analyze_palette 或 generate_palette	是	检查或扩展调色板

总计 7 到 11 次计量调用（b 到 h），因此约 12 次预算留有一次重试机会。如果用户表示处于 Pro 计划，你可以增加部分搜索或第三批图片查看，但保留集仍为 5 到 8 个。

搜索规范：

• 查询应描述可见内容：“深色英雄区搭配超大衬线标题和产品截图”，而非“好的英雄区”。
• 将受控值放入 filters 参数中（键间为 AND 关系，键内为 any-of 关系）。保留 query 用于表达过滤器无法表达的内容。
• 传递 exclude_ids 参数，包含已查看过的 ID，以避免后续搜索重复。保持 diversify 为开启状态。
• 零结果会返回 suggestions：使用其中一个建议重试一次，然后继续下一个。
• 如果 list_facets 出错，继续使用 references/research.md 中列出的通用值（尤其是 subtype）作为 filters 参数；仅当某个过滤器导致搜索结果为零时才将其移除。

从搜索结果中，构建一个最多 12 个 ID 的候选列表。选择应侧重多样性（不同的结构和情绪），而不是 12 个同质化的版本。

步骤 3：查看和筛选

1. 每次调用 get_image 最多 6 个候选 ID，最多调用 2 次。回复以一个清单（order， errors）开始；根据这个顺序将每个图片映射到其 ID，并移除 errors 中列出的 ID。在两批之间，可选地对看到的最强图片运行 similar_items（步骤 2，行 e），并将得到的最佳结果放入第二批。 如果 get_image 失败， 通过 references/library-rules.md 中的图片回退机制（公共 image_url，无计量调用）查看候选人。
2. 正确查看每张图片：结构、字体类型（分类、比例对比、大小写、字距）、色彩场域和强调色、密度、图像风格、一个不寻常的处理方式。
3. 保留 5 到 8 个。每个保留的参考必须有一个明确的角色：情绪基调、英雄区、某个已命名的部分、字体类型、调色板或纹理。剔除过于相似的和无法提供具体评价的参考。
4. 使用保留的 ID 列表调用一次 get_inspiration，获取调色板十六进制值和排版说明。将其文本视为补充信息；你自己的观察优于有出入的部分。如果出错，不要重试：从你打开的图片中采样十六进制值（例如使用 ImageMagick：magick <n>.png -resize 200x200 -colors 6 -format %c histogram:info:-，如果没有 ImageMagick，则根据所见估算并说明），在样张中注明十六进制值为手动采样，并根据像素判断排版。

步骤 4：样张文档

使用 references/specimen-sheet.md 中的精确格式编写 .inspiration/references.md。对于每个保留的参考：

• ID， 标题， 角色， 链接 https://inspiration.vasa.works/item/<id> 和 image_url。
• 所见（Seen）： 2 到 4 个具体的可见事实。
• 借鉴（Takes）： 你借鉴的原则，以可以应用于不同主题的方式表述。
• 舍弃（Leaves）： 你故意不使用的部分（其布局、文案、图像、品牌标识、字体，任何不适合当前简报的内容）。
• 转化（Becomes）： 该原则在此页面中如何具体体现。

在文档末尾，用一行说明保留集共同点，以及一个你将解决的矛盾之处。

步骤 5：设计方向

从样张中推导出设计方向。不要套用预设风格。编写 .inspiration/direction.md（在简报部分之后），包含以下标题，并在每个决策后用方括号引用样张 ID：

1. 概念线（Concept line）。 一句设计师可能会推敲的话，例如：“一本实地指南，而非一个仪表盘”。
2. 反目标（Anti-goals）。 3 到 5 个本页面绝不能看起来像的东西（如果不符合简报，最好包含你通常会生成的通用默认样式：居中英雄区、紫色渐变、三个图标卡片等）。
3. 字体系统（Type system）。 字体家族及其角色（展示、正文、界面、可选等宽），大小比例（1440px 和 390px 宽度下的 px 值）、行高、字距、大小写。使用项目可以合法加载的字体（开源许可家族或用户已获授权的字体）。库中的字体项用于指导分类和配对；它不授予使用许可。如果预算允许，使用 suggest_pairing(font_id) 会有所帮助。
4. 调色板（Palette）。 带有角色的十六进制值（背景、表面、正文、弱化正文、强调色、状态色）以及每个文本配对产生的对比度。可选运行 analyze_palette(hexes) 或 generate_palette(color) 来生成色阶。
5. 布局和网格（Layout and grid）。 列数、最大内容宽度、间距、部分间距节奏、对齐规则、断点。
6. 部分（Sections）。 页面顺序，每个部分的任务、从清单中承载的内容，以及参考的样张。
7. 图像和图形（Imagery and graphics）。 已有的视觉素材、将要创建的内容（图表、裁剪、插画风格）、需避免的内容。
8. 动效（Motion）。 何处需要动效以帮助理解、持续时间和缓动函数、以及针对减少动效模式的回退。默认尽量少用。
9. 标志性细节（Signature detail）。 一个令人难忘、可实现的处理方式，源自某个样张并进行了重新诠释，而非复制。

向用户简短展示概念线、反目标和标志性细节。除非用户提出异议或要求先审批，否则继续。

步骤 6：构建

• 使用项目的技术栈和组件。如果没有项目，则构建一个静态的 index.html，包含内联 CSS（和少量的 JavaScript）。
• 从设计令牌开始：使用设计方向中的 CSS 自定义属性来定义字体比例、间距、颜色和圆角。然后按页面顺序构建各个部分。
• 使用清单中的真实内容。如果内容缺失，使用明确标记的占位符；切勿凭空捏造客户logo、推荐语、指标或奖项并将其视为真实内容。
• 语义化 HTML：一个 h1、有序的标题层级、每个有意义的图片添加 alt 属性、可见的焦点状态、输入元素添加标签。
• 同时构建移动端和桌面端；边构建边检查 390px 宽度的效果，不要留到最后。

步骤 7：查看与修复循环

阅读 references/critique.md 了解评分标准。然后，最多进行 3 轮：

1. 渲染（Render）。 运行本技能文件夹（包含此 SKILL.md 的文件夹）中的检查器： node <skill-folder>/scripts/inspect.mjs <url-or-html-path> --out .inspiration-out/round-<n> 这将生成 page-1440.png， page-390.png 和 report.json（包含使用的字体、文本和背景颜色、标题大小、度量、溢出、缺失的 alt 文本、低对比度样本）。如果缺少 Playwright，它会打印一行修复命令（npx -y -p [email protected] node <skill-folder>/scripts/inspect.mjs ...）。如果宿主有自己的浏览器或截图工具，也可以使用。
2. 查看（Look）。 打开截图并阅读报告。将每个部分与其引用的样张进行比较，将整个页面与概念线和反目标进行比较。
3. 评分（Score）。 对评分标准的每一行进行 0 到 2 分的评分，并列出最明显的 3 个问题。将评分和问题写入 .inspiration/direction.md 的“Round ”部分下。
4. 修复（Fix）。 修复这 3 个问题，然后重新渲染。

当每个评分项都达到 2 分、完成第 3 轮，或一轮未产生实质性变化时停止。如果完全无法运行浏览器，则依据评分标准审查代码，如果用户能提供截图则请求用户截图，并明确说明未进行视觉检查。

步骤 8：交付

简要告知用户：

• 构建了何种内容、存放位置，以及概念线。
• 使用的参考：ID、标题和链接 https://inspiration.vasa.works/item/<id>，每个参考及其贡献的一项内容。
• 最后一轮检查器报告仍指出的问题（如有）。
• 本轮运行大约使用的计量调用次数，以及任何被跳过或降级的步骤（服务器错误、image_url 回退、配额限制）。
• 询问：“是否要将这些参考保存到 Inspiration 画板？”仅在用户同意后，调用 save_to_board(title, ids=[...]) 并分享返回的画板 URL。

配额与错误

当工具首次返回错误、quota_exhausted 或 capped 时，阅读 references/library-rules.md。简而言之：quota_exhausted 会停止所有计量调用（链接至 https://inspiration.vasa.works/pricing，用已有资源完成工作），`capped` 表示无法获取更多页面，subscription_required 表示需要登录（步骤 0），两个不同工具上出现相同的服务器错误意味着进入降级模式。出错的调用会计入预算。

无库模式

当 MCP 未连接（已提供一次设置步骤）且用户未要求先连接时：

• 明确说一次：“正在无 Inspiration 库模式下继续，因此本设计方向并非基于参考。”
• 跳过步骤 2 到 4。不要虚构参考 ID、标题、链接或描述，也不要声称某个外观来自某个参考。
• 仅基于简报编写 .inspiration/direction.md，并在顶部注明“未使用参考”。保留反目标和标志性细节等部分。