Anthropics Frontend Design Free

SKILL.md

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

# 前端设计 LITE

前端设计基础版,生成具有基本美学风格的 HTML/CSS/JS 前端代码。避免通用 AI 美学,提供四种基础美学方向。仅支持 HTML/CSS/JS 技术栈。

**范围外**(本技能不做): React/Vue 组件生成、高级动效编排、复杂仪表盘设计、品牌视觉页、3D 建模(需升级付费版)。

## 依赖说明

### 运行环境
- **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 美学。

**输入**: 用户提供设计思维所需的参数和指令。
**输出**: 返回设计思维的执行结果,包含操作状态和输出数据。

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


**输入**: 用户提供前端美学指南(基础)所需的指令和必要参数。
**处理**: 按照skill规范执行前端美学指南(基础)操作,遵循单一意图原则。
**输出**: 返回前端美学指南(基础)的执行结果,包含操作状态和输出数据。

- 执行`前端美学指南(基础)`操作，处理输入数据并返回结果
- 验证执行结果，确认输出符合预期格式
- 参考`前端美学指南(基础)`相关配置参数进行设置
### 排版字体
- 选择美观、独特的字体,避免通用字体(Inter、Roboto、Arial、系统字体)
- 搭配一个展示字体与一个正文字体

**输入**: 用户提供排版字体所需的指令和必要参数。
**处理**: 按照skill规范执行排版字体操作,遵循单一意图原则。
**输出**: 返回排版字体的执行结果,包含操作状态和输出数据。
### 配色主题
- 使用 CSS 变量保持一致性
- 主导色搭配点缀色,避免老套的白底紫色渐变

**输入**: 用户提供配色主题所需的指令和必要参数。
**处理**: 按照skill规范执行配色主题操作,遵循单一意图原则。
**输出**: 返回配色主题的执行结果,包含操作状态和输出数据。
### 空间构图
- 采用意想不到的布局: 不对称、重叠、打破网格
- 注重留白或受控密度

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

**处理**: 按照skill规范执行前端美学指南(基础)操作。

**输入**: 用户提供空间构图所需的指令和必要参数。
**输出**: 返回空间构图的执行结果,包含操作状态和输出数据。
### 结果验证与输出

验证处理结果的正确性,格式化输出并返回给用户。

**输入**: 用户提供结果验证与输出所需的参数和指令。

### 技术细节

| 组件 | 说明 | 关键参数 |
|:-----|:-----|:---------|
| `parser` | 解析输入指令 | `format`, `encoding` |
| `processor` | 执行核心处理逻辑 | `mode`, `timeout` |
| `output` | 格式化输出结果 | `format`, `encoding` |

### 能力覆盖范围

本skill还覆盖以下能力场景: 前端设计基础版、生成具有独特美学、前端界面、前端设计创作基础、客户端、免费版、生成具有基本美学、风格的、前端代码、覆盖排版字体、空间构图三大基础、核心理念是避免通、紫色渐变白底、千篇一律的卡片布、提供极简主义、柔和粉彩四种基础、适用于个人开发者、快速原型、学习前端设计、简单落地页制作场。这些能力在上述核心功能中均有对应处理逻辑。
## 设计思维

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

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

**关键原则**: 选择一个清晰的概念方向并精准执行。避免通用 AI 美学。

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

### 排版字体
- 选择美观、独特的字体,避免通用字体(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)

---

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