Summary of "How 20 Yr Olds Can Make ₹20 Lakhs Every Month By Building AI Applications | #237 The Sanskar Show"
Overview: AI apps workflow with Figma + AI tools
- Goal/positioning: The video argues that people in India can earn large monthly incomes (e.g., “10 lakhs/month” or “20 lakhs/month”) by building AI-enabled applications. The key enabler is Figma Make, which helps create fully functional web apps without writing code.
- No-code + design-first approach: A UX designer (Punit Chavela) presents a step-by-step roadmap to generate websites/apps using Figma Make, while still allowing users to tweak/extend features such as animations, SEO, and integrations.
Core product concepts and features
1) Figma Make vs Figma Site
- Figma (Site): best for websites/landing pages with limited “real functionality.”
- Figma Make: used when you want actual functionality added without coding, leveraging AI to make the workflow “seamless.”
2) Prompting strategy to reduce AI “assumptions”
The demo emphasizes that short prompts cause errors because the AI may invent random facts.
Recommendations include:
- Be specific from the first prompt
- Use structured instructions (via Shift+Enter) to create a formatted list of requirements
- Include functional elements (e.g., forms/CTA)
- Specify a design theme/vibe (e.g., “dark and mysterious”)
- Provide branding cues (e.g., “Leica branding colors”)
3) Using reference assets to guide AI design
To avoid wrong assumptions, the workflow supports attaching images/brand guidelines.
- Example: uploading a screenshot from Leica’s official site to help the AI match styling more accurately.
4) Model selection inside Figma Make
Different AI models are suggested depending on what you’re building:
- Gemini 3 Flash: for fast iteration
- Gemini (general): strong design capabilities
- Claude: more data/functionality-focused for certain app types
In the demo, they choose Gemini flash.
5) Build speed and execution style (linear vs multitask)
- Build time depends on prompt complexity.
- Some tools may multitask within a prompt, but Figma Make is described as more linear (“one by one”), which may be slower.
Demo outcome: AI-generated front-end first, then backend integration
Step 1: AI generates the page (front-end)
The AI produces a themed website based on the uploaded reference, including:
- A carousel/gallery section
- A contact/appointment form (CTA intent confirmed)
They note that some functionality may be intentionally missing at first to reduce load/time.
Step 2: Connect the form to a backend (integrations)
The missing piece is backend connectivity so submissions are stored/processed.
Two approaches:
- Let AI connect it
- Use the manual Integrations panel
Using Supabase for data, auth, and form collection
Supabase is used as a combination of:
- Database/CMS
- Authentication
- Form submission handling
Workflow shown:
- Create a Supabase project (including selecting a server region such as Mumbai/South Asia)
- Set up the integration in Figma Make
- Ask AI to connect the form so inputs save to the database
Testing result:
- A “processing state” appears (e.g., “request sent…”), indicating the submission was saved.
Operational note:
- They say the site must be published for full Supabase connectivity/testing.
Editing and enhancement after generation
1) Editing elements like in a design tool
Users can click and modify:
- Text content
- Google font connections
- Colors, sizes, and other standard design properties
2) Adding animations via AI instructions
Example prompt:
- “Add a typewriter animation when the website first loads”
The tool generates animation behavior without manual coding.
3) Design system / library usage (paid plan)
- On a paid plan, you can import a design library/design system so the generated UI matches your existing components.
- “Plus” features are mentioned as not available on free.
Export and code access
They state that all code is available from Figma Make, including:
- CSS files
- Tailwind-related files
- Theme CSS
Implication: you’re not locked into deploying only through Figma Make—you can copy/download the code.
Publishing controls: launch, SEO, and analytics
In settings, they demonstrate adding:
- Google Analytics (GA ID)
- Language selection
- SEO fields (title, meta description, etc.)
- Accessibility option: “reduce motion”
- Social sharing image
- Fav icon
- Custom header code (e.g., adding scripts/tags such as jQuery or SEO-related tags)
- Custom fonts
- Domain + publish flow
They also note publishing may work with a free Figma domain, even without a paid domain.
Expanding beyond one page
Multi-page sites
- Initially, AI generates one page plus a library/navigation-like structure.
- To add pages, instruct users to:
- Select navigation items
- Ask AI to create additional pages
- Maintain the same design/theme while following navigation context
They stress context awareness to avoid generic layouts driven by “assumptions.”
Payment gateway integration (Stripe example; Razorpay mentioned)
For commerce functionality:
- Add an AI-connected checkout flow for a purchase page/form.
- Integration depends on what’s available; they mention Stripe/Razorpay-like flows.
Two suggested methods:
- Provide API key/secret via integration settings
- Use documentation-assisted setup:
- Paste the payment provider documentation URL
- Ask AI to read docs and help connect
They note that for lesser-known gateways, AI may require doc links or some manual/code support.
Building a bigger SaaS app: time expectations
Time depends on:
- Prompt quality
- Whether you already have research/data
- Number of APIs/frameworks needed
- Dashboard complexity
Rough estimate shared:
- With prep, a first iteration UI could launch in about 1–1.5 months (part-time / not full-time mentioned).
Core message: AI can save hours, but complexity and preparation dominate timelines.
Getting users and monetization strategy (launch growth)
Two main growth paths:
- Sell your skill: freelancing/consulting by showcasing outputs (Twitter/community style)
- Sell the product/assets: AI-built templates, guides, frameworks, courses (passive income)
Additional points:
- SEO fundamentals still matter, but visibility increasingly depends on AI assistants and conversation-based discovery
- Mentions optimizing for AI/Gemini-related settings in addition to traditional SEO
- Mentions “designing for AI agents,” implying future UX must be compatible with AI browsing/agent workflows—not only human browsing
India freelance pricing & capability expansion
They argue freelancers in India can charge high rates due to:
- English proficiency
- Ability to serve global clients
AI also expands what designers can deliver:
- Designers can produce 3D assets or custom illustration/icon packs faster
- This can justify higher pricing for specialized outputs (“charge extra”)
Main speakers and referenced tools/sources
Speakers
- Host: The Sanskar Show (podcast/interview host)
- Guest: Punit Chavela (UX designer; provides the Figma Make workflow)
Tools / sources referenced
- Figma Make / Figma
- Supabase
- AI models: Gemini (including Gemini 3 Flash), Claude
- Payments: Stripe; mention of Razorpay
- Analytics/SEO: Google Analytics, SEO/meta tags
- Referenced examples: Leica, Twitter, Udemy
Category
Technology
Share this summary
Is the summary off?
If you think the summary is inaccurate, you can reprocess it with the latest model.