Building Neprokin.com Without Programming Skills, in Cursor

AI Development Astro Performance

Introduction

In this article, I’ll share how to create a modern website with maximum performance metrics without having deep programming skills. Using only Cursor AI and following the right process, we created a site with Lighthouse Score 100/100 that outperforms many professional solutions. This is a real case study that shows how AI tools make web development accessible to everyone.

1. Setting up Cursor AI

The first step was properly configuring Cursor for efficient work. We created a .cursorrules file in the project root describing:

  • Code style and conventions
  • Project architecture
  • Technologies used (Astro, TypeScript, Tailwind)
  • Design system specifics

We also configured Cursor’s notepad with important project information: API keys, database structure, business logic, and development plans. Added links to framework documentation and enabled auto-context for better codebase understanding.

2. Task Definition

The goal was to create a modern personal website with focus on performance and maintenance simplicity. Main requirements:

  • Maximum performance (Lighthouse Score 100/100)
  • Modern architecture with Astro 5.x
  • Custom monochrome design system
  • Obsidian integration for content management
  • Automatic deployment to Vercel
  • Strict TypeScript typing

3. Technology Stack Selection

After analyzing requirements, we chose the following stack:

  • Astro 5.13.5 — Islands Architecture for maximum performance
  • TypeScript — strict typing for code reliability
  • Tailwind CSS — utility-first approach with custom design system
  • Obsidian — content management through Markdown files
  • Vercel — hosting with automatic deployment
  • GitHub — version control and CI/CD

4. Project Architecture

We created a distributed CSS architecture for optimal performance:

  • Critical CSS in Layout.astro — instant loading
  • Global Styles in globals.css — design system
  • Tailwind Config — utility framework with CSS variables
  • UI Kit — interactive page for component preview

5. Design System Development

We created a monochrome design system with 6 colors in gray palette (#FDFDFD → #0A0A0A). Used system fonts for instant loading and 4px modular grid for consistency. Implemented light and dark theme support with automatic switching.

6. Component Creation

We developed reusable components with TypeScript typing:

  • UI components — Badge, Button, Card
  • Layout components — Navigation, Footer

7. Obsidian Integration

We set up Obsidian integration for convenient content management. Created folder structure in src/content/ for Markdown files with YAML frontmatter. This allowed editing content in the familiar Obsidian interface and automatically deploying changes.

8. Performance Optimization

We implemented numerous optimizations to achieve maximum performance:

  • Critical CSS inline for instant rendering
  • System fonts instead of external ones
  • Image and SVG optimization
  • Lazy loading for video content
  • Resource minification and compression
  • Static resource caching

9. Deployment Setup

We configured automatic deployment to Vercel with GitHub integration. Added security headers for maximum security and configured caching for optimal performance. Implemented preview deployments for each pull request.

10. Achieved Results

As a result, we got a site with outstanding metrics:

  • Lighthouse Score: 100/100/100/100 ✅
  • Bundle Size: < 50KB (gzipped) ✅
  • First Contentful Paint: < 1.0s ✅
  • Largest Contentful Paint: < 1.5s ✅
  • Security Headers: A+ rating ✅
  • Hosting Cost: $0/month (Vercel Free Tier) ✅

11. Comparison With Previous Version

Comparison with the previous WordPress version shows significant improvements:

  • Performance: 85/100 → 100/100 (+15 points)
  • FCP: 2.8s → <1.0s (3x faster)
  • LCP: 3.3s → <1.5s (2x faster)
  • Bundle Size: ~200KB → <50KB (75% smaller)
  • Hosting Cost: $5-10/month → $0/month (100% savings)

12. Key Lessons

The development process with Cursor AI revealed several important principles:

  • Proper AI setup is critically important for efficient work
  • Performance First approach should be built into architecture from the start
  • Systematic approach to design simplifies maintenance and scaling
  • Automation of deployment and CI/CD significantly speeds up development
  • Documentation and project structure are important for long-term maintenance

Conclusion

Creating a website with Cursor AI demonstrated the enormous potential of modern development tools. Proper AI assistant setup, choosing the right technology stack, and focusing on performance allowed us to create a site that outperforms the previous version in all metrics. This is a real example of how AI can accelerate development without compromising quality.

The project is available at neprokin.com and demonstrates the capabilities of modern web development using AI tools.