09_CreateaProWebsite_Easy_Beautiful

10 min read

Overview

CreateaProWebsite walks through his exact end-to-end process for building a professional, non-generic website with Claude Code in about 10–15 minutes of generation, then deploying it live on a custom domain. The core differentiator versus “generic AI slop” is installing two design skills into Claude before prompting: the front-end design skill (built by Anthropic) and the UI/UX Pro Max skill (installed via NPM). These expand Claude’s font, layout, color-palette, and UI inspiration beyond its overused built-in defaults. The demo builds a landscaping company site (Summit Ridge, Austin) from a reference-image screenshot pulled from Dribbble, using pre-generated media assets (created with Higgsfield AI image/video generation). He then iterates with targeted text prompts plus an in-editor “draw/select elements” annotation tool, adds a scroll-scrubbing hero video effect, and publishes by zipping the project files and uploading to Hostinger. Takeaways: gather assets up front, use a reference image for direction, install design skills to escape generic output, ask Claude to ask clarifying questions, and use a single-file static build for simple sites.

Key Insights

  1. The gap between the hype and reality for beginners is real — everyone sees people building elaborate websites in minutes, but beginners get stuck on “prompts, skills, UI frameworks, deployment, and all these technical terms.” This video’s purpose is to clear that confusion. (0:19)

  2. Skipping the design-skill install step is exactly what produces generic, boring AI websites — installing skills is the way around the “generic AI-built website” look. Skills are “pre-written instructions that we want Claude to follow whenever it’s designing or building things.” (4:46)

  3. The Anthropic front-end design skill breaks Claude out of its default font/layout palette — instead of “overused fonts” on all generic AI sites, it reaches for more creative font choices and layouts “that aren’t necessarily used in all the generic Vibe Coded websites you see.” (5:14)

  4. The UI/UX Pro Max skill supplies the creative inspiration Claude lacks by default — it gives Claude “a bunch of more UI and UX design inspiration”: color palettes, font pairings, UI styles, and text stacks to pull from. (6:12)

  5. Starting from a reference image gives Claude a good starting place instead of building blindly — pasting a screenshot of a site you like (layout and section direction) beats asking Claude to build from scratch, then you tweak and customize from there. (7:30)

  6. Letting Claude ask questions ensures it has what it needs without guessing — ending the build prompt with “Please ask me any questions that you need to complete this job” makes Claude come back and gather the info it actually needs. (10:11)

  7. Providing assets up front means Claude auto-discovers and uses them — because the logo, brand colors, and before/after images were already in the project’s media folder, Claude “knows exactly what to go search for” and matched images to the right sections correctly on its own. (13:34)

  8. One prompt produced a genuinely impressive first draft — hero, nav, services, copy (“rooted here in Austin, built on craftsmanship”), blog, reviews, recent projects, and a working before/after slider bar were all built in one pass, “would have taken me far longer to build from scratch” than the ~10–15 minutes Claude took. (13:47, 15:55)

  9. Auto mode vs accept-edits is a control tradeoff — auto mode lets Claude complete tasks without asking permission at each step, ideal when you trust it; “accept edits” mode keeps you in control of exactly what Claude does before it does things. (10:51)

  10. The result is only on localhost until you publish — a localhost link means only you can access it locally; making it live requires purchasing web hosting plus a custom domain. (19:51)

