---
slug: "anthropics-frontend-design-free"
name: "anthropics-frontend-design-free"
version: "1.0.0"
displayName: "前端设计LITE"
summary: "前端设计基础版,生成具有独特美学的HTML/CSS/JS前端界面,避免通用AI美学。前端设计创作基础客户端(免费版)。生成具有基本美学风格的 HTML/CSS/JS 前端代码, 覆盖排版字体"
summary_zh: "前端设计基础版,生成具有独特美学的HTML/CSS/JS前端界面,避免通用AI美学。前端设计创作基础客户端(免费版)。生成具有基本美学风格的 HTML/CSS/JS 前端代码, 覆盖排版字体"
license: "MIT"
description: |-
  前端设计创作基础客户端(免费版)。生成具有基本美学风格的 HTML/CSS/JS 前端代码,
  覆盖排版字体、配色主题、空间构图三大基础维度.
  核心理念是避免通用 AI 美学(Inter/Roboto 字体、紫色渐变白底、千篇一律的卡片布局).
  提供极简主义、编辑杂志、粗野主义、柔和粉彩四种基础美学方向.
  适用于个人开发者快速原型、学习前端设计、简单落地页制作场景.
tags:
  - 研发工具
  - 设计
  - UI/UX
  - 创意
  - css
  - html
  - 粗野主义
  - 基础
  - react
tools:
  - read
  - exec
  - write
homepage: ""
category: "Creative"
---
# 前端设计 LITE

前端设计基础版,生成具有基本美学风格的 HTML/CSS/JS 前端代码。避免通用 AI 美学,提供四种基础美学方向。仅支持 HTML/CSS/JS 技术栈.
**范围外**(本技能不做): React/Vue 组件生成、高级动效编排、复杂仪表盘设计、品牌视觉页、3D 建模(需升级付费版).
## 输入格式

| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| input | string | 是 | 前端设计LITE处理的输入数据或指令 |
| options | object | 否 | 附加配置选项,如模式选择、格式偏好等 |
| callback_url | string | 否 | 异步处理完成后的回调通知URL |

## 依赖说明

### 运行环境
- **Agent平台**: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
- **操作系统**: Windows / macOS / Linux

### 依赖项
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|:-----|:-----|:-----|:-----|
| LLM API | API | 必需 | 由Agent内置LLM提供 |

### API Key 配置
需要配置对应API Key，详见上文环境配置章节

### 可用性分类
- **分类**: MD+EXEC（）

**API Key配置方式**:
```bash
export API_KEY="your_api_key_here"
```
配置后需重启会话或开启新终端生效。API Key应妥善保管,避免泄露到版本控制系统.
## 核心能力

### 设计思维

在编写代码之前,先确定一个明确的美学方向:

- **Purpose(目的)**: 这个界面解决什么问题?
- **Tone(调性)**: 从四种基础方向中选择一个: 极简主义、编辑杂志、粗野主义、柔和粉彩
- **Constraints(约束)**: 技术要求(仅支持 HTML/CSS/JS)

**关键原则**: 选择一个清晰的概念方向并精准执行。避免通用 AI 美学.
**输入**: 用户提供设计思维相关的配置参数、输入数据和处理选项.
**输出**: 返回设计思维的处理结果,包含执行状态码、结果数据和执行日志.
### 前端美学指南(基础)

**输入**: 用户提供前端美学指南(基础)所需的指令和必要参数.
**处理**: 解析前端美学指南(基础)的输入参数,执行核心处理逻辑,返回结构化结果和执行状态.
**输出**: 返回前端美学指南(基础)的处理结果,包含执行状态码、结果数据和执行日志。- 验证返回数据的完整性和格式正确性
- 参考`前端美学指南(基础)`的配置文档进行参数调优
### 排版字体
- 选择美观、独特的字体,避免通用字体(Inter、Roboto、Arial、系统字体)
- 搭配一个展示字体与一个正文字体

