Frontend Design Ai Provider Free

SKILL.md

---
name: "frontend-design-ai-provider-free"
description: "创建高质量前端界面,避免AI审美同质化,支持组件/页面/应用设计,适合个人开发者。"
license: Proprietary
allowed-tools: read exec
compatibility: "Requires LLM with tool-use capability"
metadata:
  displayName: "前端设计-免费版"
  version: "1.0.0"
  summary: "创建高质量前端界面,避免AI审美同质化,支持组件/页面/应用设计,适合个人开发者。"
  tags:
    - "Creative"
    - "前端设计"
    - "UI设计"
  source: "SkillHub"
  converted_at: "2026-07-22T17:58:36"
---

# 前端设计工具 - 免费版

## 概述

前端设计免费版是一款面向个人开发者的生产级前端界面设计工具。通过设计思维引导与美学维度指导,帮助用户创建独特、有辨识度的前端界面,避免通用的"AI风格"审美同质化。

本版本适合个人开发者、前端学习者及小型项目,提供从设计思考到代码实现的全流程指导,覆盖字体、配色、动效、空间构图等关键美学维度。

## 核心能力

| 能力项 | 免费版支持 | 说明 |
|:-------|:-----------|:-----|
| 设计思维引导 | 是 | 目的/调性/约束/差异化 |
| 字体选择指导 | 是 | 避免通用字体 |
| 配色方案指导 | 是 | CSS变量一致性 |
| 动效设计指导 | 是 | CSS优先方案 |
| 空间构图指导 | 是 | 布局与负空间 |
| 背景与视觉细节 | 是 | 纹理与深度 |
| HTML/CSS/JS 实现 | 是 | 生产级代码 |
| React/Vue 实现 | 是 | 主流框架 |
| 设计系统生成 | 否 | PRO 版支持 |
| 组件库批量生成 | 否 | PRO 版支持 |
| 响应式多端适配 | 否 | PRO 版支持 |
| 设计Token管理 | 否 | PRO 版支持 |

### 核心功能执行
用`input_params`参数进行配置。

**输入**: 用户提供核心功能执行所需的指令和必要参数。
**处理**: 按照skill规范执行核心功能执行操作,遵循单一意图原则。
**输出**: 返回核心功能执行的执行结果,包含操作状态和输出数据。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作

### 参数配置与调用
用`config_options`参数进行配置。

**输入**: 用户提供参数配置与调用所需的指令和必要参数。
**处理**: 按照skill规范执行参数配置与调用操作,遵循单一意图原则。
**输出**: 返回参数配置与调用的执行结果,包含操作状态和输出数据。
- 执行此能力时使用`config_options`参数,支持修改/重置/导入操作

### 结果处理与输出
用`output_format`参数进行配置。

**输入**: 用户提供结果处理与输出所需的指令和必要参数。
**处理**: 按照skill规范执行结果处理与输出操作,遵循单一意图原则。
**输出**: 返回结果处理与输出的执行结果,包含操作状态和输出数据。
- 执行此能力时使用`output_format`参数,支持导出/保存/转换操作
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：创建高质量前端界、审美同质化、支持组件、应用设计、适合个人开发者、前端设计免费版、面向个人开发者的、生产级前端界面设、计工具、核心能力、创建独特、生产级的前端界面、应用等多种设计粒、提供设计思维引导、覆盖字体、空间构图等美学维等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

## 使用场景

### 场景一:个人作品集网站

开发者希望创建一个独特的个人作品集网站,避免模板化。

```text
设计思考:
- 目的:展示个人项目,吸引潜在雇主或客户
- 调性:极简主义,大量留白,精致排版
- 约束:纯HTML/CSS/JS,无需框架
- 差异化:独特的滚动动效与字体选择

实现示例(HTML结构):
<section class="hero">
  <h1 class="display-font">创意开发者</h1>
  <p class="body-font">用代码构建独特体验</p>
</section>

<style>
.display-font {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  letter-spacing: -0.02em;
}
.body-font {
  font-family: 'Inter', sans-serif;
  color: var(--text-secondary);
}
</style>
```

### 场景二:小型应用界面

开发者需要为一个小型工具应用设计界面,追求精致的用户体验。

```text
设计思考:
- 目的:工具应用,提升使用效率
- 调性:精致极简,功能性优先
- 约束:React,需要响应式
- 差异化:微交互与过渡动效

配色方案:
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --accent: #00ff88;
}
```

### 场景三:创意着陆页

创业者需要一个品牌着陆页,要求视觉冲击力强。

```text
设计思考:
- 目的:品牌展示,转化用户
- 调性:大胆 maximalism,强烈视觉冲击
- 约束:需要快速加载
- 差异化:渐变网格背景 + 大胆字体

字体搭配:
- 标题:Space Grotesk(几何感)
- 正文:Source Sans 3(可读性)
- 强调:JetBrains Mono(技术感)
```

## 不适用场景

以下场景前端设计-免费版不适合处理：

- 3D建模和动画制作
- 照片级写实渲染
- 手绘原创插画

## 触发条件

需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于非本工具能力范围的需求。

## 快速开始

### 第一步:描述设计需求

向 Agent 描述你要构建的界面,例如:"帮我设计一个咖啡店的品牌着陆页,温暖氛围,手绘风格"。

