클로드 디자인 + 코드 최강 조합으로 움직이는 고퀄 홈페이지 만드는법 | AI 웹사이트 제작

Summary

The video demonstrates a workflow for creating an animated landing page with Claude Design and Claude Code, without manually writing code. The presenter says the example took about 30 minutes.

Workflow and Key Tips

1. Create the design in Claude Design

• Start a prototype and choose a high-fidelity design for a more polished first draft, though it may use more tokens.
• The presenter recommends initially leaving the built-in design system off. It can consume tokens with each request, and Claude Design and Claude Code have separate usage limits.
• For more distinctive results, gather at least three visual references—Pinterest is one suggested source—and attach them with a prompt describing the brand, mood, and desired sections. Claude may ask clarifying questions before generating the design.

2. Explore and refine design options

• Ask Claude to propose several styles, then generate versions in selected styles. This makes it easier to compare directions before settling on one.
• The video demonstrates three editing approaches: directly adjusting an element, leaving a targeted comment on a specific part, or using the Tweaks controls.
• Tweaks provides sliders and controls for items such as color, fonts, spacing, and content. Adjustments can be previewed without using tokens until the chosen settings are applied.
• The presenter recommends finalizing the design before adding animation.

3. Make the design functional in Claude Code

• Use the design’s Handoff Code option, then paste the generated command into a terminal in VS Code or Cursor.
• Claude Code recreates the design as a working site.
• The tutorial replaces placeholder images with assets in a project folder, then asks Claude Code to match each image to the appropriate product and update its text.

4. Add animations selectively

• Find animation components from an online collection and give Claude Code the component prompt.
• Clearly state what to change and what to preserve. For example, add an animation to the reviews cards while leaving the section’s design untouched.
• The demonstration adds cards that slide into view, followed by a hero effect where an image expands on scroll to reveal a looping video.

Main Takeaway

The recommended sequence is:

Design in Claude Design → hand off to Claude Code → add animations in Claude Code

The tutorial emphasizes using references to improve visual direction, refining the design before implementation, and giving precise instructions to prevent changes to unrelated parts of the page.

The presenter says the prompts and guides are linked in the pinned comment, along with additional resources for creating images and videos.

Main Speaker and Source

• Hoarin (홍아린), the video’s presenter and tutorial guide.