# This NEW FREE Design Tool Beats Google !? 🤯

## Метаданные

- **Канал:** Julian Goldie SEO
- **YouTube:** https://www.youtube.com/watch?v=I3xqT7lEKwg
- **Дата:** 27.01.2026
- **Длительность:** 8:02
- **Просмотры:** 1,571
- **Источник:** https://ekstraktznaniy.ru/video/9875

## Описание

Want to make money and save time with AI? Get AI Coaching, Support & Courses 👉 https://www.skool.com/ai-profit-lab-7462/about

Get a FREE AI Course + 1000 NEW AI Agents + Video Notes  👉 https://www.skool.com/ai-seo-with-julian-goldie-1553/about

Want to know how I make videos like these? Join the AI Profit Boardroom → https://www.skool.com/ai-profit-lab-7462/about

Get a FREE AI SEO Strategy Session: https://go.juliangoldie.com/strategy-session?utm=julian

Sponsorship inquiries: 
https://docs.google.com/document/d/1EgcoLtqJFF9s9MfJ2OtWzUe0UyKu1WeIryMiA_cs7AU/edit?tab=t.0

## Транскрипт

### Segment 1 (00:00 - 05:00) []

This new design tool is absolutely insane. It lives inside your code editor and turns designs into real code instantly. No more handoffs, no more separate design tools, just pure speed. Google Stitch tried to do this and completely failed. But this tool actually works and it's changing everything. I'm going to show you exactly how to use it to build landing pages in minutes. How to import from Figma without losing quality. How to generate clean React code without touching a single line yourself. Stay until the end because I'm giving you the exact workflow that saves me 10 hours every single week, plus the one mistake everyone makes that ruins their generated code. Let's get into it. Hey, if we haven't met already, I'm the digital avatar of Julian Goldie, CEO of SEO agency Goldie Agency. Whilst he's helping clients get more leads and customers, I'm here to help you get the latest AI updates. Julian Goldie reads every comment, so make sure you comment below. A small team built something that actually works. is called pencil. dev. And I'm not exaggerating when I say this changes everything for anyone building websites, landing pages or apps. Pencil lives inside your code editor, not in a separate app, not in some cloud tool, right inside VS Code or cursor. You design on an infinite canvas and it generates production ready code instantly. Real HTML, real CSS, real React components, not garbage code that you have to rewrite. Actual code you can ship to production today. And here's the part that made my jaw drop. You can import from Figma, copy paste your designs, vectors stay sharp, text stays editable, styles stay intact, no more screenshot, and rebuild nonsense. Everything just works. Now, I know what you're thinking. This sounds too good to be true. I thought the same thing. So, I tested it myself, building real projects, and I'm going to show you exactly how it works with a real example. Every business needs landing pages, sales pages, opt-in pages, product pages, you name it. And right now, the process is painful. You design in Figma, export assets, hand it to a developer, they build it, you review it, find issues, send it back, wait for revisions. It takes days or even weeks for one single page. With Pencil, you design and code at the same time. No handoff, no waiting, no translation errors. You go from idea to working page in the same session. Let me show you a real example. Let's say I want to build a new landing page for the AI profit boardroom. I want it to show the value of our AI automation community. highlight member wins and get more people to join. Normally, I'd sketch it out, maybe use Figma, then either code it myself or wait for a developer. Not anymore. I open pencil inside cursor. I start drawing on the canvas. Hero section with a bold headline. Transform your business with AI automation subheading about our community of entrepreneurs crushing it with AI. Add a CTA button that says join the boardroom. I sketch out the layout. Pick colors. Add some spacing. Now, here's where it gets wild. I tell Claude code to generate the React component for this section. It sees my design on the canvas because pencil connects directly through something called model context protocol. Claude generates the code in seconds. Clean, semantic, responsive. I look at it and it's actually good code. I can tweak the design right there. Change colors, adjust spacing, move elements around. The code updates live. No export, no import, no file shuffling. Just design and code working together in perfect sync. Add a benefits section. Get AI automation templates. Join weekly workshops. Access our AI tool database. Tell Claude to generate it. Boom. Done. Add a testimonial section with real member quotes. Generate the code. Add a pricing section. Generate it. Add a footer. Generate it. In 20 minutes, I have a complete landing page that would normally take me hours or days. And everything is pixel perfect because I designed it visually, but got real code output. And here's another massive advantage. Everything is version controlled. The design files are in your git repo. I can branch them, merge them, track changes just like code. No more lost design files, no more which version is final questions is all there in Git with full history. And speaking of automation, if you want to learn how to save time and automate your entire business with AI tools like pencil, you need to join the AI profit boardroom. We teach you how to build systems that run without you babysitting them. How to use AI agents to handle tasks you used to do manually. Inside you'll get access to templates, weekly workshops, and the community of people who are already doing this at a high level. link is in the description below. Now, let me break down exactly how to set this up. First, go to pencil. dev and request access. It's free right now during early access. They'll send you an email to activate your account. Next, install Cursor or use VS Code. Cursor works better because it has native AI integration. Install the pencil extension from the marketplace. Then, set up model context protocol. You'll need to configure a file called MCP. json in your cursor settings. The pencil docs walk you through this step by step. It takes about 5 minutes. Once that's done, sign into pencil with your email. Create a new pen file. That's pencil's design file format. It's open source, so you're