**输入**: 用户提供排版字体所需的指令和必要参数.
**处理**: 解析排版字体的输入参数,执行核心处理逻辑,返回结构化结果和执行状态.
**输出**: 返回排版字体的处理结果,包含执行状态码、结果数据和执行日志.
### 配色主题
- 使用 CSS 变量保持一致性
- 主导色搭配点缀色,避免老套的白底紫色渐变

**输入**: 用户提供配色主题所需的指令和必要参数.
**处理**: 解析配色主题的输入参数,执行核心处理逻辑,返回结构化结果和执行状态.
**输出**: 返回配色主题的处理结果,包含执行状态码、结果数据和执行日志.
### 空间构图
- 采用意想不到的布局: 不对称、重叠、打破网格
- 注重留白或受控密度

> **升级提示**: 动效交互、背景纹理、React/Vu

**处理**: 解析前端美学指南(基础)的输入参数,执行核心处理逻辑,返回结构化结果和执行状态.
**输入**: 用户提供空间构图所需的指令和必要参数.
**输出**: 返回空间构图的处理结果,包含执行状态码、结果数据和执行日志.
#
## 快速开始

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

> 详细的输入输出格式请参考下方章节说明。

## 设计思维(补充)

## 前端美学指南(基础)(补充)

### 排版字体(补充)
- 选择美观、独特的字体,避免通用字体(Inter、Roboto、Arial、系统字体)
- 搭配一个展示字体与一个正文字体

### 配色主题(补充)
- 使用 CSS 变量保持一致性
- 主导色搭配点缀色,避免老套的白底紫色渐变

### 空间构图(补充)
- 采用意想不到的布局: 不对称、重叠、打破网格
- 注重留白或受控密度

> **升级提示**: 动效交互、背景纹理、React/Vue 组件生成等高级能力仅在 anthropics-frontend-design 付费版中提供.
## 适用场景

| 场景 | 典型输入 | 输出内容 |
|---:|---:|---:|
| 简单落地页 | "设计一个极简风格的个人主页" | HTML/CSS/JS 单文件页面 |
| 基础展示页 | "设计一个粗野主义风格的产品介绍页" | HTML/CSS/JS 单文件页面 |

**不适用于**: React/Vue 组件、复杂仪表盘、品牌视觉页、高级动效设计(需升级付费版)

## 使用流程

### Step 1: 理解设计需求
- 明确界面用途: 落地页/展示页/介绍页
- 明确目标用户与内容主题

### Step 2: 选择基础美学方向
从四种基础方向中选择一个:
- 极简主义: 克制、精准、注重留白与排版
- 编辑杂志: 排版驱动、网格系统、阅读体验优先
- 粗野主义: 原始粗犷、单色对比、功能至上
- 柔和粉彩: 柔软色调、温柔渐变、舒适氛围

### Step 3: 实现基础代码
- 编写功能完整的 HTML/CSS/JS 代码
- 选择独特字体组合,避免通用字体
- 使用 CSS 变量管理配色
- 注重排版与空间构图

**结果验证**: 任务完成后,查看输出确认状态。成功时返回摘要和数据;失败时根据错误信息排查,参考恢复章节获取修复步骤.
## 案例展示

### 案例一： 极简风格个人主页
**场景**: 开发者需要一个简洁的个人主页,展示基本信息与项目链接

**设计决策**:
- 美学方向: 极简主义,注重留白与排版
- 字体: 展示字体用衬线字体(如 Playfair Display),正文用无衬线(如 Spectral)
- 配色: 纯白背景 + 深灰文字 + 单一点缀色
- 布局: 居中单列,大量留白,排版驱动

**输出**: 完整的 HTML/CSS/JS 单文件个人主页

**说明**: 极简主义的核心是克制与精准。通过衬线展示字体提升质感,大量留白营造呼吸感,单一点缀色避免视觉干扰。适合个人开发者快速建立简洁的线上形象.
### 案例二： 粗野主义风格产品介绍页
**场景**: 独立开发者需要一个有冲击力的产品介绍页,传达技术硬核感

