It's Time to Build
How Anyone Can Ship Real Products with AI
Scan to Follow Along
cc.hubeiqiao.com
"There are no limits anymore. Anyone can do anything. The only limiting factors are agency and ambition.
Never has a college degree, work experience, network, even the accumulation of knowledge been worth less.
You can just ship things."
Who Am I?
Didn't know what a "pull request" was
Zero coding experience. Consumer mindset. Waiting for others to build things.
Building my first commercial product
Real authentication. Payment processing. Cloud infrastructure. Production deployment.
My First Product
Joe Speaking
Built for my own daily practice as an immigrant improving my English. Now turning it into my first commercial product.
Customers already secured
From Australia, Japan, and China — before the product officially launches.
I am a living example of what's possible.
My personal website — built with AI — hubeiqiao.com
This month, I'm at Ottawa's first AGI Ventures Canada Hacker House — building my first commercialized product alongside high-agency people who believe in shipping fast.
"Think in years. Ship this weekend."
After one full month of subscribing to Claude Max...
I registered my first company
CEO & Founder of Just Joe Technologies — a one-person company with AI troops!
Alpha test launching in 10 days — powered by Opus, Gemini, and OpenAI APIs.
It's time to build.
What This Workshop Is About
I'm not here to teach you to code.
I'm here to show you that you don't need to know how to code to build real products.
This is about something more fundamental: the mindset shift from consumer to builder.
The rules have changed.
Everyone is going to have the power to do everything they want, starting from the digital world and then the physical.
Live Demo
Watch This Document Transform Into a Website
This demo runs ~15 minutes — sit back and witness the future of building.
Right now, you're looking at plain text. This markdown document — simple formatting, no colors, no layout, no interactivity — is about to become something completely different.
The website you're viewing right now? We built it in ~15 minutes using this exact process.
In the next 15 minutes, you will witness:
- This exact raw content taken as input
- AI designing a complete, beautiful website
- Code being written in real-time
- A live deployment to the actual internet
- Mobile-responsive design that works everywhere
Claude Code — An AI coding assistant that runs in your terminal
First, read and understand everything in the "workshop-carleton-202601" folder, including this workshop guide and all images. Then, use /frontend-design — think like a professional UI/UX designer with expertise in modern web aesthetics, typography, and visual hierarchy. I want you to transform this document into a stunning, beautiful, and aesthetic website for people who couldn't attend this workshop to experience the content. CONTENT REQUIREMENTS: - Use this workshop guide (workshop-guide.md) as the complete source - DO NOT compact or summarize any content — every section must appear on the website - Preserve all images and integrate them beautifully into the design DESIGN REQUIREMENTS: - Create a modern, professional design that reflects innovation and accessibility - Use the hero image (01-vibe-engineering-hero.png) prominently - Ensure excellent typography and visual hierarchy - Add smooth scrolling and subtle animations where appropriate - Design must be mobile-responsive and work beautifully on all screen sizes TECHNICAL REQUIREMENTS: - Add proper metadata for social media sharing (Open Graph, Twitter cards) - Set up favicon using the author's avatar - Optimize for fast loading - Ensure accessibility standards are met AUTHOR INFORMATION TO INCLUDE: - Website: hubeiqiao.com - X/Twitter: @hubeiqiao - LinkedIn: linkedin.com/in/hubeiqiao INTEGRATION: - Find an appropriate place on the main page (index.html) to add a link or section for this workshop/sharing session so visitors can discover it PROCESS: 1. First, review all available images in the images folder 2. Create a design plan before coding 3. If anything is unclear, ask me questions using "ask-questions-if-underspecified" 4. After building, use browser preview to verify the design 5. Check that all images display correctly and are appropriately sized 6. Verify mobile responsiveness Please begin by reviewing the content and images, then present your design plan.
Please review the website design using /agent-browser and /frontend-design skills. Ensure the image sizes and colors look appropriate, and confirm the site works well on small screens.
What to Watch For During the Demo
- The conversation — I'm directing, not coding
- The iterations — Things don't have to be perfect first try
- The speed — What used to take days happens in minutes
- The questions — AI asks for clarification when needed
- The result — A real, deployed website
The Result: A Complete Website Built in ~15 Minutes
Click below to see the actual website generated during this demo
Three Truths for the AI Era
You Can Build Entire Products Alone
The old way required co-founders, funding, and engineering teams. The new way? Have an idea, open your laptop, build it yourself, ship it this week.
The barrier to entry has collapsed.
AI Needs Clear Planning
AI isn't magic. Vague requests produce vague results. The bottleneck is your ability to articulate what you want.
AI amplifies your clarity.
Learning Happens by Doing
You cannot learn to swim by reading a book. You cannot learn to build by watching tutorials forever.
You learn by shipping.
Write down what you want BEFORE you talk to AI
What Does "Building" Actually Look Like?
The Tool: Claude Code
This is Claude Code — an AI coding assistant that runs in your terminal. You type what you want in plain English, and it writes the code, creates files, and runs commands for you.
What AI Can Help You Create
- Websites: Personal portfolios, landing pages, full web applications
- Documents: Reports, presentations, professional materials
- Tools: Automation scripts, data analysis, custom utilities
- Products: Real applications that solve real problems
A Simple Mental Model
How to think about AIAI can:
- ✓ Write code in any programming language
- ✓ Search the internet for information
- ✓ Read and modify files on your computer
- ✓ Run commands and see results
- ✓ Work 24/7 without getting tired
You need to:
- → Tell them what to build
- → Make decisions when there are choices
- → Test if the result matches what you wanted
- → Guide them when something goes wrong
The Process: From Idea to Reality
Start with What You Want (Not with AI)
Before you touch any AI tool, answer these questions:
- What problem am I solving?
- Who is this for?
- What does "done" look like?
- What are the must-have features?
Before talking to AI, prepare a document that includes:
- WHAT you want to build (purpose, audience, goals)
- CONTENT requirements (what sections, what information)
- DESIGN preferences (style, colors, inspiration references)
- TECHNICAL needs (mobile-responsive, accessibility, etc.)
- IMAGES & SCREENSHOTS you'll provide (logos, photos, examples)
- AUTHOR/CONTACT information to include
See the Demo Prompt above for a real example of comprehensive requirements.
Let AI Help You Plan
Once you know what you want, AI can help you figure out how to build it.
Key technique: Ask AI to ask you questions.
- Answer honestly (even "I don't know" is fine)
- Let AI suggest options when you're unsure
- Make decisions, even if they feel arbitrary
A decision made is better than endless deliberation.
Build Incrementally
Don't try to build everything at once.
The Golden Rule: One piece at a time.
Bad Approach
- "Build me an entire e-commerce website with everything"
Good Approach
- "First, let's create a simple page that displays three products"
Test With Your Own Eyes
AI can write code. AI can even test code. But AI cannot see your screen through your eyes.
Manual testing is essential.
- Does this look right?
- Does this feel right?
- Would I use this myself?
- Would I show this to someone else?
Your judgment matters. Don't skip this step.
Iterate Based on Reality
Things will go wrong. This is normal.
When something breaks, describe what you expected vs. what happened
You don't need to understand the technical details. You just need to be a good communicator.
Your Challenge
Build Your Own Personal Website
Why a Personal Website?
The most valuable career asset you'll build in school
For Internships & Co-ops
Your unfair advantage in recruiting
- Stand out from 200 identical resumes
- Show projects, don't just describe them
- Prove initiative beyond coursework
- One link that tells your whole story
For Side Projects & Startups
Your launchpad while still in school
- Build credibility before you have traction
- Launch landing pages to test ideas fast
- Start growing an audience early
- Practice build → ship → learn cycles
For Your Future Career
An asset that compounds over time
- Own your presence, not just LinkedIn
- Document your journey as you grow
- Understand how the internet works
- Prove to yourself you can build things
Getting Started
You don't need to do this today. But consider this your homework:
- 1 Write a detailed document that includes what you want to build and why, all content and sections you need, images or references you can provide, and design preferences. The more detail you give upfront, the better your results. For reference, check out my GitHub repo — it contains the draft documents I used for today's session and previous workshops.
- 2 Open an AI assistant like Google AI Studio (free) or Claude and paste your description
- 3 Ask AI to help you plan the structure
- 4 Start building one section at a time
The website you create doesn't have to be perfect. It just has to exist.
Common Fears
And why they're unfounded
The Mindset Shift
This is perhaps the most important section of this entire workshop
Old Mindset: Consumer
- Wait for someone else to build solutions
- Accept tools as they are given to you
- Believe "I'm not technical enough"
- Seek permission before attempting
New Mindset: Builder
- Build solutions when you see problems
- Create the exact tools you need
- Believe "I can figure this out"
- Ask forgiveness, not permission
The gap between consumers and builders is closing.
The only thing separating you from shipping your first product is the decision to start.
From Document to Deployed Website
The deployment process is simpler than you think
- 1 Write your content (like this document)
- 2 Let AI build the website
- 3 Push to GitHub (a free code hosting service)
- 4 Deploy with Vercel (free for personal projects)
Within minutes, your website is live. Real URL. Accessible to anyone in the world.
Action Items After This Workshop
Try building something small. Anything. A simple webpage. A document. Just start.
Write down what you want your personal website to include. Be specific about the sections and content.
Build that website. Ship it. Share it with one person.
Look back and notice how far you've come.
Resources to Continue Learning
Google AI Studio
Free AI assistant with Gemini (no credit card)
Claude Code
Build software directly from your terminal
Vercel
Deploy websites for free in minutes
Joe's Guide
My Claude Code guide
The Community
The best learning happens in communities of builders. Find people who are also shipping things. Share what you're working on.
AGI Ventures Canada
Ottawa's builder community for AI-powered products
Q&A
What questions do you have?
What do you want to build?