DEV Community: MonsterPi13

How I built a production-ready landing page using only Claude and vibes

MonsterPi13 — Wed, 29 Apr 2026 17:24:07 +0000

I'm a senior frontend developer. I've been writing CSS long enough to have opinions about it. So this isn't a "I can't code, AI saved me" post — it's the opposite. This is what happens when someone who could hand-build the whole thing decides not to touch a single line.

Yesterday I shipped elserip.ai — a landing page for our AIGC anime studio elser.ai — in one day. Claude Design did the visuals. Claude Code wrote every line of frontend. Vercel hosted it. I wrote zero UI code. Only thing I touched was the data wiring to our backend.

Here's what actually happened, including the part where I picked the wrong direction and had to throw it out.

Why hand it over at all

The bottleneck on a landing page like this was never CSS for me — it was direction. What's the vibe? What does the typography say about the product? Which of the seventeen plausible layouts is right? Designers solve this. Engineers staring at a blank page.tsx don't.

So the experiment was: let Claude Design own direction and visual decisions, let Claude Code own implementation, and see what's left for me to do.

The opening prompt

Goal: replace our old onboarding site with something that funnels users into the main app. The old one had too many mocks and didn't convert. I had one asset I knew worked — a masonry gallery of community fan-art — and I wanted that to anchor the page.

My first prompt to Claude Design:

"I'm rebuilding elserip.ai as an onboarding site for elser.ai. The old version has too many mocks and doesn't drive clicks. Keep the IP fan-art masonry gallery — that's the hook. Redesign everything else around it."

I gave it the main app URL, the current site URL, and the gallery URL. That's it.

Picking wrong (and noticing in time)

First pass gave me three low-fi wireframes. I picked Editorial Magazine — "VOL.01 / ISSUE Δ" masthead, hand-drawn headline, masonry behind it as a backdrop. Looked sharp.

It survived exactly one round.

Pushed to hi-fi, the magazine vibe stopped feeling editorial and started feeling like literally a magazine — section numbers, report-style dividers, masthead heavier than the product. Audience is Gen Z anime fans, not New Yorker subscribers.

So I scrapped it. This is the part nobody mentions in AI workflow posts: AI will polish a wrong direction into oblivion if you let it. As an engineer, you'd notice your code is over-engineered. You need the same instinct for design.

Round 2: five new directions

I asked for five distinctly different vibes, same section structure. Claude Design produced them on one canvas: Neon Arcade, Sticker Board, Trading Card, Cinematic Black, Y2K Neo-Tokyo.

I picked Y2K Neo-Tokyo. Terminal type, glitched katakana, masonry of anime IPs scrolling behind a giant FAN-ART.exe headline.

Then many rounds of detail polish. Macro direction is cheap to change, expensive to commit to. Spend rounds on direction first, polish second.

The handoff

Claude Design has a handoff button. Click it, it bundles the design as a zip Claude Code can ingest directly — full TSX components, asset references, the works. I dropped it into Claude Code: "build this as a Next.js app on App Router, I need SSR for SEO."

Claude Code unzipped it, read the design's component files, reused the TSX where it could, scaffolded a Next.js app around it. I didn't write a single line of frontend code.

This is what makes the workflow different from screenshot-to-code tools. It's not eyeballing pixels — it's ingesting actual component source. The output is structurally aligned with the design, not a visual approximation of it.

The only code I touched was data wiring — masonry to our gallery API, CTAs to the right routes on the main app. As a frontend engineer, this was the first project in years where I didn't think about layout, spacing, or breakpoint behavior. I just thought about endpoints.

Why Next.js: this site exists for SEO juice into the main domain. Next.js + Vercel is the lowest-friction path to good Core Web Vitals and SSR for crawlers. I stated that constraint upfront and Claude Code picked sensible defaults — server components for static sections, client only where the masonry animates.

Deploy: git push, connect Vercel, point the domain. ~15 minutes including DNS.

What it cost

I burned through one Claude Pro account and one Max ×5 account before I was done.

The expensive phase wasn't Claude Code building the app. It was Claude Design — specifically the hi-fi iteration loops. Every "tighten this 10%" rerenders the canvas, and on a layout this dense those rerenders aren't cheap.

