Product DesignFigma Console MCPClaude CodeStorybook1 week

List Of People Looking For Work

I chose to build this website as a way to explore Claude Code, Storybook and Semantic token structures.

Check it out at listofpeoplelookingforwork.com

Browse the list page in light mode
Browse the list page in dark mode
LightDark
Drag to compare light and dark mode

Process

  • Initial wireframes and user flows
  • Claude Code for scoping out the technical needs of the project
  • Built a component library in Figma
  • Set up primitive variables and semantic tokens for dark mode
  • Figma to design high fidelity UI
  • Figma Console MCP + Claude Code to set up a Storybook with all components
  • Figma Console MCP + Claude Code to generate text styles based on designs and components
  • Figma to revise all designs for consistency using updated design system that now lives in Storybook
  • Claude Code to build out all required features and to guide me into setting up the website
  • QA tested all features
  • Final revisions done in Figma and updated once again with Figma Console MCP + Claude Code
Semantic token structure using primitive variables