-:     AI,      
 


              .    , -, Telegram-  SaaS-   Cursor  Claude,      .  ,  ,          .   , ,   ,        AI.





 

-:     AI,      





    AI,      

 

2026








     .

       ,            -,    Telegram-,   .       ,      .    ,       ,     ,      ,   - .

   .

  2025        AI  Tesla,    OpenAI   ,     .  ,   ,  ,       .     AI,  ,   .    vibe coding    ,   .

   ,  ,  ,   ,   .

      .     .

,  2026 ,       .  .       , , , ,     ,        .     .      AI,  .

   :     ,   .    .




   


    , :

        ,          ,   .

  ,        .

  ,   ,     .

  ,     .

    ,       .

           .




   


     .       ,   ,      .    :

   .     ,       .           .

   .         AI-.      : Cursor  AI- ,  Claude     Anthropic,      .

,  .        .    API,    ,         ,   .

    .     ,          ,  SaaS-    .




  


    ,            :

 I.     ,   ,   AI,     .

 II.        AI ,     ,   .    .

 III.  -   ,   ,     AI  .

 IV.       ,    SaaS-  .

 V.   Git, ,   ,     .

 VI.              .

            .     ,    II       IV,      .




  


    ,    . AI   .   .  -   :     ,  ,  . AI      , , .      .

     ,      .  ,        .

?  .




 I.  :   





 1.        



   ,    "vibe coding",     ,       ,    .

  ,  2025




1.1. :    


 -  ,   ,     ,    .

 1950- ,    ,             .         .          ,   .

 1960-        FORTRAN, COBOL, BASIC.           : PRINT "HELLO WORLD".    ,       .

 1980-  1990-    .  Visual Basic, Delphi  ,         .   ,      .

 20002010-  . PHP, JavaScript, Python  ,     .  , , Stack Overflow,        .     ,      .

 2020-   AI-. GitHub Copilot (2021)  ,  AI     . ChatGPT (2022)      AI.   2025    Cursor  Claude      :    ,   ,    .

     .  ?  ?   ?  ?  ? .    ,    .




1.2.     


   ,       .

     .         AI.    OpenAI,       Tesla,    .   ,    ,  99.9%   .

      2025  ,       ,    AI,   .

     .  ,    ,   Cursor  Claude:

  ,  ,  .

 AI  .

       , .

         AI .

  ,        .

   ,  ,         ,   .

 vibe coding  .     The Verge, Wired, TechCrunch.   2025         .  2026        ,        .

        .     .           AI  ,    ,  ,        .




1.3.  20252026   


     AI  .     ?

   .

 :  . Claude 3.5 Sonnet,    2024 ,   ,    ,     . Claude Opus 4,   2025-,       .         .     ,  best practices    .

 : . Cursor  ,  AI    ,      . Composer        . Background Agents     . AI   ,      ,  .

 : . Vercel, Supabase, Stripe, Telegram Bot API     ,      . ,   ,     , DNS, .         .

         ,   .        .




1.4.     :  


  :  ,    .   ?

   .

  2026          ,   .    :

  -     SaaS-    .            .   Cursor  Claude,     ,    .      40  .

        .          Cursor.        .

     Telegram-      ,  Claude API.   ,     .     .

   .  .  , Product Hunt   Telegram-      ,    ,      .

      .     .




1.5.         


        .

 , :

        .

       .

             .

      ,     .

   , :

  ,  AI      -  .

        ( ,  )   -   .

        ,   AI,     .

     :

    Cursor    Claude   .

    -.

   ,    .

      .

 ,     .




1.6.   :  ,   


        .   .

 1:    

.        .  ,  Instagram ( Meta Platforms Inc.,       )    ,  Canva   .    ,      .   -    ,       .

 2: ,  AI,   

        2023 .  Claude  2026   ,   ,      ,    -. ,  .      .   ,  AI-     .

 3:       

