Html Designer Tool Free

SKILL.md

---
name: "html-designer-tool-free"
description: "专业的HTML/CSS网页图形设计助手,提供视觉层级、配色、排版等核心能力,适合个人开发者快速构建精美页面。"
license: Proprietary
allowed-tools: read exec
compatibility: "Requires LLM with tool-use capability"
metadata:
  displayName: "HTML设计工具免费版"
  version: "1.0.0"
  summary: "专业的HTML/CSS网页图形设计助手,提供视觉层级、配色、排版等核心能力,适合个人开发者快速构建精美页面。"
  tags:
    - "网页设计"
    - "HTML"
    - "CSS"
    - "视觉设计"
    - "前端开发"
  source: "SkillHub"
  converted_at: "2026-07-22T17:58:36"
---

# HTML设计工具免费版

## 概述

HTML设计工具免费版帮助个人开发者快速创建具有专业图形设计品质的HTML页面。该工具融合了排版、配色理论、视觉层级、平衡与构图等设计原则,同时兼顾Web标准、可访问性与响应式设计,让没有专业设计背景的开发者也能产出视觉精美的网页。

本版本面向个人用户,提供核心设计能力与基础模板,适合作品集、博客、产品落地页等中小型项目的快速搭建。

## 核心能力

### 图形设计基础

- 视觉层级与构图:通过尺寸、粗细、颜色建立清晰的重要性信号
- 对比、对齐、邻近性原则的专业应用
- 留白的战略性使用,提升页面呼吸感与聚焦度
- 配色方案生成:单色、互补色、类似色等多种搭配

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

### Web设计能力

- 语义化HTML5结构(`<header>`、`<nav>`、`<main>`、`<article>`等)
- 响应式设计原则,适配桌面、平板、移动端
- 以用户为中心的设计思维
- 可访问性实践(ARIA标签、alt文本、跳转链接)

**输入**: 用户提供Web设计能力所需的指令和必要参数。
**处理**: 按照skill规范执行Web设计能力操作,遵循单一意图原则。
**输出**: 返回Web设计能力的执行结果,包含操作状态和输出数据。

### 技术实现

- 干净、结构清晰的HTML标记
- 符合BEM等规范的CSS类命名约定
- 图片优化与响应式图片处理
- 移动优先的设计方法

**输入**: 用户提供技术实现所需的指令和必要参数。
**处理**: 按照skill规范执行技术实现操作,遵循单一意图原则。
**输出**: 返回技术实现的执行结果,包含操作状态和输出数据。
**技术参数**：使用`input_params`和`output_format`参数控制执行行为,支持`json`/`text`/`csv`输出格式。
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：专业的、网页图形设计助手、提供视觉层级、排版等核心能力、适合个人开发者快、速构建精美页面、设计工具免费版是、一款面向个人开发、者的网页图形设计、辅助工具、通过自然语言指令、Agent、生成符合专业设计、涵盖视觉层级、配色理论、排版系统、响应式布局等核心、Use、when、需要设计创作、海报制作、品牌视觉时使用、不适用于、建模和动画制作等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

## 使用场景

### 场景一:个人作品集页面

需求:自由职业设计师需要一个展示作品的个人网站。

```bash
# 让Agent生成作品集页面
# 示例
# "帮我设计一个个人作品集页面,采用极简风格,
#  包含:英雄区、作品展示卡片网格、关于我、联系方式"
```

Agent将生成包含以下结构的HTML:

```html
<header>
  <nav><!-- 顶部导航 --></nav>
</header>
<main>
  <section class="hero">
    <h1>作品集标题</h1>
    <p>设计师简介</p>
  </section>
  <section class="portfolio-grid">
    <article class="project-card">
      <img src="project-1.jpg" alt="项目一缩略图">
      <h2>项目名称</h2>
      <p>项目描述</p>
    </article>
  </section>
</main>
```

### 场景二:产品落地页

需求:独立开发者为一款新应用制作营销落地页。

```python
# 配置设计参数
design_config = {
    "page_type": "landing",
    "color_palette": ["#1E3A5A", "#FFFFFF", "#F1F5F9"],  # 主色/背景/辅助
    "fonts": ["Inter", "serif"],  # UI字体 + 标题字体
    "sections": ["hero", "features", "testimonials", "cta"],
    "responsive": True,
    "accessibility": "WCAG_2.1_AA"
}
```

### 场景三:营销活动页面

需求:为限时促销活动设计视觉冲击力强的单页。

```bash
# 生成营销活动页面
# 指令:"设计一个黑色星期五促销页面,
#       主色调红色与黑色,包含倒计时、商品卡片、CTA按钮"
```

## 快速开始

### Step 1:描述需求

向Agent描述你的设计需求,包括:

- 页面类型(落地页、作品集、博客等)
- 品牌调性(极简、活泼、专业、奢华)
- 主色调与字体偏好
- 必需的页面区块

### Step 2:获取设计方案

Agent会根据设计原则输出:

1. 配色方案(2-3种颜色,含十六进制色值)
2. 字体配对建议(标题字体+正文字体)
3. 网格系统与对齐策略
4. 完整的HTML结构

### Step 3:迭代优化