### Segment 2 (05:00 - 08:00) [5:00]

not locked into anything proprietary. Now you have an infinite canvas inside your editor. Here's what makes this so powerful. You can use AI agents to generate entire screens in parallel. Need a homepage, an about page, and a contact page. Tell Claude to generate all three at once. The AI can work on multiple components simultaneously. Maybe you run an agency and you build sites for clients. You can design mock-ups with clients in real time. Generate the code right there. Show them working prototypes immediately. Or maybe you're a soloreneur building your own products. You can prototype ideas in minutes instead of days. Test different designs. See real working versions. Iterate fast. Pencil has component kits. You can save reusable components and drop them into any project. Build a button style once, use it everywhere. Build a card layout This speeds up your workflow like crazy. And these aren't static design components like in Figma. They're actual code components. You're building a real component library as you design. Here are some practical tips. First, use the Figma import for complex designs you already have. Don't redraw everything from scratch. Second, customize your component kits early. Build your base components first, then everything else gets faster. Third, write clear prompts for the AI. Don't just say make a button. Say make a blue gradient button with white text and rounded corners that says get started. The more specific you are, the better the output. Fourth, commit your design files to get regularly just like code. And fifth, expect to do some manual refinement. The AI is really good, but it's not perfect. You might need to adjust spacing or tweak colors. That's normal, and it's still way faster than building from scratch. Now, let's talk about limitations. It's currently in early access, so there might be bugs. The Windows experience isn't as smooth as Mac or Linux yet, and there's a learning curve. You need to understand how MCP works and how to prompt AI agents effectively. But even with these limitations, this is the future of design and development. So, here's what you should do. Go sign up at pencil. dev right now while it's free. Install it in cursor. Build one landing page to test it out. use it for a real project and not just playing around. See how it fits your workflow. And if you want the full process, SOPs, and over a 100 AI use cases like this one, join the AI success lab. It's our free AI community. Links in the comments and description. You'll get all the video notes from there, plus access to our community of 40,000 members who are crushing it with AI. Also, make sure to join the AI profit boardroom if you want the premium templates, weekly workshops, and advanced automation strategies. That's where we go deep on building AI powered businesses that actually scale. Link is also in the description. Pencil. dev is the real deal. Google tried and failed. This team succeeded. Go test it yourself and let me know what you build. Drop a comment below with what you're going to use it for. I read every single one. And if you found this useful, hit the like button. Thanks for watching and I'll see you in the next