If I were doing this again:

Lock the wireframe before going hi-fi. Don't let it polish a wrong direction.
Batch micro-feedback. "Tighter spacing AND bolder type AND adjust masonry" in one shot, not three.
Use Claude Code for tiny tweaks. A one-line CSS change is faster as a prompt to Code than another Design rerender.

I had more sections planned — pricing comparison, creator spotlight, "how it works" — but hit my weekly token ceiling. Honest tradeoff.

What ended up live

One day, blank to deployed at elserip.ai
Next.js on Vercel, masonry SSR'd for SEO
Zero UI code written by me — only data wiring
One scrapped direction, one I'd defend in court

The takeaway

The interesting result isn't "AI can build a landing page" — that's been true for a while. It's that for an engineer who can already do the work, this stack changes what you spend your time on. I didn't write CSS. I made design judgment calls. I wrote business logic. That ratio used to be inverted.

Catches:

Pixel polish in Design is where tokens evaporate.
AI will happily commit to a wrong direction. You have to kill it.
Plan scope around your token budget, not your ambition.

Site's live. Next experiment: same flow on internal tools, where the design bar is "doesn't make engineers angry." Should be cheaper.

Vue Flow Quickstart and Best Practices

MonsterPi13 — Fri, 02 Feb 2024 17:30:05 +0000

📝 Preface

The immense popularity of large language models (LLMs) in 2023 looks set to continue this year. Following OpenAI's groundbreaking releases of GPT-3 and subsequent iterations, LLMs have become the cutting edge in natural language processing. Numerous tech firms and developers are racing to bring their own LLM offerings to market, capitalizing on intense interest in this burgeoning field. Harnessing the power of LLMs appears to be the wise course forward for those seeking to remain at the forefront of AI capabilities. 🤖

My employer has opted to develop its own product in this sphere, integrating proprietary APIs across the organization. The workflow chart constitutes the crux of this endeavor, empowering users to tailor personalized processes. In the following article, I will illuminate the pivotal steps to constructing such workflow diagrams within web interfaces. It is my sincere aspiration that these insights provide some modicum of assistance to readers pursuing similar objectives. 🙏

📚 Finding the Right Workflow Library

At my present employer, the predominant front-end technology stack comprises Vue3 and TypeScript. Consequently, I sought out a workflow library grounded in Vue3 and ideally authored in TypeScript. Despite utilizing LogicFlow previously, its integration with Vue3 proved insufficiently seamless.Therefore, for this demonstration, I opted for VueFlow, which boasts exceptional support for Vue3.

⚙️ Core Capabilities to Implement

🖱 Drag & Drop Elements to Create New Nodes
🎨 Customizing Nodes
➡️ Connect Nodes with Drag-Based Edges
📤 Pass Data Between Nodes
💾 Save/Load Workflow State

🖱 Drag & Drop Elements to Create New Nodes

Set the element draggable and add dragstart event handler:

<script setup>
function handleDragStart(event, nodeType) {
  event.dataTransfer.setData("node", nodeType);
}
</script>

<template>
  <div 
    draggable 
    @dragstart="handleDragStart($event, 'someNode')">
    ...
  </div>
</template>

Define drop zone with ondragover and ondrop handlers:

<template>
  <div
    @drop="handleDrop"
    @dragover="handleDragOver">

    <VueFlow>
      ...
    </VueFlow>

  </div>  
</template>

<script>
function handleDrop(event) {
  // Create node from dragged data
  const nodeType = event.dataTransfer.getData('node') 
  const newNode = {
    type: nodeType,
    ...
  }

  addNode(newNode)
}

function handleOnDragOver(event) {
  event.preventDefault();

  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = "move";
  }
}
</script>

This enables dragging elements into the flowchart canvas to create new nodes programmatically. 💡

As the code above shows, we can do our business logic in the drop event handler. In this demo, we just add our custom node to the workflow canvas with addNodes. By the way, we can use the useVueFlow hook provided by VueFlow to conveniently add/delete nodes & edges in our app.

🎨 Customizing Nodes

