# How I designed my SaaS landing page with AI tools

> Source: <https://www.devas.life/how-i-designed-my-saas-landing-page-with-ai-tools/>
> Published: 2026-09-07 13:33:14+00:00

[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 <NOTE LINK>

then, 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:

work on phase 1

then, commit it, and:

work on phase 2

Claude Code regularly updated the plan note as it discovered unexpected issues and new decisions.

### 2. Point at working code, not at descriptions

I didn't paste code into the chat input. Instead, I constantly pointed at the desktop app's source, Storybook stories, and docs:

currently, the demo app doesn't support workspace view. Implement it by referring to the realistic story of …/sidebar-layout.stories.tsx

it 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

learn about The inline AI assistant here: …/reference/inline-ai-assistant/page.md

check 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)

### 3. Report bugs like a QA report: device, symptom, hypothesis

When 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:

when I view it on my iphone, it rotates 180degrees. I suspect the scale is negative?

backdrop-filter: blur not working on Android device. Do you know why?

I 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

### 4. Read source code and point out strange parts

I still read source code in agentic coding, and I often find weird code structures. So, I ask questions like:

do you still need `max-width: none`?

why do you need another backdrop-filter in .demo-app-frame-container-scaled::before?

by the way, these .landing-editor-scene[data-active-step=*] selectors look redundant. are they still necessary?

When Claude Code added a dirty duplicate function or workaround, I said:

adding `demo-app-wrapper-scaled` to `masthead-demo` looks terrible as it violates separation of concerns. I added .demo-app-frame-container. Refactor the style

### 5. Trust your instinct and don't let AI generate the whole thing at once

When starting something new, I deliberately under-specified and asked for a static skeleton first:

next 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.

This step lets me visually check what should come next and come up with new ideas.

Here is the end result:

That's it! I hope it's helpful for designing your product page with AI.