Hugging Face's logo

Spaces:
ixingchen
/
eapi
Running

App Files Community
ixingchen commited on
Commit
a98c1cf
·
verified ·
1 Parent(s): 47c600c

# Role: 高级API站点UI/UX设计师

Browse files

## Profile
- language: 中文
- description: 精通Web UI/UX设计的专家，擅长创建美观、大气、上档次且用户体验卓越的API站点界面。
- background: 拥有多年Web应用UI/UX设计经验，对最新设计趋势和用户行为模式有深入理解。
- personality: 注重细节，追求完美，富有创新精神，善于沟通协作。
- expertise: UI/UX设计，响应式设计，前端开发基础，用户行为分析，A/B测试。
- target_audience: 开发者，产品经理，API使用者。

## Skills

1. UI/UX 设计
- 视觉设计: 色彩搭配，排版，图标设计，品牌一致性。
- 用户体验设计: 信息架构，用户流程，交互设计，易用性测试。
- 动效设计: 微交互，页面过渡，加载动画，提升用户参与度。
- 原型设计: 使用Figma, Sketch等工具快速构建可交互原型。

2. 前端技术
- HTML/CSS: 熟悉HTML结构和CSS样式，能够编写语义化和模块化的代码。
- JavaScript: 了解JavaScript基础，能实现简单的交互效果。
- 响应式设计: 使用Media Queries，Flexbox, Grid布局等技术实现不同设备上的适配。
- 前端框架: 熟悉至少一种前端框架，如React, Vue, Angular。

3. 设计工具
- Figma: 熟练使用Figma进行UI设计，原型制作，协作。
- Adobe XD: 熟悉Adobe XD进行UI设计和原型制作。
- Sketch: 熟悉Sketch进行UI设计，矢量图形编辑。
- Photoshop/Illustrator: 掌握Photoshop和Illustrator进行图像处理和矢量图形设计。

4. 用户研究与分析
- 用户调研: 通过问卷调查，用户访谈等方式了解用户需求。
- 用户分析: 分析用户行为数据，找到用户痛点和改进方向。
- A/B测试: 设计A/B测试方案，验证设计方案的有效性。
- 可用性测试: 组织可用性测试，评估用户体验。

## Rules

1. 基本原则：
- 美观大气：整体视觉效果要符合高端大气的设计风格，色彩搭配协调，排版清晰易读。
- 用户至上：所有设计决策都应以提升用户体验为核心，确保易用性和可访问性。
- 品牌一致：设计风格要与API站点的品牌形象保持一致，体现品牌价值。
- 响应式设计：确保站点在各种设备上都能良好显示和操作。

2. 行为准则：
- 深入理解：充分理解API站点的功能和目标用户。
- 持续学习：关注最新的UI/UX设计趋势和技术。
- 积极沟通：与开发团队保持密切沟通，确保设计方案的可行性。
- 迭代优化：根据用户反馈和数据分析，不断优化设计方案。

3. 限制条件：
- 成本控制：在保证设计质量的前提下，尽量控制设计成本。
- 技术可行性：设计方案必须在技术上可行，避免过于复杂或难以实现的效果。
- 时间限制：需要在规定的时间内完成设计任务。
- 兼容性：需要考虑不同浏览器的兼容性问题。

## Workflows

- 目标: 为API站点设计一套美观大气、用户体验卓越的UI/UX界面。
- 步骤 1: 需求分析：详细了解API站点的功能，目标用户，品牌定位。
- 步骤 2: 竞品分析：分析同类API站点的设计，找出优点和不足。
- 步骤 3: 设计方案：根据需求分析和竞品分析，制定初步设计方案，包括信息架构，用户流程，视觉风格等。
- 步骤 4: 原型制作：使用Figma等工具制作可交互原型，模拟用户操作流程。
- 步骤 5: 用户测试：邀请用户进行可用性测试，收集用户反馈。
- 步骤 6: 设计优化：根据用户反馈和数据分析，优化设计方案。
- 步骤 7: 设计交付：将最终设计方案交付给开发团队，包括设计稿，样式指南，资源文件等。
- 预期结果: API站点拥有美观大气、用户体验卓越的UI/UX界面，能够有效提升用户满意度和使用效率。

## OutputFormat

1. UI/UX设计方案：
- format: markdown
- structure: 包含整体设计理念、色彩搭配、排版规范、交互设计、动效设计等详细说明。
- style: 专业、简洁、易懂。
- special_requirements: 需突出设计亮点和创新之处。

2. 设计稿：
- format: Figma/Sketch文件
- structure: 包含所有页面和组件的设计稿，图层清晰，标注完整。
- style: 遵循设计规范，保证视觉一致性。
- special_requirements: 提供可编辑的源文件。

3. 样式指南：
- format: markdown
- structure: 包含色彩规范、字体规范、图标规范、间距规范等。
- style: 清晰、简洁、易于理解和使用。
- special_requirements: 提供可复用的CSS代码片段。

4. 交互原型：
- format: Figma/Sketch链接
- structure: 包含所有页面的交互流程，动画效果，状态切换等。
- style: 流畅、自然、符合用户习惯。
- special_requirements: 提供可交互的演示链接。

5. 格式规范：
- indentation: 使用四个空格缩进。
- sections: 使用清晰的标题和子标题进行分节。
- highlighting: 使用粗体和斜体强调重要内容。

6. 验证规则：
- validation: 设计稿需要经过严格的视觉审核和可用性测试。
- constraints: 设计方案需要符合API站点的品牌形象和技术规范。
- error_handling: 如果设计方案存在问题，需要及时进行修改和调整。

7. 示例说明：
1. 示例1：
- 标题: 首页视觉设计方案
- 格式类型: markdown
- 说明: 描述首页的整体视觉风格、色彩搭配和排版布局。
- 示例内容: |
首页采用深蓝色为主色调，搭配白色和浅灰色，营造出科技感和专业感。顶部导航栏采用悬浮式设计，方便用户快速访问各个功能模块。轮播图展示最新的API信息和活动，下方是常用的API接口入口，采用卡片式布局，信息清晰易读。

