A practical guide published by CryptoComLearn details how a polished personal portfolio site was built with Claude Code in about two hours, even without prior coding experience. The article frames the result against the kind of work that agencies may charge around $5,000 to produce, then walks through a real build log rather than offering generic advice. It includes the actual references used, the exact prompt structure, the animation concept, and the bugs that had to be fixed.
Design tooling came first, before any page generation
The process began with installing two design-related tools inside Claude Code. The first was Frontend Design, developed by Anthropic, which the article says helps avoid overused typefaces and pushes stronger typography and copy. The second was UI/UX Pro Max, described in the piece as offering 57 interface styles, 95 color schemes, and 56 font pairings. The author also recommends switching Claude Code to Auto mode so the workflow is not interrupted by repeated permission prompts.
Reference gathering came next. Instead of asking Claude to copy a single site, the author broke down visual inspiration into separate screenshots for specific sections: the hero area, the section below it, the footer, a single project page, and the loading screen. Those assets were placed in a /reference folder inside the project. The main visual benchmark came from Il Capo Production on Awwwards, while the portfolio listing page used an additional reference sourced from Pinterest because the original site did not have a matching layout.
The prompt structure shaped the first version
To start the build, the article says to begin the instruction with /ui-ux-pro-max so the design skill is invoked from the outset. The prompt then maps each reference image to a specific part of the site, while also identifying the personal photo and project placeholders to use. One line is treated as especially important: before building, Claude should ask any clarifying questions it needs.
According to the walkthrough, Claude then pauses and asks four to six questions covering style, typography, layout, animation intensity, and tone of copy. The author argues that these answers need to be specific, because vague replies lead to more back-and-forth later. After that exchange, Claude reportedly spent about five minutes planning and another ten minutes producing the first build.
A spotlight cursor effect became the main interaction element
The most concrete visual example in the article is the hero-section cursor animation. The idea was simple but specific: place a dark background behind a portrait, make the image nearly invisible by default, and reveal a brighter, warmer version of the same photo as the cursor moves across it. The reveal should be controlled by a soft-edged circular mask with a radius of about 100 to 150 pixels.
The author described that effect directly in natural language and asked Claude to implement it. In the account provided, the result worked on the first pass: as the user moved the cursor, the hidden image brightened only where the pointer traveled. That example reflects the larger method throughout the piece. The instructions were not abstract. They defined the visual logic, the interaction behavior, and the rough dimensions clearly enough for Claude to act on them.
Fix issues in batches, then run a structured review
After the initial version was generated, the author manually reviewed the site and noted the problems that stood out: route transitions felt abrupt, the spotlight effect lagged behind the cursor, some elements overflowed the screen, and the chosen typography did not match the intended aesthetic closely enough. One operational rule is stressed in the article: collect all of those issues and send them back in one batch, instead of handling them one at a time.
Once the obvious bugs were addressed, the author ran a second review using a structured checklist. Claude was asked to score the site across typography, color, hierarchy, animation, mobile design, and copy, then point out what still needed work. The final workflow was selective. The author read the assessment, agreed or disagreed with each point, and only sent back the fixes that felt right. The article closes on a practical note: the first build is not perfect, but it can already be solid enough to keep refining from there.