# Ziliu Content Distribution

> Multi-platform content distribution automation tool.

- Skill: `xianyu110/ziliu-content-distribution` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add xianyu110/ziliu-content-distribution`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xianyu110/ziliu-content-distribution/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xianyu110 (https://skillmd.com/u/xianyu110)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xianyu110/ziliu-content-distribution

---


# AI 网站 UI 设计优化助手

## 技能简介

帮助开发者识别和优化 AI 生成的网站 UI 设计，去除"AI 味儿"，提升网站视觉质量和专业度。

## 核心问题

AI 开发的网站通常存在以下典型问题：

### 1. 蓝紫渐变色泛滥
- 按钮、导航栏背景色千篇一律使用蓝紫渐变
- Claude Code 尤其偏爱这种配色方案
- 缺乏品牌特色和视觉差异化

### 2. Emoji 图标滥用
- 用 emoji 作为图形元素虽然简单直接
- 但不同平台呈现不一致，无法保证 UI 统一性
- 常见 emoji 有限，容易审美疲劳

### 3. 圆角矩形卡片堆叠
- 圆角矩形本身没问题，但 AI 特别喜欢滥用
- 满屏的圆角卡片堆叠，视觉单调
- 缺乏层次感和设计感

### 4. 布局常规缺乏创新
- 页面布局千篇一律
- 重复率高，缺乏创意
- 没有独特的视觉记忆点

## 解决方案

### 方法一：参考优质设计模板（推荐）

**核心思路**：找到优秀的 UI 设计案例，让 AI 参考学习

**推荐资源**：
- **Aura.build** (https://www.aura.build/)
  - 内置大量精美的网站 UI 交互设计 demo
  - 每个案例都提供源代码
  - 涵盖网站开发、移动端开发各类场景
  - 包含基础组件：表格、图表、导航栏、侧边栏、对话框、登录框等
  - 部分精品需要 Pro 会员，但免费案例已足够使用

**使用流程**：

1. **浏览并选择设计模板**
   - 访问 Aura.build
   - 浏览设计案例，找到符合你项目风格的模板
   - 注意观察：配色方案、布局结构、交互细节

2. **下载源代码**
   - 点击网页右下角查看源代码
   - 下载完整的 HTML/CSS/JS 代码

3. **让 AI 参考重构**
   - 将下载的源代码提供给 AI（Claude Code、Cursor 等）
   - 提示词示例：
     ```
     请参考这份设计代码的风格，重构我的网站首页。
     保持类似的配色方案、布局结构和交互效果。
     
     参考代码：[粘贴下载的代码]
     
     我的网站需求：[描述你的需求]
     ```

4. **迭代优化**
   - 查看 AI 生成的结果
   - 根据需要调整细节
   - 可以混合多个模板的优点

### 方法二：使用 Aura.build 的 AI 设计功能

**特点**：
- 集成了 Gemini 3（前端能力强）
- 内置 Prompt Builder，可自定义布局、样式
- 直接生成符合现代设计规范的 UI

**使用步骤**：

1. 访问 Aura.build 的 AI 设计界面
2. 点击输入框左下角的 "Prompt Builder"
3. 自定义选项：
   - 布局类型（单栏、多栏、网格等）
   - 配色方案（避免蓝紫渐变）
   - 组件风格
   - 交互效果
4. 输入你的设计需求
5. 生成并下载代码

## 实战案例

### 案例 1：个人网站首页改造

**改造前问题**：
- 蓝紫渐变色导航栏
- 大量 emoji 图标
- 圆角卡片堆叠
- 布局常规

**改造方案**：
1. 在 Aura.build 找到暗黑风格的设计模板
2. 下载源代码
3. 提示 Claude Code：
   ```
   请参考这份代码的设计风格，重构我的个人网站首页。
   保持暗黑主题、现代感的布局和流畅的动画效果。
   ```

**改造后效果**：
- 去除蓝紫渐变，采用暗黑主题
- 用 SVG 图标替代 emoji
- 优化卡片布局，增加层次感
- AI 味儿明显减少

### 案例 2：SVG 动画网站

**需求**：创建一个 SVG 动画生成网站

**实现方案**：
1. 在 Aura.build 找到动画展示类模板
2. 参考其交互设计和视觉效果
3. 结合自己的功能需求进行定制

**成果**：
- 现代化的 UI 设计
- 流畅的动画效果
- 专业的视觉呈现
- 网站地址：https://svganimate.ai

## 使用建议

### 配色方案选择
- ❌ 避免：蓝紫渐变（AI 默认选择）
- ✅ 推荐：
  - 暗黑主题（黑色 + 强调色）
  - 温暖色系（橙色、黄色系）
  - 品牌色系（根据品牌定位）
  - 单色 + 强调色（简洁专业）

### 图标使用
- ❌ 避免：emoji 图标
- ✅ 推荐：
  - SVG 图标库（Heroicons、Lucide、Font Awesome）
  - 自定义 SVG 图标
  - 图片素材（保证跨平台一致性）

### 布局设计
- ❌ 避免：满屏圆角卡片堆叠
- ✅ 推荐：
  - 混合使用不同组件类型
  - 增加留白和呼吸感
  - 使用网格系统
  - 添加视觉层次（阴影、边框、背景）

### 提示词技巧

**基础模板**：
```
请参考 [模板来源] 的设计风格，为我的 [项目类型] 设计 UI。

