怎么避免用 ai 写的 UI 代码全都是 emoji？

Question

用 opencode + mimo v2.5pro 写了一个视频播放器，用的是 electron 框架

但是好丑啊，配色就很丑，而且都是 emoji，这种 emoji 感觉回到了上个世纪

Answer 1

省流，让 AI 用图标库。

以下内容来自 AI：

---

看到这张图真的让人会心一笑。这可以说是目前用 AI 搓前端（尤其是快速原型开发）时最经典、最让人抓狂的痛点之一了。

AI 极其喜欢用 Emoji 当图标，因为对大模型来说，Emoji 是零依赖、纯文本、自带语义的万金油方案，能用最少的代码让界面“看起来有功能”。但正如吐槽所说，出来的视觉效果往往带着一股浓浓的“上世纪复古风”，极其粗糙。

要彻底解决 AI 代码里“满屏 Emoji”和“配色辣眼睛”的问题，核心在于在 Prompt 中打破 AI 的惰性，给它树立明确的现代设计规范。

---

为什么 AI 写的 UI 这么丑？

• 路径依赖： AI 在没有受到严格限制时，会选择“最不容易报错”的方案。引入外部图标库（如 FontAwesome、Lucide）可能需要配置 CDN 或 npm 包，AI 为了省事，直接手写原生 CSS 和 Emoji。
• 缺乏审美常识： 除非你指定色板，否则 AI 默认的“深色模式”就是单纯的 #000000 或 #1a1a1a 加上高饱和度的纯红（#ff0000）、纯蓝（#0000ff），没有任何色彩层次。

---

彻底告别 Emoji 的“调教”指南

1. 强制要求使用现代图标方案

别让 AI 自己做决定。在提需求时，明确指定它必须使用以下两种方案之一：

• 方案 A：高质感 inline SVG（最推荐，零依赖）
  直接命令 AI 编写原生的内联 SVG。现代 AI（如 Claude 3.5 Sonnet、GPT-4o）的 SVG 绘制能力非常强。

  Prompt 指令： “绝对不要使用任何 Emoji 作为图标。所有按钮和操作栏的图标必须使用现代、极简风格的 inline SVG 实现，线条粗细保持一致（如 stroke-width="2"），并带有平滑的转角。”

• 方案 B：现代第三方图标库
  如果你允许引入外部库，直接塞给它一个 CDN 地址或指定包名。

  Prompt 指令： “请引入 Lucide Icons (或 FontAwesome / Heroicons)。所有图标一律使用该库中的组件，严禁出现 Emoji。”

2. 注入“设计系统”与色板（解决配色丑）

AI 是不懂什么是“高级感”的，除非你把色彩的十六进制代码（Hex）喂到它嘴里。你可以给它一套成熟的现代设计规范：

Prompt 指令：
“请使用现代、精致的 UI 设计风格（类似 Tailwind UI 或 Linear APP）。
色彩规范：

• 主背景：深邃暗色（如 #0B0F19），不要用纯黑。
• 次级面板/卡片：#1E293B
• 主色/高亮（播放进度、高亮按钮）：充满活力的科技蓝（如 #3B82F6）或紫色，配合轻微的渐变。
• 文字：主文字 #F8FAFC，次要文字 #94A3B8。”

3. 使用“负向提示词”（Negative Prompting）

在 Prompt 的结尾，加入强烈的规则约束，通常能够有效压制 AI 的“偷懒”行为。

禁令模块：
“【绝对禁止】

1. 严禁在任何地方使用 📁、▶️、⚙️ 等 Unicode Emoji。
2. 严禁使用 Windows 98 风格的粗边框或高饱和度原生三原色。
3. 页面布局不要使用生硬的单线边框，多用阴影（box-shadow）和 subtle（微弱）的渐变来拉开层次。”

---

现成可用的 Prompt 修复模板

如果 AI 已经帮你写好了一个像图里这样“满是 Emoji”的结构，你可以把代码丢给它，并附上这段话进行一键重构：

你现在是一个顶级的前端视觉设计师和资深开发者。
请重构上方代码中的 UI 视觉部分，保持原有业务逻辑和功能完全不变，但进行以下升级：

1. 拔掉所有丑陋的 Emoji，全部替换为极简、现代、线条感强烈的内联 SVG 图标（保证 width/height 和线条粗细一致）。
2. 彻底抛弃目前的粗糙配色。参考现代高端暗黑模式软件（如 Spotify、Cursor），使用精致的渐变、细腻的边框（border-slate-800）和毛玻璃效果（backdrop-blur）。
3. 优化间距（padding/margin）与圆角（统一使用类似 rounded-xl 的现代圆角），让整体布局呈现出高级、工业级的精致感。

经过这样一番约束，AI 产出的代码视觉质量通常会有质的飞跃。

Answer 2

直接跟他说：代码中不要出现任何emoji表情，图标的话使用https://lucide.dev/icons/

或者写 AGENTS.md