. LLM      .       ,         ,    ,   ,   ,     .

 4:   AI     

  .       .   ? AI  ?   ?  ? AI .   - ,   ,  .         .

 5:   ,  

  .      ,    :    ,    ,     .        .




  1


      :

           AI   ,    .

       2025 .

 20252026       :  ,  ,  .

           .

      ,   ,     .

        ,      AI,       .        ,    .

  :    cursor.com  claude.ai.   ,      .   Claude      ,  ,   -,  .    ,      .    .




 2.    



AI   .   .    ,   .




2.1.   LLM:   


  Claude, :     React   email       ,  .   ?     ?

 ,      .      ,   .       ,       ,    ,   .

LLM   Large Language Model    .  ,      : , , , , .  ,    ,  Stack Overflow,          GitHub.     ,          ,      ,     .

  . ,      .    ,     ,        ,     .  ,    ,  ,      ,        .          ** .

LLM  ,   .       :     ,     ?      ,      .        ,    ,     .




2.2.    : , , 


 ,    ,   .

     .

   ,     ,    .        .       , , .    : code   , function  - .

    ?            ,      .  Claude  2026    200 000    150 000 ,   .  ,             .     ,  ,    .

    .

,        AI,  ,   ,       .          .

     .           ,        .    .

    .      ,         ?   .  .

     .

   ,        .        .       ,      ,   ,      ,   .

  ,   .    ,     .           .




2.3. Claude vs ChatGPT vs Gemini:  


        .  ,           Claude.

Claude (Anthropic)

Claude   Anthropic,    OpenAI.        Claude Opus 4 ( )  Claude Sonnet 4 (  ).

  Claude  :

   .    ,  , Claude   ,   - .

  . 200 000    ,  Claude      .

 ,  . Claude   ,   ,      .

 .  Claude       ,    .

ChatGPT (OpenAI)

ChatGPT    ,    AI-.  GPT-4o  GPT-5   ,    :

        ,     .

       .

      ,  .

Gemini (Google)

Gemini    Google,    Google.

       .

    Google-.

    ,  Claude  ChatGPT.

    Claude   :       (   ),       ,      Cursor   AI- .

  ,       . Cursor    .         .       Claude.




2.4.  Claude    


    ,    Claude    .

 . Claude              .      ,    ,   ,   .    ,    .

  .  Cursor    Claude    .       ,     .        ,   .       ,    .

 . Claude     .   : ,                 ,   .     ,       .

 .    , Claude       .       Cursor  :   ?    ,     .

. Claude      ,  .       ,   -    Claude.      .




2.5.  AI:     ()


      .  AI-   ,    ,     .

.     ,      . ,     array.removeDuplicatesInPlace(),    JavaScript.         ,       .

   ?   .        Claude,   .

   .       . Claude  ,    ,           (    ).  ,                , ,   .

      . Claude    Cursor    ,  ,         .    ,   .    .  ,    ,    .

   ?  Claude   ,    npmjs.com  pypi.org,     .   30      .

  .       ,      -.              ,     . AI     ,      .

   . AI ,   .   ,   ,        .      . AI  ,   .




2.6.   :   ?


   ,     .

 .     (2026)   ,  AI,    .    AI         ,      .   .    ,       .

    ?        AI      .    ,    Claude.         .

  .     .   AI,       .    ,   AI     ,  Anthropic.         .

   .    .   10       ,    .

 . AI   ,     -.   ,  ,     .  -,   ,        .

      .  ,     , ,      .

.    ,    AI?  .  :   ,  Photoshop  .     :   Photoshop.         .   ,      .




  2


       AI:

 LLM   ,     ,         .

 ,       ,  ,     .

 Claude      ,     .

  AI   : ,  ,   .   ,    .

     .      .

         .  Cursor,  Claude      ,  AI    .

  :  claude.ai    .        ,    JavaScript,         .  :    ,    10 .  ,  -            .     ,      4.




 3.   : Cursor + Claude



   ,   ,       .

   

    .        ,     .       ,  AI      .




3.1.   


    :     . Cursor    ,   .   AI-     Anthropic  Cursor,     .

 :

.     ,   2018 . Windows 10/11, macOS 11+,  Linux.  4    ( 8 ).  2     .

.       AI   .   :    ,   Wi-Fi   ,    .

