面向个人开发者的前端界面设计助手，产出有辨识度的高质量页面。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
Design & media
HTML设计工具免费版
Try it专业的HTML/CSS网页图形设计助手,提供视觉层级、配色、排版等核心能力,适合个人开发者快速构建精美页面。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。
What it does
专业的HTML/CSS网页图形设计助手,提供视觉层级、配色、排版等核心能力,适合个人开发者快速构建精美页面。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。
The skill document
HTML设计工具免费版
概述
HTML设计工具免费版帮助个人开发者快速创建具有专业图形设计品质的HTML页面。该工具融合了排版、配色理论、视觉层级、平衡与构图等设计原则,同时兼顾Web标准、可访问性与响应式设计,让没有专业设计背景的开发者也能产出视觉精美的网页. 本版本面向个人用户,提供核心设计能力与基础模板,适合作品集、博客、产品落地页等中小型项目的快速搭建.
核心能力
图形设计基础
- 视觉层级与构图:通过尺寸、粗细、颜色建立清晰的重要性信号
- 对比、对齐、邻近性原则的专业应用
- 留白的战略性使用,提升页面呼吸感与聚焦度
- 配色方案生成:单色、互补色、类似色等多种搭配
处理: 解析图形设计基础的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回图形设计基础的响应数据,包含状态码、结果和日志.
Web设计能力
- 语义化HTML5结构(
、、、等) - 响应式设计原则,适配桌面、平板、移动端
- 以用户为中心的设计思维
- 可访问性实践(ARIA标签、alt文本、跳转链接)
处理: 解析Web设计能力的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回Web设计能力的响应数据,包含状态码、结果和日志.
技术实现
- 干净、结构清晰的HTML标记
- 符合BEM等规范的CSS类命名约定
- 图片优化与响应式图片处理
- 移动优先的设计方法
处理: 解析技术实现的输入参数,完成核心逻辑,返回结构化响应.
输出: 返回技术实现的响应数据,包含状态码、结果和日志.
技术参数：使用input_params和output_format参数控制执行行为,支持json/text/csv输出格式.
能力覆盖范围：本skill的核心能力覆盖以下场景关键词：专业的、网页图形设计助手、提供视觉层级、排版等核心能力、适合个人开发者快、速构建精美页面、设计工具免费版是、一款面向个人开发、者的网页图形设计、辅助工具、通过自然语言指令、Agent、生成符合专业设计、涵盖视觉层级、配色理论、排版系统、响应式布局等核心、Use、when、、品牌视觉时使用、不适用于、建模和动画制作等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.
使用场景
场景一:个人作品集页面
需求:自由职业设计师需要一个展示作品的个人网站.
输入格式
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| input | string | 是 | HTML设计工具免费版处理的输入数据或指令 |
| options | object | 否 | 附加配置选项,如模式选择、格式偏好等 |
| callback_url | string | 否 | 异步处理完成后的回调通知URL |
# 让Agent生成作品集页面
# 示例
# "帮我设计一个个人作品集页面,采用极简风格,
# 包含:英雄区、作品展示卡片网格、关于我、联系方式"
Agent将生成包含以下结构的HTML:
<!-- 顶部导航 -->
作品集标题
设计师简介
项目名称
项目描述
场景二:产品落地页
需求:独立开发者为一款新应用制作营销落地页.
# 配置设计参数
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"
}
场景三:营销活动页面
需求:为限时促销活动设计视觉冲击力强的单页.
# 生成营销活动页面
# 指令:"设计一个黑色星期五促销页面,
# 主色调红色与黑色,包含倒计时、商品卡片、CTA按钮"
快速开始
Step 1:描述需求
向Agent描述你的设计需求,包括:
- 页面类型(落地页、作品集、博客等)
- 品牌调性(极简、活泼、专业、奢华)
- 主色调与字体偏好
- 必需的页面区块
Step 2:获取设计方案
Agent会根据设计原则输出:
- 配色方案(2-3种颜色,含十六进制色值)
- 字体配对建议(标题字体+正文字体)
- 网格系统与对齐策略
- 完整的HTML结构
Step 3:迭代优化
# 请求Agent调整设计
# 示例:
# 1. "把主色调改成深蓝色,增加更多留白"
# 2. "优化移动端的字体大小,确保可读性"
# 3. "增加可访问性属性,确保键盘导航"
配置示例
配色方案配置
# 免费版配色方案(预设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"
字体配对配置
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结构规范
<!DOCTYPE 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环境不可用
- 复杂业务场景建议结合人工经验判断
- 执行效率受模型能力与网络环境影响
示例
基本用法
输出：返回执行结果,包含操作状态和输出数据
用户: 执行核心功能
Skill: 正在执行核心功能.
Skill: 执行完成,结果如下: 操作成功
Related skills
专业HTML开发工具，支持语义化标记、表单验证、响应式图片与基础可访问性。Use when 需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于无明确技术栈的模糊需求。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
1 installs
创建高质量前端界面,避免AI审美同质化,支持组件/页面/应用设计,适合个人开发者。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
1 installs
分步式室内设计工具,完成户型确认到渲染出图,适合个人用户快速生成装修方案。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。
1 installs
高品质前端UI设计工具，提供字体、色彩、动效规则与反模式检查，输出HTML/CSS代码。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。
1 installs
现代CSS布局、动画、响应式设计与组件样式生成，支持Flexbox/Grid/Tailwind。免费版。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。