Two approaches exist for defining customized nodes. The first employs template slots, whereby dynamic resolution furnishes a slot denominated #node-custom when the custom type is anticipated. The second leverages the node-types prop. In my estimation, the latter approach promotes superior organization. Thus, I opted to utilize the node-types technique for node definition.

Constructing a bespoke node is remarkably straightforward - simply codify the node UI as an ordinary Vue component. This convenience is quite remarkable.

<script setup lang="ts">
import StartNode from '@/components/vue-flow/nodes/start-node.vue'
import EndNode from '@/components/vue-flow/nodes/end-node.vue'
import LLMNode from '@/components/vue-flow/nodes/LLM-node.vue'
import CodeNode from '@/components/vue-flow/nodes/code-node.vue'
import KnowledgeNode from '@/components/vue-flow/nodes/knowledge-node.vue'
import ApiNode from '@/components/vue-flow/nodes/api-node.vue'

  const nodeTypes = {
    start: markRaw(StartNode),
    end: markRaw(EndNode),
    LLM: markRaw(LLMNode),
    code: markRaw(CodeNode),
    knowledge: markRaw(KnowledgeNode),
    api: markRaw(ApiNode)
  }
</script>

<template>
  <div class="relative h-full w-full">
    <VueFlow :node-types="nodeTypes">
    </VueFlow>
  </div>
</template>

➡️ Connect Nodes with Drag-Based Edges

Employ the onConnect hook, invoked upon establishing a connection between two nodes.
Within the callback, call addEdges to forge an edge linking the nodes.
When instantiating the novel node, the isValidTargetPos attribute can be defined to constrain permissible connections to specific target nodes.

const { onConnect, addEdges } = useVueFlow()
onConnect((params) => {
  addEdges(params)
})

Automatically connect nodes on drag.

📤 Pass Data Between Nodes

Our envisioned workflow platform necessitates obtanining data from preceding nodes and replaying it to subsequent nodes. This imposes the requirement of devising a technique to retrieve a node's antecedent data.

The current node's attributes incorporate a connectedEdges field. By filtering for connected nodes where the current node constitutes the target node type, we can identify the direct predecessor. The findNode function can then be invoked upon that node to extract its bound data for passage downstream.

This leverages existing node properties and methods to fulfill the prerequisite of data sharing between ajacent nodes in the workflows.

import { useNode, useVueFlow } from "@vue-flow/core";

const node = useNode();
const { findNode } = useVueFlow();
watchEffect(() => {
  if (node.connectedEdges && node.connectedEdges.value.length > 0) {
    const filteredEdges = node.connectedEdges.value.filter(
      (item) => item.target === node.id
    );
    referenceOptions.value = filteredEdges.map((edge) => {
      const node = findNode(edge.source);
      const currentItem: Option = {
        groupName: node?.data.title ?? node?.label,
        options: [],
      };

      if (node?.data.output) {
        node?.data.output
          .filter((item: any) => Boolean(item.name))
          .forEach((option: any) => {
            currentItem.options.push({
              label: option.name,
              value: option.name,
            });
          });
      } else {
        currentItem.options = [];
      }
      return currentItem;
    });
  }
});

💾 Save/Load Workflow State

To enable integration with back-end APIs, persisting the current workflow state is requisite. Retrieving the diagram data proves straightforward - simply invoke the toObject method form the useVueFlow hook. Similarly, restoring a saved workflow is readily achievable by applying the appropriate utilities furnished by the hook.

Leveraging the capabilities surface by useVueFlow provides a clean and convenient approach to serializing and deserializing the workflow for server communication and storage.

For illustration, the workflow data can be obtained, persisted, and restored as follows:

// Retrieve workflow data
const data = toObject(workflow); 

// Save data to backend
saveWorkflow(data);

// Reconstruct workflow from data
setNodes(data.nodes);
setEdges(data.edges);

Through this approach, the current workflow state can be serialized and sent to the backend for storage. Later, it can be fetched and deserialized to recreate the diagram programmatically by re-instantiating the nodes and edges.

This enables full persistence of workflows to facilitate saving progress and resuming from previous sessions. The useVueFlow hook provides convenient utility methods to capture and restore the diagram state.

Additional Beneficial Capabilities