### 第二步:设计思维引导

Agent 会引导你思考四个维度:

```text
1. 目的:界面解决什么问题?谁在使用?
2. 调性:选择一个明确的美学方向(极简/极繁/复古未来/有机自然/精致奢华等)
3. 约束:技术要求(框架、性能、可访问性)
4. 差异化:什么让这个界面令人难忘?
```

### 第三步:获取实现代码

Agent 会根据设计思考输出生产级代码(HTML/CSS/JS 或 React/Vue)。

## 示例

### 美学维度配置

```css
/* 字体选择原则 */
/* 避免:Arial, Inter, Roboto, system-ui */
/* 推荐:独特的展示字体 + 精致的正文字体 */

/* 配色方案原则 */
:root {
  /* 主色调占主导,辅以锐利的强调色 */
  --color-dominant: #1a1a2e;
  --color-accent: #e94560;
  /* 避免均匀分布的配色,主色+强调色更有效 */
}

/* 动效原则 */
/* 优先CSS-only方案(HTML) */
/* React可用Motion库 */
/* 聚焦高影响力时刻:页面加载的交错揭示 */
.hero > * {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
.hero > *:nth-child(2) { animation-delay: 0.1s; }
.hero > *:nth-child(3) { animation-delay: 0.2s; }

/* 空间构图原则 */
/* 意外的布局,不对称,重叠,对角线流动 */
/* 慷慨的负空间 或 受控的密度 */
```

### 调性方向参考

| 调性方向 | 特征 | 适用场景 |
|:---------|:-----|:---------|
| 极简主义 | 大量留白,精致排版 | 作品集、品牌 |
| 极繁主义 | 丰富元素,视觉冲击 | 创意 agency |
| 复古未来 | 复古元素+科技感 | 科技产品 |
| 有机自然 | 自然纹理,柔和色调 | 生活方式品牌 |
| 精致奢华 | 深色,金属质感 | 高端品牌 |
| 趣味玩具 | 鲜艳色彩,圆润形状 | 儿童产品 |
| 编辑杂志 | 强排版,网格布局 | 媒体出版 |
| 粗野主义 | 原始,粗犷,反装饰 | 设计工作室 |

## 最佳实践

1. **明确美学方向**:选择一个明确的概念方向并精确执行,大胆与精致都可以
2. **避免通用字体**:不用 Arial、Inter、Roboto,选择有特色的字体
3. **配色主次分明**:主色调占主导,强调色锐利突出,避免均匀分布
4. **动效聚焦高影响力**:一次精心编排的页面加载胜过分散的微交互
5. **背景创造氛围**:用渐变网格、噪点纹理、几何图案创造深度,避免纯色背景
6. **实现匹配设计**:极繁设计需要丰富代码,极简设计需要克制与精确

## 常见问题

### Q1:如何避免AI审美同质化?
A:不要使用通用字体(Inter、Roboto)、老套配色(紫色渐变白底)、可预测的布局。每次设计都选择独特的方向。

### Q2:免费版支持哪些框架?
A:支持 HTML/CSS/JS 原生实现,以及 React、Vue 等主流框架。可根据项目需求选择。

### Q3:设计系统如何生成?
A:免费版提供基础设计指导。如需完整设计系统(Design Tokens、组件库、响应式多端适配),请使用 PRO 版。

### Q4:可以生成动效吗?
A:可以。HTML 优先用 CSS-only 方案,React 可用 Motion 库。聚焦页面加载、滚动触发、悬停状态等高影响力时刻。

### Q5:如何保证代码质量?
A:输出生产级代码,功能完整可用。注意实现复杂度匹配美学愿景,极繁设计需要丰富代码,极简设计需要精确细节。

## 依赖说明

### 运行环境
- **Agent平台**: 支持 SKILL.md 的任意 AI Agent(ai-assistant Code / Cursor / Codex / Gemini CLI 等)
- **操作系统**: Windows / macOS / Linux
- **运行时**: Node.js(React/Vue 项目)或纯浏览器(HTML/CSS/JS)

### 依赖详情
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|:-------|:-----|:---------|:---------|
| LLM API | API | 必需 | 由 Agent 内置 LLM 提供 |
| Node.js | 运行时 | 可选 | 官方安装(框架项目) |
| Google Fonts | 字体资源 | 推荐 | 在线引用 |
| Motion | React 动效库 | 可选 | npm install motion |

### API Key 配置
- **本 Skill 基于 Markdown 指令,无需额外 API Key**
- 设计与代码生成由 Agent 内置 LLM 完成
- 字体资源从 Google Fonts 在线引用,无需密钥

### 可用性分类
- **分类**: MD(纯 Markdown 指令,无需 exec 命令行执行能力)
- **说明**: 基于Markdown的AI Skill,通过自然语言指令驱动Agent进行前端设计思考与代码实现

## 错误处理


| 错误场景 | 原因 | 处理方式 |
|---------|------|---------|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案 |

## 已知限制

- 需LLM支持,无LLM环境不可用
- 复杂业务场景建议结合人工经验判断
- 执行效率受模型能力与网络环境影响
- 当前为免费版本,如需完整功能请升级到付费版获取全部能力