Actionable Techniques

  1. Gather all media assets before starting — business info, logos, brand colors, professional photos/videos; or generate them with AI (Higgsfield for image + video). Having them pre-gathered lets you “find everything quickly” during the design process instead of searching later. (1:39)

  2. Create a dedicated project folder and put a media subfolder inside it with all images, logos, and assets, then open that folder in Claude Code via the “open folder” tab and click “trust workspace” so Claude can access its files. (3:15, 4:12)

  3. Install the front-end design skill globally — copy the skill link, type “install this skill globally” in the project, paste the link, and accept all the edits Claude requests. (5:39)

  4. Install the UI/UX Pro Max skill globally via NPM — copy the link, type very specifically “install this plugin globally using NPM” (the NPM ensures it installs cleanly across all of Claude), paste, and click allow through every permission prompt. (6:43)

  5. Restart Claude after installing skills — it will report “restart is needed,” so restart so the skill is “fully installed and ready to use” when it boots back up. (7:13)

  6. Pull design inspiration from award-winning-site libraries — use awwwards.com (awards with three W’s) and dribbble.com for live, clickable inspiration; on Dribbble you can search a topic (e.g., “landscaping”) and screenshot your favorite layout/section direction. (7:50)

  7. Feed the reference screenshot to Claude and invoke the installed skill with / — paste the image, type a backslash + “UI” and select “UI/UX Pro Max” from the dropdown so Claude accesses that skill for the first prompt. (9:24)

  8. Use a complete build prompt ending with “Please ask me any questions” — e.g., “Please build me a website for [Company] … use this reference image as inspiration but using my own branding, colors, and logos … include a few specific sections … Please ask me any questions that you need to complete this job.” (9:51)

  9. Dictate instead of typing — use the microphone in the prompt box to talk in your normal language and give ideas directly, avoiding the need to type everything out. (10:25)

  10. Switch to auto mode for faster, unattended builds — under the send options, set it to “auto” so Claude automatically works through tasks; leave on “accept edits” if you want to approve every step. (10:51)

  11. Answer Claude’s clarifying questions to fill in specifics — e.g., whether you have brand colors/logo, which sections you want (adding a before/after section and an “our process” section on top of the reference’s hero/trust bar/about/services/blog/contact), single-HTML vs multi-file vs React/Next build, and what services you offer. (11:35)

  12. Accept the single HTML file recommendation for simple sites — when Claude recommends a single HTML file for this type of site, it’s “probably all that we need” — no need to get complicated. (12:31)

  13. Preview the result in Claude Code — click “preview” in the top right corner to see the rendered site; click “refresh” anytime to re-render after edits. (14:00, 17:27)

  14. Iterate with targeted text prompts for fixes — e.g., “The hero section is getting cut off at the bottom. Let’s make sure all the elements fit above the fold” — then ask for specific swaps (image → video). (16:31)

  15. Add a scroll-scrubbing hero video — ask Claude to “swap out the image of this hero to this video file to play as you scroll down the page; the playing of the video will be triggered by the scroll,” pointing it to the exact video file; it plays/scubs through the video as you scroll up and down. (16:37)

  16. Test on the live localhost link — paste the localhost URL Claude Code provides into a web browser to test the full site (including the scroll effect) on your local device. (17:57)

  17. Use the draw/select annotation tools for visual edits — click the pencil to draw a note on a section and “add this drawing to the chat”; or use the select button to highlight a section and type a change, e.g., replacing three images with one full horizontally-displayed crew photo so it isn’t cropped. (18:35)

  18. Replace all placeholder info (phone, quote, contact) before publishing — make sure to switch out any real contact details before going live. (19:34)

  19. Publish by zipping the contents (not the folder) and uploading — select all files inside the project folder, compress them into an archive.zip (right-click → compress on Mac / “send to compressed folder” on Windows), and upload that zip to the host — do not compress the containing folder itself. (24:02)

  20. Use Hostinger’s migration flow for a custom domain — after purchasing a hosting plan, choose “migrate an existing site” → “upload backup files” → claim your free domain → upload the zip → submit the migration request, then click the live link to view the site online. (23:11)

Tools & Skills Mentioned

  • Claude Code (Cloud Code) — Anthropic’s coding agent in the Claude desktop app; requires the Claude Pro plan (~$17/month) to access on desktop. (1:07)
  • Claude Pro plan — also includes Claude Design and Claude Co-work tools built into the pro plan. (1:22)
  • Claude desktop application — has Chat, Co-work, and Claude Code tabs. (2:56)
  • Skills — pre-written instruction sets installed into Claude to guide its design behavior. (4:57)
  • front-end design skill — built by Anthropic; expands fonts and creative design skill set beyond the generic palette. (5:08)
  • UI/UX Pro Max skill — provides UI/UX design inspiration: color palettes, font pairings, UI styles, text stacks; installed globally via NPM. (6:12)
  • awwwards.com — library of award-winning websites for inspiration (live previews available). (7:50)
  • dribbble.com — another source of website inspiration with a search bar. (8:22)
  • Higgsfield — AI platform combining AI image and video generation; used to generate the site’s media and hero video. (2:07)
  • Hostinger — web hosting + custom domain platform used for publishing; premium plan ~3.59/mo (payments/back-ends, up to 50 sites); one free domain for a year; the creator’s special link includes a discount code. (20:18)
  • Custom domain — e.g., summitridgeatx.com, claimed free with hosting for the first year. (23:35)

Quotes Worth Keeping

  • “If you skip this step, this is how you’re going to get a lot of those generic and boring-looking websites that may come out of most AI-generated website builders.” (4:46)
  • “Skills are basically just pre-written instructions that we want Claude to follow whenever it’s designing or building things for us.” (4:57)
  • “Instead of using overused fonts that are used on all the generic AI sites you see, it’ll start to reach for more creative font choices and do different layouts that aren’t necessarily used in all the generic Vibe Coded websites.” (5:25)
  • “That last sentence is really important because I want Claude to actually come back and ask me what it needs to build this website properly so that I know that it has all the information it needs without me having to guess what exactly it wants.” (10:14)
  • “Because I provided a lot of this information up front, it knows exactly what to go search for and how to go about building this.” (13:34)
  • “For one pass from one prompt, this is pretty dang impressive. Honestly, would have taken me far longer to build from scratch than this went and did in about maybe 10, 15 minutes total.” (15:53)
  • “We don’t want to compress this folder here because that would actually be compressing this folder, but we only need to compress all of the contents within that folder.” (24:23)

Graph View

Backlinks