Copying, deleting, and otherwise modifying nodes through handy utility functions.

VueFlow furnishes abundant helper methods to effortlessly copy, remove, or otherwise alter nodes within the workflow diagram. This greatly simplifies tasks like duplicating portions of the workflow.

Supplementary plugins for expanded functionality.

A range of optional VueFlow plugins exist that introduce additional capabilities including minimaps, grid backgrounds, node resizer, and more. These afford further ways to customize the environment to suit specific needs.

In summary, VueFlow comes well-equipped with built-in utilities and an ecosystem of plugins to enable advanced workflows and streamlined customization beyond core dragging and connecting of nodes.

🏁 Conclusion

At its core, constructing a web-based flowchart entails thoughtfully organizing components into a cohesive application. The crux lies with the components themselves, irrespective of the framework such as React or Vue. The process simply involves adhering to documentation, logically structuring components, and conveniently adding/removing them as needed. I hope these insights offer useful pointers on building flowchart tools.

Through creating this demo, I've gained significant clarity around implementing web apps centered on flowcharts. The heart of such applications remains the components - whether using React, Vue, or any other JavaScript framework. It's a matter of fitting components into the framework's architecture. This principle persists unchanged; the steps are to comprehend documentation, keep the framework tidy, and seamlessly inject or remove components. I hope this article📚 provides helpful tips on flowchart apps. Thank you for reading - have an excellent day!😃

🚀 Live Demo: https://chat-bot-workflow.vercel.app/
📚 Original Article: https://www.monsterpi13.dev/writing/vue-flow-quickstart-and-best-practices
📂 GitHub Repo: https://github.com/MonsterPi13/chatBot-workflow

Building My Developer Blog Site🎉✨🍾

MonsterPi13 — Thu, 25 Jan 2024 13:00:55 +0000

Preface

As I reflect on my front-end development career so far, I feel frustrated that I have no major accomplishments to showcase. Front-end technology evolves so rapidly. Whenever a new framework emerges, I eagerly examine and study it, yet I fail to translate this learning into tangible progress.

Therefore, I decided to create a personal blog site to chronicle my professional journey. This blog will empower me to grow by chronicling the process of putting my skills into practice through real projects. Potentially publishing on developer platforms can garner feedback and give me a sense of achievement.

I came across an inspiring blog site called onur.dev which exemplified the kind of site I wanted to build for myself. The clean design and features were just what I had envisioned. I resolved to model my own site after this one.

This is where i found this project:
// Detect dark theme var iframe = document.getElementById('tweet-1747389288772464926-567'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1747389288772464926&theme=dark" }

Key Technologies Used

Key Learning

1.Buying a Domain Name

Previously, I never had my own domain. For this project, purchasing a domain was the first step. I felt this would motivate me to finish building the site - if I owned the domain, I'd be less likely to abandon the project.

