How I Redesigned My Portfolio Using Google Stitch, GitHub Copilot Skills, and a Custom Design System

Redesigning a portfolio is one of those projects that always ends up more complex than expected. You start with "I'll just update the colors" and end up deep in a rabbit hole of design tokens, component architecture, and AI-assisted prototyping. That is exactly what happened here and I want to document the full workflow, because I think it represents a genuinely new way of building for the web.

The Starting Point: A Design Mandate

Before touching any tool, I committed the design direction to a file: DESIGN.md. This wasn't a loose mood board or a vague brief. It was a structured specification covering:

• Creative North Star: "The Neon Brutalist" a high-contrast collision of structural Neo-Brutalism and developer aesthetics.
• Color Palette: A deep black (#0e0e0e) base with Electric Blue (#2B59FF) as primary and Neon Gold (#d3f000) as the signature accent.
• Typography Rules: Space Grotesk for display and headlines, Manrope for body copy both chosen for their technical character.
• Elevation System: "Mechanical Stacking" with solid primary_dim offset shadows instead of soft blurs.
• Component Specs: Thick 2–4px brutalist borders on cards, ghost-style secondary buttons with Neon Gold strokes, glassmorphism on the navigation bar.

Having this document meant every tool in my stack Stitch, GitHub Copilot had a shared source of truth to draw from. If I had to pick one thing that made this redesign coherent, it was that file.

---

Step 1: Generating Screens with Google Stitch

Google Stitch is Google's AI-powered UI design tool. It is completely standalone not a Figma plugin. You describe a screen in natural language, and Stitch generates a fully composed, responsive HTML and Tailwind CSS layout powered by Gemini. The result is a real, runnable HTML file not a static mockup, not a Figma frame.

Stitch also exposes an MCP (Model Context Protocol) server, which means it integrates directly into VS Code and GitHub Copilot's agent workflow. You can create projects, generate screens, apply design systems, and iterate on variants all from inside the editor.

Setting Up the Stitch MCP

Configuration in VS Code's mcp.json was straightforward:

{
  "servers": {
    "stitch": {
      "url": "https://stitch.withgoogle.com/mcp",
      "type": "http"
    }
  }
}

How I Used It

For each major page of the portfolio, I wrote a prompt grounded in the DESIGN.md spec:

"Generate a portfolio hero section. Dark background #0e0e0e, oversized Space Grotesk headline with tight letter-spacing (-0.04em), Electric Blue (#2B59FF) primary button with a 4px offset Neon Gold shadow on hover, asymmetric layout with the text block left-aligned and a code snippet floating right. Brutalist card below the fold with a thick 2px outline border and no rounded corners."

I specifically mention which screens I want and Stitch produced initial layouts for all eight core screens:

1. Portfolio Hero - the main landing page with hero, services, and featured work
2. Experience - timeline-style career history
3. Blog Post - long-form reading view with code syntax highlighting
4. Blog Listing - filterable card grid
5. Projects Gallery - masonry-style showcase
6. About / Contact - combined page with a contact form
7. Project Detail - case study deep-dive
8. 404 Not Found - an on-brand error page

I saved each generated screen to stitch-screens/code/ as a self-contained HTML file using Tailwind CDN, Space Grotesk, and Manrope exactly the fonts from the spec. These files became the implementation blueprints when building the Next.js components.

Where Human Judgment Matters

Stitch's outputs were starting points, not final designs. The Neon Gold accent was frequently over-applied appearing on too many elements and losing its "use sparingly" punch. The DESIGN.md instruction "use sparingly but boldly" doesn't yet translate directly into a generative constraint. I had to manually audit each screen and strip back the accent usage before moving to the implementation phase.

---

Step 2: From HTML Blueprints to Next.js Components

With the Stitch HTML files as reference, GitHub Copilot handled the conversion to production Next.js components. The Stitch output gave Copilot something concrete: actual markup, class names, color values, and spacing to work from rather than a vague description.

The typical prompt looked like this:

Here is the Stitch-generated HTML for the experience page (stitch-screens/code/2-experience.html).

Convert this to a Next.js TypeScript component that:
- Preserves the layout and Tailwind classes exactly
- Uses Space Grotesk for headlines and Manrope for body text
- Follows the brutalist card style from DESIGN.md
- Is fully responsive and uses the Next.js Image component where appropriate

Copilot read the HTML file, cross-referenced DESIGN.md, and produced idiomatic TypeScript components that fit into the existing codebase.

---

Step 3: Agent Skills for Consistency

Throughout the implementation, I used four GitHub Copilot agent skills to enforce quality at each generation pass:

• frontend-design (from anthropics/claude-code): Enforced accessibility standards, semantic HTML structure, and responsive layout patterns. Particularly useful for the Blog Post view where typography rhythm and line-height mattered most.
• web-design-guidelines (from vercel-labs/agent-skills): Kept component APIs idiomatic for Next.js ensuring Image optimisation, Link usage, and layout composition followed Vercel's conventions.
• vercel-react-best-practices: Caught performance anti-patterns early unnecessary client components, missing loading states, and images without explicit width/height.
• animate (from pbakaus/impeccable): Handled the AnimateOnScroll component. The brutalist design has intentional friction, but controlled entrance animations on cards and section headers add polish without undermining the raw energy.

Having these skills active meant I was not writing review prompts from scratch for every component. The agent enforced the standards automatically.

---

Step 4: DESIGN.md as the Integration Layer

The most underrated part of this workflow was treating DESIGN.md as a living contract between the design phase (Stitch) and the development phase (Copilot).

Every Stitch prompt referenced it. Every Copilot generation pass included it as context. When Stitch produced a screen and Copilot converted it to a component, DESIGN.md was the shared vocabulary that kept both aligned without re-explaining the vision each time.

---

The Stack

Layer	Tool
Screen design & generation	Google Stitch (Gemini-powered)
Design source of truth	DESIGN.md
Stitch integration	Stitch MCP server
Code generation & review	GitHub Copilot
Agent skills	frontend-design, web-design-guidelines, vercel-react-best-practices, animate
Framework	Next.js 15 (App Router)
Styling	Tailwind CSS
Typography	Space Grotesk + Manrope (Google Fonts)
Deployment	Vercel

---

What I Would Do Differently

Apply the design system earlier via MCP. Stitch's apply_design_system command lets you define tokens once and push them across all screens. I set this up mid-project doing it from the start would have kept the color token set consistent across all eight screens from the first generation.

Version the DESIGN.md. The spec evolved during the project the glassmorphism nav rule was added mid-way, and early components don't reflect it. A simple changelog section in the file would make it easier to audit which screens were generated before or after each spec change.

Use generate_variants more aggressively. I used it mainly for the hero. In hindsight, running three variants on the projects gallery and the contact form section would have surfaced better layout options faster than tweaking prompts iteratively.

---

Closing Thoughts

What this project demonstrated is that the design-to-code pipeline is genuinely closing. Stitch gets you from a text brief to a fully themed HTML prototype. The Stitch MCP connects that prototype directly into your editor. Agent skills enforce quality through the entire build. And a well-written design spec holds the whole system together.

The "Neon Brutalist" portfolio is live. Every card has its thick borders, every CTA has its offset gold shadow, and the Neon Gold shows up exactly where it should sparingly but boldly.

The workflow that produced it is one I'd use on any serious project going forward.