HTML设计工具专业版

企业级HTML/CSS设计系统，支持设计令牌管理、组件库生成、多主题切换、批量页面生成及团队协作，确保品牌一致性。

Install

openclaw skills install @thcjp/html-designer-tool-pro

功能说明: 本技能涵盖化工作流场景等核心能力。

HTML设计工具专业版

概述

HTML设计工具专业版为企业与专业团队提供系统化的网页设计解决方案。在免费版核心设计能力之上,PRO版引入完整的设计令牌系统、可复用组件库、批量页面生成、多主题切换与团队协作能力,确保跨项目、跨团队的设计一致性与交付效率。

PRO版完全兼容免费版,可直接继承免费版生成的HTML结构与设计资产,并在此基础上扩展为完整的设计系统。

核心能力

设计令牌系统

PRO版提供完整的设计令牌(Token)管理,实现设计资产的中心化与可维护性:

输入格式

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

yaml

# design-tokens.yml - 企业级设计令牌配置
color:
  brand:
    primary: "#0052FF"
    secondary: "#4D7CFF"
    accent: "#FF6B35"
  neutral:
    background: "#FAFAFA"
    foreground: "#0F172A"
    muted: "#F1F5F9"
    border: "#E2E8F0"
    card: "#FFFFFF"
  semantic:
    success: "#10B981"
    warning: "#F59E0B"
    error: "#EF4444"
    info: "#3B82F6"
  dark_mode:
    background: "#0F172A"
    foreground: "#F1F5F9"
    card: "#1E293B"
# .
typography:
  display:
    family: "Calistoga, serif"
    sizes: { sm: 2rem, md: 3rem, lg: 4rem, xl: 5rem }
  body:
    family: "Inter, sans-serif"
    sizes: { sm: 0.875rem, md: 1rem, lg: 1.125rem }
  mono:
    family: "JetBrains Mono, monospace"
# .
spacing:
  scale: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16]  # rem
  section_padding: "py-28 to py-44"
  container_max: "max-w-6xl"
# .
shadow:
  sm: "0 1px 3px rgba(0,0,0,0.06)"
  md: "0 4px 6px rgba(0,0,0,0.07)"
  xl: "0 20px 25px rgba(0,0,0,0.1)"
  accent: "0 4px 14px rgba(0,82,255,0.25)"
# .
radius:
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"

处理: 解析设计令牌系统的输入参数,完成核心逻辑,返回结构化响应。输出: 返回设计令牌系统的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

企业级组件库

python

# 批量生成组件库
components = {
    "buttons": ["primary", "secondary", "ghost", "icon", "fab"],
    "cards": ["basic", "media", "interactive", "pricing", "testimonial"],
    "forms": ["input", "select", "checkbox", "radio", "toggle", "slider"],
    "navigation": ["breadcrumb", "pagination", "tabs", "stepper"],
    "feedback": ["alert", "toast", "modal", "progress", "skeleton"],
    "data_display": ["table", "timeline", "accordion", "badge", "chip"]
}
# .
# 为每个组件生成 HTML + CSS + 文档
for category, items in components.items():
    for item in items:
        generate_component(category, item, theme="brand")
        generate_documentation(category, item)

处理: 解析企业级组件库的输入参数,完成核心逻辑,返回结构化响应。输出: 返回企业级组件库的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

多主题切换系统

javascript

// 主题切换核心逻辑
const themes = {
  light: { "--bg": "#FAFAFA", "--fg": "#0F172A", "--accent": "#0052FF" },
  dark: { "--bg": "#0F172A", "--fg": "#F1F5F9", "--accent": "#4D7CFF" },
  brand_custom: { "--bg": "#FFF8F0", "--fg": "#2D1B0E", "--accent": "#E67E22" }
};
// .
function switchTheme(themeName) {
  const root = document.documentElement;
  Object.entries(themes[themeName]).forEach(([key, value]) => {
    root.style.setProperty(key, value);
  });
}

处理: 解析多主题切换系统的输入参数,完成核心逻辑,返回结构化响应。输出: 返回多主题切换系统的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

批量页面生成

bash

# 批量生成多个页面
python3 generate_pages.py --config pages-config.yml --output ./dist/
# .
# 示例
# pages:
#   - name: "首页"
#     template: "landing"
#     theme: "brand"
#   - name: "产品介绍"
#     template: "feature"
#     theme: "brand"
#   - name: "定价页"
#     template: "pricing"
#     theme: "brand"

处理: 解析批量页面生成的输入参数,完成核心逻辑,返回结构化响应。输出: 返回批量页面生成的响应数据,包含状态码、结果和日志。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：设计系统、支持设计令牌、主题切换与团队协、适合团队与商业项、设计工具专业版是、一款面向企业与专、业团队的网页设计、系统化解决方案、在免费版核心能力、可复用组件库、团队协作与品牌一、致性保障、Use、when、、品牌视觉时使用、不适用于、建模和动画制作、适用于独立开发者、企业团队和自动化、工作流场景等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

