Set up a production-ready design workflow

This is the single operational guide we use to kick off a new product's design system. Follow it top to bottom, keep the page open while you set up, and don't add ceremony that isn't here. The goal is a clean Figma file, an AI-ready handoff page, and prompts you can paste without thinking.

§A. Designer tool setup

1. Antigravity workspace

Antigravity is the AI-assisted design workflow we run prompts and workspace context through. Install it, sign in, and confirm the workspace loads before doing anything else.

• ●Download from antigravity.com and install.
• ●Launch and sign in if prompted.
• ●Confirm the workspace opens cleanly.

2. Figma

Figma holds the design files, components, prototypes, and the handoff page. Get an account, install the desktop app, and create one new project file you'll point everything else at.

• ●Sign up at figma.com.
• ●Install the desktop app from figma.com/downloads.
• ●Create a new project file and confirm you can edit and share it.

3. MCP / GitHub Copilot configuration

MCP and Copilot are what give the AI tools real workspace context. Install the GitHub Copilot extension inside Antigravity, sign in, and enable workspace indexing.

1. 01Open Antigravity and click the Extensions icon.
2. 02Search for GitHub Copilot and install it.
3. 03Sign in with your GitHub account when prompted.
4. 04In the Copilot/MCP settings, enable workspace context, markdown support, and file indexing.
5. 05If Antigravity supports it, open Settings → Copilot → MCP and confirm the repo folder is indexed.
6. 06Restart Antigravity if anything looks off.

4. What is not required here

These belong to the developer guide, not this one — adding them creates noise that slows the designer flow:

• ●Detailed Git installation and identity setup.
• ●Node.js and package manager setup.
• ●Remote repo init and push commands.
• ●Full backend/frontend scaffolding.
• ●Anything code-environment-only.

§B. Figma setup & organization

1. Create the file

1. 01Open figma.com.
2. 02Create a new team or pick an existing one.
3. 03Click New File.
4. 04Name the file after your product.

2. Page structure

Use this exact structure for every product. Numbered prefixes keep the sidebar ordered.

Figma Workspace
│
├── 01 Foundations
├── 02 Typography
├── 03 Colors
├── 04 Components
├── 05 Wireframes
├── 06 Screens
├── 07 Prototypes
├── 08 Assets
└── 09 Developer Handoff

3. What lives on each page

• ●Foundations — brand, mission, product principles.
• ●Typography — font styles and heading scales.
• ●Colors — palette, states, alerts.
• ●Components — atoms, molecules, layouts.
• ●Wireframes — layout concepts and page structure.
• ●Screens — final screens and flows.
• ●Prototypes — interactive sequences.
• ●Assets — exported icons and images.
• ●Developer Handoff — design specs for engineering.

4. Naming conventions

• ●Frames: Section / Page / Purpose
• ●Components: Component / State / Size
• ●Variants: Button / Primary / Default
• ●Pages: 01 Foundations, 02 Typography, ...

5. Component organisation

Group your components by purpose, and use explicit variant axes so the same component reads the same in Figma and code.

• ●Groups: buttons · form fields · cards · navigation · modals · tables · notifications · avatars.
• ●Variants: Button / Primary / Default, Button / Primary / Hover, Input / Default / Focus, Badge / Success / Filled.

6. Export rules

1. 01Use Dev Mode for handoff.
2. 02Export icons as SVG.
3. 03Export images as PNG or WEBP.
4. 04Use lower-kebab-case asset names.
5. 05Only use @2x for high-DPI raster assets.

7. Developer handoff page

• ●Design tokens
• ●Color palette
• ●Typography
• ●Spacing scale
• ●Component specs
• ●Grid and layout

§C. Figma + Antigravity workflow

1. Set up an AI-ready page

• ●Create a Figma page called AI-ready (or reuse Developer Handoff).
• ●Place only the current screen or component you want to convert.
• ●Use clear frame names: Dashboard / Overview, Inventory / Item Card.
• ●Add text notes for tokens, spacing, typography, and component names.
• ●Limit each prompt target to one screen or one reusable component.

2. Connect Figma to Antigravity

• ●Use Figma MCP or the Antigravity integration to select the frame.
• ●Share the frame with the AI tool before asking the prompt.
• ●If a screenshot is easier, export only the target frame.
• ●Never send a full page with unrelated content.

3. Practical prompt rules

• ●Always name the stack — React, Tailwind, the component names.
• ●Always name the source — screenshot, Figma frame, or React component code.
• ●Always ask for exact values — colors, spacing, typography, interactive behaviours.
• ●Keep prompts short, direct, and outcome-focused.

4. Review and refine

• ●Inspect the AI output for token consistency and responsive layout.
• ●Update Figma annotations to match the final code decisions.
• ●Save the prompt output in docs/ or on the Figma handoff page.
• ●Confirm the final component uses the design system naming from @components/ui/Button and other shared primitives.

§Prompts you'll actually use

Paste these directly into Antigravity or Claude. They're written to assume the AI-ready page setup above.