.      Cursor (cursor.com) , ,  Anthropic (claude.ai). Cursor    Claude   ,     Claude       .

. Cursor            .      Pro ($20/    ).   :         .




3.2.    Cursor:  


Cursor    ,    VS Code (    Microsoft),     AI.   -  VS Code    .     ,   .

 1.  Cursor.

  cursor.com    .          .

 2. .

 Windows:   .exe     .  macOS:  .dmg    Cursor   Applications.  Linux:  .AppImage  .deb ,     .

 3.  .

   Cursor :

    VS Code (      ).

      Google/GitHub.

    (       ,     ,    ).

 4.   ().

        AI  .    .  ,         Pro.




3.3.  Claude  Cursor


  Cursor    .   ,  Claude    .

  Cursor:  Cmd + ,  Mac  Ctrl + ,  Windows/Linux.    Models  AI Settings.

     . ,  Claude Sonnet       Composer  Chat.       Claude Opus   ,      .

  :  Claude Sonnet   .       90% .   Opus,    -      Sonnet  .




3.4.    


 Cursor   ,        .     .

  ().         ,    Windows  Finder  Mac.          .

 .      .       ,   .      .

 ().   .  ,          :  ,  , .        Claude.

  ,  ` Ctrl +  `` (   ,    1).

AI- (  ).    Claude.       .   Cmd + L (Mac)  Ctrl + L (Windows/Linux).

      .  :

 Cmd/Ctrl + L     AI

 Cmd/Ctrl + I   Composer ( )

  Ctrl +  ``   

   .




3.5. Tab, Chat, Composer, Agent:   


Cursor      AI.     .

Tab ().

  .    ,  Cursor    .  Tab   .       ,   .

 :              . Tab       ,  ,  .

Chat ().

  Claude   .      , Claude   ,  ,  .         .

 :    ,  ,   ,  . Chat      .

Composer ().

     .  ,  ,  Composer       .   diff     ,           .

 :     ,  ,  ,    . Composer      .

Agent ().

   Cursor 3.0,   Agent  AI,    .     ,    ,  ,      .     ,  Agent  ,   .

 :   ,    AI  . :    Google   ,  Supabase Auth.

Background Agents        ,     ,   ,  .

    : Chat ? Composer ? Agent ? Background Agents.   ,    AI .




3.6. Claude Code:    


 Cursor,  Anthropic     Claude Code.     Claude    ( ),   .

  ? Claude Code     .       ,  ,   Git     .        ,        Claude   .

  Claude Code  macOS  Linux    :

npm install -g @anthropic-ai/claude-code

    Node.js      ,     .

   Claude Code     Cursor   .      :     ,       .




3.7.    


 ,     .

 .   Cursor (Cmd/Ctrl + ,)  Font Size    .   14px,      ,    1618px.         .

 .   Cmd/Ctrl + K, Cmd/Ctrl + T   .       (Dark+, One Dark Pro, GitHub Dark).         (Light+, GitHub Light).

.    : Settings ? Auto Save ?  afterDelay.     ,        ,    .

. Cursor    VS Code.    :

 Prettier    .      .

 Error Lens       ,      .

 Auto Rename Tag    HTML-    .

 :  Cmd/Ctrl + Shift + X,    ,  Install.




3.8.   : Hello, World -


 .   - .

        Hello, World.        -.  .  10 .      .

 1.    .

   Cursor (` Ctrl +  ``)  :

mkdir my-first-vibe-project

cd my-first-vibe-project

       .      Cursor: File ? Open Folder ?   .

 2.  Composer.

 Cmd/Ctrl + I   Composer.    .

 3.  .

   .    Composer:

  -   HTML + CSS.



:

- Ҹ      #6366f1 ()

-  :   ( " "),  ""

-  " "   -

-  ""  4 : Cursor, Claude, React, Tailwind

-  ""   email  Telegram

-   (   )

-     (CSS-only)

- : index.html (   ,  CSS)

 Enter (  ).

 4.  .

Claude       index.html.  ,     HTML-, CSS-,    . Composer    .  Accept ().

 5.  .

  index.html  .  Cursor      ? Open with Live Server (   Live Server).         .

  ,  -.  , ,  .       .

 6. .

    .   Composer  :

 :

