在使用 AI 辅助开发时，开发者常遇到一个共性问题：生成的界面虽然功能完整，但视觉表现往往缺乏专业感，呈现出明显的'机器味'。这并非个例，而是当前 AI 编程工具普遍存在的痛点。
经过多次验证，我们发现通过特定的提示词策略和插件配合，可以显著改善这一状况。不需要手写 CSS，就能让 AI 生成媲美专业设计师的 UI 界面。下面分享具体的实践步骤。
实验准备
工具与环境
- Claude Code (2.0.55) 底层模型为 Minimax-M2。
- Frontend Design Skills 插件
用于增强 AI 的前端设计能力。
- 启动终端并运行
/plugin命令 - 选择 'Add Marketplace'
- 输入仓库名
anthropics/claude-code - 选择 'Browse and install plugins'
- 安装
frontend-design插件
- 启动终端并运行
实验目标
我们设计了一个对比实验，使用同一个需求提示词，在不同条件下测试 AI 生成 UI 的效果。
实验任务：创建一个 Todo List 单页面应用
为了确保 AI 理解准确，我们构建了一个结构化的提示词模板，涵盖技术栈、数据持久化、兼容性要求及核心功能点：
Create a production-ready, single-page Todo List application using pure HTML, CSS, and JavaScript (ES6+). The application must be entirely self-contained within one html file.
Technical Requirements
● Frontend Only: Use pure HTML5, CSS3, and vanilla JavaScript (ES6+). No external frameworks or libraries.
● Data Persistence: Implement using browser's LocalStorage. All data should persist after page refresh/close.
● Browser Compatibility: Support modern browsers (Chrome, Firefox, Safari, Edge latest versions).
● Code Quality: Clean, modular, well-commented code following best practices.
Core Features
1. Task Management (CRUD Operations):
○ Add new tasks (title required, optional description, priority, due date)
○ Edit existing tasks (inline or modal editing)
○ Delete tasks (single and bulk delete completed tasks)
○ Mark tasks as complete/incomplete (checkbox toggle)
2. Task Attributes:
○ Title (required), Description (optional), Priority levels (High/Medium/Low), Due date (date picker), Completion status, Creation timestamp
3. View & Filtering:
○ Filter tasks: All, Active, Completed
○ Sort by: Priority, Due date, Creation time
○ Real-time search (title and description)
4. User Interface:
○ Responsive design (mobile-first approach)
○ Clean, modern aesthetic
○ Intuitive interactions with visual feedback
UI/UX Specifications
● Layout: Clean, card-based design with clear visual hierarchy
● Color Scheme: Professional palette
● Typography: System font stack with proper hierarchy
● Interactions: Smooth transitions, hover effects, loading states
● Accessibility: WCAG 2.1 AA compliant, keyboard navigable
Implementation Details
● Use semantic HTML5 elements
● CSS Grid/Flexbox for layouts
● ES6+ modules for code organization
● LocalStorage for data persistence
● Proper error handling and edge cases
Delivery Format
Provide one complete page file with all CSS and JavaScript embedded. The file should run immediately when opened in a browser.
Evaluation Criteria: Code quality, functionality completeness, design execution, and adherence to specifications.
实验一：基础 AI 生成
条件：直接使用 Claude Code，不使用任何额外技能。
操作：将上述提示词直接输入。
结果：
小结：功能完整，但 UI 设计确实很'AI 味'，典型的蓝紫色配色，布局平淡无奇。
实验二：加入 Frontend Design Skills
条件：使用 Frontend Design Skills + 自定义颜色配置。
关键点：颜色配置是避免'蓝紫色'的关键。这里采用了 Coolors 选定的专业色板，并在提示词中明确要求。
配色方案：
/* CSS HEX */
--dark-teal: #114b5fff;
--sea-green: #1a936fff;
--celadon: #88d498ff;
--tea-green: #c6dabfff;
/* CSS HSL */
--dark-teal:hsla(195, 70%, 22%, 1);
--sea-green:hsla(162, 70%, 34%, 1);
--celadon:hsla(133, 47%, 68%, 1);
--tea-green:hsla(104, 27%, 80%, 1);
提示词调整：在原有需求基础上附加颜色要求和技能调用。
结果：
小结：UI 明显提升！配色和谐，有设计感。观察 AI 的思考过程，它会随机加入风格提示词（如'Aesthetic Direction: Organic & Refined'）。
实验三：增加风格控制
条件：在实验二基础上，明确指定设计风格方向。
测试了两种风格：
风格 A：极简主义 (Minimalism)
提示词：在需求后添加 use aesthetic direction: Minimalism。
结果：非常讨喜，有设计味道。
风格 B：暗黑模式 (Dark Mode)
提示词：在需求后添加 use aesthetic direction: Dark Mode。
结果：秒变赛博朋克风格。
小结：风格控制非常有效！同一个功能，不同风格呈现完全不同感觉。可以根据项目需求选择合适的风格方向。
效果对比
| 对比维度 | 实验 1：基础 AI | 实验 2：+ Frontend Design Skills | 实验 3：+ 风格控制 |
|---|---|---|---|
| 配色方案 | 默认蓝紫色（丑） | 专业配色（好看） | 专业配色 + 风格化 |
| 设计感 | 平淡无奇 | 有设计感 | 风格鲜明 |
| 布局 | 普通 | 更专业 | 专业 + 个性化 |
| 整体感受 | 💩 AI 味很重 | 🌞 明显提升 | 🚀 专业级别 |
| 推荐指数 | ⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
总结与建议
经过三轮实验，得出以下结论：
- Frontend Design Skills 是关键 不使用插件时，UI 充满'AI 味'；使用后，UI 立即提升，具备专业设计感。
- 颜色配置很重要 AI 默认配色通常不佳。提供专业配色方案，AI 会严格执行。推荐使用 Coolors 等工具选取配色。
- 风格控制是点睛之笔 同一功能，不同风格完全不同感觉。精准控制最终效果只需在提示词中指定方向。
想要告别 AI 味，你只需要：
- 安装 Frontend Design Skills
- 准备一套配色方案
- 指定设计风格方向
就这么简单！不需要手写任何 CSS，AI 就能生成专业级 UI。
