Claude Code vs. itself: installing one skill turns a plain slice tool into a pro workbench
The visual and interaction gap between the two versions is the difference between a throwaway script and something people would actually use daily. Installing one open-source skill lets a single developer skip a whole round of manual frontend polish, which matters for anyone shipping lightweight browser tools with AI-generated code.
Claude Code, given the same requirement twice, builds two versions of a browser-based image slicer. The first version, written with no design skill, completes in about 3.5 minutes and works: it crops a 1346x1346 square, splits it into nine roughly 449x449 PNGs, and offers per-slice downloads plus a ZIP. But the UI is flat, the left control bar is crowded, the download button overlaps the slices, and the original image shows no cut lines, so you can't tell where the knife falls.
The second version, after the user explicitly enables the official open-source frontend-design skill, takes about 5.5 minutes and looks like a professional desktop application: dark-gray chrome, print crop marks in the workbench, an export panel on the right, and each slice labeled with its exact pixel dimensions. A third iteration adds semi-transparent grid lines over the original and a custom rows/columns input (1 to 6 each) that updates the grid and slices in real time. Total time from skill installation through the fourth optimization: roughly 14.5 minutes. The final output is a single HTML file that runs entirely in the browser, and Claude Code also writes a zero-cost hosting guide that recommends dragging the folder into a static hosting service or enabling a Pages branch, with no server or database needed.
The design skill does not add functionality; it changes how usable the tool looks and feels. The first version already splits images correctly, but its crowded layout, overlapping download button, and missing grid lines would likely push real users away before they ever click anything.
Claude Code used Playwright on its own for browser testing and visual review across multiple rounds, meaning the workflow includes automatic QA, not just code generation. That is a meaningful part of the 14.5-minute total.
The deployment plan stops short of actual publication; the claim of a zero-cost online tool rests on a README and a set of steps, so the online part remains unverified in this test.
My take is, better to have it generate the project in some specific artistic style from the very start.
Specifying a style up front does save trouble. But for this kind of functional tool, style alone easily drifts or piles on unnecessary visuals. The design skill mainly helps it standardize the workbench layout — this time it was deliberately set up as a comparison.