Video summary

วิธีที่ผมใช้ Claude Design ไม่เสียเงิน ไม่ติด Limit (AI ค่ายอื่น Gemini CLI, Codex ก็ใช้ได้)

Main summary

Key takeaways

Technology

Summary of technological concepts / product features

1) Goal of the video

  • The video is primarily a hands-on tutorial for building/designing a website using:
    • Open Design (AI-based UI/website generator)
    • A Claude Design-related workflow via a local/IDE setup (referred to as “anti-gravity”)
    • External AI model providers, including Gemini CLI (also mentions “Gemini CLI, Codex” as compatible models)
  • It emphasizes a bug-fix oriented workflow: if errors occur (especially during deployment), the strategy is to:
    • Copy the exact error message
    • Ask the AI to troubleshoot and propose fixes

2) Open Design: what it does

Open Design is presented as an AI tool where you:

  • Type text into a chat box
  • It generates:
    • UI designs
    • Website layouts
    • Associated assets such as images/videos/UI elements
  • It supports:
    • Creating landing pages
    • Refining designs through more detailed prompts (the more detailed the process, the more satisfactory the result)
  • It can generate:
    • Long single-page landing pages
    • Design systems (optional during project setup)
    • Guides derived from an existing design system (e.g., for e-commerce)
    • Color pages / brand CI color references
    • Slide presentations (converting landing page content into slides)

3) Installing and running the tools (local workflow)

The tutorial uses an IDE-like editor/manager called anti-gravity:

  • Create a project folder in anti-gravity’s Project Explorer
  • Install Node.js (download from the official Node.js site)
  • Install Open Design via command-line (the subtitles indicate copying a command/URL and running it in the chat/terminal)
  • Start Open Design, then open the resulting local URL (Ctrl+click)
  • Within anti-gravity:
    • Multiple AI models are available to choose from
    • A remaining-request limit indicator is shown

4) Gemini CLI integration and “free usage”

The subtitles claim the project can work without paying (not “เสียเงิน”) because:

  • Gemini CLI is installed
  • Gemini CLI provides a number of free requests per day (estimated around 1,000/day)
  • The video suggests adding documentation links for installing Gemini CLI

5) Design export → convert to real website

After Open Design generates a UI:

  • You can share/download it as a file (the subtitles mention exporting as a “SIP file”)
  • Then feed that exported file back into the anti-gravity workflow
  • The next AI step requests:
    • Creating a responsive design for the exported design file
  • The output is described as a deployable website, with responsiveness validated through scrolling tests

6) Optional alternative: COS extension

If you prefer not to include the AI within anti-gravity:

  • Install an extension called “COS”
  • Log in, then use it within the anti-gravity code workflow

7) Deployment workflow: GitHub + Netlify

To make the site publicly accessible, the workflow is:

  1. Upload project files to GitHub
    • Create a private repository
    • Add a remote (the subtitles mention “Origin”)
    • Use anti-gravity’s source control UI to commit/push
    • The AI is also mentioned as being asked to commit and push
  2. Deploy via Netlify
    • Choose Import Git repository
    • Connect to the GitHub repo and set:
      • project name
      • destination
    • Deploy and verify the deployed URL

8) Bug/error handling strategy (core tutorial point)

The video repeatedly encounters “bugs,” especially during deployment. The mitigation steps are consistent:

  • When Netlify shows an error:
    • Copy the exact error message
    • Ask the AI (inside anti-gravity/Open Design) to:
      • explain the cause(s)
      • provide fixes
  • After applying the returned fix, the deployment is retried
  • The video positions this as practical even for viewers with no programming background:
    • copy error → ask AI → fix → redeploy

9) Notes about variability in AI output

Even with the same general approach, results may differ because:

  • Generated designs depend on:
    • input prompts
    • model behavior
  • One attempt may produce a different output than a previous attempt (“Different results”)

Main speakers / sources (from the subtitles)

  • “F” (primary speaker/creator)
  • Gemini CLI (model source/provider)
  • Open Design (software/tool)
  • Anti-gravity (local IDE/workflow manager referenced)
  • Netlify and GitHub (deployment platforms referenced)

Original video