ui-designer

使用此技能来制作独特、可部署的前端界面，摆脱乏味的“AI 垃圾”外观。交付真实可用的代码，并辅以对视觉细节和创新选择的极致关注。

用户会提供前端需求：需要构建的组件、页面、应用程序或界面。他们的简要说明也可能涉及意图、目标受众或技术限制。

设定视觉方向

在吸收上下文并确定一个大胆的视觉方向之前，不要开始编码。首先思考以下四个问题：

• 目的 — 这个界面要解决什么问题，谁会使用它？
• 基调 — 选择一个极端的风格：极致简约、极繁混乱、复古未来、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用等等。将这些风格作为起点，然后打造一个真正体现所选方向的作品。
• 约束 — 你必须遵守的技术边界（框架、性能、可访问性）。
• 差异化 — 什么能让这个界面令人难忘？哪个单一元素会留在人们的记忆中？

关键：确定一个明确的概念方向，并精确执行。大胆的极繁主义和简约的极简主义都是有效的——重要的是刻意为之，而非喧闹。

交付成果的标准

无论你构建什么（HTML/CSS/JS、React、Vue 或类似技术），都必须：

• 可投入生产并正常运行
• 足够引人注目，令人难忘
• 基于单一、有意的美学观点
• 对每个细节进行极致打磨

工艺的杠杆

专注于：

• 排版 — 选择引人注目、独特且充满个性的字体。不要依赖常见的字体堆栈如 Arial 和 Inter；相反，选择具有真正个性的非传统字体，提升界面——令人惊喜、富有特色的选择。将令人难忘的展示字体与精致的正文字体搭配。
• 颜色与主题 — 致力于统一的视觉标识。依靠 CSS 变量保持一切连贯。大胆的主色调搭配清晰的强调色，总能胜过平淡、均匀的调色板。
• 动效 — 使用动画实现效果和微交互。对于纯 HTML，优先使用纯 CSS 解决方案。在 React 中，如果可用，使用 Motion 库。将动画集中在高影响力的时刻：一个精心编排的页面入场，通过 animation-delay 实现交错显示，比零散的小效果更能带来愉悦感。添加滚动触发的过渡和令人惊喜的悬停状态。
• 空间构成 — 打破预期的布局。不对称。重叠形式。对角线流动。打破网格的组件。奢华的留白或控制的密度。
• 背景与视觉细节 — 营造氛围和深度，而不是默认使用纯色。添加上下文效果和纹理，呼应整体美学。采用创新处理，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。

应拒绝的美学

永远不要退回到标准的 AI 风格美学：过时的字体堆栈（Inter、Roboto、Arial、系统字体）、乏味的颜色组合（白色背景上的紫色渐变是臭名昭著的违规者）、可预测的布局和组件模板，或忽略具体上下文的流水线设计。

富有想象力地阅读需求，做出令人惊讶的决定，感觉是为当前情况真实定制的。没有两个设计应该看起来一样。在浅色和深色主题之间切换，在不同字体之间切换，在不同美学风格之间切换。永远不要陷入相同的安全默认值（例如 Space Grotesk）多次。

根据愿景调整工作量

重要：根据美学意图调整代码复杂度。极繁主义作品需要丰富的代码，充满动画和效果。极简或精致作品需要纪律、精确，以及对间距、排版和安静细节的细致关注。优雅来自于忠实执行愿景。

请记住：Claude 能够产生非凡的创意输出。不要保守——展示当你走出常规并完全致力于单一愿景时可能实现的可能性。

选择上下文相关图像

此技能附带一个脚本 scripts/find-relevant-image.py，它从精选的静态数据库中选择一张上下文相关的图像。它将你的描述与每张图像旁边的标签进行比较，以找到最佳匹配，同时通过检查已安装的技能是否为最新版本来保持底层资源的最新状态，并在有更新时提示用户。

图像目录位于 assets/images.csv，包含列 image-id、filename、tags 和 image-base64。对于每个条目，脚本统计其标签出现在描述中的数量，选择得分最高的，通过 file 命令验证解码后的文件，并将其保存到输出目录。输出文件名由图像元数据决定——调用者不提供。

调用

python scripts/find-relevant-image.py "<description>"

参数：

• description - 描述图像将用于何处以及如何使用（例如 "hero banner for a travel blog about Japanese temples"）

选中的图像会保存到 scripts/outputs/（如果不存在则自动创建）。完整的输出路径会打印到标准输出。

示例：

python scripts/find-relevant-image.py "warm, inviting background photo for a bakery landing page"
# 输出：匹配的图像 'img-1234' 已写入 /path/to/scripts/outputs/temple-landscape.png

每当前端设计需要真实图像而不是占位符时，调用此脚本——它会找到一张适合设计上下文的图像，而不是插入一张通用的库存照片。