功能说明: 本技能涵盖 设计与产出 等核心能力。

前端设计工具 - 专业版

概述

前端设计专业版是一款面向企业团队与专业设计师的高级前端界面设计工具。在免费版设计思维与美学指导之上,扩展了完整设计系统生成、组件库批量产出、响应式多端适配、设计Token管理与团队协作等高级功能,可融入商业前端产品开发流水线。

本版本完全兼容免费版所有设计思维与美学维度,企业用户可直接迁移既有设计思路并获得系统化的工程化能力。

核心能力

能力项	免费版	专业版	说明
设计思维引导	是	是	目的/调性/约束/差异化
字体选择指导	是	是	避免通用字体
配色方案指导	是	是	CSS变量一致性
动效设计指导	是	是	CSS优先方案
空间构图指导	是	是	布局与负空间
HTML/CSS/JS 实现	是	是	生产级代码
React/Vue 实现	是	是	主流框架
设计系统生成	否	是	Tokens/主题/规范
组件库批量生成	否	是	Storybook 集成
响应式多端适配	否	是	桌面/平板/移动
设计Token管理	否	是	团队共享
可访问性检查	否	是	a11y 合规
性能优化建议	否	是	代码审查
技术支持	社区	专属	工单响应

核心功能执行

用input_params参数进行配置。

处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回核心功能执行的响应数据,包含状态码、结果和日志。

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

参数配置与调用

用config_options参数进行配置。

处理: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回参数配置与调用的响应数据,包含状态码、结果和日志。

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

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

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：企业级前端设计工、支持设计系统生成、组件库批量产出、适配商业产品开发、前端设计专业版、面向企业团队与专、业设计师的高级前、端界面设计工具、核心能力、完整设计系统生成、Design、规范文档、组件库批量设计与、暗色模式、管理与团队协作、合规检查与修复、性能优化建议与代等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一:企业设计系统建设

企业需建立完整的设计系统,包含 Design Tokens、主题与规范文档。

/* 专业版生成的 Design Tokens */
:root {
  /* 颜色系统 */
  --color-primary-50: #f0f9ff;
  --color-primary-500: #0ea5e9;
  --color-primary-900: #0c4a6e;
// .
  /* 字体系统 */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
// .
  /* 间距系统(8px 基准) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
// .
  /* 圆角系统 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
// .
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
// .
  /* 动效系统 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
}

场景二:组件库批量产出

设计团队需批量生成标准化组件,并集成到 Storybook。

# 批量生成组件
python3 （请参考skill目录中的脚本文件） \
  --config components.yaml \
  --output ./src/components/ \
  --framework react \
  --storybook \
  --types
# .
# 示例
# components:
#   - name: Button
#     variants: [primary, secondary, ghost, danger]
#     sizes: [sm, md, lg]
#   - name: Card
#     variants: [default, outlined, elevated]
#   - name: Input
#     variants: [text, password, search]

场景三:多端响应式适配

产品需同时支持桌面、平板、移动端及暗色模式。

/* 专业版生成的响应式系统 */
/* 断点系统 */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}
// .
/* 响应式组件 */
.card {
  padding: var(--space-4);
  /* 移动端优先 */
}
// .
@media (min-width: 768px) {
  .card {
    padding: var(--space-8);
  }
}
// .
/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-text: #f5f5f5;
    --color-surface: #141414;
  }
}

场景四:可访问性合规检查

产品需符合 WCAG 2.1 AA 标准,使用 a11y 检查工具。

# 可访问性检查
python3 （请参考skill目录中的脚本文件） \
  --input ./src/ \
  --standard wcag2.1-aa \
  --output ./reports/a11y_report.md \
  --fix-suggestions
# .
# 检查项目:颜色对比度、键盘导航、屏幕阅读器、焦点管理

不适用场景

以下场景前端设计-专业版不适合处理：

• 3D建模和动画制作
• 照片级写实渲染
• 手绘原创插画

触发条件

、品牌视觉时使用。不适用于非本工具能力范围的需求。

快速开始

领先步:启用专业版功能

export FRONTEND_DESIGN_EDITION="pro"
export FRONTEND_DESIGN_LICENSE="your_license_key"

第二步:生成设计系统

# 生成完整设计系统
python3 （请参考skill目录中的脚本文件） \
  --brand "企业品牌" \
  --tone "精致奢华" \
  --output ./design-system/ \
  --format all

第三步:批量生成组件

