mirror of
https://github.com/vector-im/element-web.git
synced 2026-04-01 19:51:58 +02:00
6768b4e9de
- Remove VSCode walkthrough from storybook-launcher extension - Remove CLI fallback scripts (figma-file, figma-node, figma-components) and their pnpm aliases — MCP server handles all Figma access - Fix chat.mcp.autoStart: false → true in devcontainer.json so Figma MCP server starts automatically (was overridden by .vscode/settings.json) - Sync workbench.startupEditor to 'none' in devcontainer.json - Update designer agent to remove fallback section references - Update docs and setup guide story to clarify FIGMA_TOKEN must be set before creating the Codespace, with rebuild workaround if missed
69 lines
3.3 KiB
Markdown
69 lines
3.3 KiB
Markdown
# AI prototyping in Codespaces
|
|
|
|
This workflow gives designers a no-local-setup path for turning Figma designs into Storybook prototypes inside this repository. A custom **Designer agent** in Copilot Chat handles Figma URL parsing, connection validation, and story generation automatically.
|
|
|
|
## 1. Create a Figma API token
|
|
|
|
1. Open Figma and go to **Settings → Security → Personal access tokens**.
|
|
2. Generate a new token and copy it immediately (Figma only shows it once).
|
|
|
|
## 2. Add the Codespace secret (before creating the Codespace)
|
|
|
|
> **Important:** You must add this secret **before** creating the Codespace.
|
|
> The Figma MCP server reads `FIGMA_TOKEN` at startup. If the secret is
|
|
> missing when the Codespace is created, the server will start without a
|
|
> valid token and Figma tools will not work.
|
|
|
|
1. Go to [GitHub → Settings → Codespaces → Secrets](https://github.com/settings/codespaces).
|
|
2. Add a secret named `FIGMA_TOKEN` with the token you copied.
|
|
3. Under **Repository access**, allow the `element-hq/element-web` repository.
|
|
|
|
> **Already created a Codespace without the token?** You can add the secret
|
|
> and then rebuild the Codespace: open the Command Palette (⌘⇧P / Ctrl+Shift+P)
|
|
> and run **Codespaces: Rebuild Container**. This will restart the environment
|
|
> with the secret available.
|
|
|
|
## 3. Open the Codespace
|
|
|
|
1. Open this repository in GitHub Codespaces.
|
|
2. Wait for the dev container to finish installing dependencies with `pnpm`.
|
|
3. Storybook starts automatically in the existing shared-components package and forwards port `6007` for preview.
|
|
4. Element Web can also be started for in-app prototyping (see below).
|
|
5. The Figma MCP server starts automatically — no manual action required (as long as `FIGMA_TOKEN` was set before creating the Codespace).
|
|
|
|
## 4. Use the Designer agent
|
|
|
|
Open Copilot Chat (⌘⇧I on Mac · Ctrl+Shift+I on Windows/Linux) and select **@designer** from the agent picker. Paste any Figma URL and describe what you want:
|
|
|
|
```text
|
|
@designer Here's my design: https://www.figma.com/design/AbCdEfGhIjK/My-File?node-id=12-34
|
|
Please create a Storybook prototype of the main screen.
|
|
```
|
|
|
|
The agent will:
|
|
- Extract the file ID and node ID from the URL
|
|
- Validate the connection (and guide you through setup if the token isn't configured)
|
|
- Inspect the Figma file structure
|
|
- Generate a Storybook story using existing shared-components and Compound Web primitives
|
|
|
|
No need to run `pnpm figma:connect` manually — the agent handles validation itself.
|
|
|
|
## 5. See prototypes in Storybook
|
|
|
|
New or updated `*.stories.tsx` files under `packages/shared-components/src/prototypes/ai` appear automatically in Storybook under the `AI Prototypes` section.
|
|
|
|
## 6. Prototype inside Element Web
|
|
|
|
For designs that need to be seen in the context of the full app (navigation, theming, surrounding UI):
|
|
|
|
1. Ask `@designer` to prototype in Element Web (e.g., "prototype this in the app").
|
|
2. The agent will start Element Web if it isn't running yet (`pnpm run start:element-web`).
|
|
3. Element Web is forwarded on port `8080` — open it from the Ports tab.
|
|
4. The agent will modify components under `apps/web/src/components/` to match the Figma design.
|
|
|
|
## Reference
|
|
|
|
Use the guidance files in this directory to help Copilot stay aligned with the existing component system:
|
|
|
|
- `design-tokens.md`
|
|
- `storybook-guidelines.md` |