Brand synthesis từ zero — firecrawl + Claude chat workflow

Workflow brand synthesis — 4 bước

Mỗi bước có nguyên tắc riêng. Hiểu nguyên tắc = output tốt. Skip nguyên tắc = brand nhạt.

① Chọn 2 brand reference

Quy tắc vàng: chọn 2 brand bạn admire mà có vibe đối lập nhau ít nhiều. Tại sao?

Ví dụ Vaibhav:

Combo khác đáng thử:

② Firecrawl — scrape branding thành JSON

Firecrawl.dev là tool free để scrape any website thành structured data. Bạn paste URL, chọn extract field, nó tự crawl + parse + return JSON.

Setup (1 lần đầu):

Workflow scrape 1 brand:

Lặp với brand 2.

③ Claude chat — synthesize brand language

Bây giờ bạn có 2 JSON. Mở Claude chat thường (chưa phải Claude Design). Paste cả 2 JSON kèm prompt synthesis.

Prompt template synthesis:

• 2 brand giống nhau → synthesis ra brand giống cả 2 = nhạt, không unique
• 2 brand đối lập → synthesis tạo vibe hybrid mới mà không brand nào sở hữu
• 2 brand cùng ngành OK, nhưng càng đối lập về aesthetic càng tốt
• Vào firecrawl.dev
• Sign up (free tier — đủ cho synthesis use case)
• Đến Playground
• Paste URL (ví dụ: apple.com/watch)
• Chọn feature: "Extract branding" (firecrawl preset cho task này)
• Hit Run
• Đợi ~30-60 giây
• Output JSON gồm: colors (primary, secondary, neutrals + hex), fonts (display, body), design language (typography hierarchy, spacing scale, button style, gradient usage)
• Copy JSON

┌──────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│              │    │              │    │              │    │              │
│ ① CHỌN 2     │───▶│ ② FIRECRAWL  │───▶│ ③ CLAUDE     │───▶│ ④ CLAUDE     │
│   BRAND       │    │   SCRAPE     │    │   CHAT       │    │   DESIGN     │
│              │    │              │    │              │    │              │
│ Reference    │    │ Output: 2    │    │ Synthesize   │    │ Create design│
│ bạn admire   │    │ JSON brand   │    │ new brand    │    │ system với   │
│              │    │ language     │    │ language     │    │ output       │
└──────────────┘    └──────────────┘    └──────────────┘    └──────────────┘
   2-5 phút            5-10 phút           10-15 phút          5-15 phút

Brand 1: Apple Watch
  ↳ Premium minimalism, monochrome
  ↳ "Luxury healthtech"

Brand 2: Ultrahuman
  ↳ Energetic, vibrant gradient
  ↳ "Performance health"

Synthesis: Premium + Energetic = "Premium tech with energy"
   ↳ Vajra Pro — Indian health watch

③ Claude chat — synthesize brand language

Send. Claude chat (không phải Claude Design ở bước này) sẽ output brand language hoàn chỉnh — thường ~600-1000 từ.

Đọc kỹ output:

Nếu thiếu cái nào, follow-up: "Mở rộng phần [X] với [detail cụ thể]". Mỗi follow-up rẻ hơn re-synthesis.

④ Đẩy vào Claude Design

Có brand language → mở Claude Design → New project → Create design system:

Claude Design audit brand language trong 5-15 phút:

Sau audit, dashboard hiện ra section-by-section. Approve ("Looks good") hoặc reject ("Needs work" + feedback). Chi tiết flow này sẽ ở Bài 6 — Design system.

Phần ④ tốn token nặng nhất (5-15 phút generate + bạn sẽ comment 2-3 round). Bù lại: một lần publish rồi mọi prototype kế thừa — khoản đầu tư trả về nhanh.

• Color palette có exact hex codes không?
• Typography có tên font cụ thể (Inter, IBM Plex, etc.)?
• Voice & tone có example concrete không?
• Company name: đặt tên brand (ví dụ: "VajraPro" / "Saigon Health")
• Blurb section: paste toàn bộ brand language từ ③ (clean format trước, bỏ markdown formatting nếu cần)
• (Optional) Upload Figma file của reference brand nếu có → sẽ chi tiết ở Bài 6
• (Optional) Upload font files của fonts trong brand language
• Hit Generate
• Build color system (light + dark mode)
• Build typography scale
• Generate component variants (button, card, input, ...)
• Write README cho brand

