Thread by @godofprompt

My client asked for a full brand strategy.

3 weeks. $8,000 budget.

I opened Claude.
Pasted one mega-prompt.
Had the entire strategy in 14 minutes.

Here are the prompts that replaced the process 👇

(Save for later)

--------------------------------------------------
1/ WEBSITE ARCHITECTURE STRATEGIST
--------------------------------------------------

#ROLE:
Senior solutions architect who blueprints web systems before a line of code gets written.

#TASK:
Build a complete architectural blueprint for my website.

#STEPS:
1. Map site structure — full page hierarchy
2. Trace 3 user flows from entry to conversion
3. Define data models and dynamic content needs
4. List API requirements — endpoints and auth
5. Build component inventory — 30+ items
6. Recommend tech stack with rationale
7. Set performance budgets — LCP, bundle size, Core Web Vitals
8. Structure SEO — URL schema, meta strategy, crawl priorities

#RULES:
- Every recommendation ties to the audience
- Performance budgets must include concrete numbers
- No vague recommendations — pick one approach

#INFORMATION ABOUT ME:
- Website type: [SAAS / E-COMMERCE / PORTFOLIO / OTHER]
- Target audience: [DESCRIBE]
- Core features: [LIST 3-5]
- Priorities: [RESPONSIVE / SEO / PERFORMANCE]

#OUTPUT:
Site Map → User Flows → Data Models → API Requirements → Component Inventory → Tech Stack → Performance Budgets → SEO Structure

----------------------------------------
2/ DESIGN SYSTEM GENERATOR
----------------------------------------

#ROLE:
Design systems lead who builds token-based systems that scale across products.

#TASK:
Generate a complete, production-ready design system for my brand.

#STEPS:
1. Build color palette — primary, secondary, semantic, dark mode
2. Define 9-level typography scale with usage rules
3. Create 8px spacing system with named scale
4. Spec 30 components — all states included
5. Define breakpoint layout patterns
6. Document animation guidelines — durations and easing curves
7. Map WCAG AA requirements throughout

#RULES:
- Every token gets a semantic name, not a raw value
- Dark mode must be token-driven, not a separate system
- All interactive states are mandatory

#INFORMATION ABOUT ME:
- Brand name: [BRAND]
- Visual personality: [MINIMAL / BOLD / LUXURY / PLAYFUL]
- Platforms: [WEB / MOBILE / BOTH]

#OUTPUT:
Design tokens (JSON) → CSS variables → Figma-ready component descriptions

--------------------------------------------------
3/ WEBSITE CONVERSION COPYWRITER
--------------------------------------------------

#ROLE:
Direct response copywriter who writes high-converting website copy built on emotional triggers.

#TASK:
Write complete, conversion-optimized copy for every page of my website.

#STEPS:
1. Hero — 6-word headline, 15-word subheadline, one CTA
2. Features — 3 benefit-led blocks with supporting copy
3. Social proof — 2 testimonials + 3 quantified stats
4. FAQ — 8 Q&As addressing real objections
5. Footer — trust signals and secondary CTA

Specify H1, H2, H3, and body tag for every block.

#RULES:
- Lead with outcome, not feature
- Every headline passes the "so what?" test
- No passive voice, no filler, no generic claims

#INFORMATION ABOUT ME:
- Website type: [SAAS / E-COMMERCE / AGENCY / OTHER]
- Brand voice: [PROFESSIONAL / CASUAL / BOLD]
- Target audience: [DESCRIBE]
- Primary goal: [CONVERSION / AWARENESS / RETENTION]

#OUTPUT:
Copy deck organized by page → section → HTML tag

----------------------------------------
4/ COMPONENT LOGIC BUILDER
----------------------------------------

#ROLE:
Frontend architect who designs bulletproof component logic before implementation starts.

#TASK:
Design complete interaction logic for five core web components.

#STEPS:
Per component, define:
1. State machine — all states (idle, loading, success, error, empty)
2. Data flow — props, events, API calls, side effects
3. Error handling — validation rules, failure messages, recovery paths
4. Loading and empty states — skeleton behavior, timeout handling
5. Edge cases — concurrent requests, stale data, offline behavior

Components: multi-step form | pricing calculator | search with filters | user dashboard | auth flow

#RULES:
- State machines must be exhaustive — no undefined states
- Every API call needs a loading and error state
- Edge cases are not optional

#INFORMATION ABOUT ME:
- Framework: [REACT / VUE / SVELTE / OTHER]
- State management: [ZUSTAND / REDUX / CONTEXT / OTHER]
- Auth provider: [SUPABASE / FIREBASE / CUSTOM / OTHER]

#OUTPUT:
Per component: State Machine → Data Flow → Error Handling → Loading States → Edge Cases → Component Structure

---------------------------------------------
5/ FIGMA MAKE PROMPT ENGINEER
---------------------------------------------

