How I designed my SaaS landing page with AI tools Takuya Matsuyama, developer of the note-taking app Inkdrop, rebuilt its landing page using AI tools including Vercel's v0, GPT Images 2.0, and Claude Design, but ultimately chose a simple design inspired by Sketch, fly.io, and Stripe after finding AI-generated designs mediocre or too 'Japanese-ish'. He documented his process in a YouTube video and blog post, highlighting the use of Claude Code and Waku with CodeMirror for an interactive self-typing editor demo. Tips https://www.devas.life/tag/tips/ How I designed my SaaS landing page with AI tools Hey, what's up? It's Takuya here. Recently, I rebuilt the landing page for Inkdrop https://www.inkdrop.app/?ref=devas.life , which has a demo app built with the real components. It self-plays an editing session when you visit, and at the same time, you can actually edit notes in it. I just posted a new video on YouTube https://youtu.be/Rt7xwb1SOcY?ref=devas.life where I share how to build an interactive self-typing editor demo with Waku https://github.com/wakujs/waku?ref=devas.life + CodeMirror https://codemirror.net/?ref=devas.life . The video walks through the steps in the way of traditional manual coding. But I used Claude Code to build it in my real workflow. In this article, I'd like to share how I experimented with designing using AI tools, which websites I referred to, and what prompts I used. The video focused on the technical part of the editor demo, while this article focuses on the design part. How I ended up not using other design tools The end result is not what I directly created in one iteration. Of course, I explored a lot of other ideas and possibilities. Here is what I did. Gathering ideas I've been thinking of building a new website since last year. I've been taking notes for inspiration like this: As you can see in the note, I've been considering using Three.js to create an interesting effect to make the page attractive. And I'm a huge fan of Oğuz's works https://x.com/oguzyagizkara?ref=devas.life . So, I really wanted to replicate his design style. Trying new AI-native design tools Last year, I used Vercel's v0 https://v0.app/?ref=devas.life to design a TOTP form, and it worked great. So, I tried v0 again. I iterated on a few prompts, but the results looked mediocre and boring. After that, I tried GPT Images 2.0 and it blew my mind. The output image looked so nice: So, I fed the image into Claude Design https://claude.com/product/design?ref=devas.life to implement it: The layout was somewhat broken, but it got a little bit better than v0. However, the Japanese prose "春は曙、やうやう白くなりゆく山ぎは。" doesn't make any sense on a product website. Here is another iteration: lol, this one was too Japanese-ish. Who'd expect to see a red sun on a SaaS landing page? Also, I've noticed recently, when visiting other websites, that Claude has a tendency to generate a similar look and vibe. So, I disliked these taste slops . I also tried VoltAgent/awesome-design-md https://github.com/VoltAgent/awesome-design-md?ref=devas.life , but it just generated an average design. Maybe useful for creating websites that don't have to be unique. It wasn't for this project. I was planning to use Ship Studio https://www.ship.studio/?ref=devas.life , but didn't use it this time. These experiments weren't waste of time. It let me quickly try various ideas and find a right direction. And it was fun to try new AI-native design tools. I think they should work way better than when I tried. I realized I prefer a simple design While checking out Oğuz's work like this https://blackalgo.com/?ref=devas.life and this https://www.authkit.com/?ref=devas.life , I found that they are absolutely cool, but there is a critical issue in these designs. That is, I couldn't understand what the product does and how it works because my attention was caught by these amazing UI mocks and animations. I simply couldn't focus on the content. Also, it seemed hard to maintain as a solo developer. On the other hand, I liked simple websites like Sketch https://www.sketch.com/?ref=devas.life , fly.io https://fly.io/?ref=devas.life , and Stripe https://stripe.com/?ref=devas.life . So, I decided to go with this simple design direction. Building a real UI demo What I don't like about screenshots and videos is that I can't actually try the product. Of course, it's technically impossible if your product is a native app like Sketch. But mine is an Electron-based app, whose UI is compatible with browsers. Since I really wanted to replicate Oğuz's style, I tried to mix these ideas: - A demo with real UI components that showcases the look and feel - A real editor component that lets you actually try it right on the webpage This way, I can achieve an attractive design while providing a demo so visitors can quickly understand how it works. Extracting UI components from the desktop app I refactored the desktop app source to extract its React components into a separate library called uikit . It uses Storybook to check the component designs. So, I can easily update the website whenever I change the app's UI. I followed Radix UI https://www.radix-ui.com/?ref=devas.life 's design pattern. This wouldn't have been possible without the help of AI agents, because it required lots of work Here is the idea note that I had AI read. It explains the idea briefly: Then, I asked AI to create plan notes with implementation phases in detail. This one ended up being a super long note: I refactored and reviewed the components one by one, not in a single shot. Claude Code often made mistakes and broke the component behaviors. Creating consistent branding You may know I've been publishing videos on YouTube devaslife https://www.youtube.com/@devaslife?ref=devas.life & craftzdog https://www.youtube.com/@craftzdog?ref=devas.life . I wanted to let visitors from my channels know it's my product, without showing my face or mentioning the channel names. So, I decided to record footage of myself composing a tech note and put it behind the app demo. It resulted in achieving two "wow"s: 1. Wow, the editor syncs with the background footage 2. Wow, and I can actually try the app here I think these wows genuinely contribute to understanding the product rather than distracting from it. Prompting tips and examples 1. Plan in a note, execute by phase As you can see above, my basic workflow is to have AI write a plan first. Inkdrop supports note templates https://docs.inkdrop.app/reference/note-templates?ref=devas.life , and you can pick the " Implementation plan " template to replicate the process. So, I prompted like: fill out