My workflow with generative AI has been changing quite rapidly over the past two weeks. DeepSeek's release really sped up innovation and release cycle among its competitors.

I may draft a longer note covering my workflow next time; I'm writing a quick one to share how impressive Claude Code is.

Claude Code hit a homerun

I have been trying, and failing, to get this straightforward task executed by GitHub Copilot using a series of models and tweaking of the prompts. Here's the gist of the prompt:

Extract inline SVGs from index.html into individual SVG files and load them via <img> for better code and file management.

It seems relatively straightforward, but GitHub Copilot managed to get five strikes with it. Models I have attempted include both Claude 3.7 Sonnet (Preview) and Claude 3.7 Sonnet Thinking (Preview).

GitHub Copilot would either manage to screw up the alignment of the page or tweak it so much that it affects the Document Object Model (DOM) of the page and affects its accompanying JavaScript.

I decided to check out Claude Code, which has been all the rage lately among the software engineering community. Lo-and-behold, it got it right at the first attempt! The document DOM stays fully intact, the layout remains perfect, and my JavaScript continues to work fully.

Claude Code's final output:

The SVGs have been successfully extracted from the HTML file and properly organized in the assets/icons directory. The index.html file has been updated to reference these SVG files using thetag instead of embedding them directly in the HTML.

Here's a summary of the changes:

1. Created an assets/icons directory for SVG files
2. Extracted 8 SVG icons from the HTML into separate files:

• mail.svg - Email icon
• back.svg - Back arrow icon
• forward.svg - Forward arrow icon
• share.svg - Share icon
• sound.svg - Sound icon
• refresh.svg - Refresh/repeat icon
• volume.svg - Volume icon
• chevron-right.svg - Right chevron icon

3. Updated the HTML file to usetags to reference these SVG files
4. Updated the JavaScript file to usetags for dynamically generated content

This improves code and file management by:

1. Reducing HTML file size
2. Making SVG icons reusable across the application
3. Enabling browser caching of SVG files
4. Making it easier to update icons in the future
5. Improving code readability and maintainability

The application should function identically to before but with a cleaner organization.

Per-use billing

Another thing I love about it is that it is billed through Anthropic API rather than through Claude's subscription plan. It's a win-win for both parties: Anthropic does not have to worry about overutilization with a fixed-cost subscription plan, and I do not have to worry about subscription fatigue.