Я заменил Figma на Claude Design на 24 часа | Сайт за $1000

Claude Design (Troika) as a Figma Alternative

• Rolled out: April 17
• Positioning: direct competitor to Figma/Canvas
• What it is: a visual design tool built into Claude and included in Claude’s subscription
• Goal (per the tutorial): rapidly generate client-ready website prototypes and designs without manually building UI

How It Works Under the Hood

Claude Design is described as a visual editor layered on top of the same engine used by Claude Code (referenced as Claude Opus 4.7 in subtitles).

Core capabilities

• Website prototypes / landing pages
• Mobile apps
• Presentations (Specker Notes mentioned)
• Short animations
• Design systems
• Export options including:
  • PDF / PowerPoint
  • Canva / HTML

Key Differentiator vs. Claude Artifacts

While Claude can generate landing pages using artifacts, Claude Design adds a design system layer, including:

• Reusable brand kit:
  • colors
  • fonts
  • tone/voice
  • logo
• Memory across projects

Analogy: without a design system, you repeatedly restate brand requirements; with one, it behaves more like a full-time designer.

Who It’s For (Stated Use Cases)

• People building websites and selling prototypes
• Teams looking to save money on design labor
• People who want design + deployment-ready structure for follow-up work with Claude Code

Availability & Operational Limits

Plans / access

• Available on Pro / Max / Enterprise
• Not available on Free (subtitle: “FreeShark”)

Token usage constraints

• Design runs with separate token consumption
• Limits reset weekly
• The tutorial recommends being economical and using design systems to reduce repeated token spend

Setup and Access Flow

• In Claude, open the Design tab (or click More to find it)
• Run through multiple iterations in the design UI
• Export/handoff the result into Claude Code

Three Main Tutorial Goals

1. What Claude Design can do—and where it’s (allegedly) praised incorrectly
2. How to create a sellable package in ~20 minutes for real money (client-ready output)
3. Where Claude Design has strict limitations so you don’t waste a week on unsupported tasks

The tutorial also promises templates/prompts at the end (distributed via Telegram).

Central Workflow: Creating a Design System

In the UI, you can create:

• Prototypes/materials (landing page / web interface)
• Templates and other assets
• Design Systems (the reusable brand layer)

Starting point

• Create a Design System using a multi-field form:
  • company name + short description
  • attach reference materials so Claude can learn the visual system

Reference Ingestion Options (Data Sources)

Claude Design can ingest references via:

• GitHub repository
• Local folders on your computer
• Figma files (download/upload; also search templates)
• Generic uploads:
  • images
  • PDFs
  • web references

Where references/design systems may be sourced (as shown)

• Figma UI kits/templates (e.g., “UI Kids” mentioned)
• Dribbble (mostly imagery)
• Designsystems site (e.g., Dell/Audi/Apple design systems)
• Awesome design site (design systems aggregation; includes downloadable markdown/instructions)

Larger reference uploads can consume more tokens.

Practical Example: Generating a Website

The tutorial builds a fictional company and website (Legatum) to demonstrate:

• generating initial layout options (takes a few minutes)
• reviewing/editing each element via the interface:
  • accept
  • or request revisions

Font constraint note

If you don’t upload brand fonts, Claude may use a limited default set (especially for Russian), which can make results look generic—so custom fonts are recommended.

Revision and Collaboration Tools

• Dialog-based working with Claude
• Comments/annotations on specific UI elements
• Ability to attach screenshots/references for button/style corrections
• Accept/reject-style flows (e.g., “Needs work” / “Look”)

Design Refinement Features

Upgrade path: from “template-like” to distinctive

Targeted instructions can shift the page’s personality, such as:

• minimalist hero vs more expressive hero
• shorten the title
• adjust typography style (e.g., sans-serif → heavier/bolder)
• add “wow” visuals (examples: lines through blocks, visual effects)

“Tweak” function

A panel to adjust elements without rebuilding everything, e.g.:

• move logo position (center vs right)
• toggle split layout
• enable/disable custom cursor
• control “golden line” accent
• add/replace photo placeholders

Sketch-to-Design

• You can draw a sketch inside the design tool (New Sketch)
• Claude converts the sketch into structured UI/design outputs

Export + Handoff to Claude Code

The tutorial emphasizes exporting design files into Claude Code to build a deployable project.

Export mechanisms

• Download zip
• Export to:
  • PDF / PowerPoint / Canva / HTML (via Share menu)
• “Handoff to Claude Code”:
  • copy a prompt into a Claude Code chat to deploy

Recommendation: download/unzip locally (e.g., in VS Code) to avoid extra token spend.

Project Structure and “Skills”

After unzipping, it mentions key files like:

• redmi.md: design system documentation (colors/fonts/shadows/buttons)
• skill.md: skill definition associated with the design system

For Claude Code integration:

• place the skill in a skills folder
• ensure Claude Code can access it for deployment

OpenAI image generation integration

• Adds a “skill” connecting Claude Code to OpenAI Image 2 (as stated)
• Used to generate placeholder photos aligned with the design system
• Requires placing an API key in the project root so the skill can run

Final Deployment Demo

After code generation + image generation, the site is described as:

• deployed in ~10 minutes
• visually polished (background effects, responsive options via tweaks)
• buttons/forms may not function immediately (next step after deployment)

Distribution of Prompts/Templates

• Prompts and references used in the build are promised via Telegram
• Mentions a Telegram link to purchase Claude accounts using a Russian card as a workaround for registration/payment/blocks

Main Speakers / Sources

Primary speaker

• The YouTube channel host (spoken first-person throughout; name not provided in subtitles)

Products/services referenced

• Claude Design / Claude Code (Claude ecosystem)
• Third-party model/service: OpenAI Image 2
• Reference sources: Figma, Dribbble, and design-system sites (“designsystems”, “awesomdesign” as transcribed)
• Hosting/dev tooling: VS Code