From 09555f3470c7cb6479e110ba83d7828c0741e79e Mon Sep 17 00:00:00 2001 From: curo1305 Date: Fri, 17 Apr 2026 11:49:51 +0200 Subject: [PATCH] Connect ux-designer agent to Figma via curl; mark setup tasks done Co-Authored-By: Claude Sonnet 4.6 --- .claude/agents/ux-designer.md | 52 +++++++++++++---------------------- TODO.md | 9 +++--- 2 files changed, 23 insertions(+), 38 deletions(-) diff --git a/.claude/agents/ux-designer.md b/.claude/agents/ux-designer.md index f913990..27cc2b8 100644 --- a/.claude/agents/ux-designer.md +++ b/.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: " -- [ ] **3. Note your file and project IDs** - - Open the design file in Figma; the URL format is: - `https://www.figma.com/file//...` - - 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 with token: " +```bash +curl -s -H "X-Figma-Token: " "https://api.figma.com/v1/files/" +``` -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/` — read full file contents (pages, frames, components) -- `GET /files//components` — list published components -- `GET /files//styles` — list published styles (colours, text, effects) -- `GET /teams//projects` — list projects in a team -- `GET /projects//files` — list files in a project +Useful endpoints (base URL: `https://api.figma.com/v1`): +- `GET /me` — verify token, returns account info +- `GET /files/` — full file contents (pages, frames, components) +- `GET /files//components` — published components +- `GET /files//styles` — published styles (colours, text, effects) +- `GET /teams//projects` — projects in a team +- `GET /projects//files` — files in a project All requests require the header `X-Figma-Token: `. diff --git a/TODO.md b/TODO.md index 8ea2527..5f3e92f 100644 --- a/TODO.md +++ b/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//...`; 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 with token: "`) ## Auth / session security