- : [  ]

-     

-     -  

-   " "

Claude   .       .

.         .

   :        HTML  CSS.    ,   ,    ,   .   ,  AI  .     .




  3


        :

    Cursor      .

  Claude    .

  :  ,  , , AI-.

    : Tab, Chat, Composer, Agent     .

   Claude Code     .

     .

      -     .

  . ,   .          -.      ,   AI  ,   ,  -  .

  :  -,   ,       Composer. : (1)   , (2)       , (3)      .       . ,        .




 II.  





 4.  -



       .

   ,    AI

          ,    ,     . -      .          (Cursor + Claude),     ,    .    .




4.1.        


   ,    AI.  , .        .

 . ,      ,   .        ,   ,   ,     .

       .   .

     , -, ,   10 ,    ,   ,         .

AI   .    ,  ,      .

 -       .      .   ,   AI    .




4.2.   


        .        ,     .

 / .  AI   ?      ?

:    -,   React  Next.js.   SaaS-   .

.    ?

:        .

.     ?

:  Tailwind CSS  .    props: isOpen, onConfirm, onCancel, taskTitle.   .      (Escape  ).

 .    ?

:   , TypeScript,    .

 (). ,   ,  .

:           : [ ]

   :

   React-.   SaaS   

 Next.js + Tailwind CSS + TypeScript.



  ConfirmDeleteModal.



:

- Props: isOpen (boolean), onConfirm (function), onCancel (function), taskTitle (string)

- Tailwind CSS  

-   (fade + scale)

-   Escape    

-   ( Lucide React)

-  "" ()  "" ()

- : aria-labels, -



 : TypeScript,   ,    .

   ,     .          ,   -  .




4.3.      


       ,   .

 1:  ,   .

:   .

:     : , email, ,  .    .  ,      . : rounded-xl, ,  .

       .   2      20   .

 2:     .

:  ,   ,     .

:        .

AI     .      ,    .          .

 3:  .

:  .

:   Header.tsx   ""    .     handleLogout   AuthContext.       .

AI    .   ,     ,     .  Cursor        @   .

 4:    .

:    .

:      React + Tailwind. : , email,  , .     (  ,   ).     .   10 .

   , AI   -      ,   Vue,    React.

 5: ,  .

 ,   ,  ?   . :

,   :

     (2xl ? 4xl)

     slate-900

  hover-  

   .          .   ,      ,   .




4.4. :  ?  ? 


       ,      .

 1:  

:

   .

:    ,  ,   .

:

      React + Tailwind.

: ,  , , .

 -.   .

:  ,   .

:

  Navbar   Next.js .



 ( > 768px):

-   (, "BrandName", font-bold text-xl)

-   : ,  , , , 

-  ""  ( indigo-500 ? purple-500, rounded-full)

-   :   blur +  (backdrop-blur-md bg-white/80)



 ( ? 768px):

-  , - 

-  :    (slide from right)  

-   

-        Escape



: React, Tailwind CSS, Lucide React  .

: components/Navbar.tsx

: , ,     .

 2:   

:

   API.

:

    API /api/users    .

:

  UsersTable.tsx:



1.  :

-  SWR    /api/users

-      (3 -   pulse)

-       " "



2. :

- :  (  32px), , Email, ,  , 

-   : admin = , user = , moderator = 

-      (  /)

-     email (    debounce 300ms)



3. :

-  "" ( )

-  "" ( ,   hover)



: React, Tailwind, SWR, Lucide React.

:   -.

 ?     10 ,    10  .    .




4.5.    .cursorrules


                 .cursorrules.

    ,      .  Cursor      : Settings ? Rules for AI. ,    , Claude     .

    :

   fullstack-,  -.



:

-    TypeScript

-  React + Next.js App Router

- :  Tailwind CSS

-   :  

-    :  , camelCase

- : ,  

-    

-   loading states

-       

            Claude     .

 .cursorrules       ,  Cursor    .        ,  AI    .

  .cursorrules   :

#  



## 

- Next.js 14+ (App Router)

- TypeScript (strict mode)

