前端设计-免费版

创建高质量前端界面,避免AI审美同质化,支持组件/页面/应用设计,适合个人开发者。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。

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

前端设计工具 - 免费版

概述

前端设计免费版是一款面向个人开发者的生产级前端界面设计工具。通过设计思维引导与美学维度指导,帮助用户创建独特、有辨识度的前端界面,避免通用的"AI风格"审美同质化。

本版本适合个人开发者、前端学习者及小型项目,提供从设计思考到代码实现的全流程指导,覆盖字体、配色、动效、空间构图等关键美学维度。

核心能力

能力项	免费版支持	说明
设计思维引导	是	目的/调性/约束/差异化
字体选择指导	是	避免通用字体
配色方案指导	是	CSS变量一致性
动效设计指导	是	CSS优先方案
空间构图指导	是	布局与负空间
背景与视觉细节	是	纹理与深度
HTML/CSS/JS 实现	是	生产级代码
React/Vue 实现	是	主流框架
设计系统生成	否	PRO 版支持
组件库批量生成	否	PRO 版支持
响应式多端适配	否	PRO 版支持
设计Token管理	否	PRO 版支持

核心功能执行

用input_params参数进行配置。

输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

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

参数配置与调用

用config_options参数进行配置。

输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

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

结果处理与输出

用output_format参数进行配置。

输出: 返回结果处理与输出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：创建高质量前端界、审美同质化、支持组件、应用设计、适合个人开发者、前端设计免费版、面向个人开发者的、生产级前端界面设、计工具、核心能力、创建独特、生产级的前端界面、应用等多种设计粒、提供设计思维引导、覆盖字体、空间构图等美学维等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一:个人作品集网站

开发者希望创建一个独特的个人作品集网站,避免模板化。

text

设计思考:
- 目的:展示个人项目,吸引潜在雇主或客户
- 调性:极简主义,大量留白,精致排版
- 约束:纯HTML/CSS/JS,无需框架
- 差异化:独特的滚动动效与字体选择

实现示例(HTML结构):
<section class="hero">
  <h1 class="display-font">创意开发者</h1>
  <p class="body-font">用代码构建独特体验</p>
</section>

<style>
.display-font {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  letter-spacing: -0.02em;
}
.body-font {
  font-family: 'Inter', sans-serif;
  color: var(--text-secondary);
}
</style>

场景二:小型应用界面

开发者需要为一个小型工具应用设计界面,追求精致的用户体验。

text

设计思考:
- 目的:工具应用,提升使用效率
- 调性:精致极简,功能性优先
- 约束:React,需要响应式
- 差异化:微交互与过渡动效

配色方案:
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --accent: #00ff88;
}

场景三:创意着陆页

创业者需要一个品牌着陆页,要求视觉冲击力强。

text

设计思考:
- 目的:品牌展示,转化用户
- 调性:大胆 maximalism,强烈视觉冲击
- 约束:需要快速加载
- 差异化:渐变网格背景 + 大胆字体

字体搭配:
- 标题:Space Grotesk(几何感)
- 正文:Source Sans 3(可读性)
- 强调:JetBrains Mono(技术感)

不适用场景

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

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

触发条件

需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于非本工具能力范围的需求。

快速开始

领先步:描述设计需求

向 Agent 描述你要构建的界面,例如:"帮我设计一个咖啡店的品牌着陆页,温暖氛围,手绘风格"。

第二步:设计思维引导

Agent 会引导你思考四个维度:

text

1. 目的:界面解决什么问题?谁在使用?
2. 调性:选择一个明确的美学方向(极简/极繁/复古未来/有机自然/精致奢华等)
3. 约束:技术要求(框架、性能、可访问性)
4. 差异化:什么让这个界面令人难忘?

第三步:获取实现代码

Agent 会根据设计思考输出生产级代码(HTML/CSS/JS 或 React/Vue)。

示例

美学维度配置

css

/* 字体选择原则 */
/* 避免:Arial, Inter, Roboto, system-ui */
/* 推荐:独特的展示字体 + 精致的正文字体 */

/* 配色方案原则 */
:root {
  /* 主色调占主导,辅以锐利的强调色 */
  --color-dominant: #1a1a2e;
  --color-accent: #e94560;
  /* 避免均匀分布的配色,主色+强调色更有效 */
}

/* 动效原则 */
/* 优先CSS-only方案(HTML) */
/* React可用Motion库 */
/* 聚焦高影响力时刻:页面加载的交错揭示 */
.hero > * {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
.hero > *:nth-child(2) { animation-delay: 0.1s; }
.hero > *:nth-child(3) { animation-delay: 0.2s; }

/* 空间构图原则 */
/* 意外的布局,不对称,重叠,对角线流动 */
/* 慷慨的负空间 或 受控的密度 */

调性方向参考

调性方向	特征	适用场景
极简主义	大量留白,精致排版	作品集、品牌
极繁主义	丰富元素,视觉冲击	创意 agency
复古未来	复古元素+科技感	科技产品
有机自然	自然纹理,柔和色调	生活方式品牌
精致奢华	深色,金属质感	高端品牌
趣味玩具	鲜艳色彩,圆润形状	儿童产品
编辑杂志	强排版,网格布局	媒体出版
粗野主义	原始,粗犷,反装饰	设计工作室

优选实践

1. 明确美学方向:选择一个明确的概念方向并精确执行,大胆与精致都可以
2. 避免通用字体:不用 Arial、Inter、Roboto,选择有特色的字体
3. 配色主次分明:主色调占主导,强调色锐利突出,避免均匀分布
4. 动效聚焦高影响力:一次精心编排的页面加载胜过分散的微交互
5. 背景创造氛围:用渐变网格、噪点纹理、几何图案创造深度,避免纯色背景
6. 实现匹配设计:极繁设计需要丰富代码,极简设计需要克制与精确

常见问题

Q1:如何避免AI审美同质化?

A:不要使用通用字体(Inter、Roboto)、老套配色(紫色渐变白底)、可预测的布局。每次设计都选择独特的方向。

Q2:免费版支持哪些框架?

A:支持 HTML/CSS/JS 原生实现,以及 React、Vue 等主流框架。可根据项目需求选择。

Q3:设计系统如何生成?

A:免费版提供基础设计指导。如需完整设计系统(Design Tokens、组件库、响应式多端适配),请使用 PRO 版。

Q4:可以生成动效吗?

A:可以。HTML 优先用 CSS-only 方案,React 可用 Motion 库。聚焦页面加载、滚动触发、悬停状态等高影响力时刻。

Q5:如何保证代码质量?

A:输出生产级代码,功能完整可用。注意实现复杂度匹配美学愿景,极繁设计需要丰富代码,极简设计需要精确细节。

依赖说明

运行环境

• Agent平台: 支持 SKILL.md 的任意 AI Agent(ai-assistant Code / Cursor / Codex / Gemini CLI 等)
• 操作系统: Windows / macOS / Linux
• 运行时: Node.js(React/Vue 项目)或纯浏览器(HTML/CSS/JS)

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由 Agent 内置 LLM 提供
Node.js	运行时	可选	官方安装(框架项目)
Google Fonts	字体资源	推荐	在线引用
Motion	React 动效库	可选	npm install motion

API Key 配置

• 本 Skill 基于 Markdown 指令,无需额外 API Key
• 设计与代码生成由 Agent 内置 LLM 完成
• 字体资源从 Google Fonts 在线引用,无需密钥

可用性分类

• 分类: MD(纯 Markdown 指令,无需 exec 命令行执行能力)
• 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent进行前端设计思考与代码实现

错误处理

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

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响
• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

安全注意事项

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

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