{"slug": "how-i-designed-my-saas-landing-page-with-ai-tools", "title": "How I designed my SaaS landing page with AI tools", "summary": "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.", "body_md": "[Tips](https://www.devas.life/tag/tips/)\n\n# How I designed my SaaS landing page with AI tools\n\nHey, 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.\n\nI 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).\n\nThe video walks through the steps in the way of traditional manual coding.\n\nBut I used Claude Code to build it in my real workflow.\n\nIn 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.\n\n## How I ended up not using other design tools\n\nThe end result is not what I directly created in one iteration.\n\nOf course, I explored a lot of other ideas and possibilities.\n\nHere is what I did.\n\n### Gathering ideas\n\nI've been thinking of building a new website since last year.\n\nI've been taking notes for inspiration like this:\n\nAs you can see in the note, I've been considering using Three.js to create an interesting effect to make the page attractive.\n\nAnd 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.\n\n### Trying new AI-native design tools\n\nLast year, I used [Vercel's v0](https://v0.app/?ref=devas.life) to design a TOTP form, and it worked great.\n\nSo, I tried v0 again. I iterated on a few prompts, but the results looked mediocre and boring.\n\nAfter that, I tried GPT Images 2.0 and it blew my mind. The output image looked so nice:\n\nSo, I fed the image into [Claude Design](https://claude.com/product/design?ref=devas.life) to implement it:\n\nThe layout was somewhat broken, but it got a little bit better than v0.\n\nHowever, the Japanese prose (\"春は曙、やうやう白くなりゆく山ぎは。\") doesn't make any sense on a product website.\n\nHere is another iteration:\n\nlol, this one was too Japanese-ish. Who'd expect to see a red sun on a SaaS landing page?\n\nAlso, 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*.\n\nI 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.\n\nThese 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.\n\n### I realized I prefer a simple design\n\nWhile 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.\n\nThat 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.\n\nOn 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).\n\nSo, I decided to go with this simple design direction.\n\n### Building a real UI demo\n\nWhat I don't like about screenshots and videos is that I can't actually try the product.\n\nOf course, it's technically impossible if your product is a native app like Sketch.\n\nBut mine is an Electron-based app, whose UI is compatible with browsers.\n\nSince I really wanted to replicate Oğuz's style, I tried to mix these ideas:\n\n- A demo with real UI components that showcases the look and feel\n- A real editor component that lets you actually try it right on the webpage\n\nThis way, I can achieve an attractive design while providing a demo so visitors can quickly understand how it works.\n\n## Extracting UI components from the desktop app\n\nI refactored the desktop app source to extract its React components into a separate library called `uikit`.\n\nIt uses Storybook to check the component designs.\n\nSo, I can easily update the website whenever I change the app's UI.\n\nI followed [Radix UI](https://www.radix-ui.com/?ref=devas.life)'s design pattern.\n\nThis wouldn't have been possible without the help of AI agents, because it required lots of work!\n\nHere is the idea note that I had AI read. It explains the idea briefly:\n\nThen, I asked AI to create plan notes with implementation phases in detail. This one ended up being a super long note:\n\nI refactored and reviewed the components one by one, not in a single shot. Claude Code often made mistakes and broke the component behaviors.\n\n## Creating consistent branding\n\nYou 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)).\n\nI wanted to let visitors from my channels know it's my product, without showing my face or mentioning the channel names.\n\nSo, I decided to record footage of myself composing a tech note and put it behind the app demo.\n\nIt resulted in achieving two \"wow\"s:\n\n1. Wow, the editor syncs with the background footage!\n2. Wow, and I can actually try the app here!\n\nI think these wows genuinely contribute to understanding the product rather than distracting from it.\n\n## Prompting tips and examples\n\n### 1. Plan in a note, execute by phase\n\nAs you can see above, my basic workflow is to have AI write a plan first.\n\nInkdrop 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.\n\nSo, I prompted like:\n\nfill out <NOTE LINK>\n\nthen, Claude Code filled out the template via [the MCP server](https://docs.inkdrop.app/reference/mcp-server?ref=devas.life). After reviewing the plan, said:\n\nwork on phase 1\n\nthen, commit it, and:\n\nwork on phase 2\n\nClaude Code regularly updated the plan note as it discovered unexpected issues and new decisions.\n\n### 2. Point at working code, not at descriptions\n\nI didn't paste code into the chat input. Instead, I constantly pointed at the desktop app's source, Storybook stories, and docs:\n\ncurrently, the demo app doesn't support workspace view. Implement it by referring to the realistic story of …/sidebar-layout.stories.tsx\n\nit still works strangely. check out …/note-list-bar-item.tsx. You don't have to care about `animationEnabled` flag here. learn how the app implements note list bar animations\n\nlearn about The inline AI assistant here: …/reference/inline-ai-assistant/page.md\n\ncheck out the UI[https://docs.inkdrop.app/images/inline-ai-assistant_popover.png](https://docs.inkdrop.app/images/inline-ai-assistant_popover.png?ref=devas.life)\n\n### 3. Report bugs like a QA report: device, symptom, hypothesis\n\nWhen I found a bug where the demo frame was broken on smaller screens, I reported it with three things: where it happens, what I observed, and my guess. For example:\n\nwhen I view it on my iphone, it rotates 180degrees. I suspect the scale is negative?\n\nbackdrop-filter: blur not working on Android device. Do you know why?\n\nI found a bug where when I pressed backspace to remove a char in the editor, the page unexpectedly scrolls, presumably because of `scrollIntoView` in the editor change handler\n\n### 4. Read source code and point out strange parts\n\nI still read source code in agentic coding, and I often find weird code structures. So, I ask questions like:\n\ndo you still need `max-width: none`?\n\nwhy do you need another backdrop-filter in .demo-app-frame-container-scaled::before?\n\nby the way, these .landing-editor-scene[data-active-step=*] selectors look redundant. are they still necessary?\n\nWhen Claude Code added a dirty duplicate function or workaround, I said:\n\nadding `demo-app-wrapper-scaled` to `masthead-demo` looks terrible as it violates separation of concerns. I added .demo-app-frame-container. Refactor the style\n\n### 5. Trust your instinct and don't let AI generate the whole thing at once\n\nWhen starting something new, I deliberately under-specified and asked for a static skeleton first:\n\nnext is the note organization section. Add a demo frame that only renders the sidebar and note list bar. You don't have to implement scenes or steps yet. I'd like to get inspiration by seeing a static demo frame.\n\nThis step lets me visually check what should come next and come up with new ideas.\n\nHere is the end result:\n\nThat's it! I hope it's helpful for designing your product page with AI.", "url": "https://wpnews.pro/news/how-i-designed-my-saas-landing-page-with-ai-tools", "canonical_source": "https://www.devas.life/how-i-designed-my-saas-landing-page-with-ai-tools/", "published_at": "2026-09-07 13:33:14+00:00", "updated_at": "2026-09-07 13:56:57.166938+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "generative-ai"], "entities": ["Takuya Matsuyama", "Inkdrop", "Vercel's v0", "GPT Images 2.0", "Claude Design", "Claude Code", "Waku", "CodeMirror"], "alternates": {"html": "https://wpnews.pro/news/how-i-designed-my-saas-landing-page-with-ai-tools", "markdown": "https://wpnews.pro/news/how-i-designed-my-saas-landing-page-with-ai-tools.md", "text": "https://wpnews.pro/news/how-i-designed-my-saas-landing-page-with-ai-tools.txt", "jsonld": "https://wpnews.pro/news/how-i-designed-my-saas-landing-page-with-ai-tools.jsonld"}}