CursorPool
← 返回首页
image-to-html logo

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.