클로드 디자인 + 힉스필드= 왕초보가 가장 빠르게 홈페이지 제작하는 방법

Summary

The video demonstrates how a beginner can create a polished cosmetics e-commerce website draft in about 20 minutes using Claude Design and an image- and video-generation MCP integration.

Key Concepts and Features

• Start with visual references: The presenter recommends finding a well-designed website in the same industry before prompting an AI. Awwwards is given as an example. A reference helps establish the brand’s visual direction, which the presenter says AI may not choose well on its own.
• Generate rich media through MCP: By connecting Claude to Higgsfield MCP (the name is rendered inconsistently in the subtitles), the workflow can generate images and video for the site. The demo uses a full-width, 16:9 hero video of a model applying cosmetics, plus product images with alternate images shown on hover.
• Design and edit in Claude Design: The presenter enters a reference URL and a description of the desired cosmetics store without selecting a template or design system. After Claude creates the draft, the presenter demonstrates editing it on the canvas and asking Claude to add an image-replacement control.
• Move from draft to implementation: The design can be exported as Claude Code and continued in VS Code or another coding tool, such as Cursor, to add features like payments, carts, or logins. For a simple preview, the presenter suggests uploading the code to GitHub and deploying it through Vercel.

The presenter also notes that Claude Design’s editing and design-system capabilities have improved, and says its usage is now counted alongside Claude subscription usage. The video says Higgsfield’s Starter plan costs $19 per month.

Tutorial Steps

1. Find a suitable website reference and inspect its layout and interactions.
2. Log in to Higgsfield and copy its MCP server address.
3. In Claude, add a custom connector, paste the remote MCP URL, and connect it.
4. Open Claude Design, provide the reference link and a detailed site brief, then generate the draft.
5. Edit the design and images directly, or ask Claude to add editing controls.
6. Export the result to Claude Code for further development, or deploy the draft using GitHub and Vercel.

Main Speaker and Services

The presenter is Jack PD, who gives a hands-on tutorial.

Services referenced: Claude Design, Claude Code, Higgsfield MCP, Awwwards, VS Code, Cursor, GitHub, and Vercel.