- Tailwind CSS

- Supabase (   )

- Lucide React ()



##  

- app/    API routes

- components/   

- components/ui/   UI- (Button, Input, Modal...)

- lib/    

- types/  TypeScript 



##  

-  :   ( default)

- : loading state  error handling

- :  Tailwind,  inline CSS

- : React Hook Form + Zod  

-  : Server Components  



## 

-   any  TypeScript

-   CSS-  styled-components

-     200     

     .      AI     .




4.6. Chain of Thought, Few-shot   


  ,        .

Chain of Thought ( ).

 AI  ,    .

   ,  :

1.    ?

2.     ?

3.    ?



  ,   .

      .  AI  ,      ,     ,  .

Few-shot (  ).

 AI  ,  ,    .

     :



[   ProductCard.tsx]



   BlogCard.tsx    .

: title, excerpt, author, date, coverImage, slug.

AI  , ,      ,   .

  .

    .   -  :

1.    Next.js  -.        .

2.   :      ?  .

3.    .

4.     .

5.  .

6. ...  .

   , , .

 .

  ,   :

   .



 :

-      (  React)

-  alert()     UI

-  console.log   




4.7.   @  Cursor


     Cursor         @.

@    . AI      .

  @components/Button.tsx     Link    .

@    . AI    .

  @components/ui/     Tooltip,     .

@web    . Cursor    .

@web   Supabase Auth  Next.js App Router  2026?

@docs    . Cursor        .

@codebase     . Claude    .

@codebase      ?

         AI  .   AI    ,    .




4.8.  :   


  ,     .       .

:  

  [].



: [ ].

Props: [  ].

: [  ].

: [ ].

: [].

:  

  @[]  :

[ ].



 : [  ].

 : [ ].

 : [ ].



 ,    .

:  

  []   [].



:

1. [  1]

2. [  2]

3. [  3]



: [ ,    API].

: [   ].

: 

 @[]:



:

- [ 1]

- [ 2]



  :

-   [] 

-     

-  

-   

:  

 - @[].



:

-  (XSS, )

-  ( -,  )

-  (a11y)

-   (, )

-  



     .




4.9. : 10   


   .  10 ,     Cursor  .

 1: .  .     ,     , , ,  (hover, active, disabled).  .

 2: .   .  :    - .  ,       AI.

 3: .      5 .     .     : , , ,  ,   .

 4: Chain of Thought.  Claude      .    , ,        .

 5: Few-shot.  Claude             .

 6:  .  , ,    :  jQuery,  CSS-,    .

 7:  .    (   )   Claude ,  ,   .

 8: .cursorrules.       ,  Claude    .

 9: @-.  @  @,  Claude   ,     .

 10: -.  Claude   ,    . ,         (: ).




  4


      -:

    , , ,   .

   : ,  , , , .

                 .

    .cursorrules     .

 Chain of Thought, Few-shot,        .

 @  Cursor      .

     AI   .          -    ,      .

  :   10   .          .           .




 5. -  



    ,   .   ,     ,    .

      .     .       ,     ,    AI  .

,    .      ,    .    ,    ,  ,      ,   .       ,   AI.




5.1. HTML, CSS, JavaScript  ,   


  -.  ,     ,   - .           ,     .

HTML (HyperText Markup Language)   . . .

HTML ,    : ,  , , , , .   -  , HTML     ,   .

    HTML:

<h1>, !</h1>

<p>   .</p>

<button> </button>

  < >   .     : h1    , p  , button  .   : <h1> , </h1> .

   ?        <section>   hero     - .   .

CSS (Cascading Style Sheets)    . .

CSS ,   : , , , , ,  .     HTML               CSS.

h1 {

color: #6366f1;

font-size: 48px;

font-weight: bold;

}

 :       ,  48 ,  .

   ?      padding  16px   border-radius  rounded-2xl   . AI   ,   CSS-   .

JavaScript (JS)   . .

JavaScript ,  ,   - :     ,       ,     .

button.addEventListener('click', () => {

alert('!');

});

 :           "!"

   ?       ( HTML + CSS)    ( JavaScript).       :           .




