平时开发活动页，最花时间的往往不是写业务逻辑，而是根据设计稿还原页面。
蓝湖虽然能够导出 Vue、HTML 和 CSS，但导出的代码通常不能直接使用： 类名不直观、图片地址需要替换，部分结构和样式也需要重新整理。
如果完全照着设计稿手写，又要反复调整元素的位置、尺寸和层级，还是很耗时间。
所以我做了一个叫作 activity-page-code-generator 的 Skill。
它的作用很简单：
把蓝湖导出的结构代码、样式代码、CDN 图片地址和设计稿截图交给 AI， AI 就能生成一个高还原度的 Vue3 活动页。
为什么不能只给 AI 一张截图？
以前我也尝试过直接把设计稿截图交给 AI，让它照着截图生成页面。
这种方式可以生成一个大概的页面，但很难做到真正的高还原。
因为截图只能告诉 AI 页面看起来是什么样，却不能准确告诉它：
- 每个元素的具体位置和尺寸
- 元素之间的父子关系
- 页面原本的文字内容
- 不同元素之间的层级关系
- 哪些图片是背景，哪些图片是独立元素
缺少这些信息以后，AI 只能根据截图进行推测， 最终很容易出现位置不准、图片用错、层级混乱或者文字重复等问题。
蓝湖导出的代码虽然看起来比较乱，但它保留了页面的结构、尺寸、位置和层级信息。
对 AI 来说，蓝湖代码不是最终成品，而是还原页面的重要数据来源。
需要给 AI 提供什么？
使用这个 Skill 时，我一般会给 AI 提供以下四类内容。
1. 蓝湖导出的结构代码
首先是蓝湖导出的 Vue、HTML 或 template 代码。
这部分内容主要告诉 AI：
- 页面中有哪些元素
- 元素之间是什么关系
- 哪些地方存在文字
- 哪些节点原本是图片
2. 蓝湖导出的样式代码
样式代码中包含元素的宽度、高度、位置、间距和层级。
AI 会根据这些真实数据还原页面， 而不是只看截图猜测每个元素应该放在哪里。
3. CDN 图片地址
我会把已经上传到 CDN 的切图地址一起提供给 AI。
图片文件名最好能够体现实际用途，例如：
page-bg.png
activity-title.png
start-btn.png
reward-bg.png
rule-btn.pngAI 会结合文件名、蓝湖结构和设计稿， 将这些图片放到页面中对应的位置。
4. 页面设计稿截图
设计稿截图主要用于校准最终的视觉效果。
它可以帮助 AI 判断哪张图片是背景、哪个元素是按钮， 以及标题、奖励区域和规则区域应该如何排列。
以下是在蓝湖中显示的设计稿，给AI提供的是全部截图，如果一个设计稿很长的话，我们可以分段截图给AI，在时间过程中，太长的截图AI的识别效果会变差。
蓝湖代码：
cnd图片地址，需要注意的是要用中文或者英文标注这个地址是干嘛的：
准备好材料以后，直接调用 Skill
准备好这些内容以后，接下来就比较简单了。
我只需要告诉 AI：
请调用 activity-page-code-generator Skill， 根据我提供的蓝湖结构代码、样式代码、设计稿截图和 CDN 图片， 生成一个高还原度的 Vue3 活动页。
然后把相关材料发送给它。
AI 会自动分析蓝湖中的页面结构和样式， 再结合设计稿判断每张图片的用途， 最后生成一个完整的 Vue3 单文件组件。
<template>
</template>
<script setup>
</script>
<style scoped>
</style>最终拿到的不是零散代码，而是一个可以直接放进项目继续开发的 Vue 文件。
从上图可以看出，ai生成的代码还是非常整洁的哈哈，一下是AI最终生成的页面展示，小心，可能会震惊到你！
看到这的前端开发工程友友可能会说：再也不用花大量时间写页面啦，再也不会被别人叫页面崽了，哈哈。
ps：切图崽的称号还是在，希望ps能加强ai集成能力，让我们解放切图的痛苦！！！
这个 Skill 会帮我处理什么？
在生成页面的过程中，Skill 会帮助 AI 完成以下工作：
- 读取蓝湖原有的页面结构和定位信息
- 根据设计稿截图校准页面效果
- 把蓝湖图片替换成我提供的 CDN 图片
- 判断图片应该使用 img 标签还是背景图
- 整理蓝湖导出的混乱类名
- 统一管理页面中的图片地址
- 按照不同区域整理较长的活动页面
- 检查背景、位置和图片是否存在明显问题
这些要求已经被写进了 Skill， 所以我不需要在每次生成页面时重新向 AI 解释一遍。
Skill 的价值，就是把我平时还原活动页的经验， 变成一套 AI 可以重复执行的固定流程。
实际能带来什么效果？
这个 Skill 最大的价值，不是完全代替前端开发， 而是帮助我快速完成最花时间的页面还原工作。
以前拿到设计稿以后，我需要手动整理蓝湖代码、替换图片、修改类名， 再一点点调整元素位置。
现在只需要准备好蓝湖结构代码、样式代码、CDN 地址和设计稿截图， 再调用 Skill，AI 就能先生成一个还原度比较高的页面。
接下来，我只需要在生成结果上继续补充业务逻辑，例如：
- 接口请求
- 按钮事件
- 登录判断
- 抽奖逻辑
- 弹窗交互
- 数据埋点
这样一来，页面还原和业务开发就被拆开了。
AI 负责完成重复、耗时的视觉还原， 我把主要精力放在真正的业务逻辑上。
怎样让生成结果更准确？
想让 AI 生成的页面更加准确，提供的材料应该尽量完整。
蓝湖结构代码和样式代码负责告诉 AI 页面是怎么组成的， CDN 地址负责提供真实图片， 设计稿截图负责校准最终的视觉效果。
CDN 图片的文件名也非常重要。
如果图片名称是：
image-1.png
image-2.png
image-3.pngAI 很难判断它们分别是什么。
如果改成：
page-bg.png
start-btn.png
prize-icon.pngAI 就能更容易理解每张图片的用途。
提供的信息越清楚、越完整，AI 生成页面的还原度就越高。
最后
这个 Skill 做的事情其实很直接。
我把下面这些材料交给 AI：
- 蓝湖导出的结构代码
- 蓝湖导出的样式代码
- CDN 切图地址
- 页面设计稿截图
然后调用 activity-page-code-generator Skill， AI 就会帮我生成一个高还原度的 Vue3 活动页。
它真正解决的问题，是让 AI 不再只根据截图猜页面， 而是结合真实的结构、坐标、样式和图片资源生成代码。
以前是我照着设计稿一点点写页面， 现在是我把材料准备好，让 AI 先完成页面还原， 我再继续处理业务逻辑。
如果你平时也经常开发活动页、营销页或者 H5 页面， 这种使用 AI 的方式值得尝试。