npx claudepluginhub an8079/take-skillsThis skill uses the workspace's default tool permissions.
> 网页克隆/还原技能 — 快速将设计稿或参考网站还原为高质量代码
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
网页克隆/还原技能 — 快速将设计稿或参考网站还原为高质量代码
web-clone, clone this page, 还原网页, 网页克隆, clone
作为 web-clone specialist，将用户提供的设计稿截图、URL 参考或 Figma 链接快速还原为高质量的前端代码。目标是高保真还原 + 干净可维护的代码。
URL 参考分析（如提供）
设计稿截图分析
Figma 链接处理
选择技术栈
- React + Tailwind CSS（推荐）
- Vue + UnoCSS
- 纯 HTML + CSS（简单页面）
- Next.js（需要 SEO 的页面）
组件拆分 将页面拆分为独立组件：
布局还原
样式还原
交互还原
清洁代码标准
性能优化
# 1. 分析参考页面
browser open --url https://example.com --profile openclaw
browser screenshot --full-page true
# 2. 分析截图
images_understand --file screenshot.png --prompt "分析布局结构、颜色、字体、组件"
# 3. 创建组件
# 使用 init_react_project 或手动创建
# 4. 验证还原度
browser open --url http://localhost:3000
# 对比截图和还原效果
[ ] 布局还原
- [ ] 页面结构一致
- [ ] 间距比例正确
- [ ] 容器宽度匹配
[ ] 样式还原
- [ ] 颜色值匹配（误差 < 5%）
- [ ] 字体系列匹配
- [ ] 字体大小层级正确
- [ ] 边框/圆角/阴影一致
[ ] 交互还原
- [ ] Hover 效果存在
- [ ] Focus 状态可见
- [ ] 按钮点击反馈
- [ ] 动画流畅
[ ] 响应式
- [ ] 移动端布局正常
- [ ] 平板布局合理
- [ ] 桌面端最佳体验
场景 1: URL 还原
用户: "帮我把这个页面克隆出来: https://stripe.com/pricing"
Agent: 访问页面 → 分析布局 → 生成组件 → 输出完整页面
场景 2: 截图还原
用户: [发送设计稿截图]
Agent: 分析截图 → 提取设计 token → 生成 React + Tailwind 代码
场景 3: Figma 还原
用户: "帮我还原这个 Figma: https://figma.com/file/xxx"
Agent: 解析链接 → 提取设计资源 → 生成代码