前端设计 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

依赖项

API Key 配置

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

可用性分类

• 分类: MD+EXEC（）

API Key配置方式:

export API_KEY="your_api_key_here"

配置后需重启会话或开启新终端生效。API Key应妥善保管,避免泄露到版本控制系统.

核心能力

设计思维

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

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

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

前端美学指南(基础)

输入: 用户提供前端美学指南(基础)所需的指令和必要参数. 处理: 解析前端美学指南(基础)的输入参数,执行核心处理逻辑,返回结构化结果和执行状态. 输出: 返回前端美学指南(基础)的处理结果,包含执行状态码、结果数据和执行日志。- 验证返回数据的完整性和格式正确性

• 参考前端美学指南(基础)的配置文档进行参数调优

排版字体

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

输入: 用户提供排版字体所需的指令和必要参数. 处理: 解析排版字体的输入参数,执行核心处理逻辑,返回结构化结果和执行状态. 输出: 返回排版字体的处理结果,包含执行状态码、结果数据和执行日志.

配色主题

• 使用 CSS 变量保持一致性
• 主导色搭配点缀色,避免老套的白底紫色渐变

输入: 用户提供配色主题所需的指令和必要参数. 处理: 解析配色主题的输入参数,执行核心处理逻辑,返回结构化结果和执行状态. 输出: 返回配色主题的处理结果,包含执行状态码、结果数据和执行日志.

空间构图

• 采用意想不到的布局: 不对称、重叠、打破网格
• 注重留白或受控密度

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

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

设计思维(补充)

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

排版字体(补充)

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

配色主题(补充)

• 使用 CSS 变量保持一致性
• 主导色搭配点缀色,避免老套的白底紫色渐变

空间构图(补充)

• 采用意想不到的布局: 不对称、重叠、打破网格
• 注重留白或受控密度

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

适用场景

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

使用流程

Step 1: 理解设计需求

• 明确界面用途: 落地页/展示页/介绍页
• 明确目标用户与内容主题

Step 2: 选择基础美学方向

从四种基础方向中选择一个:

• 极简主义: 克制、精准、注重留白与排版
• 编辑杂志: 排版驱动、网格系统、阅读体验优先
• 粗野主义: 原始粗犷、单色对比、功能至上
• 柔和粉彩: 柔软色调、温柔渐变、舒适氛围

Step 3: 实现基础代码

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

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

案例展示

案例一： 极简风格个人主页

场景: 开发者需要一个简洁的个人主页,展示基本信息与项目链接

设计决策:

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

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

说明: 极简主义的核心是克制与精准。通过衬线展示字体提升质感,大量留白营造呼吸感,单一点缀色避免视觉干扰。适合个人开发者快速建立简洁的线上形象.

案例二： 粗野主义风格产品介绍页

场景: 独立开发者需要一个有冲击力的产品介绍页,传达技术硬核感

设计决策:

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

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

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

错误处理

常见问题

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 付费版 解锁全部高级能力.

输出格式

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