The Complete Guide to Vibe Code for Designers. On how to build anything.
By the end, you will know how to build your own apps, web workflows, etc., on Cursor and Claude Code. Here's a breakdown of the module. (by felixleezd)
I made this to be super beginner friendly so Cursor and Claude Code feels easy and fun for you.
<aside> <img src="notion://custom_emoji/36175404-afbe-441c-9aba-69625a35e5e4/32964f4e-3d4b-8031-81df-007a3c2835cb" alt="notion://custom_emoji/36175404-afbe-441c-9aba-69625a35e5e4/32964f4e-3d4b-8031-81df-007a3c2835cb" width="40px" />
This collection is brought to you by AI-First Designer School.
The world's FIRST online school for designers/non-coders who want to ship, using Claude Code. New modules include Figma to Claude Code, Paper MCP, and more. Designers who ship are the most valuable hires in tech today. Don’t fall behind.
Apply to 1.8K+ designers/builders in this global community today:
Designers Who Code Ship 10x Faster — And Get Paid 10x More
</aside>
Step 1: How to install and set up
Step 2: Overview of Claude Code & Cursor Interface
Step 3: Building your own project
Step 4: Github + Using Git 101
Step 5: Deploy your app - Go live
Step 6: Add your custom domain
Step 7: Build a Web App (Advanced)
Step 8: Set up Supabase and OpenAI (Advanced)
Learn vibe coding with Claude Code & Cursor → go from Figma to shipped prototypes in 7 days. No coding background required.
| # | Skill Name | Link | Description |
|---|---|---|---|
| 1 | UI-UX-Pro-Max | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill | UI/UX design intelligence for web and mobile, covering styles, color palettes, typography, product types, UX guidelines, chart types, and design help across stacks like React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS. github |
| 2 | frontend-design | https://github.com/anthropics/skills/tree/main/skills/frontend-design | Creates distinctive, production-grade frontend interfaces with high design quality for web components, pages, apps, posters, dashboards, and styled UI work while avoiding generic AI aesthetics. github |
| 3 | anthropic-frontend-design | https://github.com/openclaw/skills/blob/main/skills/qrucio/anthropic-frontend-design/SKILL.md | A frontend design skill focused on production-grade interfaces with an “anti-AI-slop” philosophy, combining strong UI/UX structure with bold visual direction and more intentional creative choices. github |
| 4 | Emil-design-skill | https://emilkowal.ski/skill | A skill file based on the articles written on my Emil’s site. Designed for designers and engineers to help them build better user interfaces.It covers animations, design, code, performance, and more. |
| 5 | web-design-guidelines | https://github.com/vercel-labs/agent-skills | The thread includes this skill name in the install command list, but I could not verify a matching public SKILL.md description from the available results, so the description is not confirmed yet. x |
| 6. | app-store-screenshots | https://github.com/ParthJadhav/app-store-screenshots.git | A skill that generates production-ready App Store screenshots for iOS apps. It scaffolds a Next.js project, designs advertisement-style screenshots, and exports them at all required Apple resolutions. |
| 7. | gstack | https://github.com/garrytan/gstack | It turns Claude Code into a virtual engineering team — a CEO who rethinks the product, an eng manager who locks architecture, a designer who catches AI slop, a reviewer who finds production bugs, and more. |