---
name: Design Reference to HTML
slug: design-reference-to-html
category: Frontend
description: Design Reference to HTML converts screenshots or mockups into HTML using workspace files, App.jsx, DESIGN.md, and preview(). Use it when recreating a visual design as web code in Open CoDesign.
github: "https://github.com/OpenCoworkAI/open-codesign/tree/main/.changeset/design-reference-to-html-skill.md"
language: TypeScript
stars: 7725
forks: 811
install: "npx degit https://github.com/OpenCoworkAI/open-codesign/tree/main/.changeset ~/.claude/skills/.changeset"
installs_to: ~/.claude/skills/.changeset
source_path: .changeset/design-reference-to-html-skill.md
collection_size: 1
category_size: 567
added: 2026-08-15T06:51:19.609Z
last_synced: 2026-08-15T06:51:19.609Z
canonical_url: "https://dirskills.com/skills/design-reference-to-html"
---

# Design Reference to HTML

Design Reference to HTML converts screenshots or mockups into HTML using workspace files, App.jsx, DESIGN.md, and preview(). Use it when recreating a visual design as web code in Open CoDesign.

**Install:**

```bash
npx degit https://github.com/OpenCoworkAI/open-codesign/tree/main/.changeset ~/.claude/skills/.changeset
```

## README

Add the built-in `design-reference-to-html` method skill for screenshot/mockup-to-HTML recreation. The skill is an Open CoDesign-native rewrite that uses workspace files, `App.jsx`, `DESIGN.md`, `preview()`, and optional `gen_image()` instead of vendoring external skill directories or browser scripts.