How I Built rydee.com: AI, Cursor, and a Front-End Newbie

Key Insight: You don’t need to be a front-end expert to build a site that reflects your ideas—especially with the right AI tools.

🤖 Why rydee.com Exists

I wanted a place to:

• Highlight my projects
• Share ideas
• Connect with collaborators and clients
• Experiment with AI coding, especially for front-end work (which is not my background)

But I had a problem: I have very little front-end coding experience. My strengths are elsewhere.

The AI Build Loop

From what my experience, AI-agent software development works best when it follows the following loop:

1. Plan
   Define your goals, requirements, and constraints. Use AI to brainstorm, outline, and clarify what you want to build.

2. Build
   Implement the plan step by step. Let AI generate code, suggest solutions, and help you assemble the pieces into a working product.

3. Refine
   Test, review, and improve. Use AI to debug, optimize, and polish your project, iterating until it meets your standards.

🛠️ The Tools: Cursor & Claude 4 Sonnect

Instead of learning everything from scratch, I leaned on a few powerful tools:

• Chat GPT: I often will start projects with Chat GPT o3. The sessions start with brainstorming where I lay out my idea for a project. At the end of the chat, I ask it to create a PROJECT_PLAN.md with a step-by-step implementation and tech choices mapped out. I use the chat to question tech alteratives.
• Cursor: An AI-powered code editor that behaves differently from day-to-day because they are still figuring out their cost model. But generally, you can give it a project plan and get a working website up in a few hours.
• Claude 4 Sonnect: The landscape of models has been changing every few months. Within Cursor, Claude 4 Sonnet MAX mode is a clear winner for executing a project plan when I am not an expert in the technologies. Auto mode works well for basic things but I am learning to quickly switch to one of the MAX modes when I stop making progress.

Sample PROJECT_PLAN.md

Here’s the PROJECT_PLAN.md I used to start rydee.com. Many things have changed from the beginning, but a plan like this helps an agent based coding system get started on the project.

# rydee.com – Website Specification

> **Purpose:** Provide Cursor with a clear, implementation‑ready blueprint for the new rydee.com site that highlights *Checklist MCP*, showcases finished projects, and hosts articles & interactive demos devoted to AI, math, and programming.

---

## 1 · Core Goals

| ID | Goal                                                        | Success Metric                                                  |
| -- | ----------------------------------------------------------- | --------------------------------------------------------------- |
| G1 | Spotlight **Checklist MCP** at `https://checklistmcp.com/`                 | CTA click‑through ≥ 25 % from home                              |
| G2 | Convey the theme **“Small teams → Big impact with AI”**     | Consistent copy across hero, about, and project pages           |
| G3 | Host polished projects only (no WIP)                        | Projects list pulls from Markdown where `status: "public"`      |
| G4 | Provide platform for essays & micro‑demos on cool math / AI | At least 1 interactive demo & 2 long‑form articles live         |
| G5 | Keep stack lightweight & inexpensive                        | Netlify/Vercel build < 2 min, cold page load < 1 s (Lighthouse) |

---

## 2 · Tech Stack

| Layer                 | Choice                                | Notes                                     |
| --------------------- | ------------------------------------- | ----------------------------------------- |
| Static site framework | **Astro v4** (SSG)                    | Island architecture; MDX for content      |
| Component library     | React + **shadcn/ui**                 | Re‑use MCP styling; tree‑shakeable        |
| Styling               | **Tailwind CSS** (JIT)                | Dark‑mode ready; accessible color palette |
| Interactive demos     | React + *@observablehq/runtime*       | Embedded notebooks under `/play/*`        |
| Content source        | Markdown/MDX in `src/content/`        | Front‑matter drives project/blog metadata |
| Icons                 | **lucide-react**                      | Consistency with Checklist MCP            |
| Deployment            | Vercel (preview) ⇢ Hetzner VPS (prod) | Same domain; GitHub Actions for staging   |

---

## 3 · Repository Layout

~~~
rydee.com/
├─ astro.config.mjs
├─ tailwind.config.ts
├─ package.json
├─ src/
│  ├─ layouts/
│  │   ├─ BaseLayout.astro
│  │   └─ PlaygroundLayout.astro
│  ├─ components/
│  │   ├─ Navbar.tsx
│  │   ├─ Footer.tsx
│  │   ├─ Hero.tsx
│  │   ├─ ProjectCard.tsx
│  │   └─ ...
│  ├─ pages/
│  │   ├─ index.astro            # Home
│  │   ├─ projects.astro         # Projects list
│  │   ├─ checklist.astro        # Checklist MCP landing
│  │   ├─ play/                  # Interactive demos (mdx)
│  │   ├─ articles/              # Blog posts (mdx)
│  │   └─ about.astro            # Bio & contact
│  └─ content/
│      ├─ projects/
│      │   ├─ checklist.mdx
│      │   └─ ...future projects...
│      └─ articles/
│          └─ intro-small-teams-big-impact.mdx
└─ public/
    └─ assets/
~~~

🚀 The Process: Learning by Doing (with AI)

I started with a blank slate and a vague vision. With Cursor and Claude, I:

• Generated project cards and layouts by describing what I wanted
• Got explanations for Astro, React, and CSS concepts on the fly
• Iterated quickly, fixing mistakes as I went
• Built a site that is both a portfolio and a playground for future experiments

🌀 Don’t Judge me Bro!

The site is built with AI coding assistants and showcases the very process and technology it promotes. As my own proficiency with AI grows, and as the tools themselves advance, rydee.com will continue to evolve and improve. In this way, the site is both a showcase and a proof-of-concept: a place where the journey and the product are one and the same.

From time-to-time, I expect there to be some AI mistakes: obviously generated content, hallucinations, and things that don’t quite fit. Feel free to let me know if you see any AI slop show up. As an example, on the first pass building the site the AI made up my social links without telling me.

I will do my best to keep all of the ideas my own, even if AI helps me express them.

Can I borrow an old Silicon Valley motto?

Move fast, and post AI hallucinations.

💡 Takeaway: You Can Build, Too

If you’re hesitant to start a project because you lack a specific skill, try leveraging AI tools. You might be surprised at how far you can get with curiosity, persistence, and a little help from your digital collaborators.