Сайт на миллионы $$$ за несколько минут с Claude Design

Summary of the Subtitles (Tech Concepts, Product Features, Guide/Tutorial Flow)

The speaker demonstrates a workflow for generating high-quality sales websites/landing pages in minutes using Anthropic Claude—especially Claude Code (often referenced as Claude Code / “clod” tools)—integrated into VS Code. The focus is on avoiding generic layouts by using system instructions (“skills”) and structured inputs (technical specs + project transcript + slides).

What the video claims you can achieve

• Create professional-looking landing pages quickly from prompts and voice-based project descriptions.
• Use landing pages to test business hypotheses cheaply/free (they mention a paid Claude plan).
• Produce designs described as non-generic, with typography, custom layout, animations, and an “expensive” look.

---

Main Technical / Tooling Workflow (Step-by-Step)

1) Development environment: VS Code + Claude extension

• Install VS Code (free IDE).
• Install the ClaudeCode (“Klodcode”) extension/plugin in VS Code.
• Enter an API key.
• Note: Claude Code features are paid (starting around $17/month). A free Claude chat exists but doesn’t provide the same code-generation capability.

2) Generate technical specifications using ChatGPT

• Use GPT chat to produce a long website technical specification from:
  • a long prompt prepared by the creator
  • a text document/transcript describing the project
• The creator emphasizes that this specification becomes the “source of truth” for Claude Code.

3) Prepare a project folder with “system instruction” and assets

Inside the VS Code project folder:

• Add a file named like clod.md / “clд.md” to act as a system instruction file.
  • Claude Code automatically searches for it and follows it at runtime.
• The system instruction orders Claude to run specific “skills” before coding:
  • frontend design skill
  • UI UX Pro Max Skill
• Purpose: reduce default/basic UI output and enforce a more unique, higher-quality design approach.
• Include additional folder assets:
  • the generated technical spec (e.g., tz.txt)
  • the project transcript (so Claude understands the business/context)
  • a presentation folder with ~15 slides (Claude can analyze images)

4) Launch Claude Code in “bypass permissions” mode + higher effort

• Use a mode that skips repeated confirmation, letting Claude edit/code without prompting.
• Set effort to a high level (influences reasoning and token usage).

5) Provide inputs to Claude Code (voice or text)

• Communication is mostly via voice.
• Claude is given:
  • the instruction/spec file name
  • the transcript
  • the slides/presentation folder
• Claude then:
  • reads the spec
  • analyzes the presentation/images
  • generates an implementation
    • notably, an index.html file of about 1000+ lines is created in the project

6) Screenshot-based verification loop (Temporary Screenshots)

The system reportedly includes a loop where Claude:

• runs the code
• takes screenshots of the generated pages
• uses image analysis to verify and iterate
• Evidence: a folder like “Temporary Screenshots” appears, showing screenshots where sections progressively fill in.

---

Introducing “ClaudeDesign” (Separate Design Product)

The video also introduces Claude Design (described as very new) as a companion tool:

• It generates a design system / layout based on:
  • the tech spec + transcript
  • optional design reference screenshots
• Conceptually, it’s compared to “wipecoding” tools (details aren’t fully precise in the subtitles).
• A highlighted UX feature:
  • Claude asks clarifying questions using clickable buttons (praised as better than other tools).
• Demo behavior includes:
  • choosing Russian-only site language
  • selecting site name, palette direction, tone level, where applications go, etc.
  • then auto-building the site logic and files with a browser-accessible output

They mention:

• ClaudeDesign can output a public share link
• users can edit elements directly (select a block → adjust font/colors/margins/text)

---

Design Customization “Life Hacks” Shown

1) Reference designs via screenshot (Dribbble / 21st.de F)

• Download screenshot(s) from style sites (e.g., dribbble).
• Upload screenshot(s) to Claude Design with instructions like:
  • “Use this screenshot as the basis; ignore other design instructions.”
• They also mention 21st.de F with reusable components:
  • copy an animated component prompt
  • paste it into ClaudeDesign to recreate similar animation/background behavior

2) Edit without re-prompting

After generation, the system allows adjustments such as:

• changing text
• changing numbers
• tweaking typography/colors/transparency/margins

3) Add interactive/animated elements

Examples demonstrated include:

• animated backgrounds
• text animations (text “rises and appears”)
• particle effects and “flying lines”
• network-style multi-participant animations reacting to mouse movement
• Note: some animations may not be visible on mobile.

---

Practical Business Example in the Demo: “Board of Directors / Mastermind”

The demo project is the creator’s closed entrepreneur program:

• called “Mastermind” (described as a closed club)

A “Board of Directors” site concept includes:

• membership threshold (mentions 100 million rubles+ turnover)
• NDA and strict rules (including conflict-of-interest constraints)
• sessions described as 16 days total, with:
  • four sessions per year
  • 4 days each

The landing page features:

• animated hero/title
• sections explaining methodology and safe discussion rules
• a working application form (they claim Claude helped wire it up)

They also mention AI-chosen domain registration:

• strategicbard.ru, used for the live demo.

---

Key Review / Guide / Tutorial Takeaways Emphasized

A “million-dollar”-looking landing page can be achieved by combining:

1. Claude Code (VS Code integration)
2. a system instruction file (clod.md) + skills (frontend design + UI/UX skills)
3. LLM-generated technical specs (via GPT chat)
4. project transcript + presentation slides (images for Claude’s analysis)
5. screenshot-driven iteration (via “Temporary Screenshots”)
6. Claude Design for faster design systems + editable output
7. reference screenshots / component prompts to control visuals and animations

---

Main Speakers / Sources

• Main speaker: Nikolai Khlebinsky (host of the “Action Plan” channel)
• Primary AI systems referenced:
  • Anthropic Claude (Claude Code / Claude Design)
  • GPT Chat (for technical specification generation)
• Software referenced:
  • VS Code
  • ClaudeCode extension/plugin
• Design/reference sources referenced:
  • dribbble.com
  • 21st.de F