在使用 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.
