richie/ADS3-Design-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate from Penpot to Figma and add NSW brand colour palette

Browse Source 
Replace self-hosted Penpot MCP references with the official Figma Remote
MCP server (OAuth, HTTP transport). Swap placeholder semantic colours in
tokens.css for the NSW Design System brand palette extracted from Figma
(blues, reds, oranges, greens, greys) and add typography size tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-05-21 10:05:25 +10:00
parent 592635e7ce
commit afba95fbaf
4 changed files with 74 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
CLAUDE.md
View File

@@ -15,7 +15,7 @@ Before beginning any significant piece of work, write a plan as a markdown file
Before choosing a library, pattern, or approach: identify your options, research the latest documentation (don't rely on training knowledge for version-specific details), verify it works within the project constraints, and state your reasoning — especially when you considered and rejected alternatives.
### Ask, Don't Assume
If you need information you don't have — about infrastructure, the team's workflow, the Penpot setup, design intent, or anything unclear — ask me. Do not fill gaps with assumptions. A question costs a moment; a wrong assumption costs hours.
If you need information you don't have — about infrastructure, the team's workflow, the Figma setup, design intent, or anything unclear — ask me. Do not fill gaps with assumptions. A question costs a moment; a wrong assumption costs hours.
### Architecture Governance
`ARCHITECTURE.md` is the living contract for this project. Before starting any task, re-read the relevant section. If you need to deviate, propose the change to me first, then update the document. If you discover something new, add it. Never let the codebase and architecture drift apart.
@@ -124,15 +124,17 @@ import { cn } from '@/lib/utils'
## MCP Integrations
- **Penpot MCP** — reads design specs from the self-hosted Penpot instance. Requires Penpot open in browser with the MCP plugin active, and `npx @penpot/mcp@stable` running locally.
- **Storybook MCP** — runs at `localhost:6006/mcp` alongside the Storybook dev server. Provides component docs, story generation, and a11y testing.
MCP servers are configured via `claude mcp add` (stored in `~/.claude.json`) or `.mcp.json` in the project root. **Do not** put `mcpServers` in `.claude/settings.json` or `.claude/settings.local.json` — Claude Code ignores MCP config in those files.
- **Figma MCP** — Official Figma Remote MCP server at `https://mcp.figma.com/mcp`. Uses HTTP transport with OAuth authentication. Add via: `claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp`, then authenticate when prompted. Project file: `https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights` (file key: `mrabO6AtxN3ektGiTk0I9c`).
- **Storybook MCP** — runs at `localhost:6006/mcp` alongside the Storybook dev server. Provides component docs, story generation, and a11y testing. Add via: `claude mcp add --transport http storybook http://localhost:6006/mcp`
### Design-to-Code Workflow
1. Use Penpot MCP `high_level_overview` to understand the design file
2. Use `execute_code` with `findShapes()` to inspect specific components
3. Extract CSS with `penpot.generateStyle()`
4. Build React component using design tokens from `src/tokens/tokens.css`
5. Verify in Storybook that the component matches the Penpot design
1. Use Figma MCP `get_design_context` to inspect a selected component or frame
2. Use `get_variable_defs` to extract design variables (colours, typography, spacing)
3. Map variables to design tokens in `src/tokens/tokens.css`
4. Build React component using design tokens
5. Verify in Storybook that the component matches the Figma design
---