python3 （请参考skill目录中的脚本文件） \
  --output ./src/components/ \
  --storybook

配置示例

专业版完整配置:

# 环境变量
FRONTEND_DESIGN_EDITION=pro
FRONTEND_DESIGN_LICENSE=your_license
FRONTEND_DESIGN_DEFAULT_FRAMEWORK=react
FRONTEND_DESIGN_DEFAULT_BREAKPOINTS=sm,md,lg,xl
# .
# 设计系统参数
--brand <name>                # 品牌名称
--tone <direction>            # 调性方向
--format all|tokens|theme|docs # 输出格式
--framework react|vue|html    # 框架选择
--storybook                   # 生成 Storybook
--types                       # 生成 TypeScript 类型
--responsive                  # 响应式适配
--dark-mode                   # 暗色模式
--a11y standard               # 可访问性标准

多端断点配置

/* 标准断点系统 */
/* Mobile First: 默认移动端,逐级放大 */
/* sm: 640px  - 大手机/小平板竖屏 */
/* md: 768px  - 平板竖屏 */
/* lg: 1024px - 平板横屏/小桌面 */
/* xl: 1280px - 标准桌面 */
/* 2xl: 1536px - 大桌面 */

优选实践

1. Tokens 先行:先定义 Design Tokens(颜色/字体/间距/圆角/阴影),再构建组件
2. 组件原子化:从最小粒度组件(Button/Input)开始,组合出复杂组件
3. 响应式移动优先:默认移动端样式,逐级放大,避免桌面优先的冗余代码
4. 暗色模式变量化:用 CSS 变量定义颜色,通过 prefers-color-scheme 切换
5. 可访问性内建:组件生成时即包含 ARIA 属性、键盘导航、焦点管理
6. Storybook 文档化:每个组件配合 Storybook 展示用法与变体,便于团队协作
7. 性能预算控制:组件库注意 bundle size,按需导入,避免全量引入

常见问题

Q1:专业版与免费版是否兼容?

A:完全兼容。专业版支持免费版所有设计思维与美学维度,迁移时仅需设置 FRONTEND_DESIGN_EDITION=pro 并配置 License。

Q2:设计系统包含哪些内容?

A:包含 Design Tokens(CSS 变量)、主题配置(亮/暗)、规范文档(字体/颜色/间距/组件用法)、组件库(带 TypeScript 类型与 Storybook)。

Q3:支持哪些前端框架?

A:支持 React、Vue、Angular、Svelte 等主流框架,以及原生 HTML/CSS/JS。可生成 TypeScript 类型定义。

Q4:响应式适配如何实现?

A:采用移动优先策略,默认移动端样式,通过媒体查询逐级放大。支持 sm/md/lg/xl/2xl 标准断点,可自定义。

Q5:可访问性检查覆盖哪些标准?

A:支持 WCAG 2.1 A/AA/AAA 标准检查,覆盖颜色对比度、键盘导航、屏幕阅读器、焦点管理、ARIA 属性等,并提供修复建议。

Q6:能否集成到现有设计系统?

A:可以。支持导入现有 Figma Tokens 或 Style Dictionary 配置,生成兼容代码。支持增量更新而非全量替换。

依赖说明

运行环境

• Agent平台: 支持 SKILL.md 的任意 AI Agent(ai-assistant Code / Cursor / Codex / Gemini CLI 等)
• 操作系统: Windows / macOS / Linux
• 运行时: Node.js 18+ + Python 3.9+

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由 Agent 内置 LLM 提供
Node.js 18+	运行时	必需	官方安装
Python 3.9+	脚本运行	必需	官方安装
Storybook	组件文档	推荐	npx storybook init
Style Dictionary	Token 管理	推荐	npm install style-dictionary

API Key 配置

• 环境变量名: FRONTEND_DESIGN_LICENSE(企业版授权)
• 附加变量: FRONTEND_DESIGN_EDITION=pro
• 获取方式: 通过企业服务渠道申请,支持团队席位授权
• 安全建议: License 通过环境变量配置,避免写入代码仓库

可用性分类

• 分类: MD+execute(纯 Markdown 指令,部分功能需要 exec 命令行执行能力)
• 说明: 基于Markdown的AI Skill,支持设计系统生成、组件库批量产出、多端适配等企业级前端设计场景

错误处理

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

已知限制

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

示例

基本用法

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

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

输出格式

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

安全注意事项

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

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