screenshot-to-code by onewave-ai/claude-skills
npx skills add https://github.com/onewave-ai/claude-skills --skill screenshot-to-code将 UI 截图转换为生产就绪的代码,具备精确的样式和结构。
当用户提供 UI 设计的截图时:
仔细检查图像并识别:
询问用户偏好哪种框架:
默认设置 :如果未指定,对于现代设计使用 React with Tailwind CSS,对于简单页面使用 纯 HTML/CSS。
创建实现:
对于 React/Vue:
对于 HTML/CSS:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
关键要求:
min()、max()、clamp() 实现流式排版提供:
// React + Tailwind 的示例结构
import React from 'react';
export default function ComponentName() {
return (
<div className="...">
{/* 组件结构 */}
</div>
);
}
始终包含:
导航栏 :使用 space-between 的弹性盒子,粘性定位 卡片网格 :使用 CSS Grid 配合 auto-fit/auto-fill 实现响应性 英雄区域 :全高设计,内容居中,背景图片 表单 :正确的标签、验证状态、无障碍输入框 模态框 :固定定位、背景遮罩、焦点管理
如果截图不清晰或存在歧义:
用户提供 :包含英雄区域、功能卡片和页脚的着陆页截图
你的响应 :
请记住 :目标是生成足够清晰和准确的代码,使其只需最少的修改即可立即部署。
每周安装数
244
代码仓库
GitHub 星标数
67
首次出现
Jan 24, 2026
安全审计
安装于
opencode224
gemini-cli211
codex207
cursor197
github-copilot195
kimi-cli174
Convert UI screenshots into production-ready code with accurate styling and structure.
When a user provides a screenshot of a UI design:
Examine the image carefully and identify:
Ask the user which framework they prefer:
Default : If not specified, use React with Tailwind CSS for modern designs, or plain HTML/CSS for simple pages.
Create the implementation:
For React/Vue:
For HTML/CSS:
Critical requirements:
min(), max(), clamp() for fluid typography where appropriateProvide:
// Example structure for React + Tailwind
import React from 'react';
export default function ComponentName() {
return (
<div className="...">
{/* Component structure */}
</div>
);
}
Always include:
Navigation Bars : Flexbox with space-between, sticky positioning Card Grids : CSS Grid with auto-fit/auto-fill for responsiveness Hero Sections : Full-height with centered content, background images Forms : Proper labels, validation states, accessible inputs Modals : Fixed positioning, backdrop, focus management
If the screenshot is unclear or ambiguous:
User provides : Screenshot of a landing page with hero section, feature cards, and footer
Your response :
Remember : The goal is to produce code so clean and accurate that it could be deployed immediately with minimal modifications.
Weekly Installs
244
Repository
GitHub Stars
67
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode224
gemini-cli211
codex207
cursor197
github-copilot195
kimi-cli174
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
140,500 周安装
Salesforce Agentforce 智能体测试与覆盖率分析指南 - 多轮对话与 CLI 测试
240 周安装
Web Browser Skill:极简CDP工具,自动化网页导航、JS执行与Cookie处理
240 周安装
Claude Code 上下文压缩恢复工具 - 自动恢复工作状态,加载知识库,总结工作进度
241 周安装
阿里云AI语音实时TTS测试技能:最小可行性验证与兼容性探测指南
241 周安装
阿里云DNS CLI测试指南:alicloud-network-dns-cli-test 安装与使用教程
241 周安装
阿里云身份核验Cloudauth API使用指南:SDK集成与OpenAPI调用教程
241 周安装