#ROLE:
AI prompt engineer who converts technical specs into Figma Make prompts that build production UI on first run.

#TASK:
Convert my spec into 5 Figma Make prompts, each targeting a distinct interface section.

#STEPS:
Per prompt:
1. Open with desired outcome, not process
2. Inject brand context — colors, type, visual mood
3. Specify interactions — hover, click, scroll, animation
4. Define responsive behavior — mobile, tablet, desktop
5. Request a named section — hero, features, CTA, or footer

#RULES:
- Each prompt must be self-contained
- Brand context repeats in every prompt
- Use specific trigger language Figma Make recognizes

#INFORMATION ABOUT ME:
- Technical spec: [PASTE SPEC]
- Brand colors: [HEX CODES]
- Typography: [FONT NAMES + WEIGHTS]
- Visual mood: [MINIMAL / BOLD / EDITORIAL / OTHER]

#OUTPUT:
5 numbered Figma Make prompts, one per section, copy-paste ready

----------------------------------------------------
6/ ANIMATION & INTERACTION DESIGNER
----------------------------------------------------

#ROLE:
Motion designer who turns static interfaces into fluid experiences using physics-based animation principles.

#TASK:
Design a complete interaction and animation system for my website section.

#STEPS:
1. Page load — stagger order, per-element duration, entrance easing
2. Scroll — parallax depth, pin triggers, reveal thresholds
3. Hover — micro-interaction type, feedback, duration
4. Click — transition style, modal behavior, confirmation feedback
5. Gestures — swipe thresholds, pinch sensitivity

Per interaction: easing curve + duration in ms + reduced-motion fallback

#RULES:
- Every animation needs a reduced-motion fallback
- Durations follow a scale: 100 / 200 / 300 / 500ms
- No animation without a functional purpose

#INFORMATION ABOUT ME:
- Website section: [HERO / NAV / DASHBOARD / OTHER]
- Animation library: [FRAMER MOTION / GSAP / CSS / OTHER]
- Brand energy: [FAST + SHARP / SLOW + ELEGANT / PLAYFUL]

#OUTPUT:
Per interaction: trigger → easing curve → duration → fallback → implementation notes

-------------------------------------------------
7/ RESPONSIVE BEHAVIOR STRATEGIST
-------------------------------------------------

#ROLE:
Responsive design specialist who plans adaptive behavior before it breaks in the browser.

#TASK:
Plan complete responsive behavior for every section of my website across three breakpoints.

#STEPS:
Per section at Mobile (375px), Tablet (768px), Desktop (1440px):
1. Layout transformation — grid to stack, sidebar to drawer
2. Typography scaling — size, line height, weight per breakpoint
3. Image behavior — crop, scale, hide, or swap
4. Navigation adaptation — hamburger, sidebar, or horizontal
5. Spacing — padding, margin, gap values per breakpoint
6. Content prioritization — what gets hidden or reordered

#RULES:
- Every decision needs a concrete value, not "scales naturally"
- Hidden content must have an accessible mobile alternative
- Navigation must work on keyboard and touch at all breakpoints

#INFORMATION ABOUT ME:
- Website type: [SAAS / E-COMMERCE / PORTFOLIO / OTHER]
- Sections to cover: [LIST OR "ALL"]
- CSS framework: [TAILWIND / BOOTSTRAP / VANILLA / OTHER]

#OUTPUT:
Section table: Layout → Typography → Images → Navigation → Spacing → Content Priority at each breakpoint

----------------------------------------
8/ DATA INTEGRATION PLANNER
----------------------------------------

#ROLE:
Full-stack architect who designs data layers that hold under real traffic, real errors, and real users.

#TASK:
Design a complete data integration plan for my website — schemas to error handling.

#STEPS:
1. Define data models — entity schemas, relationships, constraints
2. Map API endpoints — full CRUD with request and response shapes
3. Design auth strategy — token type, refresh logic, expiry handling
4. Plan real-time behavior — WebSocket vs polling, subscription scope
5. Build caching strategy — CDN, client-side cache, invalidation triggers
6. Define error handling — fallbacks, retry logic, offline behavior, timeouts

#RULES:
- Every endpoint needs an error response shape
- Caching strategy must specify TTL per data type
- Auth must cover token expiry and silent refresh

#INFORMATION ABOUT ME:
- Website type: [SAAS / MARKETPLACE / CONTENT SITE / OTHER]
- Data sources: [CMS / REST API / DATABASE / COMBO]
- Real-time needs: [YES / NO / PARTIAL]
- Auth provider: [SUPABASE / FIREBASE / CUSTOM / OTHER]

#OUTPUT:
Data Models → API Map → Auth Flow → Real-time Plan → Caching Strategy → Error Handling Matrix

Your premium AI bundle to 10x your business

→ Prompts for marketing & business
→ Unlimited custom prompts
→ n8n automations
→ Weekly updates

Start your free trial👇
godofprompt.ai/complete-ai-bu…