【2026】用 component.gallery 让 AI 的 UI 生成指示大幅提升！组件术语图鉴的活用方法

---

「让 AI（Claude Code 或 Cursor）『做个好看点的画面』，但总觉得差点意思…。说明传达不好」

你有过这种经历吗？

其实，让 AI 制作 UI（画面）时最有效的是，在指示中正确放入**「组件名称（术语）」**——比如「Accordion（手风琴）」「Modal（模态框）」「Card（卡片）」。而汇总这些术语的正确含义与实例的免费网站，就是 The Component Gallery。

本文结合实例，向初学者解说这个网站的看点，以及如何用于向 AI 下指示（提示词）。

读完本文你将了解：

• component.gallery 是什么样的网站
• 为什么使用「组件名称」会让 AI 的输出变好
• 实际应该怎么写提示词
• 如何在日常 AI 活用中引入

---

component.gallery 是什么样的网站？

• 按「组件名」汇总 UI 组件术语与实例的免费网站
• 可以确认 Accordion・Modal・Card 等术语的正确含义与设计实例
• 是给 AI 下指示时的「术语图鉴」

---

为什么使用组件名会让 AI 的输出变好

• 「做个像那样的东西」这种模糊指示，AI 无法理解
• 明确说出「Accordion」「Modal」等组件名，AI 就能输出正确的结构
• 术语 = 与 AI 共享的词汇

---

实际的提示词示例

不好的示例：

做个可以展开收起的列表

好的示例：

用 Accordion 组件做 FAQ 区块。每个项目都可以展开・收起。

---

总结

• 在给 AI 的指示中放入组件名，UI 生成质量会大幅提升
• The Component Gallery 是确认术语正确含义的免费「术语图鉴」
• 在日常 AI 活用中，养成「先查术语再指示」的习惯

---

相关阅读

• Claude Fable 5 金融资产管理实践指南
• Cloudflare Monetization Gateway 完全指南
• A Fable of Codexes 完全指南
• GPT-Live 完全指南
• ChatGPT vs Claude vs Gemini 彻底比较