Web & Digital

Zinnie Pham Nilsson rebuilds her portfolio with Claude Code and Figma in days, not months

A UX designer replaces a two-month Framer rebuild with Claude Code connected to Figma, Notion references and a case-study skill, then ships on Vercel.

Done withClaude CodeFigmaNotionVercel

Personal portfolio (self-promo); Medium 403 to curl; day-by-day calendar not stated


WHAT THEY DID

Zinnie Pham Nilsson had previously spent about two months designing in Figma and rebuilding in Framer. After using Claude in an internship, she rebuilt the portfolio with Claude Code connected to Figma and Notion: research first, Claude redesigns in Figma after clarifying questions, she reviews, Claude builds the site, a portfolio-case-study-generator skill drafts case studies from her docs, then she hosts on Vercel via GitHub.

STEP BY STEP

  1. Research and direction in Notion; save inspiration screenshots.
  2. Ask Claude Code (connected to Figma) to redesign the portfolio and ask clarifying questions first.
  3. Review and adjust the Figma design; then ask Claude to build the site.
  4. Use portfolio-case-study-generator skill on project docs; edit drafts.
  5. Deploy via GitHub to Vercel.

HOW IT WENT

She reports the initial build took two days, plus a few more days of review and iteration, versus about two months for the Framer version. Live site zinnie.design returned HTTP 200 on 2026-11-07.

Reported results: Initial build ~two days plus a few days review, vs ~two months for prior Framer path; live at zinnie.design.

WORTH KNOWING

A dated Oct 30 first-person post with a clear prompt pattern (ask clarifying questions before creating), an open-source case-study skill, and an honest note that drafts still need human correction.

TRY IT

  • Collect references and direction notes before opening Claude.
  • Ask Claude to question your brief before it creates anything in Figma.
  • Treat AI case-study drafts as starting points and correct them so they sound like you.
Read the original ↗

Rates the entry, not the tool.

Source: Zinnie Pham Nilsson · MediumOpen as a page

  • Work done: Oct 2026
  • Source published: Oct 30, 2026
  • On 4TC: added Nov 7, 2026 · checked Nov 7, 2026
About this source

Type: First-person workflow · Firsthand report · Demonstrated workflow

  1. Rebuiding my Portfolio with Claude Code and Figma in 2 days
    Zinnie Pham Nilsson · Medium · Published Oct 30, 2026 (Byline 'Oct 30, 2026' on Medium (via WebFetch).) · Checked Nov 7, 2026
    Creator's own Medium post. Self-promotional portfolio link.
    Access: Medium 403 to box curl; full text retrieved via WebFetch on 2026-11-07
  2. Zinnie Pham Nilsson portfolio
    Zinnie Pham Nilsson · zinnie.design · Publication date not stated (Live site; undated.) · Checked Nov 7, 2026
    Live portfolio named in the post.
    Access: open

Source check: Researched from the public page; not yet re-checked by an editor. Nobody at 4TC has tested this.

Claims and where they come from

  • Zinnie Pham Nilsson writes that her earlier Figma-to-Framer portfolio path took about two months to finish and publish. (reported) [1]
  • She says she rebuilt and redesigned the portfolio with Claude Code; the initial build took two days, followed by a few more days of reviewing and iterating. (reported) [1]
  • She says that with Claude Code connected to Figma she asked Claude to redesign the portfolio using an inspiration folder and Notion notes, and to ask questions before creating anything. (reported) [1]
  • She says she used an open-source portfolio-case-study-generator skill so Claude could draft case studies from her project documentation, then she reviewed the drafts. (reported) [1]
  • She says she hosted the site on Vercel connected to GitHub. (reported) [1]
  • Live portfolio zinnie.design returned HTTP 200 on 2026-11-07. (observed in the source) [2]

4TC interpretation

Our reading, not something the source says.

A practical portfolio rebuild path for designers who already work in Figma and want Claude Code without abandoning design judgment.

Designer impact

Alleged [1]

She says AI case-study drafts must be reviewed so they accurately represent her contribution and sound like her.

  • Keep project docs as source of truth; edit AI drafts line by line.

Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.

Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.

Report an issue or correction

Share your own experience

4TC does not endorse a tool unless an explicit 4TC endorsement is shown.

Get the best of these weekly

The weekly design brief, starting soon: the most useful workflows, tool updates and developments, with sources. Sign up now and the first issue will come to you.