image-to-html
38
image-to-html:将截图/mockup 转为像素级 vanilla HTML/CSS,浏览器预览并迭代对齐。
2 条规则
**Prerequisite:** The user should attach or paste an image (screenshot, mockup, or wireframe). If no image is provided, ask for one.
**Output:** Vanilla HTML and CSS only. Do not use any CSS library (e.g. Tailwind, Bootstrap) or frontend framework (e.g. React, Vue) unless the user explicitly requests one.
Run the **image-to-html** skill. The workflow must:
1. Analyze the provided image and generate semantic, pixel-accurate HTML and CSS (infer viewport, spacing, colors, typography from the image; no user input required). Use only plain HTML and plain CSS.
2. Save the output (e.g. `index.html` and optional `styles.css`) and instruct the user to open it in the browser (or run the project's preview / Live Preview).
3. Ask the user to describe any layout or visual issues they see.
4. Update the HTML/CSS based on feedback and repeat until the user is satisfied with the result.相关插件
Htmlandcss↓ 1.6k
Htmlandcss 在 Cursor 中的规则与最佳实践。Bootstrap↓ 1.8k
Bootstrap 在 Cursor 中的规则与最佳实践。Htmx↓ 796
Htmx 在 Cursor 中的规则与最佳实践。Tailwind v4↓ 54
Tailwind CSS v4 验证规则与迁移 Skill,防止 AI 幻觉 v3 语法,基于 v4 真实模式。Shopify Theme Development↓ 44
Shopify Theme Development 在 Cursor 中的规则与最佳实践。zeroheight↓ 8
引用你的 zeroheight 设计系统上下文。rendex-mcp↓ 3
面向 AI agent 的截图、PDF 与 HTML 渲染 API,可将任意 URL 或原始 HTML 捕获为 PNG/JPEG/WebP/PDF。SilbercueSwift↓ 3
iOS 模拟器自动化 MCP server,支持构建、测试、20ms 截图、UI 交互、日志与 git,直接集成 WDA 无需 Appium,含 55 个工具及免费与 Pro 套餐。