开发技能

用单个HTML文件制作位于网站右下角、可展开收起的联系窗口，汇总欢迎语、社交链接和会面预约入口，并在暂停接待时显示联系表单。

• 为作品集添加联系窗口
• 汇总社交链接与会面预约入口
• 在暂停接待时提供联系表单

协助向OpenDesign贡献已有技能或设计系统、翻译和修订文档，以及提交缺陷报告。从内容验证到创建变更提案或问题记录，提供相应指导。

• 贡献已有技能或设计系统
• 新增或更新文档翻译
• 修正错字、链接或撰写案例文章

检查现有网站的源码、素材和浏览器交互，按网站结构选择本地复现流程。从素材收集、实现到与原站比较验证、替换内容，逐步完成并记录差异。

• 通过本地复现学习网站原理
• 研究WebGL或Canvas效果
• 比较复现网站与原站的差异

使用React和Tailwind为claude.ai制作复杂的HTML成品，按Anthropic的参考工作流程创建内容丰富、可嵌入的网页内容。

• 为claude.ai制作HTML成品
• 使用React和Tailwind制作内容
• 创建可嵌入的网页内容

检查拉取请求中的评审意见和合并冲突，完成修复与验证。提交或推送前进行只读交叉评审，依据差异和验证结果判断意见，并报告处理结果及遗留问题。

• 修复拉取请求中的评审问题
• 保留上游改动并解决合并冲突
• 提交或推送前评审修复内容

依据具体的字体排版、配色、间距和动效规则实现React或Next.js界面，调整布局与信息密度，涵盖移动端及各类状态显示，并避免千篇一律的外观。

• 制作字体排版鲜明的营销页面
• 调整仪表盘显示与交互反馈
• 调整信息密度和动效强度

为代码和文档生成规定完整输出流程，避免用省略注释或未实现的框架替代内容，核对所有请求项，并在长篇输出中标明暂停点和续写位置。

• 获取完整源文件
• 一次生成全部指定组件
• 避免长文档省略章节

使用shadcn/ui实现结构清晰、兼顾无障碍使用的界面组件，并可结合Stitch中的设计迭代，将设计方案落实为界面部件。

• 使用shadcn/ui构建界面组件
• 实现兼顾无障碍使用的组件
• 结合Stitch设计迭代进行开发

使用Three.js制作浏览器中的三维元素与可交互体验，涵盖场景构建、材质外观、交互控制和渲染后视觉效果，支持从显示到操作与外观调整的制作工作。

• 为网页制作三维元素
• 制作浏览器交互式三维体验
• 调整材质外观与操作方式

帮助在React或Next.js中实现并审查GSAP动画，明确目标元素和组件作用范围，处理依赖变化时的重设与组件卸载时的清理，并避免在服务端渲染时执行。

• 为React界面添加动画
• 处理组件卸载时的动画清理
• 检查动画目标的作用范围

使用GSAP实现随滚动变化的网页动画，涵盖元素固定、动画进度联动和横向移动，也处理布局变化后的触发位置重算及页面切换时的清理。

• 让进入视口的元素播放动画
• 滚动时固定展示某个区块
• 通过纵向滚动实现横向移动

帮助在Flutter应用中实现动画效果、页面转场和界面内的运动，为面向iOS和Android的原生应用加入动态设计。

• 为Flutter页面添加动画
• 实现页面切换时的动态效果
• 实现iOS和Android界面的运动

通过Code Connect关联Figma设计组件与代码组件，建立设计和实现的对应关系，以便将共用设计规则和组件的更新自动反映到代码中。

• 关联Figma组件与代码组件
• 将设计系统更新反映到代码中
• 开始使用Code Connect

将Figma设计转换为忠于原始视觉效果、可用于生产环境的前端代码。可把设计画框直接交给负责前端的AI智能体，用于实现对应界面。

• 实现Figma中设计的界面
• 将设计交接给AI智能体
• 用代码还原设计的视觉效果

通过检查GSAP动画的位置与透明度变化、集中安排页面测量和更新、停止无用动画，帮助减轻渲染负担，改善列表、鼠标跟随和滚动效果的卡顿。

• 减少GSAP动画卡顿
• 改善大量列表元素的动画
• 减轻鼠标跟随效果的运行负担

使用GSAP插件实现文字、SVG、拖动、滚动及布局切换动画，从选择合适的插件到注册、配置和清理均有说明，也可用于审查现有动画代码。

• 让标题逐字或逐行出现
• 添加SVG描边与形状变换
• 实现带惯性的拖动交互

帮助使用GSAP编排多个动画的顺序与重叠，指定起始位置、嵌套动画组，并实现播放、暂停、倒放及跳转到指定位置。

• 按设定顺序播放多个动画
• 调整起始时间以重叠动作
• 将动作分组并统一控制播放

Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.

中文简介正在准备中。当前显示英语简介。

• Adding GSAP animations to Vue or Svelte
• Reviewing animation cleanup when components are removed
• Keeping animations scoped to one component

介绍结合电影感动画、MiniMax API生成的AI媒体与生成艺术的网页制作技能，适用于页面首屏及作品、产品展示网站。

• 制作带电影感动画的首屏
• 制作作品展示网站
• 在网页中使用AI生成媒体

使用GSAP基础API实现网页元素和SVG的移动、旋转、淡入淡出等动画，调整速度变化与错峰启动，并适配屏幕宽度和减少动态效果的设置。

• 为网页添加移动和淡入淡出效果
• 让多个元素错峰开始动画
• 根据屏幕宽度切换动画

帮助编写和审查使用GSAP工具函数的动画代码，完成数值映射、范围限制、随机变化和固定间隔吸附，并支持将滚动进度转换为动画变化及处理多个元素。

• 将滚动进度转换为位移或旋转
• 将动画数值限制在指定范围内
• 为位置或颜色添加随机变化

排查并修复浏览器或Electron中图片无法导出、保存后为0 KB等问题，将图片数据生成与文件保存分开检查，定位失败环节并选择适合的保存方式。

• 排查导出图片为0 KB的问题
• 检查保存对话框与写入故障
• 修复Electron中的图片保存

使用React、Tailwind CSS和shadcn/ui，为claude.ai制作由多个组件组合而成的HTML成果，适合结构较复杂的界面制作。

• 为claude.ai制作HTML成果
• 制作包含多个组件的界面原型
• 使用React和shadcn/ui制作界面

按共同根本原因整理GitHub中积累的故障报告，建立父议题和设计文档，并协助将相关修复与防止问题复发的测试合并到一个拉取请求。

• 合并具有共同原因的故障报告
• 根据未处理议题制定修复计划
• 将新故障归入已有计划