Skills, hooks, repos, and MCP servers we use daily. Each one comes with a walkthrough so you can plug it into your own setup immediately. Updated regularly.
Download My VS Code Extensions
Stop clicking through 27 VS Code extensions one by one. Drop this markdown file into Claude Code and it installs the whole stack.
Ask Claude Code to install all these extensions from this markdown file for your VS Code.
Drop the file at the root of your project, open Claude Code, and say:
Install every extension listed in vscode-extensions.md.
Claude reads the list, runs the code --install-extension commands, and confirms each one. Zero manual clicking through the marketplace.
Inheriting a codebase and grepping blind? Graphify maps every file, concept, and connection so you see the structure before you touch the code.
What it does
Reads your files (code, PDFs, markdown, images, audio, video) and builds an interactive knowledge graph of concepts and relationships. Exports as HTML, JSON, and an audit report. Every relationship is tagged extracted, inferred, or ambiguous, so you always know what was found versus guessed.
Why it's needed
Inheriting a codebase or a research corpus is painful. Grep only finds what you already know to look for. Graphify gives you the structure behind the files: which nodes are load-bearing, which connections are surprising, which questions to ask first.
When to use it
Walking into a new codebase. Processing a research folder full of PDFs and notes. Mapping a project's architecture before touching it. Understanding why past architectural decisions were made.
I charged a client ten grand for this exact build. Stack NotebookLM with Claude Code and you get a citation-backed AI assistant for free.
I charged a client ten thousand dollars to build them a personal AI assistant.
It reads every document in their business. SOPs, contracts, sales call transcripts, onboarding docs. Ask it anything and it answers with exact citations. Not hallucinations. Actual references.
Today I published a full tutorial showing how to build the exact same thing for free. Two tools. No coding. No monthly fees.
What I cover
Sales recon notebooks. Feed call transcripts in and generate presentations for your next close.
SOP notebooks. Give your team something they can chat with instead of constantly bugging you.
Client onboarding notebooks. Keep project knowledge updated as things evolve.
Why this combo works
The secret sauce is stacking NotebookLM, which is free from Google, with Claude Code. NotebookLM stores and processes the data. Claude Code automates the whole thing.
Together, they act like a sixty thousand dollar employee that never forgets anything.
The kicker: NotebookLM does not cost you extra tokens. You are basically getting a second AI brain for free on top of your Claude subscription.
Stop bouncing between Midjourney, Google AI Studio, and Canva. One MCP server turns Claude Code into a thumbnail and ad image machine.
Is it possible to use Claude Code to generate high-quality ad images, YouTube thumbnails, and social media content? Yes.
It's called the Nano Banana MCP server, and paired with Canva's Magic Layers, it might be the best image creation stack available right now.
The full workflow
Generating images from scratch
Editing existing ones
Iterative refinement
Style transfers
Combining it all with Canva for scalpel-level editing on every asset you create
No more context switching between Midjourney, Google AI Studio, and your code editor. One terminal. One conversation. Production-ready images at any aspect ratio.
I also show the old way I used to do this with HiggsField and custom GPTs, so you can see exactly why this stack is a game changer.
Google is not the only search anymore. Audit your site for ChatGPT, Perplexity, and Gemini visibility with 13 subskills and a client-ready PDF.
What it does
Audits websites for AI search visibility (ChatGPT, Claude, Perplexity, Gemini, Google AI Overviews) with 13 specialized subskills covering citability, crawler access, llms.txt, brand mentions, schema, technical SEO, and content quality. Generates client-ready reports including PDFs with charts.
Why it's needed
Traditional SEO still matters, but AI search is where traffic is going. If your site isn't getting cited by AI, you're invisible to a growing slice of users. This skill audits the gap and tells you exactly what to fix.
When to use it
Onboarding a client website. Pre-launch checks. Auditing your own sites. Building reports you can hand off without editing.
Done guessing what to post? This plugin researches competitors, writes hooks, scripts videos, and learns from your winners inside Claude Code.
This video is going to show you how to turn Claude Code into a real content engine, not just a script writer.
Most creators are stuck in reaction mode. Every day they wake up wondering what to post, what angle to take, what hook might work, and whether the content will land. That is not a system. That is survival mode.
Go Viral Bro fixes that.
Inside the video, I walk through the exact Claude Code workflow I built to research what is already working in your niche, break down your competitors, generate stronger content angles, write better hooks, script full videos, analyze your winners, and feed that data back into the system so it gets smarter over time.
This is the same kind of loop that used to require a team of researchers, writers, strategists, and VAs. Now you can run it through Claude Code.
What you'll learn
Install the Go Viral Bro plugin step by step
Set up onboarding and training so Claude understands your brand, audience, competitors, and posting style
Use /viral discover to scrape competitor content and trending ideas across YouTube, Instagram, Reddit, and GitHub
Transcribe videos, study verbal hooks, and break down visual hooks so you understand why content wins
Use /viral angle to generate stronger content ideas based on contrast, not guesswork
Use /viral script for long-form scripts, short-form scripts, LinkedIn posts, hooks, talking points, filming cards, and CTAs
Use /viral analyze to study your own top-performing content and see what's actually working
Use /viral update-brain to feed winning data back into the system so your agent improves with every post
You are not just installing a plugin here. You are building a repeatable content pipeline.
This is for you if
You create content for your business and want a system
You are tired of guessing what to post
You want Claude Code to help with growth, not just coding
You want better hooks, angles, and scripts
You want your content process to improve over time instead of starting from zero every day
The goal is simple: stop posting based on vibes. Start posting based on a system that learns.
Generate leads on LinkedIn without paying for Sales Nav tools. Five skills handle DMs, replies, posts, and connection requests through your Claude plan.
I've been using an unpackaged version of this in my Claude workspace to generate leads. After getting some requests to share it, I turned it into a plugin with skills.
It uses Chrome via the browser extension to run. No hidden costs, no fees, you just need a Claude Code plan.
What it does
DM Connections. Send personalized openers to your existing connections.
Answer DMs. Reply to unread messages with contextual, on-brand responses.
Create Posts. Generate LinkedIn content from proven templates.
Grow Network. Send strategic connection requests to ICP matches.
Higgsfield Seedance 2.0 Skills: Video Prompts on Autopilot
Stop wrestling with video prompt syntax. Fifteen skills feed your concept to Claude, Playwright hits Higgsfield, and your Seedance render kicks off untouched.
What it does
A pack of 15 dedicated skills that turn Claude Code into a production-ready video prompt engine for Seedance 2.0. You describe the concept. Claude handles camera control, lighting, consistency, and the full production pipeline. One prompt in, fully engineered video prompt out.
What you can generate
Brand ads
Product shots
Cinematic scenes
Anime
E-commerce videos
Basically any style you can describe. The ninja scene demo was generated 20 minutes before filming. That is the speed.
Why it matters
You are combining the smartest LLM on the market with the best video generator and offloading the prompt engineering entirely to Claude. No more wrestling with prompt syntax. No more hunting for camera direction. The skills already know what Seedance 2.0 needs and Claude writes to spec automatically.
The automation layer
Wired into Playwright CLI for browser automation. Once Claude builds your prompt, Playwright logs into Higgsfield, selects Seedance, pastes the prompt, uploads reference images, and starts generation. You keep building inside Claude Code while videos render in the background.
Paste the repo link into Claude and ask it to install the skills
Give Claude your video concept and style (cinematic, product, e-commerce, anime, whatever)
Tell Claude: "Do your magic using Playwright"
That is it. You get a production-ready video without touching Higgsfield directly.
Bonus: the Higgsfield deal
Sign up today and Higgsfield is running 70 percent off with unlimited Seedance 2.0 access. One of the best video generation stacks on the market, cheaper and faster than almost anything else.
Tired of one-shot PRDs blowing up your context? PAUL runs client builds in plan, apply, and unify loops with human checkpoints between phases.
What it does
PAUL is a free, open-source Claude Code plugin built for iterative development with human checkpoints. Plan the work, apply the changes, unify the plan against reality, then loop. Keeps every project on rails without burning context on sprawling one-shot PRDs.
Why it exists
GSD has been the go-to Claude Code plugin since it dropped. After using it on real client builds, I found 7 structural problems that kept showing up. PAUL solves every single one of them.
In the video I break down the 7 problems from a non-technical angle, walk through installing and using PAUL at a high level, and share my honest take on when to use GSD vs PAUL. Not about pushing you to one or the other, about giving you the perspective to pick the right tool for your project.
When to use PAUL vs GSD
PAUL: iterative client builds, longer projects, anything that needs human checkpoints between phases
GSD: tight well-defined features that fit inside one PRD and one automated Ralph loop
Your CLAUDE.md is bloated and loading every rule on every prompt. CARL splits rules into domains and only fires what the task needs.
What it is
CARL (Context Augmentation & Reinforcement Layer) is a plugin for Claude Code that replaces a static CLAUDE.md with dynamic, keyword-triggered rule sets. Instead of loading every rule on every prompt, CARL organizes rules into domains and only loads what matches the task you are working on.
Result: fewer tokens, less noise, better outputs. Claude only sees rules that actually matter.
How it works
Your rules split into domain files:
Global - always loads. Coding standards, safety, formatting
Development - loads when you mention fix, bug, build, test
Content - loads when you mention script, video, YouTube, post
Clients - loads when you mention client, deliverable, proposal
Any custom domain you create
Each domain has trigger keywords defined in a manifest file. When your prompt matches, that domain injects into context. Everything else stays out.
Example
Prompt: Help me write a YouTube script about CARL
CARL detects YouTube and script, loads Content (19 rules) + Global (9 rules). Total loaded: 28 rules. Dev rules, client rules, outreach rules do not load because they are irrelevant.
Install
Run in your terminal:
npx carl-core
Choose Global (applies to all Claude Code projects, recommended) or Local (current project only). Restart Claude Code. Done.
What gets created
.carl/
├── manifest Controls domains and trigger keywords
├── global Rules that always load
├── commands Star command definitions
├── context Context aware rules
└── development Example domain
Key concepts
Domains: a file of related rules. You name it, define keywords, write the rules. CARL decides when it loads.
Manifest: controls activation. RECALL keywords trigger loading, EXCLUDE keywords block, ALWAYS_ON loads every session, STATE is active or inactive.
Rule format: simple key-value pairs like CONTENT_RULE_0=Write in Charles's voice direct practical no BS.
Star commands: manual overrides like *carl (open interactive help) or *brief (force short output). Create your own for any workflow.
Why this matters
Small CLAUDE.md files are fine at first. They break once you add project rules, client preferences, content guidelines, and workflows. Static files do not scale. Everything loads every time. Tokens wasted, attention diluted.
CARL scales with you. Add unlimited domains. Claude only loads what it needs.
Context rotting halfway through a big build? GSD turns your project into spec files and fresh subagents so each phase starts with 200k clean tokens.
The problem
Claude has a context window. The longer your conversation, the more it forgets. By the time you are deep into a multi-phase project, Claude is working with degraded context and making dumb mistakes.
Most people "solve" this by starting fresh conversations (losing context), copy-pasting requirements repeatedly (tedious), or hoping it works (it will not). GSD solves it properly.
What GSD actually does
A spec-driven development system. Instead of one long conversation that degrades, GSD:
Extracts requirements upfront into PROJECT.md
Breaks work into phases via ROADMAP.md + STATE.md for tracking
Plans each phase atomically with detailed PLAN.md and verification steps
Executes with fresh subagents, each phase gets 200k clean tokens
The key insight: curated documents beat raw conversation history.
The core workflow
/gsd:new-project - guided questioning to extract what you are building. Creates PROJECT.md.
/gsd:create-roadmap - breaks the project into logical phases. Creates ROADMAP.md and STATE.md.
/gsd:plan-phase 1 - generates atomic task plans for phase 1. Each task has clear instructions and verification criteria.
/gsd:execute-plan - fresh subagent picks up the plan and executes. No context degradation. Clean commits per task.
Repeat plan-phase + execute-plan per phase.
Commands you will actually use
/gsd:help - shows all commands
/gsd:progress - where am I, what is next
/gsd:plan-phase N - plan a specific phase
/gsd:execute-plan - run the current plan
/gsd:add-phase - add work to the end
/gsd:insert-phase N - slip urgent work between phases
/gsd:pause-work - save state, pick up later
/gsd:resume-work - continue where you left off
/gsd:map-codebase - for existing projects, documents what is there
When to use GSD
Use it for: new apps from scratch, multi-phase features, anything over one session, projects where you cannot afford confusion.
Skip it for: quick fixes, single-file changes, simple scripts.
Rule of thumb: if you would normally lose track of what you are building halfway through, use GSD.
Why it works
Context engineering: PROJECT, ROADMAP, STATE, PLAN files give Claude exactly what it needs, nothing it does not
Fresh subagents: each phase starts with full context capacity
Atomic commits: one task = one commit = clean git history you can roll back
Built-in verification: each task has success criteria, not just instructions
Installation
npx get-shit-done-cc --global
That is it. Commands are now available in Claude Code.
The bottom line
GSD treats complex builds like they deserve to be treated: with structure, documentation, and fresh context for each phase. Stop hoping Claude remembers what you are building. Make the system remember for you.
You define the work, GSD 2 ships it overnight. Autonomous agent with budget ceilings, crash recovery, and 20-plus model providers baked in.
An autonomous coding agent that breaks your project into milestones, slices, and tasks, then executes them one by one with fresh context windows, automatic git commits, and real-time cost tracking.
You define the work. It runs the work.
It is not locked to Claude Code either. It supports 20+ providers, including Anthropic, OpenAI, Google, OpenRouter, and GitHub Copilot. You can even assign different models to different phases, so research uses one model and execution uses another.
Built for developers who want to ship full projects overnight instead of prompting one task at a time.
YC president Garry Tan built 12 Claude Code modes for CEO-level review, paranoid code checks, QA, and release engineering. Better constraints, better output.
A skill system for Claude Code created by YC President Garry Tan. Instead of one generic assistant, you get 12 specialized modes like:
CEO-level product review
Paranoid code review
Automated QA against a live URL
Release engineering
Each mode constrains Claude to think like a specific role with specific objectives.
Want Claude to drive GIMP, Blender, or any desktop app that ships zero API? This framework scans the code and auto-generates a real CLI wrapper.
A framework that auto-generates command-line interfaces for any desktop application so AI agents can control software that does not have an API.
Point it at GIMP, Blender, LibreOffice, or dozens of other apps, and it analyzes the codebase, builds a full CLI with testing, and publishes an installable package.
The generated CLIs make real calls to real software, not toy wrappers.
Stop wiring n8n nodes one at a time. Claude reads the node catalog, picks the right nodes, and hands back an importable workflow JSON.
Watch the video to see how I use the n8n MCP server to build workflows for me. Claude reads the n8n node catalog over MCP, picks the right nodes, wires them together, and hands you back a working workflow JSON you can import.
Install 34 marketing skills in one command, then lock Claude to your brand in CLAUDE.md so every page it builds ships on-brand. No AI slop.
Short video from day 3 of the 90 Days Making AI Easy series. 34 marketing skills. One command to install. The real move is what you do after you install it.
What the playbook covers
Install the plugin in one command. Literally copy and paste.
Stack it with the built-in /frontend-design skill so your pages look good and convert.
Get Claude to generate a brand kit PDF with your colors, fonts, tone, and audience.
Lock it into CLAUDE.md so Claude stays on brand every single session.
The result
You tell Claude to build a landing page and it already knows your brand. No repeating yourself. No off-brand output. No AI slop. This is the exact setup I use for client work at C&C Strategic.
Build real voice agents for law firms, trades, or accountants without touching the ElevenLabs dashboard. Plain English prompts, Twilio numbers, done.
In this module you will learn how to build fully configured voice agents using Claude Code and the ElevenLabs MCP server without ever touching the ElevenLabs dashboard.
What you'll learn
How to install and connect the ElevenLabs MCP server to Claude Code
How to create voice agents using plain English prompts
How to add custom knowledge bases to your agents
How to connect a Twilio phone number so your agent can take real calls
3 ways to monetize voice agents for your business or clients
What we build
Intake receptionist for a law firm
Customer support agent for a construction company
After-hours agent for an accounting firm
What you need
Claude Code (Pro or Max plan)
ElevenLabs account (free tier works to start, Creator plan for production)
Twilio account (optional, only if you want a live phone number)
Ralph was built to spawn fresh agents per task. The plugin broke that. Use my custom script to run Ralph properly without context rot.
In this episode I go deep on the Ralph plugin and compare it head-to-head with my favorite Claude Code plugin, GSD (Get Shit Done). Ralph was originally designed to spawn fresh AI instances for every task to keep quality consistent. The current Ralph plugin leads to context degradation instead. I show how to use Ralph properly with my custom script, then walk through GSD's fresh-subagents-per-phase approach.
Live demo at the end: building a Kanban Pro app using Ralph the right way, with proper context management. If you enjoyed the video, thumbs up and subscribe for more Claude Code content.
Skip the API-key juggling for every SaaS tool you use. Claude in Chrome clicks, types, and navigates your already-logged-in browser sessions.
Claude in Chrome is a browser extension that lets Claude see, click, type, and navigate websites directly. Turn Claude into a hands-on operator that uses your active browser sessions to perform tasks without API keys or complex re-authentication.
What you'll learn
Automating visual testing for frontend development
Interacting with authenticated business tools through your already-logged-in browser
Debugging live applications with real-time console and network monitoring
The 17 specialized MCP tools for managing tabs, recording interactions, and running JavaScript for advanced automation
The playbook
The PDF below is the full playbook: install steps, every tool, real workflows you can copy, and how to wire it into Claude Code.
Lock your design system before you write a line of code. 67 styles, 96 palettes, and 161 reasoning rules ready for Claude.
What it does
A comprehensive design system engine with 67 UI styles, 96 color palettes, 57 font pairings, 13 stack presets (React, Next, SwiftUI, Flutter, etc.), and 161 reasoning rules. Generates a tailored design system for your project before you write a line of code.
Why it's needed
Going from "build me a landing page" to "build me a landing page that matches the vibe of a beauty spa" takes a lot of upfront taste decisions. UI UX Pro Max encodes those decisions and produces a full system in seconds.
When to use it
Starting a new frontend project and you want the design language locked before code. Great for client work where you need to justify choices. Also solid for avoiding the same default aesthetic on every project.
3 Claude Code Repos You Should Have Downloaded Last Week
Three repos that just dropped for Claude Code users. One clones any site's design, one runs Claude Design locally for free, one summons a 12-agent parallel team.
If you are using Claude Code and you have not downloaded these three repos yet, you are behind by about a week.
All three dropped in the last few days. All three are free and open source. And each one solves a different problem you are probably hitting right now.
1. Awesome Claude Design (68 templates, any site)
This one is number one on the list because it ships with 68 templates that scaffold directly into Claude Design. You pick a platform on the list, ElevenLabs for example, and you can mimic that exact design inside your own Claude Code project. Color palette, fonts, button styles, the whole system from A to Z.
Stop guessing what "good" looks like. Pick a reference site from the list and clone its design language in one shot.
2. Open Codesign (Claude Design, but local and free)
This is the open-source version of Claude Design. And the coolest part is that you are not locked into the Claude subscription to use it. It runs locally on your computer with your favorite model.
You are not stuck in the Claude ecosystem. You can run it with a local AI model if you want. And for the skeptics out there, your data stays on your machine.
3. Design Council (12-agent parallel team with a CEO)
I saved this one for last because it is completely different from the first two and a lot more dynamic.
Here is how it works. Your main agent sits as CEO. It can run a team of up to 12 agents, each with a different role and a different vantage point on your project. Every agent holds its own context window, so there is no bias bleeding between them. The agents message each other, dissect what you are building, and give you a full report. Your CEO agent makes the final call.
Use this when a technical decision has trade-offs and you want a panel of perspectives before you commit.
If you are designing a site right now, grab Awesome Claude Design first. Fastest path to a finished look.
If you do not want to pay for Claude Design, go with Open Codesign.
If you are making a gnarly technical call (stack choice, architecture, data model) and you want a team of agents to pressure-test it, spin up Design Council.
All three live side by side in my Claude Code setup. They do not overlap.
Blank canvas killing your project? Design a site in Google Stitch in minutes, then hand the output to Claude Code for production-ready code.
Full walkthrough on using Google Stitch to design a site in minutes, then hand the output to Claude Code to turn it into production-ready code. Skip the blank-canvas paralysis and ship a clean, on-brand site without learning a design tool from scratch.
Run your business from your phone. Telegram bot setup, invoice generation, Drive management, and image edits all triggered by one text message.
Anthropic released Claude Channels and I recorded the full walkthrough for you. Setup from scratch plus the use cases I'm actually using in my business right now.
What's in the video
📱 Full Telegram bot setup, step by step, nothing skipped
🧾 Generating branded invoices from my phone and sending them via email automatically
📂 Managing Google Drive folders and files without opening my laptop
🎨 Editing images on the go with the Nano Banana MCP
âš¡ Stacking all of these together so one text message kicks off multiple tasks
This is not a "look what's possible" video. I set this up live on camera and ran real business tasks from my phone. If you have been looking for a way to use Claude Code without sitting at your desk, this is it.
Skip the timeline and keyframes. Prompt Claude Code plus Remotion and you get a generated video in minutes, editable by screenshot iteration.
Just dropped a breakdown on how Claude Code + Remotion can generate videos from a prompt. No timeline. No manual keyframes. Just prompt, video, minutes.
Inside the video
What it actually does (and what it does not, yet)
The exact setup and commands
How to iterate edits fast, even from a screenshot
Where this fits in a real creator workflow
Question for you: would you use this to replace parts of your editing stack, or is it still "too early"?
3,600 unread emails cleared in 5 minutes. Claude Cowork sorts your inbox, builds a label system, and routes every future email automatically.
Just tested Claude Cowork on an inbox with 3,600 unread emails and it completely cleaned the whole thing in about 5 minutes. 🤯
Not only did it clear the inbox, it also built a full label management system so every new email gets organized automatically.
Most people are still manually sorting emails or paying for tools that barely help. Meanwhile AI can literally act like a personal inbox assistant if you connect the right tools.
If you want to see exactly how I set this up step by step, watch the video. The PDF below is the full Inbox Zero playbook.
Stop styling automation docs by hand. Feed this WeasyPrint playbook to Claude and it turns plain HTML and CSS into clean, on-brand PDFs automatically.
Quick update. You can feed this asset to Claude before you start to help you. I forgot to share this earlier.
Most people waste a ton of time making automation docs look good by hand. I use WeasyPrint. It turns simple HTML and CSS into clean, professional PDFs automatically.
I made a beginner playbook to use it with Claude. Cheers 🥂
Need leads this week? Run these 4 steps inside Claude Code and you have a repeatable pipeline feeding your business without a paid ads budget.
💰 Hey guys, just put out a short on this, but attached here I have the playbook I just created on this. It's like 3-4 steps in total and could generate you unlimited leads for your business. You're welcome, and let me know how it goes for you!
Sick of the generic AI look on every project? Stack GSD with Anthropic's frontend design skill and ship a law-firm-grade UI that actually stands out.
In this video, I show how to level up your Claude Code projects by stacking research, planning, and building processes. Using the Get Shit Done plugin and Anthropic's frontend design skill, we skip the generic AI look and produce a professional UI that stands out.
What you'll see
Reviewing and polishing different law firm website templates
Choosing color palettes
Design enhancements to produce a clean, functional, aesthetic UI
Tips for achieving a top-notch UI on every project
Follow along for the full approach, key insights, and tips.
You think you are running agents. You are just chatting harder. This playbook shows the 5 mistakes killing your output and how to fix them.
Most people think they're using agents. They're not. They're just chatting harder.
The 5 biggest mistakes this playbook fixes
Treating Claude like a solo worker. One long session. One brain. Context rots. Output drops. The fix is orchestration, not more prompting.
Using subagents for everything. Subagents are invisible and sequential. They're fine for lookup and research. They break down when tasks interact.
Avoiding agent teams because setup feels complex. If the process matters as much as the answer, agent teams win. Parallel execution beats faster typing every time.
Letting agents overwrite each other. No task sizing. No file boundaries. Chaos. Clear scopes and directories are non-negotiable.
Staying in build mode instead of lead mode. If you're still writing code alongside agents, you're the bottleneck. Your job is coordination, review, and decisions.
Claude isn't the problem. How you run it is.
This playbook shows how to run AI like a real team, not a chat box.
Anthropic dropped a Figma killer on April 17. Most designers still think it is hype. Read the playbook, skip the noise, ship this week.
Why this playbook exists
Charles J Dove here. I wrote this playbook the week Claude Design shipped. It is what I handed the CC Strategic team on day one so nobody wastes another client call pretending Figma is still the fastest path.
Eight pages, zero fluff. The three features that matter, the exports that kill the design-to-code MCP layer, and the agency play that turns one subscription into three deliverables in an afternoon.
What you get
The 3-feature breakdown: web capture, direct handoff to Claude Code, pricing that undercuts Figma and Stitch on the same invoice.
Agency client-work play: prototype, export, approve, ship, in one afternoon.
60-second setup: how to start your first project from a text prompt, a sketch photo, a DOCX, or any live URL.
Refine and export: every way to iterate (chat, inline comments, sliders) and every way to ship (URL, Canva, PDF, standalone HTML).
Who should read it
Agency owners, freelancers, and operators who charge for design deliverables. Anyone on a Claude Pro, Max, Team, or Enterprise plan already owns this tool and should be using it this week at Charlie Automates we run every client landing page through it now.
Skip it if you do not ship design work for money.
Try it live
Open claude.ai/design in a new tab, sign in with your Claude account, and accept the research-preview disclaimer. Two panes, chat on the left, canvas on the right. Download the playbook first so you know which three features to test before the novelty wears off.
You want SPA feel without the SPA tax. Laravel drives the backend, Vue 3 handles UI, Inertia kills the JSON middleman.
What it does
PHP backend (Laravel) with Vue 3 frontend. Inertia bridges them so you feel like you're writing a SPA, but you're really writing server-side controllers that return "pages" like traditional server-rendered apps.
Why it's needed
Dodges the usual SPA complexity tax. No separate API to maintain, no state sync headaches, no JWT juggling. Ship features fast because the backend drives everything.
SaaS apps, dashboards, marketing sites, most "I need a modern web app" jobs. If you're hiring or your team already knows React, this is the path of least resistance.
Astro: Content-Heavy Sites / Blog Sites
Next.js is overkill for a blog. Astro ships zero JS by default and drops in React or Vue only where you actually need it.
What it does
Ships zero JavaScript by default. "Islands" architecture lets you drop in React, Vue, or Svelte components only where interactivity is actually needed. Built-in content collections for markdown-heavy workflows.
Why it's needed
Next.js is overkill for content sites. Astro is faster, lighter, and framework-agnostic in the components you do need.
Blogs, documentation sites, marketing pages, portfolios. Any site that's 80% static content with a few interactive pieces.
Tauri: Native Desktop Apps
Electron ships a whole browser per app and it is killing your binaries. Tauri uses the native OS webview so you ship 10MB, not 150MB.
What it does
Desktop app framework with a Rust backend and a web frontend (React, Vue, Svelte, whatever you already know). Uses the OS's native webview instead of bundling Chromium, which is the thing that makes Electron so heavy.
Why it's needed
Electron ships a full browser with every app. Tauri doesn't. Result: 10MB binaries instead of 150MB, less memory, better performance, stronger security model. You keep writing UI in web tech.
Desktop apps for your own workflows (dashboards, local AI agents, pipeline controllers). Cross-platform tools that need native-feeling performance. Anywhere Electron is overkill for what you're actually shipping.
TUI Applications: Ratatui / Bubble Tea / Textual
You live in the terminal, so build there. Three frameworks in Rust, Go, and Python let you ship rich keyboard-driven tools as single binaries.
What it does
Frameworks for building rich terminal interfaces with keyboard navigation, layouts, tables, forms, and real-time updates. Three picks by language:
Ratatui (Rust)
Bubble Tea (Go, from Charm)
Textual (Python, CSS-styled)
Pick based on which language you're already fluent in.
Why it's needed
Terminals are where developers live. A well-made TUI (Claude Code itself is one) is faster than a GUI for power users, works over SSH, and ships as a single binary. The three frameworks above own their respective ecosystems.
CLI tools that need more than flags and stdout — interactive installers, dashboards, wizards, REPLs, log viewers, admin tools for yourself or your team.
No resource selected.
Free access
Unlock the Founder's Toolkit
Drop your name and email. Every download, skill, MCP server, and workflow unlocks instantly. No spam.
