skills.rest
mizchi
mizchiCOMMUNITY
Explore all skills by this author →
Website𝕏@mizchiGitHub

auto-markup

Recreates HTML/CSS markup from target screenshots using deterministic pixel-diff measurement loops.

22|1|Updated Mar 30, 2026
Search Tags:#responsive design#css#playwright#visual regression#markup#pixel diff#screenshot-to-html
One-click install
npx skills add https://github.com/mizchi/vlmkit --skill auto-markup-mizchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auto-markup
Source: https://github.com/mizchi/vlmkit/tree/main/.apm/skills/vlmkit/workflows/auto-markup
Command: npx skills add https://github.com/mizchi/vlmkit --skill auto-markup-mizchi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Rebuilding a page or component from a design screenshot is slow and error-prone when you rely on eyeballing: you cannot tell which components are missing, misordered, or off by a few pixels. This Skill turns screenshot-to-HTML reconstruction into a measurable loop where deterministic tools report exactly what is wrong after every edit. ## Core Features & Use Cases - Composition convergence: build page reports missing/extra components, ordering violations, stacking gaps, and IoU scores so you fix layout structure first. - Per-component refinement: build component emits a machine-readable report.json with bbox deltas, typography estimates, row-gap fixes, and palette mismatches. - Multi-viewport, theme, and state coverage: handles responsive @media breakpoints, light/dark prefers-color-scheme parity, scrollable regions, and :hover/:focus states with dedicated checks. - Use Case: Given a target PNG of a dashboard at desktop and mobile widths, scaffold the landmark skeleton, converge composition per viewport, then audit palette, tokens, and theme until all gates pass. ## Quick Start Ask the agent to recreate the page in target.png as HTML/CSS using the auto-markup pipeline and iterate until the build page report shows no missing or extra components.

Frequently Asked Questions about auto-markup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a design screenshot to HTML/CSS automatically?▼

Read the target image, scaffold the landmark skeleton with contract scaffold or write HTML directly, then run build page to get missing/extra components and ordering violations. Fix what the report names and re-run until IoU reaches 0.9 with no composition errors.

How to make one HTML file match both desktop and mobile screenshots?▼

Build the widest viewport as the base stylesheet and express narrower targets as @media (max-width) overrides. Run build page against each target PNG separately, and fix viewport-specific issues only inside that viewport's media query.

Does screenshot-to-HTML conversion require an API key or VLM?▼

No. The measurement tools are pure Playwright plus pixel math and run key-free. The agent itself acts as the visual reasoner; only optional VLM-assist features in the broader vlmkit toolkit need keys.

How do I verify hover and focus states match a design?▼

Run build component with --states hover focus-visible to force states during capture. The report flags elements with induced 0% as missing state rules and ua-likely when only the browser default focus ring fired.

Why does my pixel diff look nondeterministic between runs?▼

CSS animations cause capture variance. Run check animation to find infinite animations, then use the named selector with --mask during captures so diffs compare stable frames.

When should I stop iterating the markup convergence loop?▼

Stop when build page shows no missing/extra components, no ordering violations, and all IoU scores at or above 0.9, and build component reports goal status pass. Single-viewport pages typically converge in 3-5 rounds; multi-viewport pages need 8-12.

Related Skills

Explore More Software Engineering Skills→
tuyoogametuyoogame
124

Figma

Query Figma design files to extract structure, components, and styles.

Official
Intermediate
ricardohg1998-createricardohg1998-create

visual-regression-guardian

Automate Playwright visual regression tests with baselines and CI integration.

Community
Advanced
scsm-unrestrictscsm-unrestrict
1

design-to-code

Converts design mockups and screenshots into HTML/CSS or framework component code.

Community
Intermediate
openaiopenai
5.3k

figma-generate-design

Builds Figma screens and views from code using design system components, variables, and styles.

Official
Advanced