5.2.   -:   


     . -    .

HTML   ,   .  .  ,  ,   .  HTML      .

CSS   ,  ,  .            . CSS  .

JavaScript   ,    .     .     .  ,     .  JavaScript   ,    .

     AI,   :   (HTML)    (CSS)   ,      (JavaScript).

     ,      .




5.3. React  Next.js:    LEGO


  HTML, CSS  JavaScript  ,   ,  React    :  ,  ,  .     ,    .

React   JavaScript- ()  Meta Platforms Inc. (Facebook ( Meta Platforms Inc.,       )),      .      : ,  , ,  .

    React:

function Button({ text, onClick }) {

return (

<button onClick={onClick} className="bg-blue-500 text-white px-4 py-2 rounded">

{text}

</button>

);

}

          :

<Button text="" onClick={handleBuy} />

<Button text="" onClick={handleCancel} />

<Button text="" onClick={handleSubscribe} />

    ?       ,       AI.     :    : Header, HeroSection, FeatureCards, Testimonials, Footer.   .

Next.js     React.  React   ,  Next.js    .    (  ),   ( ), API- ( )   .     React  Next.js.

  Next.js  ,     :  app/   , components/  , public/   . AI       ,      .




5.4. Tailwind CSS:   


Tailwind CSS     ,     .      CSS-,      HTML/React   .

 CSS:

.button {

background-color: blue;

color: white;

padding: 8px 16px;

border-radius: 8px;

font-weight: bold;

}

Tailwind CSS:

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-bold">

   .       :

-, Tailwind-    .    AI  bg-gradient-to-r from-purple-500 to-pink-500,   ,     .  .

-,     .  rounded-lg  rounded-full       .   .

-, Tailwind   .  ,    . p-4    16  . text-xl      .      17 ,   19.

   Tailwind,   80%  :

: bg-blue-500 (), text-white ( ), border-gray-200 ().   : 50 ( ) ? 950 ( ).

: p-4 (padding,  ), m-4 (margin,  ). px-  , py-  .  ? 4 = : p-4 = 16px.

: w-full ( 100%), h-screen ( ), max-w-4xl ( ).

: text-sm, text-lg, text-2xl (), font-bold (), text-center ( ).

: rounded (), rounded-lg (), rounded-full ().

Flexbox: flex (), flex-col (), items-center (   ), justify-between (  ).

    .     flex items-center gap-4  ,  ,   :   ,   ,    .




5.5.    API:   


      ,     .      : , , , .   - .   .

      .    Excel:     (),     (, email,  ).           .

          Supabase.  ,      ,  (/)        .       (  Excel),  Supabase   API    .

API (Application Programming Interface)    .  ()     (/ ) .     (API),   ()    ().

:      .     API:      "".     ,          JSON   ,     .

   ?    :   .      Supabase,  products. : , , .      API-.       :           (  ) ,   .




5.6.      ,    AI


   ,       .

 :   ?   ?  ?  .

:   ?   ?  AI ?  .

   ,    for  JavaScript.   ,           N .  AI   .

   ,   Supabase  Next.js.   ,  Supabase    ,     Next.js.    .

     Tailwind-.   ,  flex       ,  grid   .      AI.

    .       50 000 .    500      . AI          .

  ,          ( ):

      .    .

    ,     .  .

    ,   .    .

    N      .

    -:  ,  .

    :    , email, .

     .

  (props)  ,     .

  (state)  ,     .

 API-      .

   ,    ( ),      ,   .

 11    80%  .     .




5.7. :   20   


  ,   ,         .         .

 1.   (2 )

 Composer  Cursor  :

   Next.js  Tailwind CSS.

       .

 : coffee-landing.

Claude   .    .      .

 2.    Hero (5 )

  HeroSection    " ".



-   (h-screen)

-   ( placeholder  Unsplash: ,  )

-    (overlay bg-black/50)

-  :  " " (text-6xl, font-serif, )




  .


   .

   ,     (https://www.litres.ru/book/nikita-parahin/vaybkoding-sozdavay-produkty-s-pomoschu-ai-dazhe-esli-nikog-73831319/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