执行此能力时使用input_params参数,支持创建/查询/导出操作

使用场景

场景一:企业S产品设计系统

需求:为一家SaaS公司建立完整的设计系统,确保产品矩阵视觉统一。

python

# 初始化企业设计系统
design_system = DesignSystem(
    name="EnterpriseDS",
    version="2.0.0",
    tokens=load_tokens("design-tokens.yml"),
    components=load_components("components/"),
    themes=["light", "dark", "brand"],
    guidelines=load_guidelines("docs/")
)
# .
# 生成设计系统文档
design_system.generate_docs(output="./docs/design-system/")
# .
# 导出为多平台格式
design_system.export(format=["html", "figma-tokens", "css-variables", "tailwind-config"])

输出结构:

text

design-system/
├── tokens/
│   ├── colors.css
│   ├── typography.css
│   ├── spacing.css
│   └── shadows.css
├── components/
│   ├── buttons/
│   ├── cards/
│   └── forms/
├── themes/
│   ├── light.css
│   ├── dark.css
│   └── brand.css
└── docs/
    ├── guidelines.md
    └── component-api.md

场景二:电商多店铺页面批量生成

需求:为电商平台的100+店铺批量生成定制化落地页。

bash

# 批量生成脚本
python3 batch_generate.py \
  --stores stores.csv \
  --template "store-landing" \
  --themes "brand-specific" \
  --output "./dist/stores/" \
  --parallel 10 \
  --validate-accessibility \
  --generate-sitemap

python

# 批量生成配置
batch_config = {
    "input_csv": "stores.csv",  # 包含100+店铺信息
    "template": "store-landing",
    "customization": {
        "per_store_theme": True,       # 每个店铺独立品牌色
        "per_store_logo": True,        # 独立Logo
        "shared_components": True      # 共享组件库
    },
    "quality_checks": [
        "wcag_accessibility",   # 可访问性检查
        "responsive_layout",     # 响应式验证
        "performance_audit",     # 性能审计
        "cross_browser"         # 跨浏览器兼容
    ],
    "output": {
        "format": "static_html",
        "minify": True,
        "generate_sitemap": True
    }
}

场景三:多租户品牌资产统一管理

需求:为多品牌集团统一管理设计资产,支持各子品牌独立定制。

python

# 多租户设计系统
workspaces = {
    "brand_a": {
        "name": "品牌A",
        "theme": {"primary": "#0052FF", "accent": "#4D7CFF"},
        "fonts": {"display": "Inter", "body": "Inter"},
        "components": "inherit_base"  # 继承基础组件库
    },
    "brand_b": {
        "name": "品牌B",
        "theme": {"primary": "#E67E22", "accent": "#F39C12"},
        "fonts": {"display": "Playfair Display", "body": "Source Sans Pro"},
        "components": "custom_override"  # 自定义覆盖部分组件
    }
}
# .
# 为每个租户生成独立设计包
for workspace_id, config in workspaces.items():
    generate_workspace_package(workspace_id, config)

快速开始

Step 1:初始化设计系统

bash

# 初始化项目结构
python3 init_design_system.py \
  --name "MyDesignSystem" \
  --version "1.0.0" \
  --base-theme "light" \
  --output "./design-system/"

Step 2:配置设计令牌

编辑 design-tokens.yml,定义品牌色、字体、间距等核心令牌。

Step 3:生成组件库

bash

# 生成完整组件库(含文档)
python3 generate_components.py \
  --config components.yml \
  --output "./components/" \
  --with-docs \
  --with-tests

Step 4:批量生成页面

bash

# 批量生成页面并验证
  --config pages.yml \
  --output "./dist/" \
  --validate \
  --generate-sitemap

配置示例

Tailwind CSS集成配置

javascript

// tailwind.config.js - 与设计令牌同步
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "var(--color-brand-primary)",
          secondary: "var(--color-brand-secondary)",
          accent: "var(--color-brand-accent)"
        }
      },
      fontFamily: {
        display: ["Calistoga", "serif"],
        body: ["Inter", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"]
      },
      boxShadow: {
      }
    }
  }
};

Framer Motion动效配置

javascript

// 动效系统配置
const motionConfig = {
  transitions: {
    default: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },
    spring: { type: "spring", stiffness: 300, damping: 30 }
  },
  variants: {
    fadeIn: { hidden: {opacity: 0}, visible: {opacity: 1} },
    slideUp: { hidden: {y: 20, opacity: 0}, visible: {y: 0, opacity: 1} },
    scale: { hidden: {scale: 0.95}, visible: {scale: 1} }
  },
  reducedMotion: "respect"  # 尊重 prefers-reduced-motion
};

优选实践

免费版与PRO版能力对比