After researching domain providers, I chose GoDaddy because it supports Alipay(It's one of the most popular payment in china). The process of connecting the domain to my Vercel site was smooth. This small win spurred me on.

2.Mastering Next.js Concepts

Although I'd used Next.js before, this project consolidated my knowledge.

For example, I implemented Next's generateMetadata API to optimize SEO, pulling content from Contentful. This SEO optimization was very new to me, and helped improve SEO a lot.

I also got familiar with generateStaticParams which builds dynamic routes into static pages at build time for better performance.

In addition, I enabled Draft Mode which allowed me to preview unpublished Contentful posts. This avoids having to rebuild static pages each time I update a draft.

The Link component was another revelation - I didn't know it preloads associated JS/CSS files by default for faster page transitions. However, this caused an issue with incorrectly counting page views which I send PR to origin project .

Finally, I utilized revalidatePath to refresh cached content based on the triggering of Contentful webhooks. This smart revalidation approach was very useful.

3.Headless CMS

This was my first time using a headless CMS in a real project. Contentful's GraphQL API made it simple and flexible to retrieve content as needed.

However, debugging queries was challenging at times as error messages aren't always clear. The JS library also made it hard to take advantage of TypeScript features.

A few UX issues in the Contentful UI itself also proved frustrating:

The template selector often errored out when trying to use a template.
The documentation was not easy to navigate - for example, finding how to pass dynamic params to webhooks involved a lot of trial and error.

But overall, Contentful hugely simplified my content workflow. I can focus on developing, not worrying about the backend. The convenience of managing content separately outweighed the debugging difficulties.

4.supabase

Implementing Supabase's RPC functionality was eye-opening. It encapsulates data logic on the server, while the client just calls remote procedures. This is excellent for security and maintainability.

export async function POST(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const slug = searchParams.get('slug')
  if (!slug) return NextResponse.json({ error: 'Missing slug parameter' }, { status: 400 })

  const res = await getPost(slug)

  try {
    await supabase.rpc('increment_view_count', { page_slug: slug, id: res.sys.id })
    return NextResponse.json({ messsage: `View count incremented successfully for slug: ${slug}` }, { status: 200 })
  } catch (error: any) {
    console.error('Error incrementing view count:', error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

Supabase's realtime sync also impressed me. Subscribing to database changes from the client is powerful yet simple to set up.For example, I implemented a viewer count for blog posts that updates in realtime as people read the post. This feature would have been much more complex without Supabase's streamlined syncing.

  useEffect(() => {
    function handleRealtimeChange(payload: any) {
      if (payload?.new?.slug) {
        setViewData((prev) => {
          if (!prev) return null
          const index = prev.findIndex((item) => item.slug === payload.new.slug)
          index !== -1 ? (prev[index] = payload.new) : prev.push(payload.new)
          return [...prev]
        })
      }
    }

    const channel = supabase
      .channel('supabase_realtime')
      .on(
        'postgres_changes',
        {
          event: 'UPDATE',
          schema: 'public',
          table: SUPABASE_TABLE_NAME,
          ...(slug && { filter: `slug=eq.${slug}` })
        },
        handleRealtimeChange
      )
      .subscribe()

    return () => {
      supabase.removeChannel(channel)
    }

Other Learnings

Here are some other useful libraries and techniques I learned on this project:

Using prettier-plugin-tailwindcss to automatically format Tailwind classes.
frame-motion for smooth CSS animations. In this project, this library made it easy to implement the subtle yet eye-catching effect of the view count fading in .
vaulfor displaying modals in a native-app style in mobile.
react-tweet makes it easy to embed tweets.
react-wrap-balancer makes titles more readable in different viewportsizes.
react-intersection-observer to detect when elements are visible in the viewport and optimize rendering.

import { PropsWithChildren } from "react";
import { useInView } from "react-intersection-observer";

interface ShowInViewProps {
  rootMargin?: string;
  triggerOnce?: boolean;
}

export const ShowInView = ({
  children,
  rootMargin = "0px",
  triggerOnce = true,
  ...rest
}: PropsWithChildren<ShowInViewProps>) => {
  const { ref, inView } = useInView({
    rootMargin,
    triggerOnce,
  });

  return (
    <div ref={ref} data-role="intersection-observer" {...rest}>
      {inView && children}
    </div>
  );
};

My Contributions

Fixed an issue with incorrect view counts caused by Next.js preloading. Submitted a PR with the fix.
Reached out to the original repo owner to discuss Next.js revalidation strategies.
Submitted another PR to fix a small logic bug I found.
Implemented auto-deletion of old view count records using Supabase RPC. This required storing the Contentful sys ID to link entries after deletion.

import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
  const secret = requestHeaders.get('x-vercel-reval-key')

  if (secret !== process.env.CONTENTFUL_REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }

  const data = await request.json()
  const { id } = data
  if (!id) return NextResponse.json({ error: 'Missing id parameter' }, { status: 400 })

  try {
    const res = await supabase.rpc('delete_view_count', { entry_id: id })
    return NextResponse.json({ messsage: `View count Deleted successfully for id: ${id}` }, { status: 200 })
  } catch (error: any) {
    console.error('Error incrementing view count:', error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

Conclusion

This project gave me a polished blog to share my journey. More importantly, it leveled up my React skills. I'm excited to apply these learnings to future ambitious projects.

If you find this article useful, I invite you to check out the👏✨🌹 original project that inspired me as well as my own implementation. I also welcome you to visit my blog and share any feedback🙇🙇‍♀️🫡!