Appearance
如何将模糊的 UI 想法优化为高质量的 AI 生成提示词
解决 UI 生成效果不理想的问题：通过将模糊的描述转化为包含平台定义、视觉风格、色彩方案和页面结构的结构化提示词，大幅提升 AI 生成界面的精准度。
为什么需要这个技能
在利用 AI 生成 UI 界面时，简单的指令（如“做一个登录页面”）往往会导致结果过于通用，缺乏品牌感且不符合具体业务场景。
高质量的 UI 生成需要极高的确定性。本技能通过一套标准化的“增强流水线”，将模糊的意图补充为专业的 UI/UX 术语，并引入设计系统（Design System）的概念，确保 AI 能够理解组件层级、色彩角色（Color Role）以及视觉氛围，从而产出可直接用于生产环境的界面原型。
适用场景
- 在将需求发送给 Stitch 等 UI 生成工具前，需要润色提示词。
- 之前的生成结果过于简陋，需要增加设计细节和专业度。
- 希望在多个生成页面之间保持视觉一致性（例如统一色调和圆角）。
- 将简单的功能点（如“增加搜索框”）转化为具体的 UI 实施方案。
核心工作流
- 输入评估：检查原始需求中是否缺失平台（Web/Mobile）、页面类型、视觉风格和具体组件定义。
- 注入设计上下文：优先检索项目中的
DESIGN.md文件。如果存在，则直接提取色板和字体定义；如果不存在，则根据需求建议一套专业的设计方案。 - 术语升级：将模糊词汇替换为专业 UI 术语。例如将“顶部的菜单”改为“带有 Logo 和导航项的 Navigation Bar”，将“按钮”改为“Primary CTA Button”。
- 构建结构化输出：按照以下固定格式重新组织提示词：
- 页面目标：一句话描述目的与氛围。
- 设计系统 (REQUIRED)：定义平台、主题、背景色、主色调（含 Hex 码）及文本颜色。
- 页面结构：按序号详细拆解 Header、Hero Section、Content Area 和 Footer 等区域。
下载和安装
下载 enhance-prompt 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