**设计决策**:
- 美学方向: 粗野主义,原始粗犷与单色对比
- 字体: 等宽字体(如 JetBrains Mono)统一使用
- 配色: 纯黑背景 + 纯白文字 + 荧光绿点缀
- 布局: 紧凑高密度,无边框分隔,功能至上

**输出**: 完整的 HTML/CSS/JS 单文件产品介绍页

**说明**: 粗野主义的核心是原始与功能至上。等宽字体传达技术感,黑白高对比营造冲击力,荧光绿点缀增加辨识度。无边框布局强化原始粗犷的视觉语言.
## 错误处理

| 错误场景 | 错误表现 | 原因分析 | 处理方式 |
|:---:|:---:|:---:|:---:|
| generic_font_selection | 使用 Inter/Roboto/Arial 等通用字体 | 未遵循排版字体指南 | 替换为独特字体组合,避免系统默认字体 |
| cliche_color_scheme | 白底紫色渐变等老套配色 | 未遵循配色主题指南 | 重新选择主导色与点缀色,使用 CSS 变量管理 |
| cookie_cutter_layout | 千篇一律的卡片网格布局 | 缺乏空间构图创意 | 采用不对称、重叠等布局,打破网格常规 |
| missing_aesthetic_direction | 设计缺乏明确风格 | 未选择美学方向 | 从四种基础方向中选择一个并全力执行 |
| inconsistent_design | 字体/配色/间距不一致 | 未使用 CSS 变量 | 建立统一的 CSS 变量系统管理颜色与字体 |

## 常见问题

### Q1: 免费版支持哪些美学方向?
A: 免费版(LITE)支持四种基础美学方向: 极简主义、编辑杂志、粗野主义、柔和粉彩。付费版(anthropics-frontend-design)额外提供极繁主义混沌、复古未来、有机自然、奢华精致、俏皮玩具、装饰艺术、工业实用七种高级方向.
### Q2: 免费版和付费版有什么区别?
A: 免费版(LITE)支持 HTML/CSS/JS 基础代码生成与三种美学维度(排版/配色/构图)。付费版(anthropics-frontend-design)额外提供:
- React/Vue 组件生成
- 动效交互与背景纹理设计
- 11 种美学方向(vs 免费版 4 种)
- 3 个完整案例(vs 免费版 2 个基础案例)
- 8 种错误处理(vs 免费版 5 种)
- 无障碍访问检查指南

### Q3: 哪些字体应该避免?
A: 坚决避免 Inter、Roboto、Arial 和系统默认字体。推荐选择独特字体(如 Playfair Display、JetBrains Mono、Spectral)。每次生成应变换字体选择,避免收敛到同一字体.
### Q4: 如何避免通用 AI 美学?
A: 避免过度使用的字体族、老套的紫色渐变白底、可预测的卡片布局。每次设计都应具有上下文特色,多变换浅色与深色主题、不同字体、不同美学方向.
## 已知限制

1. **仅支持 HTML/CSS/JS**: 不支持 React/Vue 组件生成(需升级付费版)
2. **仅四种美学方向**: 不支持极繁主义、复古未来等高级方向(需升级付费版)
3. **无动效交互指南**: 不包含高级动效编排与背景纹理设计(需升级付费版)
4. **需 LLM 支持**: 无 LLM 环境无法使用,设计质量取决于底层模型能力
5. **字体可用性依赖环境**: 引用的字体需用户环境可访问(如 Google Fonts CDN)

---
## 快速开始

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

> 详细的输入输出格式请参考下方章节说明。

> **想要 React 组件、高级动效与 11 种美学方向?** 升级到 [anthropics-frontend-design 付费版](#) 解锁全部高级能力.
## 输出格式

```json
{
  "success": true,
  "data": {
    "result": "前端设计LITE处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "anthropics-frontend-design"
    }
  },
  "execution_log": [
    "解析输入参数",
    "执行核心处理",
    "格式化输出结果"
  ],
  "error": null
}
```