Connect ux-designer agent to Figma via curl; mark setup tasks done

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/agents/ux-designer.md

@@ -6,35 +6,22 @@ tools:
   - Read
   - Grep
   - Glob
+  - Bash
   - WebFetch
   - WebSearch
 ---
 
 You are a senior UX/UI designer advising on this specific project. Your role is purely advisory — you analyse user flows, critique layouts, and produce design recommendations, but you do not write or modify source code files directly.
 
-## ⚠ Next session checklist — Figma not yet connected
+## Figma connection — active
 
-The design tooling has been decided but not yet configured. At the start of
-any session involving UX/UI work, check this list and remind the user of
-outstanding steps before doing anything else:
+File key: `kcmvLytS31lSjP44YpBUSn`
 
-- [ ] **1. Create a Figma account and project**
-  - Sign up or log in at https://figma.com
-  - Create a new project called `destroying_sap` (or the customer's brand name)
-  - Create a file for the app design inside the project
+The user provides a fresh personal access token at the start of each session:
 
-- [ ] **2. Generate a Figma personal access token**
-  - Figma → Account Settings (top-left avatar menu) → Personal access tokens
-  - Click "Generate new token", give it a description (e.g. `claude-ux-agent`)
-  - Copy the token — you will paste it into the agent prompt when invoking
-    this agent for design work
+> "Use Figma file kcmvLytS31lSjP44YpBUSn with token: <your-token>"
 
-- [ ] **3. Note your file and project IDs**
-  - Open the design file in Figma; the URL format is:
-    `https://www.figma.com/file/<FILE_KEY>/...`
-  - The `FILE_KEY` is what the agent uses to read/inspect the file
-
-- [ ] **4. Decide on a UI component library**
+- [ ] **Decide on a UI component library**
   - Pending decision: Tailwind + shadcn/ui, MUI, or plain CSS
   - This decision affects both the Figma design system (tokens, components)
     and the frontend implementation
@@ -44,23 +31,22 @@ outstanding steps before doing anything else:
 
 ---
 
-## Using Figma once set up
+## Calling the Figma API
 
-Provide the agent with your personal access token and file key at the start of
-the session:
+Use `Bash` with `curl` for all Figma API calls — `WebFetch` does not support
+custom headers and will get a 403.
 
-> "Use Figma file <FILE_KEY> with token: <your-token>"
+```bash
+curl -s -H "X-Figma-Token: <token>" "https://api.figma.com/v1/files/<file_key>"
+```
 
-The agent will then use `WebFetch` to call the Figma REST API directly —
-no MCP server or plugin required.
-
-Useful API endpoints (base URL: `https://api.figma.com/v1`):
-- `GET  /me` — verify token works, returns your account info
-- `GET  /files/<file_key>` — read full file contents (pages, frames, components)
-- `GET  /files/<file_key>/components` — list published components
-- `GET  /files/<file_key>/styles` — list published styles (colours, text, effects)
-- `GET  /teams/<team_id>/projects` — list projects in a team
-- `GET  /projects/<project_id>/files` — list files in a project
+Useful endpoints (base URL: `https://api.figma.com/v1`):
+- `GET  /me` — verify token, returns account info
+- `GET  /files/<file_key>` — full file contents (pages, frames, components)
+- `GET  /files/<file_key>/components` — published components
+- `GET  /files/<file_key>/styles` — published styles (colours, text, effects)
+- `GET  /teams/<team_id>/projects` — projects in a team
+- `GET  /projects/<project_id>/files` — files in a project
 
 All requests require the header `X-Figma-Token: <your-token>`.
 

TODO.md

@@ -2,12 +2,11 @@
 
 ## UX/UI — Figma setup
 
-- [ ] **Create a Figma account** — sign up at https://figma.com (free tier is sufficient to start)
-- [ ] **Create Figma project and file** — create project `destroying_sap` and an initial design file inside it
-- [ ] **Generate Figma personal access token** — Account Settings → Personal access tokens → Generate new token; used by the `ux-designer` agent via WebFetch REST API calls
-- [ ] **Note your file key** — open the design file; the URL is `https://www.figma.com/file/<FILE_KEY>/...`; record the key
+- [x] **Create a Figma account** — signed up at https://figma.com
+- [x] **Create Figma project and file** — file key `kcmvLytS31lSjP44YpBUSn` confirmed active
+- [x] **Generate Figma personal access token** — generated and verified (HTTP 200); provide a fresh token at each session start
+- [x] **Connect ux-designer agent** — agent updated to use `Bash`/`curl` with `X-Figma-Token` header; connection confirmed working
 - [ ] **Decide on UI component library** — shadcn/ui (recommended: Tailwind-based, unstyled accessible primitives, white-label friendly) vs MUI vs other; decision affects both Figma design system and frontend implementation
-- [ ] **Connect ux-designer agent** — provide file key + token to agent at session start (`"Use Figma file <KEY> with token: <token>"`)
 
 ## Auth / session security