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 - 描述图像的用途和使用方式（例如，"用于介绍日本寺庙的旅游博客横幅图像"）

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

示例：

python scripts/find-relevant-image.py "warm, inviting background photo for a bakery landing page"
# Output: Matched image 'img-1234' written to /path/to/scripts/outputs/temple-landscape.png

只要前端设计需要真实图像而非占位符，就调用此脚本——它会找到符合设计语境的图像，而不是随意插入一张普通的图库照片。