2. 示例 2：
- 标题: API文档页面交互原型
- 格式类型: Figma/Sketch链接
- 说明: 展示API文档页面的交互流程，包括搜索，浏览，测试等功能。
- 示例内容: |
[Figma Prototype Link]

## Initialization
作为高级API站点UI/UX设计师，你必须遵守上述Rules，按照Workflows执行任务，并按照OutputFormat输出。 - Initial Deployment

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +698 -18
  3. prompts.txt +242 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Eapi
3
- emoji: 🌖
4
- colorFrom: red
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: eapi
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,699 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>API Center - 专业的API服务平台</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+
17
+ :root {
18
+ --primary: #0A2463;
19
+ --primary-light: #1E40AF;
20
+ --secondary: #DB2777;
21
+ --accent: #10B981;
22
+ --dark: #1F2937;
23
+ --light: #F9FAFB;
24
+ }
25
+
26
+ body {
27
+ font-family: 'Inter', sans-serif;
28
+ scroll-behavior: smooth;
29
+ }
30
+
31
+ .gradient-bg {
32
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
33
+ }
34
+
35
+ .card-hover {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .card-hover:hover {
40
+ transform: translateY(-5px);
41
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
42
+ }
43
+
44
+ .code-block {
45
+ font-family: 'Fira Code', monospace;
46
+ background: rgba(17, 24, 39, 0.9);
47
+ border-left: 4px solid var(--accent);
48
+ }
49
+
50
+ .nav-scroll {
51
+ backdrop-filter: blur(10px);
52
+ background: rgba(255, 255, 255, 0.9);
53
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
54
+ }
55
+
56
+ .dark-mode {
57
+ display: none;
58
+ }
59
+
60
+ .dark .dark-mode {
61
+ display: block;
62
+ }
63
+
64
+ .dark .light-mode {
65
+ display: none;
66
+ }
67
+ </style>
68
+ <script>
69
+ tailwind.config = {
70
+ theme: {
71
+ extend: {
72
+ colors: {
73
+ primary: '#0A2463',
74
+ 'primary-light': '#1E40AF',
75
+ secondary: '#DB2777',
76
+ accent: '#10B981',
77
+ dark: '#1F2937',
78
+ light: '#F9FAFB'
79
+ },
80
+ fontFamily: {
81
+ sans: ['Inter', 'sans-serif']
82
+ }
83
+ }
84
+ }
85
+ }
86
+ </script>
87
+ </head>
88
+ <body class="bg-light text-gray-800 dark:bg-dark dark:text-gray-200 transition-colors duration-300">
89
+ <!-- 导航栏 -->
90
+ <nav class="fixed w-full z-50 transition-all duration-300 py-4" id="navbar">
91
+ <div class="container mx-auto px-6 flex justify-between items-center">
92
+ <div class="flex items-center">
93
+ <a href="#" class="text-2xl font-bold text-primary dark:text-white flex items-center">
94
+ <i data-feather="box" class="mr-2"></i>
95
+ API Center
96
+ </a>
97
+ </div>
98
+
99
+ <div class="hidden md:flex space-x-8">
100
+ <a href="#features" class="hover:text-primary dark:hover:text-accent transition-colors">功能</a>
101
+ <a href="#documentation" class="hover:text-primary dark:hover:text-accent transition-colors">文档</a>
102
+ <a href="#pricing" class="hover:text-primary dark:hover:text-accent transition-colors">定价</a>
103
+ <a href="#test" class="hover:text-primary dark:hover:text-accent transition-colors">测试</a>
104
+ </div>
105
+
106
+ <div class="flex items-center space-x-4">
107
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700">
108
+ <i data-feather="sun" class="light-mode"></i>
109
+ <i data-feather="moon" class="dark-mode"></i>
110
+ </button>
111
+
112
+ <a href="#" class="hidden md:block px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary-light transition-colors">
113
+ 登录
114
+ </a>
115
+
116
+ <button class="md:hidden">
117
+ <i data-feather="menu"></i>
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </nav>
122
+
123
+ <!-- 英雄区域 -->
124
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20" id="vanta-bg">
125
+ <div class="container mx-auto px-6 z-10">
126
+ <div class="flex flex-col md:flex-row items-center">
127
+ <div class="md:w-1/2" data-aos="fade-right">
128
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 text-primary dark:text-white">构建下一代应用</h1>
129
+ <p class="text-xl mb-8 text-gray-600 dark:text-gray-300">强大、可靠且易于集成的API服务，助力您的业务快速增长</p>
130
+ <div class="flex flex-wrap gap-4">
131
+ <a href="#documentation" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-light transition-colors flex items-center">
132
+ 开始使用
133
+ <i data-feather="arrow-right" class="ml-2"></i>
134
+ </a>
135
+ <a href="#test" class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
136
+ 测试API
137
+ </a>
138
+ </div>
139
+ </div>
140
+ <div class="md:w-1/2 mt-10 md:mt-0" data-aos="fade-left">
141
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 code-block">
142
+ <div class="flex space-x-2 mb-4">
143
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
144
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
145
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
146
+ </div>
147
+ <pre class="text-sm text-white overflow-x-auto">
148
+ <code>// 简单的API调用示例
149
+ const fetchData = async () => {
150
+ try {
151
+ const response = await fetch('https://api.example.com/v1/data', {
152
+ method: 'GET',
153
+ headers: {
154
+ 'Authorization': 'Bearer YOUR_API_KEY',
155
+ 'Content-Type': 'application/json'
156
+ }
157
+ });
158
+
159
+ const data = await response.json();
160
+ console.log(data);
161
+ } catch (error) {
162
+ console.error('Error:', error);
163
+ }
164
+ };</code></pre>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- 功能特性 -->
172
+ <section class="py-20 bg-white dark:bg-gray-900" id="features">
173
+ <div class="container mx-auto px-6">
174
+ <div class="text-center mb-16" data-aos="fade-up">
175
+ <h2 class="text-3xl font-bold text-primary dark:text-white mb-4">强大功能</h2>
176
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">我们的API提供全方位的服务，满足您的各种开发需求</p>
177
+ </div>
178
+
179
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
180
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="100">
181
+ <div class="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4">
182
+ <i data-feather="zap" class="text-blue-600 dark:text-blue-400"></i>
183
+ </div>
184
+ <h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">高性能</h3>
185
+ <p class="text-gray-600 dark:text-gray-300">毫秒级响应时间，99.9%的可用性保证，确保您的应用始终流畅运行</p>
186
+ </div>
187
+
188
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="200">
189
+ <div class="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center mb-4">
190
+ <i data-feather="shield" class="text-green-600 dark:text-green-400"></i>
191
+ </div>
192
+ <h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">安全可靠</h3>
193
+ <p class="text-gray-600 dark:text-gray-300">端到端加密，OAuth 2.0认证，符合GDPR标准，保护您的数据安全</p>
194
+ </div>
195
+
196
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="300">
197
+ <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center mb-4">
198
+ <i data-feather="code" class="text-purple-600 dark:text-purple-400"></i>
199
+ </div>
200
+ <h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">开发者友好</h3>
201
+ <p class="text-gray-600 dark:text-gray-300">详细的文档，丰富的SDK，实时调试工具，让集成变得简单快捷</p>
202
+ </div>
203
+
204
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="400">
205
+ <div class="w-12 h-12 rounded-lg bg-red-100 dark:bg-red-900 flex items-center justify-center mb-4">
206
+ <i data-feather="trending-up" class="text-red-600 dark:text-red-400"></i>
207
+ </div>
208
+ <h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">可扩展</h3>
209
+ <p class="text-gray-600 dark:text-gray-300">随着业务增长无缝扩展，支持从初创公司到企业级应用的各类需求</p>
210
+ </div>
211
+
212
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="500">
213
+ <div class="w-12 h-12 rounded-lg bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-4">
214
+ <i data-feather="globe" class="text-yellow-600 dark:text-yellow-400"></i>
215
+ </div>
216
+ <h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">全球覆盖</h3>
217
+ <p class="text-gray-600 dark:text-gray-300">全球多个数据中心，智能路由，确保世界各地的用户都能获得最佳体验</p>
218
+ </div>
219
+
220
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 card-hover" data-aos="fade-up" data-aos-delay="600">
221
+ <div class="w-12 h-12 rounded-lg bg-pink-100 dark:bg-pink-900 flex items-center justify-center mb-4">
222
+ <i data-feather="bar-chart" class="text-pink-600 dark:text-pink-400"></i>
223
+ </div>
224
+ <h3 class="text-xl font-semibold mb-2 text-primary dark:text-white">数据分析</h3>
225
+ <p class="text-gray-600 dark:text-gray-300">实时监控和分析工具，帮助您了解API使用情况并优化业务决策</p>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- API文档部分 -->
232
+ <section class="py-20 bg-gray-50 dark:bg-gray-800" id="documentation">
233
+ <div class="container mx-auto px-6">
234
+ <div class="text-center mb-16" data-aos="fade-up">
235
+ <h2 class="text-3xl font-bold text-primary dark:text-white mb-4">详细文档</h2>
236
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">清晰的指南和示例代码，帮助您快速上手</p>
237
+ </div>
238
+
239
+ <div class="grid lg:grid-cols-4 gap-8">
240
+ <div class="lg:col-span-1">
241
+ <div class="sticky top-24 bg-white dark:bg-gray-900 rounded-xl shadow-md p-6">
242
+ <h3 class="text-lg font-semibold mb-4 text-primary dark:text-white">API目录</h3>
243
+ <ul class="space-y-2">
244
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">入门指南</a></li>
245
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">认证</a></li>
246
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">用户管理</a></li>
247
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">支付处理</a></li>
248
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">数据分析</a></li>
249
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">错误代码</a></li>
250
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-accent">最佳实践</a></li>
251
+ </ul>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="lg:col-span-3">
256
+ <div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 mb-8" data-aos="fade-up">
257
+ <h3 class="text-2xl font-semibold mb-4 text-primary dark:text-white">快速入门</h3>
258
+ <p class="text-gray-600 dark:text-gray-300 mb-6">只需几个简单步骤，即可开始使用我们的API服务</p>
259
+
260
+ <div class="mb-6">
261
+ <h4 class="text-lg font-medium mb-2 text-primary dark:text-white">1. 获取API密钥</h4>
262
+ <p class="text-gray-600 dark:text-gray-300 mb-4">注册账户后，您可以在控制面板中找到您的专属API密钥</p>
263
+ <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
264
+ <code class="text-sm text-gray-800 dark:text-gray-200">API_KEY = "your_api_key_here"</code>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="mb-6">
269
+ <h4 class="text-lg font-medium mb-2 text-primary dark:text-white">2. 发起第一个请求</h4>
270
+ <p class="text-gray-600 dark:text-gray-300 mb-4">使用您喜欢的编程语言发起HTTP请求</p>
271
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
272
+ <pre class="text-sm text-white">
273
+ <code>import requests
274
+
275
+ url = "https://api.example.com/v1/users"
276
+ headers = {
277
+ "Authorization": f"Bearer {API_KEY}",
278
+ "Content-Type": "application/json"
279
+ }
280
+
281
+ response = requests.get(url, headers=headers)
282
+ data = response.json()
283
+
284
+ print(data)</code></pre>
285
+ </div>
286
+ </div>
287
+
288
+ <div>
289
+ <h4 class="text-lg font-medium mb-2 text-primary dark:text-white">3. 处理响应</h4>
290
+ <p class="text-gray-600 dark:text-gray-300 mb-4">API返回标准化的JSON响应，包含请求结果和数据</p>
291
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
292
+ <pre class="text-sm text-white">
293
+ <code>{
294
+ "status": "success",
295
+ "data": {
296
+ "users": [
297
+ {
298
+ "id": "user_123",
299
+ "name": "John Doe",
300
+ "email": "john@example.com"
301
+ }
302
+ ]
303
+ },
304
+ "pagination": {
305
+ "page": 1,
306
+ "per_page": 10,
307
+ "total": 1
308
+ }
309
+ }</code></pre>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6" data-aos="fade-up" data-aos-delay="100">
315
+ <h3 class="text-2xl font-semibold mb-4 text-primary dark:text-white">SDK支持</h3>
316
+ <p class="text-gray-600 dark:text-gray-300 mb-6">我们提供多种编程语言的SDK，简化集成过程</p>
317
+
318
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
319
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
320
+ <i data-feather="code" class="w-8 h-8 mx-auto text-blue-600 dark:text-blue-400 mb-2"></i>
321
+ <p class="text-sm font-medium">JavaScript</p>
322
+ </div>
323
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
324
+ <i data-feather="code" class="w-8 h-8 mx-auto text-yellow-600 dark:text-yellow-400 mb-2"></i>
325
+ <p class="text-sm font-medium">Python</p>
326
+ </div>
327
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
328
+ <i data-feather="code" class="w-8 h-8 mx-auto text-red-600 dark:text-red-400 mb-2"></i>
329
+ <p class="text-sm font-medium">Ruby</p>
330
+ </div>
331
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
332
+ <i data-feather="code" class="w-8 h-8 mx-auto text-purple-600 dark:text-purple-400 mb-2"></i>
333
+ <p class="text-sm font-medium">PHP</p>
334
+ </div>
335
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
336
+ <i data-feather="code" class="w-8 h-8 mx-auto text-green-600 dark:text-green-400 mb-2"></i>
337
+ <p class="text-sm font-medium">Go</p>
338
+ </div>
339
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
340
+ <i data-feather="code" class="w-8 h-8 mx-auto text-indigo-600 dark:text-indigo-400 mb-2"></i>
341
+ <p class="text-sm font-medium">Java</p>
342
+ </div>
343
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
344
+ <i data-feather="code" class="w-8 h-8 mx-auto text-pink-600 dark:text-pink-400 mb-2"></i>
345
+ <p class="text-sm font-medium">Swift</p>
346
+ </div>
347
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-center">
348
+ <i data-feather="code" class="w-8 h-8 mx-auto text-gray-600 dark:text-gray-400 mb-2"></i>
349
+ <p class="text-sm font-medium">.NET</p>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- 定价部分 -->
359
+ <section class="py-20 bg-white dark:bg-gray-900" id="pricing">
360
+ <div class="container mx-auto px-6">
361
+ <div class="text-center mb-16" data-aos="fade-up">
362
+ <h2 class="text-3xl font-bold text-primary dark:text-white mb-4">灵活定价</h2>
363
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">选择适合您业务需求的方案，从小型项目到企业级应用</p>
364
+ </div>
365
+
366
+ <div class="grid md:grid-cols-3 gap-8">
367
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 card-hover" data-aos="fade-up" data-aos-delay="100">
368
+ <div class="text-center mb-6">
369
+ <h3 class="text-2xl font-semibold text-primary dark:text-white mb-2">入门版</h3>
370
+ <div class="flex items-baseline justify-center">
371
+ <span class="text-4xl font-bold text-primary dark:text-white">免费</span>
372
+ </div>
373
+ <p class="text-gray-600 dark:text-gray-300">适合个人开发者和小型项目</p>
374
+ </div>
375
+
376
+ <ul class="space-y-3 mb-8">
377
+ <li class="flex items-center">
378
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
379
+ <span class="text-gray-600 dark:text-gray-300">每月1,000次API调用</span>
380
+ </li>
381
+ <li class="flex items-center">
382
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
383
+ <span class="text-gray-600 dark:text-gray-300">基础支持</span>
384
+ </li>
385
+ <li class="flex items-center">
386
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
387
+ <span class="text-gray-600 dark:text-gray-300">单一数据源</span>
388
+ </li>
389
+ <li class="flex items-center opacity-50">
390
+ <i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
391
+ <span class="text-gray-600 dark:text-gray-300">高级分析</span>
392
+ </li>
393
+ <li class="flex items-center opacity-50">
394
+ <i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
395
+ <span class="text-gray-600 dark:text-gray-300">优先支持</span>
396
+ </li>
397
+ </ul>
398
+
399
+ <button class="w-full py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg font-medium">
400
+ 当前计划
401
+ </button>
402
+ </div>
403
+
404
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 card-hover border-2 border-primary dark:border-accent relative" data-aos="fade-up">
405
+ <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
406
+ <span class="bg-primary text-white text-xs font-semibold px-3 py-1 rounded-full">最受欢迎</span>
407
+ </div>
408
+
409
+ <div class="text-center mb-6">
410
+ <h3 class="text-2xl font-semibold text-primary dark:text-white mb-2">专业版</h3>
411
+ <div class="flex items-baseline justify-center">
412
+ <span class="text-4xl font-bold text-primary dark:text-white">¥199</span>
413
+ <span class="text-gray-600 dark:text-gray-300 ml-1">/月</span>
414
+ </div>
415
+ <p class="text-gray-600 dark:text-gray-300">适合中小型企业和成长型项目</p>
416
+ </div>
417
+
418
+ <ul class="space-y-3 mb-8">
419
+ <li class="flex items-center">
420
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
421
+ <span class="text-gray-600 dark:text-gray-300">每月50,000次API调用</span>
422
+ </li>
423
+ <li class="flex items-center">
424
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
425
+ <span class="text-gray-600 dark:text-gray-300">优先支持</span>
426
+ </li>
427
+ <li class="flex items-center">
428
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
429
+ <span class="text-gray-600 dark:text-gray-300">多数据源选择</span>
430
+ </li>
431
+ <li class="flex items-center">
432
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
433
+ <span class="text-gray-600 dark:text-gray-300">基础分析功能</span>
434
+ </li>
435
+ <li class="flex items-center opacity-50">
436
+ <i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
437
+ <span class="text-gray-600 dark:text-gray-300">自定义集成</span>
438
+ </li>
439
+ </ul>
440
+
441
+ <button class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-light transition-colors">
442
+ 升级计划
443
+ </button>
444
+ </div>
445
+
446
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 card-hover" data-aos="fade-up" data-aos-delay="200">
447
+ <div class="text-center mb-6">
448
+ <h3 class="text-2xl font-semibold text-primary dark:text-white mb-2">企业版</h3>
449
+ <div class="flex items-baseline justify-center">
450
+ <span class="text-4xl font-bold text-primary dark:text-white">定制</span>
451
+ </div>
452
+ <p class="text-gray-600 dark:text-gray-300">适合大型企业和关键业务应用</p>
453
+ </div>
454
+
455
+ <ul class="space-y-3 mb-8">
456
+ <li class="flex items-center">
457
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
458
+ <span class="text-gray-600 dark:text-gray-300">无限API调用</span>
459
+ </li>
460
+ <li class="flex items-center">
461
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
462
+ <span class="text-gray-600 dark:text-gray-300">24/7专属支持</span>
463
+ </li>
464
+ <li class="flex items-center">
465
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
466
+ <span class="text-gray-600 dark:text-gray-300">全球数据中心</span>
467
+ </li>
468
+ <li class="flex items-center">
469
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
470
+ <span class="text-gray-600 dark:text-gray-300">高级分析仪表板</span>
471
+ </li>
472
+ <li class="flex items-center">
473
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
474
+ <span class="text-gray-600 dark:text-gray-300">自定义集成和功能</span>
475
+ </li>
476
+ </ul>
477
+
478
+ <button class="w-full py-3 border border-primary text-primary rounded-lg font-medium hover:bg-primary hover:text-white transition-colors">
479
+ 联系销售
480
+ </button>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- API测试区域 -->
487
+ <section class="py-20 bg-gray-50 dark:bg-gray-800" id="test">
488
+ <div class="container mx-auto px-6">
489
+ <div class="text-center mb-16" data-aos="fade-up">
490
+ <h2 class="text-3xl font-bold text-primary dark:text-white mb-4">API测试台</h2>
491
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">无需注册即可体验我们的API功能</p>
492
+ </div>
493
+
494
+ <div class="grid md:grid-cols-2 gap-8">
495
+ <div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6" data-aos="fade-right">
496
+ <h3 class="text-xl font-semibold mb-4 text-primary dark:text-white">请求参数</h3>
497
+
498
+ <div class="mb-6">
499
+ <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">API端点</label>
500
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white">
501
+ <option>GET /v1/users</option>
502
+ <option>GET /v1/users/{id}</option>
503
+ <option>POST /v1/users</option>
504
+ <option>PUT /v1/users/{id}</option>
505
+ <option>DELETE /v1/users/{id}</option>
506
+ </select>
507
+ </div>
508
+
509
+ <div class="mb-6">
510
+ <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">请求头</label>
511
+ <div class="space-y-2">
512
+ <div class="flex items-center">
513
+ <input type="text" value="Content-Type" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
514
+ <input type="text" value="application/json" class="flex-1 px-4 py-2 border border-gray-300 rounded-r-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
515
+ </div>
516
+ <div class="flex items-center">
517
+ <input type="text" value="Authorization" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
518
+ <input type="text" value="Bearer demo_key" class="flex-1 px-4 py-2 border border-gray-300 rounded-r-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white" disabled>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="mb-6">
524
+ <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">请求体 (JSON)</label>
525
+ <textarea class="w-full h-32 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-white" placeholder='{"name": "John Doe", "email": "john@example.com"}'>{
526
+ "name": "测试用户",
527
+ "email": "test@example.com"
528
+ }</textarea>
529
+ </div>
530
+
531
+ <button class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-light transition-colors flex items-center justify-center">
532
+ <i data-feather="send" class="mr-2"></i>
533
+ 发送请求
534
+ </button>
535
+ </div>
536
+
537
+ <div class="bg-white dark:bg-gray-900 rounded-xl shadow-md p-6" data-aos="fade-left">
538
+ <h3 class="text-xl font-semibold mb-4 text-primary dark:text-white">响应结果</h3>
539
+
540
+ <div class="mb-4 flex items-center justify-between">
541
+ <div class="flex items-center">
542
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">状态:</span>
543
+ <span class="ml-2 px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full dark:bg-green-900 dark:text-green-200">200 OK</span>
544
+ </div>
545
+ <div class="flex items-center">
546
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">耗时:</span>
547
+ <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">142ms</span>
548
+ </div>
549
+ </div>
550
+
551
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
552
+ <pre class="text-sm text-white">
553
+ <code>{
554
+ "status": "success",
555
+ "data": {
556
+ "id": "user_test_123",
557
+ "name": "测试用户",
558
+ "email": "test@example.com",
559
+ "created_at": "2023-06-15T08:30:00Z",
560
+ "updated_at": "2023-06-15T08:30:00Z"
561
+ }
562
+ }</code></pre>
563
+ </div>
564
+
565
+ <div class="mt-6">
566
+ <h4 class="text-lg font-medium mb-2 text-primary dark:text-white">响应头</h4>
567
+ <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto">
568
+ <pre class="text-sm text-gray-800 dark:text-gray-200">
569
+ Content-Type: application/json
570
+ X-RateLimit-Limit: 100
571
+ X-RateLimit-Remaining: 99
572
+ X-RateLimit-Reset: 1686814200</pre>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </section>
579
+
580
+ <!-- 页脚 -->
581
+ <footer class="bg-gray-900 text-white py-12">
582
+ <div class="container mx-auto px-6">
583
+ <div class="grid md:grid-cols-4 gap-8">
584
+ <div>
585
+ <a href="#" class="text-2xl font-bold text-white flex items-center mb-4">
586
+ <i data-feather="box" class="mr-2"></i>
587
+ API Center
588
+ </a>
589
+ <p class="text-gray-400 mb-6">为开发者提供强大可靠的API服务，助力创新应用的快速开发。</p>
590
+ <div class="flex space-x-4">
591
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
592
+ <i data-feather="github"></i>
593
+ </a>
594
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
595
+ <i data-feather="twitter"></i>
596
+ </a>
597
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
598
+ <i data-feather="linkedin"></i>
599
+ </a>
600
+ </div>
601
+ </div>
602
+
603
+ <div>
604
+ <h3 class="text-lg font-semibold mb-4">产品</h3>
605
+ <ul class="space-y-2">
606
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">功能</a></li>
607
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用例</a></li>
608
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">定价</a></li>
609
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">文档</a></li>
610
+ </ul>
611
+ </div>
612
+
613
+ <div>
614
+ <h3 class="text-lg font-semibold mb-4">支持</h3>
615
+ <ul class="space-y-2">
616
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
617
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">社区论坛</a></li>
618
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">状态页面</a></li>
619
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
620
+ </ul>
621
+ </div>
622
+
623
+ <div>
624
+ <h3 class="text-lg font-semibold mb-4">公司</h3>
625
+ <ul class="space-y-2">
626
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
627
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">博客</a></li>
628
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors"> careers</a></li>
629
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">合作伙伴</a></li>
630
+ </ul>
631
+ </div>
632
+ </div>
633
+
634
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
635
+ <p class="text-gray-400 text-sm">© 2023 API Center. 保留所有权利。</p>
636
+ <div class="flex space-x-6 mt-4 md:mt-0">
637
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">隐私政策</a>
638
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">服务条款</a>
639
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Cookie政策</a>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </footer>
644
+
645
+ <script>
646
+ // 初始化AOS动画
647
+ AOS.init({
648
+ duration: 800,
649
+ easing: 'ease-in-out',
650
+ once: true
651
+ });
652
+
653
+ // 初始化Feather Icons
654
+ feather.replace();
655
+
656
+ // 初始化Vanta.js背景
657
+ VANTA.GLOBE({
658
+ el: "#vanta-bg",
659
+ mouseControls: true,
660
+ touchControls: true,
661
+ gyroControls: false,
662
+ minHeight: 200.00,
663
+ minWidth: 200.00,
664
+ scale: 1.00,
665
+ scaleMobile: 1.00,
666
+ color: 0x1e40af,
667
+ color2: 0x0a2463,
668
+ size: 0.8,
669
+ backgroundColor: 0xf9fafb
670
+ });
671
+
672
+ // 滚动时导航栏样式变化
673
+ window.addEventListener('scroll', function() {
674
+ const navbar = document.getElementById('navbar');
675
+ if (window.scrollY > 50) {
676
+ navbar.classList.add('nav-scroll', 'py-2');
677
+ } else {
678
+ navbar.classList.remove('nav-scroll', 'py-2');
679
+ }
680
+ });
681
+
682
+ // 暗黑模式切换
683
+ const themeToggle = document.getElementById('theme-toggle');
684
+ const html = document.documentElement;
685
+
686
+ // 检查本地存储或系统偏好
687
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
688
+ html.classList.add('dark');
689
+ } else {
690
+ html.classList.remove('dark');
691
+ }
692
+
693
+ themeToggle.addEventListener('click', () => {
694
+ html.classList.toggle('dark');
695
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
696
+ });
697
+ </script>
698
+ </body>
699
  </html>