能力维度	免费版	PRO版
配色方案	3种预设	无限自定义+品牌专属
组件库	5个基础组件	30+企业级组件
主题切换	不支持	浅色/深色/品牌定制
批量生成	不支持	支持CSV/JSON批量
设计令牌	不支持	完整令牌系统
文档生成	不支持	自动生成API文档
可访问性	基础检查	WCAG 2.1 AA完整审计
团队协作	单人	多人协作+版本管理
性能优化	基础建议	深度性能审计
动效集成	不支持	Framer Motion完整方案
CI/CD	不支持	支持流水线集成

设计系统审计清单

所有颜色使用设计令牌,无硬编码色值
字体层级完整,标题/正文/代码字体明确
间距遵循统一的缩放比例
组件命名遵循BEM或CSS Modules规范
所有组件支持浅色与深色主题
可访问性通过WCAG 2.1 AA完整审计
响应式断点定义清晰且一致
设计令牌可导出为多平台格式

CI/CD集成

yaml

# .github/workflows/design-system.yml
name: Design System CI
on: [push, pull_request]
jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Validate Design Tokens
        run: python3 （请参考skill目录中的脚本文件）
      - name: Check Accessibility
        run: python3 （请参考skill目录中的脚本文件） ./dist/
      - name: Performance Audit
      - name: Generate Docs
        run: python3 （请参考skill目录中的脚本文件） --output ./docs/

常见问题

Q1: 如何从免费版迁移至PRO版?

A: PRO版完全兼容免费版。只需运行迁移脚本,免费版生成的HTML与设计资产可直接继承:

bash

python3 migrate.py --from free --to pro --import-assets ./free-assets/

Q2: 支持哪些前端框架?

A: PRO版支持React、Next.js、Vue、Svelte等主流框架。设计令牌可导出为CSS Variables、Tailwind配置、Figma Tokens等多种格式,适配不同技术栈。

Q3: 批量生成的性能如何?

A: 支持并行生成,默认10个并发。100个页面约需3-5分钟。可调整 --parallel 参数优化吞吐量。

Q4: 如何管理多个子品牌的设计系统?

A: 使用多租户配置,每个租户可拥有独立的主题、字体与组件覆盖,同时共享基础组件库,确保一致性与灵活性兼顾。

Q5: 是否支持设计系统版本管理?

A: 支持语义化版本控制,每次变更自动生成变更日志。可集成Git进行团队协作与代码审查。

依赖说明

运行环境

Agent平台: 支持SKILL.md规范的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
操作系统: Windows / macOS / Linux
Node.js: 18+(用于组件库构建与CI/CD)
Python: 3.10+(用于批量生成与审计脚本)

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由Agent内置LLM提供
Node.js 18+	运行时	推荐	nodejs.org 下载
Python 3.10+	运行时	推荐	python.org 下载
Tailwind CSS	构建工具	可选	npm install tailwindcss
Framer Motion	动效库	可选	npm install framer-motion

API Key 配置

本skill基于Markdown指令规范驱动,无需额外API Key
批量生成与审计脚本使用本地工具链,无需云端API
如需集成第三方设计平台,按各自平台文档配置对应API Key

可用性分类

分类: MD+execute(纯Markdown指令+脚本执行能力)
说明: 专业版基于Markdown指令驱动Agent执行设计系统构建任务,同时提供Python/Node.js脚本支持批量生成、审计与CI/CD集成
PRO版增强: 完整设计令牌系统、企业级组件库、批量生成、多主题切换、团队协作、CI/CD集成

错误处理

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

已知限制

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

示例

基本用法

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

text

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

安全注意事项

风险类型	防范措施
API密钥泄露	通过环境变量配置，禁止硬编码到代码或配置文件中
命令执行风险	仅执行白名单命令，避免拼接用户输入到命令行参数中
网络通信安全	使用HTTPS协议，验证SSL证书有效性
敏感数据暴露	输出结果中不包含密钥、令牌等敏感信息

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。

核心功能

自动化执行: 企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目
文件处理: 支持多种文件格式的读取、解析和写入操作
API集成: 通过标准化接口调用外部服务并处理响应
命令执行: 在安全沙箱中执行系统命令并收集结果
信息检索: 快速搜索和过滤目标数据

HTML设计工具专业版

Install

HTML设计工具专业版

概述

核心能力

设计令牌系统

输入格式

企业级组件库

多主题切换系统

批量页面生成

使用场景

场景一:企业S产品设计系统

场景二:电商多店铺页面批量生成

场景三:多租户品牌资产统一管理

快速开始

Step 1:初始化设计系统

Step 2:配置设计令牌

Step 3:生成组件库

Step 4:批量生成页面

配置示例

Tailwind CSS集成配置

Framer Motion动效配置

优选实践

免费版与PRO版能力对比

设计系统审计清单

CI/CD集成

常见问题

Q1: 如何从免费版迁移至PRO版?

Q2: 支持哪些前端框架?

Q3: 批量生成的性能如何?

Q4: 如何管理多个子品牌的设计系统?

Q5: 是否支持设计系统版本管理?

依赖说明

运行环境

依赖详情

API Key 配置

可用性分类

错误处理

已知限制

示例

基本用法

安全注意事项

核心功能

Related skills