00:00:00Why is the design to code handoff still the most broken part of building with AI?
00:00:04You'd think by now there'd be a clean way to design something,
00:00:06change it and have the code update.
00:00:08But every tool our team has tried either does design or does code. Never both.
00:00:13Stitch and Bolt are prompt to code. There is no design canvas you can go back to and edit.
00:00:17The Figma MCP is read only so AI can pull designs from it but cannot design on it.
00:00:22And if you're using a coding agent directly, every design change means reprompting from scratch.
00:00:26So when Pencil.dev started gaining traction claiming to be a bi-directional bridge between
00:00:31design and code, that got our attention. But when we actually started building with it,
00:00:35the bridge was not as seamless as we expected. And what started as just testing a tool turned
00:00:40into our team going way deeper than we planned to actually make this workflow work.
00:00:44So you've probably already heard about Pencil.dev,
00:00:47the new AI design tool that's been gaining a lot of popularity with the designers lately.
00:00:51It is basically a bridge between the popular design tools that are specialized for designing
00:00:56and the AI development tools that are tailored for implementing those design patterns.
00:01:00It connects to all the popular agentic IDs and contain a lot of features that
00:01:04actually make the design-to-code workflow smoother like component generation,
00:01:08UI library support and automatic CSS class generation.
00:01:11For those who have been using Figma, the interface might be the closest interface to it.
00:01:15It's currently free and our team downloaded it to test it out.
00:01:18We grabbed the desktop app and with that came options to connect to all the AI
00:01:23platforms we had installed. We connected it to Claude Code because that's what we were
00:01:27using as our primary tool and Pencil.dev basically uses AI coding platforms like
00:01:32Claude Code and Codex Under The Hood to do its work. Once the desktop app was installed,
00:01:36the MCP was automatically configured for Pencil.dev and all the tools showed up in
00:01:41Claude Code right away. Now once it was set up, all OpenAI and Anthropic models were available
00:01:46in the chat. We went with Opus 4.6 from all the models. This tool has some powerful
00:01:51designing capabilities. It keeps the design files as a dot pen file inside the project folder which
00:01:56is basically a JSON-based format which you can version track with Git as well. But the feature
00:02:01that really sets it apart from other tools is its ability to act as a bi-directional bridge between
00:02:06the coding agent and the design in the app. But it wasn't exactly what we expected when we thought
00:02:10about what that bi-directional sync would be. We assumed Claude or any AI agent would auto-sync the
00:02:16design to code and vice versa but that's not how it worked. We had to manually prompt it to sync
00:02:21because it does not automatically sync the design to code at which it analyzed the design section by
00:02:26section and implemented it in the HTML file. It did match exactly what the design on the canvas looked
00:02:32like but we thought doing that over and over after each design modification was too much overhead.
00:02:37Our team was working on a landing page for a creator direction studio which we had already
00:02:41designed using pencil.dev connected with Claude code and from what we could see it was a solid
00:02:46website with creative direction that came through clearly just as we intended. We implemented the
00:02:51design using Claude once and had it synced to the next JS project we were working on but there were
00:02:56a lot of elements on the page that we didn't like and needed modifications. We needed to change a lot
00:03:01of things in the project repeatedly but we couldn't keep going to Claude and telling it to sync again
00:03:06and again with the implemented project because that's just a repetitive task. So what we did was
00:03:10create a script to solve this problem. This script used multiple JavaScript libraries that are built
00:03:15for monitoring files for changes. It also had cooldown periods to prevent Claude from getting
00:03:20fired repeatedly wasting tokens and causing the session to reach its limits. The whole purpose of
00:03:25the script is to keep watching the dot pen file that contains the design and whenever there's a
00:03:29change in the file it fires the Claude CLI with a prompt containing how to sync with the project.
00:03:34But the cooldown period was added which created a gap between each save so it doesn't directly sync
00:03:39all the small changes at once. Now to use it we just had to run the npm run sync command and the
00:03:44worker started immediately and began monitoring the dot pen file with our design. If we modified
00:03:49anything with this script running whenever we pressed the save file key combination it triggered
00:03:54the Claude CLI automatically and started syncing that change to the project without us explicitly
00:03:59telling it to do so. But before using this script you have to do one pre-step. You have to pre-configure
00:04:04all the permissions that are required for the editing to be done like read write and mcp tool
00:04:10calls by adding in the setting.json inside the dot Claude folder because if you don't Claude will get
00:04:15blocked on the permission prompt indefinitely. Without that Claude can't make changes in the
00:04:20project and won't be able to get the implementation done properly. With this script running it became
00:04:24easier because we didn't need to manually prompt to sync with the project anymore. Each iteration
00:04:29was monitored by the script and automatically sent to Claude for implementation. Now this script along
00:04:34with the source code of this app is available in AI Labs Pro. For those who don't know it's our
00:04:39recently launched community where you get ready to use templates that you can plug directly into
00:04:43your projects for this video and all previous ones. If you've found value in what we do and want to
00:04:48support the channel this is the best way to do it. The link's in the description. One of the
00:04:52capabilities of Claude code is using a multi-agent system which parallelizes and speeds up a lot of
00:04:57tasks. We thought why not try the multi-agent setup with pencil.dev. Since it's connected as an mcp
00:05:02anyway we tried using multiple agents for the next implementation letting each one work on a different
00:05:07aspect of the app all at once. Using it with Claude code made it easier because it can access all the
00:05:12docs files we had stored as context like prd and ui guide which we usually create before diving into a
00:05:18project. We needed to implement the other pages of the website instead of letting it be just a landing
00:05:23page. We asked it to handle this task explicitly telling it to let each agent take a different
00:05:28aspect of the app that we wanted to build. So we started with exploration and called the multiple
00:05:33mcp tools. Since we had five pages Claude spawned five agents and let each one work on a dedicated
00:05:39page. After a little while the initial version of the application's design was created. It generated
00:05:44all of the pages needed in the app and made sure the design matched the landing page using the same
00:05:48fonts and styling throughout. Once the design was done we pressed command plus s to save the file
00:05:54and the script came into action automatically implementing the design in the app to speed up
00:05:58the manual process. Now the website at that point even though it looked solid was missing something.
00:06:03There was no motion on the page and it needed scroll animations that would guide the eyes across
00:06:08what was otherwise a static layout. So for that we went to gsap which is our go-to library because of
00:06:14its robust javascript animations and being easy to implement complex animations. For this we actually
00:06:19had a really detailed prompt written in XML. We used XML because Claude models are explicitly tuned to
00:06:26work better with XML structured prompts and it lets them parse the instructions more easily. The prompt
00:06:31contained the task details all the required dependencies and all of the important notes
00:06:36targeting every specific element and specifying exactly how each section should behave all in
00:06:41their respective tags. When we gave this prompt to Claude code it made a lot of additions and added
00:06:46the components with the gsap motion and installed gsap itself. Once that part of the implementation
00:06:51was complete we checked the website. With the animations added in the website was more livelier and
00:06:56interactive. The whole experience of using the website felt very different from the previous
00:07:00version which was just static with no motion at all. Now this prompt is also available in our
00:07:04community AI labs pro where you can download it and use it for your own projects. Also if you are
00:07:09enjoying our content consider pressing the hype button because it helps us create more content
00:07:14like this and reach out to more people. Now even though we had added the scroll visual effects using
00:07:19gsap we added another layer with lennis on top of the initial gsap scrolling. Lennis is a smooth
00:07:25scroll library that's open source and is one of the most popular tools for creating a more immersive
00:07:30layout on websites. You might be wondering why we'd use another library when we already had scroll
00:07:35animations configured with gsap but here's the thing lennis and gsap actually complement each
00:07:39other. Gsap controls what happens when you scroll and lennis controls the look and feel of the scroll
00:07:44itself. Without lennis the scroll jumps between positions and with it the page flows smoothly and
00:07:49the gsap animations feel more natural as they trigger. So we had another detailed prompt for
00:07:54this task. We followed the same XML prompting approach like we did with gsap. The lennis prompt
00:07:59focused on enhancing the existing scroll animations that were added in the previous step. The prompt
00:08:04listed the dependencies set up all the instructions and contained a detailed description of the
00:08:09elements how to place the animations and how the behavior should function ending with the rules. We
00:08:13gave this prompt to claud code and let it make a lot of changes across the whole repo. Once it
00:08:18had implemented everything we checked the website and it was significantly improved. The major change
00:08:23was the addition of smoother scrolling making navigation around the website a much more immersive
00:08:28experience. Once the website was built and ready with all the features the final thing left to do
00:08:32was make sure it complied with ux standards before marking it complete. So for that we created a skill
00:08:38using skill creator called ux audit. This skill is targeted towards checking the quality of ui elements
00:08:44reviewing different aspects of the website and making sure that everything adheres to ux standards.
00:08:49It contained multiple phases like gathering context analyzing the nine point checklist and reporting
00:08:54phase where it scored against a set of criteria. It also included references with the ux checklist
00:08:59that contains the details of all nine points and python scripts that are targeted toward
00:09:04programmatically catching different aspects of ux issues those issues that the human eye would miss.
00:09:08Once we ran the audit skill it compiled all issues and flagged two critical and multiple major and
00:09:14minor issues. The critical issues were the contrast of the colors. The scoring metric ranked the website
00:09:19as a c because of all the issues it identified. It provided all the required changes in detail and
00:09:24once it had defined the changes we asked it to implement the fixes. After all the changes were
00:09:29made the website though it might not look significantly different did have a huge improvement in usability
00:09:34making it easier to navigate and vcag compliant as well. When we ran the audit skill again the website
00:09:40ranking improved from a c to a b meaning all the major issues were fixed and only a few minor ones
00:09:45remained. That brings us to the end of this video. If you'd like to support the channel and help us
00:09:50keep making videos like this you can do so by using the super thanks button below. As always thank you
00:09:55Thank you for watching and I'll see you in the next one.