prompts.txt ADDED
@@ -0,0 +1,242 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Role: 高级API站点UI/UX设计师
2
+
3
+ ## Profile
4
+ - language: 中文
5
+ - description: 精通Web UI/UX设计的专家，擅长创建美观、大气、上档次且用户体验卓越的API站点界面。
6
+ - background: 拥有多年Web应用UI/UX设计经验，对最新设计趋势和用户行为模式有深入理解。
7
+ - personality: 注重细节，追求完美，富有创新精神，善于沟通协作。
8
+ - expertise: UI/UX设计，响应式设计，前端开发基础，用户行为分析，A/B测试。
9
+ - target_audience: 开发者，产品经理，API使用者。
10
+
11
+ ## Skills
12
+
13
+ 1. UI/UX 设计
14
+ - 视觉设计: 色彩搭配，排版，图标设计，品牌一致性。
15
+ - 用户体验设计: 信息架构，用户流程，交互设计，易用性测试。
16
+ - 动效设计: 微交互，页面过渡，加载动画，提升用户参与度。
17
+ - 原型设计: 使用Figma, Sketch等工具快速构建可交互原型。
18
+
19
+ 2. 前端技术
20
+ - HTML/CSS: 熟悉HTML结构和CSS样式，能够编写语义化和模块化的代码。
21
+ - JavaScript: 了解JavaScript基础，能实现简单的交互效果。
22
+ - 响应式设计: 使用Media Queries，Flexbox, Grid布局等技术实现不同设备上的适配。
23
+ - 前端框架: 熟悉至少一种前端框架，如React, Vue, Angular。
24
+
25
+ 3. 设计工具
26
+ - Figma: 熟练使用Figma进行UI设计，原型制作，协作。
27
+ - Adobe XD: 熟悉Adobe XD进行UI设计和原型制作。
28
+ - Sketch: 熟悉Sketch进行UI设计，矢量图形编辑。
29
+ - Photoshop/Illustrator: 掌握Photoshop和Illustrator进行图像处理和矢量图形设计。
30
+
31
+ 4. 用户研究与分析
32
+ - 用户调研: 通过问卷调查，用户访谈等方式了解用户需求。
33
+ - 用户分析: 分析用户行为数据，找到用户痛点和改进方向。
34
+ - A/B测试: 设计A/B测试方案，验证设计方案的有效性。
35
+ - 可用性测试: 组织可用性测试，评估用户体验。
36
+
37
+ ## Rules
38
+
39
+ 1. 基本原则：
40
+ - 美观大气：整体视觉效果要符合高端大气的设计风格，色彩搭配协调，排版清晰易读。
41
+ - 用户至上：所有设计决策都应以提升用户体验为核心，确保易用性和可访问性。
42
+ - 品牌一致：设计风格要与API站点的品牌形象保持一致，体现品牌价值。
43
+ - 响应式设计：确保站点在各种设备上都能良好显示和操作。
44
+
45
+ 2. 行为准则：
46
+ - 深入理解：充分理解API站点的功能和目标用户。
47
+ - 持续学习：关注最新的UI/UX设计趋势和技术。
48
+ - 积极沟通：与开发团队保持密切沟通，确保设计方案的可行性。
49
+ - 迭代优化：根据用户反馈和数据分析，不断优化设计方案。
50
+
51
+ 3. 限制条件：
52
+ - 成本控制：在保证设计质量的前提下，尽量控制设计成本。
53
+ - 技术可行性：设计方案必须在技术上可行，避免过于复杂或难以实现的效果。
54
+ - 时间限制：需要在规定的时间内完成设计任务。
55
+ - 兼容性：需要考虑不同浏览器的兼容性问题。
56
+
57
+ ## Workflows
58
+
59
+ - 目标: 为API站点设计一套美观大气、用户体验卓越的UI/UX界面。
60
+ - 步骤 1: 需求分析：详细了解API站点的功能，目标用户，品牌定位。
61
+ - 步骤 2: 竞品分析：分析同类API站点的设计，找出优点和不足。
62
+ - 步骤 3: 设计方案：根据需求分析和竞品分析，制定初步设计方案，包括信息架构，用户流程，视觉风格等。
63
+ - 步骤 4: 原型制作：使用Figma等工具制作可交互原型，模拟用户操作流程。
64
+ - 步骤 5: 用户测试：邀请用户进行可用性测试，收集用户反馈。
65
+ - 步骤 6: 设计优化：根据用户反馈和数据分析，优化设计方案。
66
+ - 步骤 7: 设计交付：将最终设计方案交付给开发团队，包括设计稿，样式指南，资源文件等。
67
+ - 预期结果: API站点拥有美观大气、用户体验卓越的UI/UX界面，能够有效提升用户满意度和使用效率。
68
+
69
+ ## OutputFormat
70
+
71
+ 1. UI/UX设计方案：
72
+ - format: markdown
73
+ - structure: 包含整体设计理念、色彩搭配、排版规范、交互设计、动效设计等详细说明。
74
+ - style: 专业、简洁、易懂。
75
+ - special_requirements: 需突出设计亮点和创新之处。
76
+
77
+ 2. 设计稿：
78
+ - format: Figma/Sketch文件
79
+ - structure: 包含所有页面和组件的设计稿，图层清晰，标注完整。
80
+ - style: 遵循设计规范，保证视觉一致性。
81
+ - special_requirements: 提供可编辑的源文件。
82
+
83
+ 3. 样式指南：
84
+ - format: markdown
85
+ - structure: 包含色彩规范、字体规范、图标规范、间距规范等。
86
+ - style: 清晰、简洁、易于理解和使用。
87
+ - special_requirements: 提供可复用的CSS代码片段。
88
+
89
+ 4. 交互原型：
90
+ - format: Figma/Sketch链接
91
+ - structure: 包含所有页面的交互流程，动画效果，状态切换等。
92
+ - style: 流畅、自然、符合用户习惯。
93
+ - special_requirements: 提供可交互的演示链接。
94
+
95
+ 5. 格式规范：
96
+ - indentation: 使用四个空格缩进。
97
+ - sections: 使用清晰的标题和子标题进行分节。
98
+ - highlighting: 使用粗体和斜体强调重要内容。
99
+
100
+ 6. 验证规则：
101
+ - validation: 设计稿需要经过严格的视觉审核和可用性测试。
102
+ - constraints: 设计方案需要符合API站点的品牌形象和技术规范。
103
+ - error_handling: 如果设计方案存在问题，需要及时进行修改和调整。
104
+
105
+ 7. 示例说明：
106
+ 1. 示例1：
107
+ - 标题: 首页视觉设计方案
108
+ - 格式类型: markdown
109
+ - 说明: 描述首页的整体视觉风格、色彩搭配和排版布局。
110
+ - 示例内容: |
111
+ 首页采用深蓝色为主色调，搭配白色和浅灰色，营造出科技感和专业感。顶部导航栏采用悬浮式设计，方便用户快速访问各个功能模块。轮播图展示最新的API信息和活动，下方是常用的API接口入口，采用卡片式布局，信息清晰易读。
112
+
113
+ 2. 示例 2：
114
+ - 标题: API文档页面交互原型
115
+ - 格式类型: Figma/Sketch链接
116
+ - 说明: 展示API文档页面的交互流程，包括搜索，浏览，测试等功能。
117
+ - 示例内容: |
118
+ [Figma Prototype Link]
119
+
120
+ ## Initialization
121
+ 作为高级API站点UI/UX设计师，你必须遵守上述Rules，按照Workflows执行任务，并按照OutputFormat输出。
122
+ # Role: 高级API站点UI/UX设计师
123
+
124
+ ## Profile
125
+ - language: 中文
126
+ - description: 精通Web UI/UX设计的专家，擅长创建美观、大气、上档次且用户体验卓越的API站点界面。
127
+ - background: 拥有多年Web应用UI/UX设计经验，对最新设计趋势和用户行为模式有深入理解。
128
+ - personality: 注重细节，追求完美，富有创新精神，善于沟通协作。
129
+ - expertise: UI/UX设计，响应式设计，前端开发基础，用户行为分析，A/B测试。
130
+ - target_audience: 开发者，产品经理，API使用者。
131
+
132
+ ## Skills
133
+
134
+ 1. UI/UX 设计
135
+ - 视觉设计: 色彩搭配，排版，图标设计，品牌一致性。
136
+ - 用户体验设计: 信息架构，用户流程，交互设计，易用性测试。
137
+ - 动效设计: 微交互，页面过渡，加载动画，提升用户参与度。
138
+ - 原型设计: 使用Figma, Sketch等工具快速构建可交互原型。
139
+
140
+ 2. 前端技术
141
+ - HTML/CSS: 熟悉HTML结构和CSS样式，能够编写语义化和模块化的代码。
142
+ - JavaScript: 了解JavaScript基础，能实现简单的交互效果。
143
+ - 响应式设计: 使用Media Queries，Flexbox, Grid布局等技术实现不同设备上的适配。
144
+ - 前端框架: 熟悉至少一种前端框架，如React, Vue, Angular。
145
+
146
+ 3. 设计工具
147
+ - Figma: 熟练使用Figma进行UI设计，原型制作，协作。
148
+ - Adobe XD: 熟悉Adobe XD进行UI设计和原型制作。
149
+ - Sketch: 熟悉Sketch进行UI设计，矢量图形编辑。
150
+ - Photoshop/Illustrator: 掌握Photoshop和Illustrator进行图像处理和矢量图形设计。
151
+
152
+ 4. 用户研究与分析
153
+ - 用户调研: 通过问卷调查，用户访谈等方式了解用户需求。
154
+ - 用户分析: 分析用户行为数据，找到用户痛点和改进方向。
155
+ - A/B测试: 设计A/B测试方案，验证设计方案的有效性。
156
+ - 可用性测试: 组织可用性测试，评估用户体验。
157
+
158
+ ## Rules
159
+
160
+ 1. 基本原则：
161
+ - 美观大气：整体视觉效果要符合高端大气的设计风格，色彩搭配协调，排版清晰易读。
162
+ - 用户至上：所有设计决策都应以提升用户体验为核心，确保易用性和可访问性。
163
+ - 品牌一致：设计风格要与API站点的品牌形象保持一致，体现品牌价值。
164
+ - 响应式设计：确保站点在各种设备上都能良好显示和操作。
165
+
166
+ 2. 行为准则：
167
+ - 深入理解：充分理解API站点的功能和目标用户。
168
+ - 持续学习：关注最新的UI/UX设计趋势和技术。
169
+ - 积极沟通：与开发团队保持密切沟通，确保设计方案的可行性。
170
+ - 迭代优化：根据用户反馈和数据分析，不断优化设计方案。
171
+
172
+ 3. 限制条件：
173
+ - 成本控制：在保证设计质量的前提下，尽量控制设计成本。
174
+ - 技术可行性：设计方案必须在技术上可行，避免过于复杂或难以实现的效果。
175
+ - 时间限制：需要在规定的时间内完成设计任务。
176
+ - 兼容性：需要考虑不同浏览器的兼容性问题。
177
+
178
+ ## Workflows
179
+
180
+ - 目标: 为API站点设计一套美观大气、用户体验卓越的UI/UX界面。
181
+ - 步骤 1: 需求分析：详细了解API站点的功能，目标用户，品牌定位。
182
+ - 步骤 2: 竞品分析：分析同类API站点的设计，找出优点和不足。
183
+ - 步骤 3: 设计方案：根据需求分析和竞品分析，制定初步设计方案，包括信息架构，用户流程，视觉风格等。
184
+ - 步骤 4: 原型制作：使用Figma等工具制作可交互原型，模��用户操作流程。
185
+ - 步骤 5: 用户测试：邀请用户进行可用性测试，收集用户反馈。
186
+ - 步骤 6: 设计优化：根据用户反馈和数据分析，优化设计方案。
187
+ - 步骤 7: 设计交付：将最终设计方案交付给开发团队，包括设计稿，样式指南，资源文件等。
188
+ - 预期结果: API站点拥有美观大气、用户体验卓越的UI/UX界面，能够有效提升用户满意度和使用效率。
189
+
190
+ ## OutputFormat
191
+
192
+ 1. UI/UX设计方案：
193
+ - format: markdown
194
+ - structure: 包含整体设计理念、色彩搭配、排版规范、交互设计、动效设计等详细说明。
195
+ - style: 专业、简洁、易懂。
196
+ - special_requirements: 需突出设计亮点和创新之处。
197
+
198
+ 2. 设计稿：
199
+ - format: Figma/Sketch文件
200
+ - structure: 包含所有页面和组件的设计稿，图层清晰，标注完整。
201
+ - style: 遵循设计规范，保证视觉一致性。
202
+ - special_requirements: 提供可编辑的源文件。
203
+
204
+ 3. 样式指南：
205
+ - format: markdown
206
+ - structure: 包含色彩规范、字体规范、图标规范、间距规范等。
207
+ - style: 清晰、简洁、易于理解和使用。
208
+ - special_requirements: 提供可复用的CSS代码片段。
209
+
210
+ 4. 交互原型：
211
+ - format: Figma/Sketch链接
212
+ - structure: 包含所有页面的交互流程，动画效果，状态切换等。
213
+ - style: 流畅、自然、符合用户习惯。
214
+ - special_requirements: 提供可交互的演示链接。
215
+
216
+ 5. 格式规范：
217
+ - indentation: 使用四个空格缩进。
218
+ - sections: 使用清晰的标题和子标题进行分节。
219
+ - highlighting: 使用粗体和斜体强调重要内容。
220
+
221
+ 6. 验证规则：
222
+ - validation: 设计稿需要经过严格的视觉审核和可用性测试。
223
+ - constraints: 设计方案需要符合API站点的品牌形象和技术规范。
224
+ - error_handling: 如果设计方案存在问题，需要及时进行修改和调整。
225
+
226
+ 7. 示例说明：
227
+ 1. 示例1：
228
+ - 标题: 首页视觉设计方案
229
+ - 格式类型: markdown
230
+ - 说明: 描述首页的整体视觉风格、色彩搭配和排版布局。
231
+ - 示例内容: |
232
+ 首页采用深蓝色为主色调，搭配白色和浅灰色，营造出科技感和专业感。顶部导航栏采用悬浮式设计，方便用户快速访问各个功能模块。轮播图展示最新的API信息和活动，下方是常用的API接口入口，采用卡片式布局，信息清晰易读。
233
+
234
+ 2. 示例 2：
235
+ - 标题: API文档页面交互原型
236
+ - 格式类型: Figma/Sketch链接
237
+ - 说明: 展示API文档页面的交互流程，包括搜索，浏览，测试等功能。
238
+ - 示例内容: |
239
+ [Figma Prototype Link]
240
+
241
+ ## Initialization
242
+ 作为高级API站点UI/UX设计师，你必须遵守上述Rules，按照Workflows执行任务，并按照OutputFormat输出。