HTML to PSD

Install it in 3 steps

About 10 minutes. You need a Mac or Windows PC with the Claude desktop app and Adobe Photoshop, plus Chrome or Edge. Claude sets up everything else and asks before it installs anything, including Node.js (a free helper program the skill runs on). It works only in the Code tab of the Claude desktop app (the version of Claude that runs on your own computer), not in Chat, claude.ai or Cowork. Windows hasn't been tested on a real PC yet, so tell David if anything goes wrong.

1. Download and unzip the kit (button above). Double-click the zip on a Mac, or right-click › Extract All on Windows. You'll get a folder named html-to-psd-kit.
2. Open a Code session in that folder. In the Claude desktop app, click the Code tab, start a new session, and choose the html-to-psd-kit folder.
3. Copy the setup message, paste it into the session, and answer Claude's questions. They are plain yes/no checks, one step at a time. When it says the skill is installed, start a new Code session so Claude notices it.
   Copy the setup message
   Read the message before you paste it

   I'd like you to install a Claude Code skill called "HTML to PSD" (skill ID: html-to-psd). Its files are in this folder. WHAT IT IS It turns designs Claude builds as HTML/SVG (flyers, posters, slides, social graphics, brackets, handouts) into layered, editable Photoshop files: one layer per element, real editable text, clean layer names, flat folders (never nested), 300 DPI for print, and an artboard per page for multi-page designs. It checks its own output against the original, lists the fonts needed, installs missing free Google Fonts (only with my permission, after a security check), and opens the file in Photoshop. It only runs in Claude Code on a Mac or Windows PC. It doesn't run in Chat, on claude.ai, or in Cowork. WHAT'S IN THIS FOLDER - html-to-psd.skill: the skill (a standard zip containing a folder named html-to-psd/) - SKILL-REFERENCE.md: the full technical documentation. Read sections 1, 2, 5 and 11 before you start; use the rest as needed. - INSTALL-GUIDE.pdf: the plain-language guide for people (no need to read it) - CHECKSUMS.txt: SHA-256 fingerprints of the three files above PLEASE DO THIS, ONE STEP AT A TIME, AND TELL ME BRIEFLY WHAT YOU FIND AT EACH STEP I'm not technical, so use plain language and explain any technical term the first time you use it. 1. Check the files: compute the SHA-256 of html-to-psd.skill, INSTALL-GUIDE.pdf and SKILL-REFERENCE.md and compare them with CHECKSUMS.txt. If anything doesn't match, stop and tell me; don't install. 2. Check my computer: which operating system it is (it must be macOS or Windows), whether Node.js is installed (node --version, needs version 18 or newer), and whether Photoshop is installed. If Node.js is missing or older than 18, offer to install the current LTS (long-term support) version for me. Explain in one or two plain sentences what will be installed and where it comes from, and wait for my yes. Never ask me to type my password into this chat; the computer's own installer will ask me for it. Use only the official source, nodejs.org: - Mac: read https://nodejs.org/dist/index.json and find the newest entry whose "lts" value is not false. Download its macOS installer (the file named node-<version>.pkg inside https://nodejs.org/dist/<version>/) into this kit folder, compare its SHA-256 with the matching line in SHASUMS256.txt in that same nodejs.org folder, and stop if they don't match. Then open the installer (open <file>.pkg) so I can click through it and enter my password myself. - Windows: run winget install OpenJS.NodeJS.LTS (Windows will ask me to approve it). If winget isn't available, download the .msi installer from nodejs.org the same way, check its checksum, and open it for me. - When it finishes, confirm the version by running node by its full path (Mac: /usr/local/bin/node --version; Windows: "C:\Program Files\nodejs\node.exe" --version). Then tell me to quit and reopen the Claude app, start a new Code session in this folder, and paste this message again; step 2 will pass this time and we carry on. If I say no, if it fails, or if I don't have permission to install programs on this computer, stop and tell me to ask my IT person. Don't try workarounds. 3. Install the skill as a personal Claude Code skill: unzip html-to-psd.skill so its html-to-psd folder ends up at - Mac: ~/.claude/skills/html-to-psd - Windows: %USERPROFILE%\.claude\skills\html-to-psd If a folder with that name already exists, stop and ask me before replacing it. Afterwards, confirm that SKILL.md and the scripts folder are there. 4. Test it, but ask me first, because the first run downloads three small code libraries (ag-psd, pngjs, playwright) from npm, the public JavaScript library registry, into a cache folder. Once I say yes, run: node "<skills folder>/html-to-psd/scripts/convert.js" "<skills folder>/html-to-psd/assets/test-designs/contract-sample.html" "<this kit folder>/test-output" The last line should say RESULT: PASSED. Then read test-output/report.md and summarize it for me in a couple of sentences. If it fails, show me the error and check the Troubleshooting section (16) of SKILL-REFERENCE.md. 5. Fonts and Photoshop: the test design uses the free Google Font "Jost". Run node "<skills folder>/html-to-psd/scripts/install_fonts.js" "<this kit folder>/test-output" which only lists what's missing and changes nothing. If Jost is missing, tell me what would be downloaded and installed, and only run it again with --install if I say yes. Then open the test PSD with node "<skills folder>/html-to-psd/scripts/open_in_photoshop.js" "<this kit folder>/test-output/contract-sample.psd" It should show two artboards, "Front" and "Back". 6. Finish by telling me in plain words that it's installed, and that I should start a NEW Code session in the folder with my own design and ask something like "turn flyer.html into a layered Photoshop file for our designer." Don't change anything outside the skills folder, the test-output folder, the Node.js installer download (only with my OK) and (only with my OK) my personal fonts folder. If anything is unclear or goes wrong, stop and ask me rather than guessing.Copy