设计要求：
1. 配色：[具体配色方案]
2. 布局：[布局类型]
3. 风格：[现代/简约/科技感等]
4. 避免：蓝紫渐变、emoji 图标、过度使用圆角卡片

参考代码：
[粘贴参考代码]

我的需求：
[详细描述功能和内容]
```

**进阶技巧**：
- 提供多个参考案例，让 AI 融合优点
- 明确指出要避免的 AI 常见问题
- 提供具体的配色代码（HEX/RGB）
- 描述目标用户和使用场景

## 资源清单

### 设计模板平台
- **Aura.build** - https://www.aura.build/
  - 优点：源代码直接可用，质量高
  - 适合：快速参考和学习

### 图标资源
- **Heroicons** - https://heroicons.com/
- **Lucide** - https://lucide.dev/
- **Font Awesome** - https://fontawesome.com/

### 配色工具
- **Coolors** - https://coolors.co/
- **Adobe Color** - https://color.adobe.com/

### 设计灵感
- **Dribbble** - https://dribbble.com/
- **Behance** - https://www.behance.net/
- **Awwwards** - https://www.awwwards.com/

## 工作流程

### 新项目 UI 设计

1. **明确设计需求**
   - 项目类型（官网、工具、博客等）
   - 目标用户
   - 品牌调性
   - 功能重点

2. **寻找参考模板**
   - 在 Aura.build 浏览相关案例
   - 选择 2-3 个符合风格的模板
   - 下载源代码

3. **提供给 AI**
   - 使用结构化提示词
   - 附上参考代码
   - 明确避免的问题

4. **迭代优化**
   - 检查是否有 AI 味儿
   - 调整配色和布局
   - 优化细节

### 现有项目 UI 改造

1. **诊断问题**
   - 是否有蓝紫渐变？
   - 是否滥用 emoji？
   - 是否圆角卡片堆叠？
   - 布局是否单调？

2. **选择改造方向**
   - 找到目标风格的参考案例
   - 确定配色方案
   - 规划布局调整

3. **执行改造**
   - 提供参考代码给 AI
   - 明确改造重点
   - 保持功能不变

4. **验证效果**
   - 对比改造前后
   - 检查 AI 味儿是否减少
   - 测试跨平台一致性

## 注意事项

### 版权问题
- ✅ Aura.build 的代码可以用于学习和参考
- ✅ 可以借鉴设计思路和布局结构
- ❌ 不要完全照搬，要根据自己需求调整
- ❌ 商业项目注意查看具体的使用许可

### 性能优化
- 参考代码可能包含复杂动画和效果
- 根据实际需求简化
- 注意移动端性能
- 优化加载速度

### 响应式设计
- 确保参考的设计支持响应式
- 测试不同屏幕尺寸
- 移动端优先考虑

## 成功标准

一个成功去除 AI 味儿的 UI 设计应该：

- ✅ 配色独特，不是蓝紫渐变
- ✅ 图标统一，不用 emoji
- ✅ 布局有层次，不是单调堆叠
- ✅ 有品牌特色和记忆点
- ✅ 视觉专业，符合现代设计规范
- ✅ 用户体验流畅

## 总结

去除 AI 生成网站的"AI 味儿"，核心是：

1. **识别问题**：蓝紫渐变、emoji、圆角卡片、布局单调
2. **找到参考**：使用 Aura.build 等优质设计资源
3. **让 AI 学习**：提供参考代码，明确设计要求
4. **迭代优化**：检查效果，持续改进

记住：好的 UI 设计不是 AI 自己想出来的，而是学习优秀案例后的创新组合。