flydubai Squad Playbook

Build the flydubai design system in Figma with Claude Code and one shared repo.

1Why

  • Every agreed rule lives in the repo, so Claude applies it for everyone.
  • Each component keeps a build log, so anyone can pick up where the last session stopped.
  • Commands run the same build steps every time.

Commercial terms, client notes and fonts never go into Git.

2Set up

  1. Install Claude Code, GitHub Desktop, Chrome Beta and Node 18+. Install the Effra and Frutiger LT Arabic fonts (ask the design lead).

  2. In GitHub Desktop, clone bmaniya1/flydubai-design-squad to:

    ~/Desktop/flydubai-design-squad

  3. Run the setup script (safe to re-run):

    zsh ~/Desktop/flydubai-design-squad/bin/setup.sh

  4. Open Claude Code in that folder, type /plugin, pick figma and log in.

3Daily use

  1. Pull in GitHub Desktop, then start the hidden browser:

    ~/Desktop/flydubai-design-squad/scripts/fz-bg-start.sh

  2. Run a command (below). Approve the variant count when asked.

  3. Finish with /fd-learn, then push in GitHub Desktop.

4Commands

ToRun
Build a new component/fd-component <Name> <FD-ID> <Page>
Move an existing component onto the template/fd-conform <Name> <FD-ID> <Page>
Capture the live site/fd-visual-ref <Name> <FD-ID> <Page>
Save what you learned/fd-learn
Hand over the session/fd-wrap-session

Paste Figma links straight into the prompt. Claude reads the node from the link.

5Rules Claude follows

  • Live reference first; sign off the variant count before any Figma change.
  • Matrices come from the Component Grid Builder plugin.
  • Atoms are used as designed; sets are copied, never moved.
  • Spacing comes from the Foundations scale only.
  • No truncation unless asked; text wraps.
  • Header and widget stay placeholders until designed.
  • Write “flydubai” in lowercase.

Full rules: memory/fd-*.md · page format: component-doc-template.md · errors: 01-figma-plugin-api-gotchas.md

6Your own prompts and commands

A good prompt: what to do, the Figma link, and “ask me before changing anything”.

Check every hero at x-sm for text under the header. Report only; ask before changing anything.

To reuse it, say “turn this into an /fd- command”. Claude saves it to commands/ so the squad gets it.

7If it breaks

You seeDo
unloaded font "Effra"Start the hidden browser (Daily use, step 1)
Changes don't showAsk Claude to reload the Figma tab
NOT committed - private terms foundRemove the contract figure from the file
Push failsPush from GitHub Desktop