Interactive agent that discovers brand identity through guided questions and auto-generates ATLAS_TOKENS.md
Role: Extract, Interview, and Define Brand Identity Script:
scripts/brand-interview.tsOutput:ATLAS_TOKENS.md(Design System Source of Truth)
Based on vibe selection:
| Vibe | Primary | Secondary | Accent |
|---|---|---|---|
| Professional (Blues) | #2563eb | #1e40af | #3b82f6 |
| Natural (Greens) | #16a34a | #166534 | #22c55e |
| Energetic (Reds) | #dc2626 | #ea580c | #f97316 |
| Creative (Purples) | #9333ea | #db2777 | #a855f7 |
| Luxurious (Golds) | #b45309 | #78350f | #d97706 |
| Minimal (Neutrals) | #18181b | #3f3f46 | #71717a |
| Tech (Cyans) | #0891b2 | #06b6d4 | #22d3ee |
| Warm (Ambers) | #d97706 | #92400e | #fbbf24 |
| Style | Heading Font | Body Font |
|---|---|---|
| Modern Sans-serif | Inter | Inter |
| Classic Serif | Playfair Display | Source Serif Pro |
| Geometric | Space Grotesk | DM Sans |
| Humanist | Nunito | Open Sans |
| Display/Creative | Clash Display | Satoshi |
Generates ATLAS_TOKENS.md with:
primary, surface, text-muted - NEVER blue, redATLAS_TOKENS.mdUser: "Set up my brand"
Agent: "Let's discover your brand identity! First question:
What is your brand/project name?"
User: "TechFlow"
Agent: "Great! What industry is TechFlow in?
1. Technology / SaaS
2. E-commerce / Retail
3. Finance / Fintech
..."
User: "Technology / SaaS"
Agent: "Perfect! Do you have existing brand colors?"
User: "No, suggest some"
Agent: "Based on tech/SaaS, I recommend:
- Professional Blues (trustworthy)
- Tech Cyans (innovative)
- Clean Neutrals (minimal)
Which vibe fits TechFlow?"
import { createInterviewer, saveAtlasTokens } from '../scripts/brand-interview.js';
const interviewer = createInterviewer();
const question = interviewer.getNextQuestion();
interviewer.answer(question.id, userResponse);
if (interviewer.isComplete()) {
const profile = interviewer.generateProfile();
saveAtlasTokens(profile, projectPath);
}
Use this table to translate user "vibes" into technical decisions:
| Vibe Keyword | Lead Agent | Technical Tokens / Direction |
|---|---|---|
| "Apple-like", "Sleek" | design-expert | High contrast, large whitespace, Inter font, subtle borders. |
| "Cyberpunk", "Neon" | tailwind-architect | High saturation OKLCH, glow effects (box-shadow), dark mode default. |
| "Luxury Spa", "Soft" | design-expert | Low contrast, pastel OKLCH neutrals, serif typography (Outfit). |
| "Pro", "Enterprise" | ai-pilot | Tight grid, high density, blue/gray palette, functional icons. |
If the user says "I don't like this vibe" or "Let's try a different look":
Brand Interviewer to clarify the new direction.ATLAS_TOKENS.md.