Vibe Coding for Designers

Figma to website

In this tutorial, I’ll cover how you can create and host a portfolio site using Cursor, GitHub, and Figma.

1. Setting up website coding environment

a. Cursor

Cursor is a code editor with built-in AI that helps you write and edit code.

  • Download the free version: cursor.com/download
  • When you’re stuck on setup or how something works, you can ask Cursor and it’ll walk you through it.

b. npm

npm is the default package manager for Node.js—it lets you install and manage the tools and libraries your project needs (like Astro and Tailwind).

  • Install it by downloading Node.js: nodejs.org/en/download

  • Check that it worked by typing this in the terminal and pressing Enter:

    1. node -v
    2. npm -v

Note: The terminal is the text window where you type commands. In Cursor, open it from the menu: Terminal → New Terminal (or use the shortcut).

c. Astro

Astro is a lightweight web framework that outputs fast static sites and supports reusable components. For a portfolio or other simple, fast site, use Astro.

  • It lets you work with reusable pieces (like buttons or headers) and still outputs a fast, simple site.
  • There are lots of starter templates if you’d rather not build everything from scratch.

d. Tailwind

Tailwind is a utility-first CSS framework: basically it means you can easily style code inline without having a whole bunch of styling code everywhere. Use Tailwind for styling.

2. Setting up GitHub for your project

GitHub is a platform where you store and share code; it can also host static sites for free with GitHub Pages.

a. GitHub account

Put your site in a project on GitHub (a repository) so you can save your work there and connect it to free hosting. Sign up at github.com if you don’t have an account yet.

b. Connect from Cursor

Connect your project to GitHub from Cursor (no terminal needed):

  • Open Source Control in the left sidebar (branch icon).
  • If your folder isn’t a Git project yet, click Initialize Repository.
  • Stage your files (click the + next to “Changes”), type a message like Initial commit, and click Commit.
  • Click Publish to GitHub (or Publish Branch). Sign in to GitHub if prompted, pick a name for the repo, and Cursor will create it and push your code.

Note: You may need to sign in to GitHub in Cursor first (e.g. via the account icon in the bottom-left, or when you click Publish to GitHub) for the button to appear.

Alternative (terminal): If you prefer the command line or don’t see Publish to GitHub, create a new repository on GitHub (leave README unchecked), then in the terminal run:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

Tip: Swap your-username and your-repo-name for your GitHub username and the repo name you created. If GitHub suggests a different branch name than main, use that instead.

3. Hosting your website

  • Namecheap is a domain registrar where you can buy a custom domain (e.g. yourname.com). I like it for buying domains.
  • GitHub Pages is a free hosting service that serves your site from a GitHub repository. It’s handy for hosting your own portfolio.
  • To use your own domain name (e.g. yourname.com) with GitHub Pages: GitHub’s guide to custom domains

4. Figma to website

Getting your Figma designs into code can be done in a few ways.

  • Screenshots or Copy as PNG from Figma works surprisingly well: copy your asset, then paste and ask to build the layout in your site with your components and Tailwind.

  • Figma’s MCP (Model Context Protocol) lets tools like Cursor talk to Figma so you can see how the design is built—layers, spacing, etc. I haven’t used it yet but have heard good things.

5. Cursor / Astro config (bonus)

Cursor can use project rules—short instructions about your stack and how you want code written—so its suggestions match your project.

  • The block below is a set of rules that teach Cursor how to write consistent Astro code.

  • In your project folder, create a folder named .cursor/rules, then add a new file named astro.mdc (that’s the file type Cursor uses for rules).

  • Paste the content below into that file:

---
alwaysApply: true
---
You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

Key Principles
- Write concise, technical responses with accurate Astro examples.
- Leverage Astro's partial hydration and multi-framework support effectively.
- Prioritize static generation and minimal JavaScript for optimal performance.
- Use descriptive variable names and follow Astro's naming conventions.
- Organize files using Astro's file-based routing system.

Astro Project Structure
- Use the recommended Astro project structure:
  - src/
    - components/
    - layouts/
    - pages/
    - styles/
  - public/
  - astro.config.mjs

Component Development
- Create .astro files for Astro components.
- Use framework-specific components (React, Vue, Svelte) when necessary.
- Implement proper component composition and reusability.
- Use Astro's component props for data passing.
- Leverage Astro's built-in components like <Markdown /> when appropriate.

Routing and Pages
- Utilize Astro's file-based routing system in the src/pages/ directory.
- Implement dynamic routes using [...slug].astro syntax.
- Use getStaticPaths() for generating static pages with dynamic routes.
- Implement proper 404 handling with a 404.astro page.

Content Management
- Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
- Leverage Astro's built-in support for frontmatter in Markdown files.
- Implement content collections for organized content management.
- When the site will have many similar pages (e.g. portfolio pieces, case studies, blog posts, tutorials), use Markdown files in a content collection with a single layout and dynamic route (e.g. [slug].astro) instead of separate .astro pages per item.
- When adding or planning new pages, consider: if this is one of many similar items, it should be a Markdown (or MDX) file and rendered via a template, not a one-off .astro page.

Styling
- Use Astro's scoped styling with <style> tags in .astro files.
- Leverage global styles when necessary, importing them in layouts.
- Utilize CSS preprocessing with Sass or Less if required.
- Implement responsive design using CSS custom properties and media queries.

Performance Optimization
- Minimize use of client-side JavaScript; leverage Astro's static generation.
- Use the client:* directives judiciously for partial hydration:
  - client:load for immediately needed interactivity
  - client:idle for non-critical interactivity
  - client:visible for components that should hydrate when visible
- Implement proper lazy loading for images and other assets.
- Utilize Astro's built-in asset optimization features.

Data Fetching
- Use Astro.props for passing data to components.
- Implement getStaticPaths() for fetching data at build time.
- Use Astro.glob() for working with local files efficiently.
- Implement proper error handling for data fetching operations.

SEO and Meta Tags
- Use Astro's <head> tag for adding meta information.
- Implement canonical URLs for proper SEO.
- Use the <SEO> component pattern for reusable SEO setups.

Integrations and Plugins
- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
- Implement proper configuration for integrations in astro.config.mjs.
- Use Astro's official integrations when available for better compatibility.

Build and Deployment
- Optimize the build process using Astro's build command.
- Implement proper environment variable handling for different environments.
- Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
- Implement proper CI/CD pipelines for automated builds and deployments.

Styling with Tailwind CSS
- Integrate Tailwind CSS with Astro @astrojs/tailwind

Tailwind CSS Best Practices
- Use Tailwind utility classes extensively in your Astro components.
- Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
- Utilize Tailwind's color palette and spacing scale for consistency.
- Implement custom theme extensions in tailwind.config.cjs when necessary.
- Never use the @apply directive

Testing
- Implement unit tests for utility functions and helpers.
- Use end-to-end testing tools like Cypress for testing the built site.
- Implement visual regression testing if applicable.

Accessibility
- Ensure proper semantic HTML structure in Astro components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.

Key Conventions
1. Follow Astro's Style Guide for consistent code formatting.
2. Use TypeScript for enhanced type safety and developer experience.
3. Implement proper error handling and logging.
4. Leverage Astro's RSS feed generation for content-heavy sites.
5. Use Astro's Image component for optimized image delivery.

Performance Metrics
- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
- Use Lighthouse and WebPageTest for performance auditing.
- Implement performance budgets and monitoring.

Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.

Note: The line alwaysApply: true at the top (between the --- lines) tells Cursor to use these rules whenever you’re in this project.

BlogLinkedInMedium