Coded my portfolio with AI assistance

A step-by-step look at how I built this portfolio — starting with a Figma UI kit and design tokens, then translating the system into HTML and CSS with AI assistance in Cursor.

Octavia Sirbu May 20, 2026

I wanted a portfolio that could carry long case studies, real project imagery, and a consistent visual identity without locking myself into a generic template. The build followed a clear process: define the system in Figma first, Make sketches in Excalidraw of the pages' structure, then implement pages in code, with Cursor helping on repetitive implementation work along the way.

Below is how that process unfolded, from tokens to shipped pages.

The process

Each step built on the previous one. I created a quick UI Kit in Figma for reference and that I fed to the AI when I started building. This way the AI knew the design system and could help me with the implementation.; AI sped up markup and CSS once the design tokens and structure (sketches) were already defined.

Step 1 — Design tokens

Before writing any code, I created a UI kit in Figma grounded in design tokens. This became the single source of truth for how the portfolio should look in both light and dark mode.

The kit included:

• Colors — backgrounds, surfaces, text, muted text, accents, and borders for light and dark themes
• Typography — font families, sizes and weights, body copy, and UI labels
• Icons — navigation, theme toggle, footer, and section accents used consistently across pages
• Buttons — primary actions, text links, and theme toggle states
• Corner radius — shared radiuses for cards, images, avatars, and inputs so nothing felt one-off
• Spacing & elevation — padding scales and subtle shadows for cards and header

Treating the portfolio like a small product design system meant every later page — home, work, blog, contact, and case studies could reuse the same building blocks instead of reinventing styles screen by screen.

Step 2 — Layouts & structure in Excalidraw

With tokens in place, I designed key templates: hero, project cards, blog cards, testimonials, navigation, and footer. Case-study layouts were sketched with repeatable sections (overview, role, media galleries, outcomes, testimonial, related projects).

Before the building phase, I used Excalidraw to quickly sketch the page structure, then fed those sketches to AI. This helped avoid a generic AI-generated layout and made it much easier to steer the design toward the exact section order and hierarchy I wanted.

The goal was not pixel-perfect mock ups for every screen, but enough structure that implementation in code had a clear target.

Step 3 — Tokens in CSS

I translated the Figma token set into CSS custom properties in styles.css — one palette for light mode and a matching set for data-theme="dark" on the html element.

Examples mapped from Figma to code:

• --bg and --surface for page and card backgrounds
• --accent and --accent-secondary for links and highlights
• --text and --muted for hierarchy
• Shared border radiuses and spacing through component classes (cards, thumbs, quotes)

Keeping naming aligned between Figma and CSS made handoff — including AI-assisted edits — much faster: “use the muted surface token” was unambiguous.

Step 4 — AI assistance in Cursor

I used my previosu expereince with coding to built the site as static website: home, work, blog, contact, and individual project pages with long-form content, GIFs, and testimonials. Each case study follows the same skeleton but keeps project-specific copy and imagery (Nabogo, Rotoy, SDU, makerspace, and more). Shared header, footer, and section patterns were copied from a reference page so new files stayed consistent with the UI kit.

Cursor acted as a pair programmer for implementation, not as a replacement for design direction or structure of code. Typical tasks I delegated:

• Scaffolding new project or blog pages from an existing template
• Responsive CSS (mobile nav, footer order, stacked “My role” media)
• Refactoring repeated blocks across many HTML files
• Fixing asset paths, semantic markup, and lazy-loading attributes

I still owned project selection, narratives, image choices, quotes, and visual QA in the browser for both themes.

Step 5 — QA testing & launch

The last pass focused on real-device checks, light/dark consistency, performance (lean CSS, lazy images), and tying the blog back to the live portfolio with a project card at the end of each post.

Small JavaScript additions: theme toggle, testimonials carousel, “view more projects” scroll — supported the experience without turning the site into a heavy app.

Final thoughts

Starting with design tokens in Figma kept the portfolio coherent. AI in Cursor shortened the gap between that system and working pages. The combination fits how I work on product teams: systems first, clear documentation, then fast iteration toward something shippable.

If you are a designer exploring the same path, you do not need to abandon Figma, you just need a token-backed kit, a simple static stack, and enough code literacy to create a basic structure and review what the tools generate.

Explore the portfolio

The live site brings together home, work, blog, and contact — with case studies for Nabogo, Rotoy, SDU, makerspace, and more. Browse the projects and testimonials to see the full picture of how I work.