解决 AI 生成 UI 审美问题
很多开发者在使用 AI 生成前端页面时，常会遇到界面设计过于生硬、配色廉价的问题。这通常是因为模型默认倾向于使用蓝紫色调且缺乏布局层次感。好消息是，通过调整提示词策略和引入特定技能插件，无需手写 CSS 也能获得接近专业设计师的视觉效果。
实验环境与工具
本次实践基于 Claude Code 环境，底层模型为 Minimax-M2。为了提升 UI 质量，我们需要安装 frontend-design 插件。
在终端启动 Claude Code 后，输入 /plugin 命令，选择 "Add Marketplace"，输入仓库名 anthropics/claude-code，随后浏览并安装 frontend-design 插件即可。
实验目标与基准测试
我们构建了一个 Todo List 单页面应用作为测试对象，要求包含完整的增删改查、本地存储持久化及响应式布局。所有实验均使用同一份标准需求提示词，以确保变量可控。
基础 AI 生成效果
直接使用原始提示词，不添加任何额外配置。生成的代码功能完整，但视觉表现存在明显短板：典型的蓝紫色配色方案，布局平淡，缺乏现代感。
引入配色方案
AI 默认的配色往往不够协调。我们可以借助 Coolors 等在线工具选取一套专业的配色方案，并将其嵌入提示词中。
例如，选用一套以深青色和绿色为主的色系：
/* CSS HEX */
--dark-teal: #114b5fff;
--sea-green: #1a936fff;
--celadon: #88d498ff;
--tea-green: #c6dabfff;
在提示词中明确指定颜色要求，并强制使用 frontend-design skill。此时生成的界面色彩和谐度显著提升，布局更加专业，彻底摆脱了廉价的'机器味'。
增加风格控制
除了配色，明确的设计风格指令能让结果更具个性。我们在上述基础上，分别测试了两种风格方向。
极简主义 (Minimalism)
提示词中加入 use aesthetic direction: Minimalism。结果呈现出干净利落的卡片式设计，留白得当，非常适合注重效率的工具类应用。
暗黑模式 (Dark Mode)
提示词中加入 use aesthetic direction: Dark Mode。界面瞬间转变为深色主题，对比度强烈，带有赛博朋克风格的科技感。
效果对比与结论
| 维度 | 基础 AI | + 配色方案 | + 风格控制 |
|---|---|---|---|
| 配色 | 默认蓝紫 | 专业定制 | 风格化定制 |
| 设计感 | 平淡 | 有质感 | 鲜明独特 |