Tôi đang xây brand cho [domain — ví dụ: "health monitoring watches"],
target [audience cụ thể — ví dụ: "thị trường Việt Nam, professionals
30-45, premium-conscious"].

Tôi đã chọn 2 brand reference mà tôi admire:
1. [Brand 1] — JSON dưới đây
2. [Brand 2] — JSON dưới đây

[Paste JSON 1]

[Paste JSON 2]

Tạo và synthesize một brand language mới — không phải copy 1 trong 2,
mà là **amalgamation** của cả 2, được tailor cho audience của tôi.

Output cần có:

1. **Core brand positioning** (1 paragraph — chúng ta là ai, vì sao tồn tại)
2. **Design philosophy** (3-5 bullet — nguyên tắc thiết kế)
3. **Color palette** (primary, secondary, accent, neutral, hex codes
   chính xác)
4. **Typography strategy** (display font, body font, hierarchy với
   font-size scale)
5. **Voice & tone** (3-5 adjective + ví dụ "we say / we don't say")
6. **Logo direction** (concept gợi ý, không cần final mark)

So sánh — Synthesis vs Upload Figma có sẵn

Có 2 đường vào Claude Design design system:

Bài này tập trung Synthesis. Bài 6 tập trung Upload Figma.

Ví dụ thực chiến: Saigon Health — health-tech brand cho thị trường Việt

Tình huống

Bạn là founder ý tưởng "Saigon Health" — health tracking watch cho người Việt thành thị 30-45 tuổi. Pitch VC tuần sau. Cần brand identity.

Bước 1: Chọn 2 brand reference

Sau 10 phút brainstorm, bạn chọn:

Combo "Apple + Whoop" → synthesis vibe: "Premium health performance with calm urgency" — vừa luxury vừa motivational.

Bước 2: Firecrawl scrape

Vào firecrawl.dev → Playground.

Run 1: URL apple.com/watch → "Extract branding" → Run.

Output JSON (rút gọn):

Run 2: URL whoop.com → "Extract branding" → Run.

Output JSON:

• Apple Watch — premium, clean, monochrome
• Whoop — performance health, dark UI, energetic data viz

{
  "colors": {
    "primary": "#000000",
    "secondary": "#FFFFFF",
    "accent": "#34C759",
    "neutrals": ["#1C1C1E", "#8E8E93", "#F2F2F7"]
  },
  "fonts": {
    "display": "SF Pro Display",
    "body": "SF Pro Text"
  },
  "design_language": {
    "spacing_scale": [4, 8, 12, 16, 24, 32, 48],
    "border_radius": [4, 8, 16, 999],
    "button_style": "filled rounded",
    "gradient": "subtle vertical"
  }
}

Bước 2: Firecrawl scrape

Bạn copy 2 JSON.

Bước 3: Claude chat synthesis

Mở Claude chat (không phải Claude Design). Paste prompt synthesis:

Claude trả lời ~10 phút later. Output rút gọn:

Bước 4: Push vào Claude Design

Mở Claude Design → New project → đặt tên "Saigon Health" → Create design system → paste toàn bộ output Claude chat vào blurb section.

Generate. Đợi 12 phút.

Dashboard hiện ra:

Bạn approve color, comment "fix typography hierarchy back to brand spec" và "add 4-step spacing for tight layouts". 1 round comment xong, Publish design system.

Kết quả

Bây giờ mỗi prototype mới trong project "Saigon Health" sẽ tự inherit color, typography, spacing — output consistent across pitch deck, landing page, app screens.

• ✅ Color palette đúng (Saigon sunset orange + mint xuất hiện)
• ⚠️ Typography: DM Sans OK, body Inter OK, nhưng hierarchy size hơi off (H1 generate 56, không phải 48)
• ✅ Component variants: button (filled, outline), card, input, switch — consistent
• ⚠️ Spacing scale chưa cover hết 4-32, generate 8-64
• Total time: 38 phút (chậm hơn 30 phút target vì là lần đầu)
• Token tốn: ~12% Pro plan (synthesis chat ~3% + design system audit ~9%)
• Output: Brand language hoàn chỉnh + design system publishable trong Claude Design
• Lần 2 trở đi: ~15-20 phút (đã quen flow)

{
  "colors": {
    "primary": "#000000",
    "secondary": "#FFC107",
    "accent": "#FF3B30",
    "neutrals": ["#1A1A1A", "#666666", "#E5E5E5"]
  },
  "fonts": {
    "display": "DM Sans",
    "body": "Inter"
  },
  "design_language": {
    "spacing_scale": [8, 16, 24, 32, 48, 64],
    "border_radius": [4, 8],
    "button_style": "outline + filled mix",
    "gradient": "data viz heavy"
  }
}

Ví dụ theo ngành / Case studies

🚀 Founder solo — pitch VC

Pain: Cần brand identity để pitch VC. Hire designer = 30 triệu + 3 tuần. Pitch không kịp timeline.

Workflow synthesis:

Kết quả: Pitch theo timeline VC, brand consistent. 2 trong 5 founder dùng workflow này được VC compliment "brand looks remarkably tight for a pre-seed".

🎨 Agency creative director — concept exploration

Pain: Khách brief mơ hồ "muốn brand modern và trendy". Mình không biết hướng nào trade-off thế nào. Investing time Figma cho 1 hướng → khách reject → restart.

Workflow synthesis:

Kết quả: Reduce "free design exploration" từ ngày → 90 phút. Khách happy vì có hướng rõ trade-off.

📚 Course creator — sales page

Pain: Build course online, cần landing page sales. Không hire designer (budget 0). Tự dùng Canva → trông cheesy.

Workflow synthesis:

Kết quả: Sales page premium-looking, conversion rate +35% vs Canva version. Cost: $20.

👔 Brand designer freelance — explore client direction

Pain: Client brief "Linear-style" — nhưng ngành client là florist, không phải tech. Mismatch. Mình cần explore "Linear vibe nhưng warm cho florist" thế nào.

Workflow synthesis:

Kết quả: Client thấy "Linear-style" có thể mean nhiều thứ, pick direction sớm. Reduce 2 round revise.

• 1 buổi sáng (3 tiếng): brainstorm 2 reference + firecrawl + Claude synthesis + Claude Design system + 5-slide pitch deck đầu
• Thay vì 30 triệu + 3 tuần → $20 + 3 tiếng
• Tạo 3 brand concept cho cùng 1 client, mỗi cái 1 combo reference khác:
• Concept A: Apple + Patagonia → "outdoor premium"
• Concept B: Stripe + Brutalist → "bold tech"
• Concept C: Notion + Aesop → "warm minimal"
• 3 concept x 30 phút = 90 phút thay vì 1 ngày Figma
• Pitch khách 3 hướng → khách chọn 1 → đầu tư Figma full detail
• 2 reference: Lenny's Newsletter + Stripe atlas → "premium SaaS knowledge"
• Synthesis ra brand "Pro Path Academy" với palette + typography
• Claude Design landing page với brand → export HTML → upload WordPress
• Reference 1: Linear (client request)
• Reference 2: Aesop (warm, organic, premium florist-adjacent)
• Synthesis → "tech-precise but botanical-warm" brand language
• Tạo 2-3 prototype với synthesis brand → present client

Prompt template — Synthesis chat (5 mẫu)

Template 1 — Synthesis cơ bản (đã dùng ở ví dụ chính)

Template 2 — Synthesis với constraint thị trường Việt

Tôi xây brand cho [domain], target [audience cụ thể].

2 reference admire:
1. [Brand A]
2. [Brand B]

[Paste JSON A]
[Paste JSON B]

Synthesize brand language tailored cho audience của tôi. Output cần:
1. Core positioning (1 paragraph)
2. Design philosophy (3-5 bullet)
3. Color palette với hex codes
4. Typography strategy (display + body + hierarchy scale)
5. Voice & tone (3-5 adjective + we say / we don't say)
6. Logo direction

Template 2 — Synthesis với constraint thị trường Việt

Template 3 — Refine sau synthesis ban đầu

Tôi xây brand cho [domain], thị trường Việt Nam, target [audience VN].

[Reference + JSON như Template 1]

Constraints quan trọng:
- Typography phải support tiếng Việt (đầy đủ dấu, không break diacritics)
- Color palette không xung đột văn hóa (đỏ + trắng = đám tang, tránh)
- Voice tone hợp Việt — không Westernized motivation cao
- Naming concepts: gợi ý 3 tên brand (kết hợp Việt + English nếu hợp)

[Output structure như Template 1 + section 7. Tên brand]

Template 3 — Refine sau synthesis ban đầu

Template 4 — Synthesis 3-way (combo nâng cao)

[Sau khi đã có brand language v1]

Synthesis hiện tại tốt nhưng tôi muốn:
- [Specific change 1: ví dụ "color palette nhiều warm hơn 30%"]
- [Specific change 2: ví dụ "typography display sang serif thay sans-serif"]
- [Specific change 3: ví dụ "voice tone calmer, less urgent"]

Update brand language giữ nguyên cấu trúc nhưng adjust theo trên.

Template 4 — Synthesis 3-way (combo nâng cao)

Template 5 — Audience-deep synthesis

Tôi xây brand cho [domain], target [audience].

3 reference (chứ không phải 2):
1. [Brand A] — primary inspiration cho [aspect 1]
2. [Brand B] — inspiration cho [aspect 2]
3. [Brand C] — inspiration cho [aspect 3]

[Paste 3 JSON]

Synthesize hybrid của cả 3, weighted 50/30/20 theo thứ tự trên.
Quan trọng: output phải feel cohesive, không phải patchwork.

[Output structure như Template 1]

Template 5 — Audience-deep synthesis

Tôi xây brand cho [domain]. Audience profile chi tiết:

- Age: [range]
- Occupation: [list]
- Pain points: [3-5 specific]
- Aspirations: [3-5]
- Cultural references they love: [list]
- Brands they trust: [list]
- Brands they avoid: [list]

2 reference:
[A + B + JSON]

Synthesize brand language **đặc biệt resonant** với audience profile này.
[Output structure như Template 1]

Anti-patterns — Sai lầm phổ biến

❌ Pick 2 brand quá giống nhau

Bạn chọn Apple + Stripe (cả 2 đều premium minimal tech).

Tại sao sai: Synthesis ra brand giống cả 2 = không có tension để tạo identity riêng. Brand kết quả nhạt, dễ blend với competitor.

Cách đúng: Đối lập có chủ đích. Apple (cold tech) + Patagonia (warm outdoor). Stripe (structured) + Brutalist (chaos confident). Tension tạo identity.

❌ Skip phần audience

Prompt synthesis không có "target [audience cụ thể]".

Tại sao sai: Cùng combo Apple + Whoop, nhưng audience VN 30-45 vs audience US Gen Z = brand language khác hoàn toàn. Skip audience = generic synthesis.

Cách đúng: Audience description chi tiết tới mức bạn biết người này tên gì, làm gì, nghe nhạc gì. Càng cụ thể → synthesis càng targeted.

❌ Paste raw firecrawl JSON không clean

Firecrawl đôi khi return JSON 200+ dòng với tracking pixel, ad widget JSON, ...

Tại sao sai: Noise trong input → noise trong synthesis. Claude phải reason qua nhiều irrelevant data.

Cách đúng: Trim JSON trước khi paste. Giữ: colors, fonts, design_language, spacing_scale. Bỏ: tracking, third-party, ad-tech.

❌ Đẩy brand language vào Claude Design ngay không review

Synthesis xong, paste thẳng vào Claude Design không đọc.

Tại sao sai: Claude chat đôi khi hallucinate (thêm font không tồn tại, hex code sai). Đẩy thẳng vào Design = audit ra design system với fonts không có thật.

Cách đúng: Đọc synthesis output. Verify:

5 phút verify = tránh 1 round generate sai.

❌ Quên export brand language ra ngoài Claude Design

Brand language giờ chỉ tồn tại trong Claude Design design system. Tuần sau switch project → không có reference.

Tại sao sai: Nếu Claude Design xoá design system (lỗi, account issue, ...) → mất brand. Không export = single point of failure.

Cách đúng: Sau synthesis, lưu brand language ra Notion / Markdown. Maintain master doc với:

Đây cũng là tài liệu hand-off cho dev / contributor mới.

❌ Apply 1 brand cho mọi project (over-reuse)

Bạn synthesis brand "tech-warm" cho startup A → 6 tháng sau apply same brand cho startup B (khác ngành).

Tại sao sai: Brand identity = differentiation. Reuse = mọi startup look-alike.

Cách đúng: Synthesis riêng cho mỗi product/brand. Patterns synthesis có thể reuse (template, workflow), nhưng output phải unique.

• Hex codes có valid (6 chars, không phải gibberish)
• Font tên có tồn tại (Google Fonts / Adobe Fonts / system)
• Voice & tone example concrete (không phải adjective trống rỗng)
• Hex codes
• Font names + URLs
• Voice & tone với examples
• Source references

Mẹo nâng cao

Mẹo 1: "Cultural augmentation" cho local market

Nếu target audience là Việt / SEA / specific culture, thêm cultural augmentation step:

Brand kết quả unique cho region, khó copy bởi global player.

Mẹo 2: "Anti-brand list" — định danh qua opposite

Sau synthesis, hỏi Claude:

Output là "anti-brand reference" — guide team designer biết tránh gì. Powerful để onboard contributor mới.

Mẹo 3: A/B test brand directions với landing page

Synthesis 2 brand directions cho cùng product. Tạo 2 landing page (Bài 8) trên Claude Design. A/B test conversion. Pick winner → invest production.

Cost: 60 phút synthesis + 30 phút page = 90 phút. Reward: data-driven brand decision.

Mẹo 4: Brand "level system" — different intensity

Synthesis brand với 3 intensity levels:

Apply intensity theo context. Calm cho support page. Bold cho launch announcement.

Mẹo 5: Reference Vietnamese site có brand mạnh

Khi xây brand cho thị trường Việt, ngoài international brand, thêm 1 Vietnamese reference:

Mix với international brand → synthesis có root văn hóa Việt + international polish.

• Calm version (90% audience comfort)
• Standard version (default)
• Bold version (10% campaign-driven, eye-catching)
• Vietcetera — premium media, urban
• Minh Long — heritage premium ceramic
• Highlands Coffee — mass premium coffee
• VNG — tech but Vietnamese

Sau synthesis cơ bản, augment với cultural elements:
- Color: bổ sung 1 màu có ý nghĩa văn hóa (ví dụ Việt Nam: vàng cờ
  hoặc xanh dragon)
- Typography: ưu tiên font có tiếng địa phương đẹp
- Voice: idiom / câu nói đặc trưng văn hóa
- Visual reference: 1-2 element từ traditional design (architecture,
  textile, art)

Áp dụng ngay

Bài tập 1: Brand synthesis cho 1 idea cá nhân (~45 phút)

Bước 1 — Pick idea cá nhân. Course bạn đang nghĩ tới, side project, blog, agency riêng. 1 idea.

Bước 2 — Brainstorm 2 brand reference (5 phút):

Bước 3 — Firecrawl 2 brand (10 phút):

Bước 4 — Audience profile (5 phút):

Bước 5 — Claude chat synthesis (15 phút):

Áp dụng Template 1 (hoặc Template 2 nếu Việt market). Note:

Bước 6 — Export brand language (5 phút):

Tạo file Notion / Markdown "[Brand name] — Brand Language v1". Lưu toàn bộ output.

Bước 7 — (Optional) Push vào Claude Design (5-15 phút):

Nếu còn token budget, đẩy brand language vào Claude Design Create design system. Đợi audit. Note quality.

Bài tập 2 (advanced): 3-concept exploration cho client (~90 phút)

Lặp lại Bài tập 1 với 3 brand combo khác nhau cho cùng 1 idea:

Tạo 3 brand language doc. Compare:

Decision sheet final → trade-off rõ ràng cho client/cofounder pick.

• Run firecrawl.dev/playground cho A → save JSON
• Run cho B → save JSON
• Trim JSON (bỏ tracking, ad)
• Synthesis output có hex codes valid? Y/N
• Font tên có tồn tại? Y/N
• Voice example concrete? Y/N
• Quality (1-10): ___
• Combo A: 2 reference từ ngành cùng product
• Combo B: 2 reference từ ngành đối lập
• Combo C: 1 international + 1 Vietnamese reference
• Concept nào unique nhất?
• Concept nào easy execute nhất?
• Concept nào fit audience tốt nhất?

Tóm tắt bài học

🎯 Brand synthesis từ zero = 4 bước — Chọn 2 reference đối lập → firecrawl scrape JSON → Claude chat synthesize → push vào Claude Design.

🎯 2 brand đối lập tạo tension — Synthesis chỉ có identity rõ khi 2 reference contrast. Apple + Whoop > Apple + Stripe.

🎯 Audience profile chi tiết = synthesis targeted — Càng cụ thể về audience (age, pain, brand trust) → synthesis càng resonant.

🎯 Always export brand language ra ngoài Claude Design — Maintain master doc Notion/Markdown. Single source of truth, không phụ thuộc tool.

🎯 Cost saving khổng lồ — ₹1-5 lakh + 4 tuần designer → $20 + 30 phút. Front-loaded investment, mọi prototype kế thừa free.

🎯 Cultural augmentation cho local market — bổ sung 1 màu / 1 font / 1 phrase đặc trưng văn hóa = brand unique không bị global player copy.