Using it

1. Get the design as an HTML file. A PDF or an image won't work: those are flat “printouts” with nothing left to separate into layers. If the design was made in a Claude chat, open that chat and ask: “Give me the HTML file for this design.” (A PDF printed from a browser was almost always HTML first, so ask for the HTML.)
2. Start a Code session in the folder that holds the HTML file.
3. Ask in plain words:
   Turn flyer.html into a layered Photoshop file for our designer.Copy
4. Let it work. The first time it spends about 10 seconds setting itself up. It builds the PSD, checks the PSD against the original automatically, tells you which fonts the design uses, and asks before downloading anything.
5. Photoshop opens the file. If Photoshop is already running and new fonts were installed, Claude asks you to save your work and quit Photoshop first so the new fonts show up. It never quits Photoshop for you.

What the PSD looks like

• One layer per element, in the same stacking order as the design, with real names instead of “Layer 7” wherever possible.
• Real text layers that keep font, size, color, letter spacing, line spacing, alignment and mixed styles (like a bold word inside a sentence).
• Folders only one level deep, one per real section of the design.
• 300 DPI (print resolution) at true size for print designs, detected automatically.
• Multi-page designs (like a front and a back) become one PSD with an artboard for each page. An artboard is a separate canvas inside one Photoshop file.

Fonts, and how they're kept safe

The security check covers where the file came from (only Google's font server), its size, that it's a genuine plain font file, that its internal structure and checksums are intact, that nothing is hidden after the end of the file, and that its name matches what the PSD expects. It adds a virus scan too if ClamAV (free antivirus software) happens to be installed. In testing, genuine Google files passed and five deliberately tampered files were all rejected.

Good to know

• Small warning icons on text layers when the file opens are normal. In Photoshop choose Type › Update All Text Layers once and they go away. If Photoshop asks to replace a font instead, a font is missing; see fonts-needed.txt.
• Your designer needs the same fonts installed, or text will shift when they edit it.
• Shapes, gradients, shadows, borders and images become picture layers, not vector shapes or live layer styles. Text stays fully editable.
• Color is RGB. For print, the designer converts to the printer's CMYK profile in Photoshop.
• Blend modes, backdrop blur and CSS masks are flattened. Justified text becomes left-aligned; vertical text isn't supported.
• Expect 1–2 pixel differences after Photoshop redraws text. Bigger shifts mean a font is missing or the wrong version.

If something goes wrong

Removing it

• The skill: delete the folder ~/.claude/skills/html-to-psd (Mac) or C:\Users\<you>\.claude\skills\html-to-psd (Windows).
• Its tools: delete ~/.cache/html-to-psd (Mac) or C:\Users\<you>\AppData\Local\html-to-psd (Windows).
• Fonts it installed: remove them in Font Book (Mac) or Settings › Personalization › Fonts (Windows).

What's in the kit

Privacy and network use

Design files and PSDs are never uploaded. During normal use the skill contacts only: the npm registry (first run), the design's own font links while drawing it, Google's font servers (font install, after you say yes), and Adobe's font site (to find activation pages). Beyond the setup message and the full reference in the kit, it needs no accounts or keys.