Claude/setup figma mcp 1o3u k

.claude/commands/brand-image-prompt.md

@@ -0,0 +1,71 @@
+# /brand-image-prompt
+
+Generate a production-ready AI image prompt for a Telcoin Association tweet graphic.
+
+## Usage
+Provide the tweet text or topic. This skill will output a complete prompt formatted for Midjourney, Flux, or DALL-E 3, using the official brand guidelines.
+
+## What you must do
+
+1. Read `strategy/BRAND-GUIDE.md` before generating any prompt
+2. Read the tweet text provided (or use $ARGUMENTS as the tweet topic/text)
+3. Generate THREE prompt variants:
+   - **Variant A**: Dark background (primary) - TEL Black #090920 base with glowing blue elements
+   - **Variant B**: Abstract/conceptual - no text in image, pure visual metaphor for the tweet topic
+   - **Variant C**: Human-focused - if the topic involves real people, inclusion, or mobile users
+
+## Prompt structure (apply to all variants)
+
+Each prompt must include, in order:
+1. **Subject**: What the image depicts, tied to the tweet topic
+2. **Style**: "digital art, institutional brand photography, governance aesthetic"
+3. **Lighting**: "glowing electric blue light, deep shadows, high contrast"
+4. **Geometry**: "hexagonal geometric shapes, crystalline structure, layered glass panels"
+5. **Color palette** (mandatory, exact):
+   - Background: deep navy to near-black (#090920 TEL Black)
+   - Primary accent: Royal Blue (#3642B2)
+   - Highlight: Electric cyan-blue (#14C8FF)
+   - Text-safe areas: dark glass panels with subtle translucency
+6. **Composition**: "left-aligned layout, rule of thirds, negative space on right for text overlay"
+7. **Aspect ratio**: "--ar 16:9" for tweet header; "--ar 1:1" for tweet card insert
+8. **Quality**: "--v 6 --style raw --q 2" (Midjourney) or equivalent for other tools
+9. **Negative prompt** (Midjourney --no flag): "text, watermark, logo, cartoon, anime, neon, rainbow, busy background, cluttered, stock photo, cheesy corporate"
+
+## Brand rules for image content
+
+- No text rendered inside the AI-generated image (text is placed in post-production via Figma)
+- Never generate images that look promotional or consumer-brand (no smiling people holding phones in ads)
+- Human subjects: diverse, professional, real-world contexts (not staged stock photo looks)
+- Never use: explosions, confetti, rocket ships, moon imagery, upward arrows as visual metaphors
+- Safe metaphors for Telcoin: networks/nodes, mobile devices in real use, currency/transaction flows as light paths, governance/institution imagery (neutral meeting rooms, documents), telecom infrastructure (towers, fiber, data centers)
+
+## Output format
+
+Return:
+
+### Variant A — Dark/Glowing (PRIMARY)
+```
+[full prompt text]
+```
+**Tool**: Midjourney / Flux / DALL-E 3
+**Best for**: Tweet header image, thread opener
+
+### Variant B — Abstract/Conceptual
+```
+[full prompt text]
+```
+**Best for**: Mid-thread visual break, data point illustration
+
+### Variant C — Human-Focused (if applicable)
+```
+[full prompt text]
+```
+**Best for**: Financial inclusion narrative, user story tweets
+
+### Post-production notes
+- Import into Figma with brand template
+- Place New Hero Bold for headline text over dark glass panel area
+- Logo: top-left, horizontal version, 1 mark height from top
+- Color-correct to match exact hex values if AI output drifts
+
+$ARGUMENTS

.claude/commands/thread-visual-pack.md

@@ -0,0 +1,115 @@
+# /thread-visual-pack
+
+Generate a coordinated set of visual briefs for an entire tweet thread - header card, supporting inserts, and a visual system that reads as a coherent series.
+
+## Usage
+Provide the thread file path or paste the thread content via $ARGUMENTS. This skill produces a complete visual pack: one header card brief + briefs for 2-3 supporting insert cards + AI image prompts for each.
+
+## What you must do
+
+1. Read `strategy/BRAND-GUIDE.md` before generating anything
+2. Read the thread content from $ARGUMENTS (file path or pasted text)
+3. Analyze the thread structure:
+   - Identify the 1 opening tweet (always gets a header card)
+   - Identify 2-3 tweets that would benefit from a supporting visual (data points, architecture diagrams, key claims)
+   - Note the content tier (1/2/3/4) - this determines how much visual decoration is appropriate
+4. Define a **visual system** for the thread - a consistent look that ties all cards together
+5. Generate individual briefs for each card
+6. Generate AI image prompts for each card that requires a generated visual
+
+## Output format
+
+---
+
+## Thread Visual Pack
+
+**Thread**: [title or first tweet excerpt]
+**Content tier**: [1/2/3/4]
+**Total cards**: [N]
+**Visual theme**: [1-sentence description of the visual system]
+
+---
+
+### Visual System Definition
+
+The visual system ensures all cards in the thread look like a series.
+
+| Element | System-wide spec |
+|---|---|
+| Background | [consistent across all cards - e.g., TEL Black #090920] |
+| Accent color | [consistent highlight color - e.g., TEL Blue #14C8FF] |
+| Geometric motif | [consistent motif - e.g., hexagonal grid, 10% opacity] |
+| Typography | New Hero throughout; Bold for headlines, Regular for body |
+| Logo | Present on Card 1 (header) only; omit from insert cards |
+| Card numbering | [e.g., subtle "1/5", "2/5" in corner using TEL Gray #424761] |
+
+---
+
+### Card 1 — Header (Tweet 1)
+
+**Tweet**: [quoted text]
+**Purpose**: Set the visual identity of the thread; signal institutional quality
+
+**Canvas**: 1200 x 675px (16:9)
+**Background**: [spec]
+**Headline on card**: [max 8 words extracted from tweet]
+**Visual element**: [description]
+**AI image prompt**:
+```
+[full Midjourney/Flux prompt]
+```
+
+---
+
+### Card 2 — Insert (Tweet [N])
+
+**Tweet**: [quoted text]
+**Purpose**: [e.g., visualize the four miner groups / illustrate the fee formula / show the governance hierarchy]
+
+**Canvas**: 1080 x 1080px (1:1)
+**Background**: [spec - must match visual system]
+**Headline on card**: [if any]
+**Visual element**: [description - diagram, icon set, data visualization, abstract]
+**AI image prompt** (if needed):
+```
+[full prompt, or "N/A - use diagram template"]
+```
+**Diagram spec** (if applicable):
+> [Describe any structured diagram - e.g., "4-node diagram: Validators, Developers, Liquidity Miners, Stakers arranged in a square with connecting lines. Each node: hexagon shape, 60px, Royal Blue fill with TEL Blue border. Labels in New Hero Regular 18px TEL White."]
+
+---
+
+### Card 3 — Insert (Tweet [N])
+
+[same format as Card 2]
+
+---
+
+### Card 4 — Insert (Tweet [N]) [if applicable]
+
+[same format as Card 2]
+
+---
+
+### Production checklist
+
+- [ ] All cards use consistent background color/gradient
+- [ ] All cards use New Hero font
+- [ ] Logo only on Card 1
+- [ ] No text rendered inside AI-generated images (text placed in Figma post-production)
+- [ ] All hex values match brand palette exactly
+- [ ] No promotional language in any on-card copy
+- [ ] Cards pass the regulatory newsletter test (would this look appropriate in an institutional brief?)
+- [ ] Thread tier compliance: Tier 1 = minimal graphics, type-focused; Tier 2+ = richer visuals allowed
+
+### Figma workflow
+1. Start with brand template (dark background, logo top-left, hexagon motif layer)
+2. Generate AI visuals using prompts above
+3. Import AI visual as background layer; reduce opacity to 40-60% if too busy
+4. Add glass panel overlay (dark with 15% transparency) behind text areas
+5. Place copy in New Hero
+6. Export at 2x resolution (2400x1350px for headers, 2160x2160px for inserts)
+
+---
+
+$ARGUMENTS

.claude/commands/tweet-card-brief.md

@@ -0,0 +1,88 @@
+# /tweet-card-brief
+
+Generate a complete design brief for a single Telcoin Association tweet card graphic.
+
+## Usage
+Provide the tweet text (or topic + tier). This skill outputs a Figma-ready design brief that a designer (human or AI) can execute directly.
+
+## What you must do
+
+1. Read `strategy/BRAND-GUIDE.md` before generating the brief
+2. Read the tweet text provided via $ARGUMENTS
+3. Determine the content tier:
+   - **Tier 1** (Governance): Strictly institutional - no decorative elements, type-only or minimal graphic
+   - **Tier 2** (Education): Informative visual - diagram, architecture illustration, or abstract concept
+   - **Tier 3** (Milestone): Announcement visual - bold, controlled, proud but not flashy
+   - **Tier 4** (Community): Warmer but still institutional - human element allowed
+4. Output a complete design brief in the format below
+
+## Output format
+
+---
+
+## Tweet Card Design Brief
+
+**Tweet text**: [quoted text from input]
+**Content tier**: [1/2/3/4]
+**Card type**: [Header / Mid-thread insert / Standalone]
+**Dimensions**: 1200 x 675px (16:9 for header) OR 1080 x 1080px (1:1 for insert)
+
+---
+
+### Canvas
+
+| Element | Spec |
+|---|---|
+| Background | [color or gradient from brand palette] |
+| Background texture | [solid / subtle hex grid overlay at 8% opacity / none] |
+| Card style | [solid / glass panel / gradient overlay] |
+
+### Typography
+
+| Element | Font | Weight | Size | Color | Alignment |
+|---|---|---|---|---|---|
+| Headline | New Hero | Bold | 48-56px | TEL White #F1F4FF | Left-aligned |
+| Body (if any) | New Hero | Regular | 24-28px | TEL Blue Soft #C9CFED | Left-aligned |
+| Label/Tag | New Hero | Regular | 18px | TEL Blue #14C8FF | Left-aligned |
+
+### Copy to place on card
+> **Headline**: [extracted or condensed from tweet - max 8 words]
+> **Supporting text**: [optional - max 1 short sentence if needed]
+> **Label**: [optional - e.g., "Governance Update" / "Platform Architecture" / "TELx"]
+
+### Brand elements
+
+| Element | Placement | Spec |
+|---|---|---|
+| Horizontal logo | Top-left | 1 mark height from top; 1.5 mark widths from left |
+| Hexagon motif | Background right / corner | 20-30% opacity, Royal Blue #3642B2, no fill |
+| Accent line | Bottom or left edge | 2px, TEL Blue #14C8FF |
+
+### Visual element (if applicable)
+> [Describe what supporting visual goes here - e.g., "abstract hexagonal node network, glowing blue, top-right quadrant" OR "none - type-only card"]
+
+### Color usage
+
+| Area | Color | Hex |
+|---|---|---|
+| Canvas background | [name] | [hex] |
+| Primary text | TEL White | #F1F4FF |
+| Secondary text | TEL Blue Soft | #C9CFED |
+| Accent / highlight | TEL Blue | #14C8FF |
+| Geometric elements | Tel Royal Blue | #3642B2 |
+
+### Compliance checks
+- [ ] No hype language or promotional tone in copy
+- [ ] Logo present and correctly placed
+- [ ] Font is New Hero (or documented fallback)
+- [ ] Colors match brand palette
+- [ ] Tier 1: no emojis anywhere on card
+- [ ] No busy background that interferes with text legibility
+- [ ] Text passes contrast ratio (4.5:1 minimum)
+
+### Image prompt (if AI-generated visual needed)
+> Use `/brand-image-prompt [topic]` to generate the visual element separately, then composite in Figma.
+
+---
+
+$ARGUMENTS