نموذج أولي بدون فيغما: ابنِ منتجك وعرضك التقديمي بكلودPrototype Without Figma: Build Your MVP and Pitch Deck with Claude

Key terms

Design system

A fixed set of visual decisions: colors, fonts, spacing and corner radius. You write it once and apply it to every screen.

Design tokens

The design system values written as CSS variables, like a primary color or a radius size. Change one and it updates everywhere it is used.

Tailwind CSS

A styling library where you write the look directly in the HTML with ready made class names. Claude generates it easily and developers read it instantly.

RTL

Right to left text direction. Arabic pages need it so alignment and element order flip correctly.

Developer handoff

The package you give a developer to build the real product: screens, design system file, landing page and pitch deck.

The steps

1. 1

   Step 1

   Set up your local workspace

   First you need a place to save what Claude generates and preview it in the browser right away. This structure keeps screens, the pitch deck and the landing page apart, which makes the developer handoff easy later.

   Run these commands in the terminal once at the start of each project:

   mkdir -p my-startup/{screens,pitch-deck,landing,assets/{icons,images,fonts}} cd my-startup npm install -g serve serve . -p 3000

   Then open http://localhost:3000 in your browser. Any file you save in the folder shows up there.

   Tip: Keep the server running in its own terminal window for the whole session.