```bash
# 请求Agent调整设计
# 示例:
# 1. "把主色调改成深蓝色,增加更多留白"
# 2. "优化移动端的字体大小,确保可读性"
# 3. "增加可访问性属性,确保键盘导航"
```

#
## 配置示例

### 配色方案配置

```yaml
# 免费版配色方案(预设3种基础配色)
color_schemes:
  minimalist:
    background: "#FAFAFA"
    foreground: "#0F172A"
    accent: "#0052FF"
    border: "#E2E8F0"
  warm:
    background: "#FFF8F0"
    foreground: "#2D1B0E"
    accent: "#E67E22"
    border: "#F5E6D3"
  professional:
    background: "#FFFFFF"
    foreground: "#1A1A2E"
    accent: "#16213E"
    border: "#E5E5E5"
```

### 字体配对配置

```python
font_pairings = {
    "modern_tech": {
        "display": "Inter, sans-serif",
        "body": "Inter, sans-serif",
        "mono": "JetBrains Mono, monospace"
    },
    "editorial": {
        "display": "Playfair Display, serif",
        "body": "Source Sans Pro, sans-serif",
        "mono": "JetBrains Mono, monospace"
    },
    "minimal": {
        "display": "Inter, sans-serif",
        "body": "Inter, sans-serif",
        "mono": "monospace"
    }
}
```

## 最佳实践

### 设计原则遵循

| 原则 | 实践建议 | 检查要点 |
|------|---------|---------|
| 视觉层级 | 使用3种字号建立清晰层级 | 用户能瞬间识别最重要元素 |
| 配色克制 | 主色不超过2-3种 | 鲜艳色彩仅用于CTA按钮 |
| 排版规范 | 行长45-75字符,行高1.5倍 | 长文本可舒适阅读 |
| 响应式 | 移动优先,弹性布局 | 触摸元素不小于44x44px |
| 可访问性 | 语义化标签+ARIA属性 | 通过WCAG 2.1 AA检查 |

### HTML结构规范

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <a href="#main" class="skip-link">跳转至主内容</a>
  <header>
    <nav aria-label="主导航"><!-- 导航 --></nav>
  </header>
  <main id="main">
    <article><!-- 主要内容 --></article>
  </main>
  <footer><!-- 页脚 --></footer>
</body>
</html>
```

### 可访问性检查清单

- [ ] 语义化HTML元素构建结构
- [ ] 仅一个h1,标题层级逻辑递进
- [ ] 有意义的图片添加alt文本
- [ ] 导航与交互元素添加ARIA标签
- [ ] 包含键盘用户的跳转导航链接
- [ ] 颜色对比度满足WCAG标准(正文4.5:1)
- [ ] 交互元素支持键盘访问
- [ ] 添加viewport meta标签

## 常见问题

### Q1: 生成的页面在不同浏览器显示不一致?

A: 确保使用标准CSS属性,添加必要的前缀。建议在Chrome、Firefox、Safari中分别测试。免费版提供基础的跨浏览器兼容建议。

### Q2: 如何优化页面加载速度?

A: 优化图片尺寸与格式,使用`loading="lazy"`属性,压缩CSS文件。免费版提供基础的性能优化建议,如需深度性能分析请升级至PRO版。

### Q3: 配色方案不够独特怎么办?

A: 免费版提供3种预设配色方案。如需自定义品牌色或生成专属配色系统,可描述你的品牌调性,Agent会基于色彩心理学推荐合适的方案。

### Q4: 是否支持组件库生成?

A: 免费版支持基础组件(按钮、卡片、表单)的生成。如需完整的可复用组件库与设计令牌系统,请使用PRO版。

### Q5: 生成的HTML如何添加交互效果?

A: 免费版聚焦静态结构与样式。如需高级动画、状态管理与复杂交互,建议升级至PRO版获取Framer Motion集成方案。

## 依赖说明

### 运行环境

- **Agent平台**: 支持SKILL.md规范的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
- **操作系统**: Windows / macOS / Linux
- **浏览器**: 现代浏览器(Chrome 90+、Firefox 88+、Safari 14+)

### 依赖详情

| 依赖项 | 类型 | 是否必需 | 获取方式 |
|:-------|:-----|:---------|:---------|
| LLM API | API | 必需 | 由Agent内置LLM提供 |
| 现代浏览器 | 运行环境 | 必需 | 系统自带 |
| 代码编辑器 | 工具 | 推荐 | VS Code / WebStorm等 |

### API Key 配置

- 本skill基于Markdown指令规范驱动,无需额外API Key
- 生成的HTML可直接在浏览器中预览,无需后端服务

### 可用性分类

- **分类**: MD+EXEC(纯Markdown指令,部分功能需exec命令行执行)
- **说明**: 基于Markdown的AI Skill,通过自然语言指令驱动Agent执行HTML页面设计任务
- **免费版限制**: 提供3种预设配色方案、基础模板、5个示例组件,无批量生成能力

## 错误处理


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

## 已知限制

- 需LLM支持,无LLM环境不可用
- 复杂业务场景建议结合人工经验判断
- 执行效率受模型能力与网络环境影响

## 示例

### 基本用法

**输入**：用户提供操作指令和必要参数

**输出**：返回执行结果,包含操作状态和输出数据

```text
用户: 执行核心功能
Skill: 正在执行核心功能...
Skill: 执行完成,结果如下: 操作成功
```