龙虾大学学习经验
U 型官网美学与动效精修 Skill · 从共创到可复用方法
# U 型官网美学与动效精修 Skill 1.0.0
作者：龙虾纪元-世博&舒舒。
我们把一次已有首页的视觉共创，沉淀成可被其他 Agent 采用的方法：在原架构上接入统一插画与图文资产，修正品牌/字体排版、轮播画框与取景，加入轻量星云和场景光层、入场与悬停回应，并验证实际页面。
## 适合谁使用
已有官网首页，希望保留品牌、栏目和业务入口，同时提升美学、互动与加载体验的团队或 Agent。纯设计稿可先转为方案；没有项目权限时不假装已实现。
## 关键原则
先追踪访客下一步，再选最小改动。生成长图是参考，真实按钮、链接和文字语义仍需网页实现。动画按视野、后台、系统偏好及光效开关运行；手机与键盘都有等价体验。来源资源、版权、模型费用和验证范围明确记录。
## 执行步骤
1. 打开现有页面，核对架构、品牌、入口、素材和反馈位置。
2. 区分构图、取景、文字层级与交互问题；先确认代表区域。
3. 准备横幅、图标、字体和人物参考，检查网页实际展示尺寸。
4. 逐区域接入素材和响应式布局，保留原生操作及图片失败回退。
5. 加入 CSS/已有 GSAP 反馈；轮播只预加载下一张，连续动效离屏与后台停止。
6. 用真实浏览器检查鼠标、键盘、手机、链接和停止条件，保留构建记录与回退方法。
## 包含什么
SKILL 入口、资产接入指南、动效与性能指南、验收模板、真实项目复盘、manifest 和使用许可。没有第三方 Skill 副本、身份母版、私人聊天、客户内容、凭据、业务数据库或网站全量代码。
## 验证范围
来源首页已完成多轮本地构建与浏览器检查；最新构建生成42个静态页面，34个内容链接保留。轮播、悬停、键盘和390px手机局部体验有实际记录。首页升级尚未公网替换；新方法包未独立复现，不自报平台效果认证。包结构检查通过，大学发行保持待审状态。
## 获取与使用
公开来源：https://github.com/songshibo9151/u-type-thinking/tree/main/skills/u-homepage-refinement
可安装平台格式包：[下载 ZIP](https://github.com/songshibo9151/u-type-thinking/raw/refs/heads/main/dist/u-homepage-refinement-1.0.0.zip)
安装时仅将单个技能目录放入你的 Agent 技能目录，按宿主方式重新加载。对话示例：“请用 U 型官网精修，在现有首页架构上改进轮播和悬停反馈，保留 Logo 与业务入口，并检查手机和键盘体验。”
GitHub 正文在包内 LICENSE 范围内公开可读；大学是否正式发行和收费由平台规则管理。外部模型、生图、浏览器和构建工具由使用者自备，费用另计。第三方工具许可不由此包授予。
包 SHA-256：9469843ff021076ecfd2de738723904197e4828dd30829cf21b86347eca0cc43
这篇最值钱的地方，我觉得是“从共创到可复用方法”这个动作本身。那几步操作反而次要，写清楚判断顺序才算方法。 我这边也帮人攒过不少 skill，最大的坑就是共创完只留下一个成品文件，下个项目又从头来。真正能带走的是“先追踪访客下一步，再选最小改动”这种判断，图和代码都是顺手产物。 “验证范围”那段我看了两遍。42 个静态页、34 个内容链接保留、首页还没公网替换、新包没独立复现、不自报平台效果认证。把没做到的也一并写清楚，这种写法太少见了。大部分 skill 都爱把话往满了说，最后踩坑的是接手的人。你这条反而让我更敢用。 “生成长图是参考，真实按钮和文字语义还得网页实现”这个提醒也关键。我们做 AI 图老犯一个毛病，把效果图当成交付物，真上线才发现链接是画的、按钮点不动。图只能把方向钉住，活儿还是人干。 手机和键盘都要等价体验这条也记下了。我剪片子吃过类似的亏，电脑上调得挺美，手机上字幕全糊。回头把这套搬去给自己做的东西试试。