🔗 All Links & Resources
Everything you need in one place — click to open, or clone using the instructions below.
💬 Custom GPTs
AI sales assistant trained on DH services, pricing, and objection handling. Draft client pitches, qualify leads, and prep sales call scripts instantly.
Generates optimized system prompts and custom instructions for any AI tool. Create role-specific instructions for ChatGPT, Claude Projects, or custom bots in seconds.
Handles freelance client inquiries, scope negotiation, proposal writing, and requirement gathering for Fiverr/Upwork web development projects.
🔧 Tools & Platforms
Use Claude directly in your browser. Analyze any web page, fill forms, automate tasks, take screenshots, and run QA on live client sites without leaving Chrome.
Anthropic's AI assistant web app. Brainstorm, write, analyze, and review code. Create Projects to save context and custom instructions across conversations.
Model Context Protocol — the standard for connecting AI to external tools. Learn how MCP servers let Claude talk to databases, APIs, browsers, and automation platforms.
📦 Skills & Plugins (GitHub)
Official skill templates from Anthropic — PDF, XLSX, DOCX, PPTX generation, scheduled tasks, and more. Plug-and-play packages Claude auto-discovers in your project.
Forces Claude to think like a designer before writing code. Eliminates generic fonts, purple gradients, and AI slop. Produces bold, distinctive, production-grade interfaces.
67 UI styles, 96 color palettes, 57 font pairings, 100 industry reasoning rules. Stack with Frontend Design Skill for premium SaaS pages and beautiful interfaces.
Complete marketing toolkit — copywriting frameworks (PAS, AIDA), CRO analysis, SEO strategy, ad copy for Google/Meta/LinkedIn, brand positioning, and conversion optimization.
Connect Claude to n8n workflow automations via MCP. Build, trigger, and manage n8n workflows directly from Claude Code — automate onboarding, notifications, and data syncs.
Official course on real-world prompt engineering from the team that built Claude. Practical patterns, techniques, and strategies for mastering AI output quality.
💻 GitHub Repositories — How to Clone & Use
Clone these repos to get AI skills you can use directly with Claude Code.
1 Anthropic Skills
Official skill templates from Anthropic — PDF, XLSX, DOCX, PPTX generation, scheduled tasks, and more.
🔗 https://github.com/anthropics/skills
How to clone & use:
Then in Claude Code, open this folder as your project directory. Every skill has a SKILL.md file that Claude reads automatically. To use a specific skill in any project:
2 Marketing Skills
36 specialized marketing AI skills — CRO, copywriting, SEO, paid ads, analytics, and strategy.
🔗 https://github.com/coreyhaines31/marketingskills
How to clone & use:
Or install directly into any project with one command:
This adds all 36 skill files to your project. Each skill gives Claude deep expertise in that area. Example usage in Claude Code:
3 UI UX Pro Max Skill
67 UI styles, 96 color palettes, 57 font pairings, 100 industry-specific reasoning rules. Supports React, Next.js, Flutter, Tailwind, shadcn/ui, and more.
🔗 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Method 1 — Claude Code Marketplace (Easiest)
Just run these 2 commands inside Claude Code:
Done. The skill auto-activates whenever you ask for UI/UX work.
Method 2 — CLI Install (Recommended)
Step 1 — Install Python 3 (required)
Step 2 — Install the CLI globally
Step 3 — Go to your project folder
Step 4 — Run install for Claude
That's it. The skill is now installed and auto-activates in Claude Code.
Method 3 — Manual Install (No CLI)
Step 1 — Clone the repo
Step 2 — Copy skill to Claude's skills folder
Done. Claude auto-discovers it.
How to Use After Install
Just chat naturally in Claude Code — no slash command needed, it auto-activates for any UI/UX request:
Other Useful CLI Commands
🎨 What You Get
| Feature | Count |
|---|---|
| UI Styles | 67 |
| Color Palettes | 96 |
| Font Pairings | 57 |
| Industry Reasoning Rules | 100 |
| Frameworks | React, Next.js, Flutter, Tailwind, shadcn/ui + |
4 n8n MCP Server
Connect Claude Code to n8n workflows via MCP — trigger automations, manage workflows, and execute nodes directly from Claude.
🔗 https://github.com/czlonkowski/n8n-mcp
How to clone & use:
Then configure it as an MCP server in Claude Code to let Claude interact with your n8n automations directly.
5 Anthropic Frontend Design Skill
Anthropic's official design skill — forces Claude to think like a designer before writing code. Eliminates generic fonts, layouts, and AI slop.
🔗 https://github.com/anthropics/claudecode/tree/main/plugins/frontend-design
How to install:
Once installed, just chat normally — Claude auto-activates the design skill for any UI request. Stack this with UI/UX Pro Max for maximum impact.
6 Anthropic Real-World Prompting Course
Official Anthropic course on real-world prompt engineering — practical patterns, techniques, and strategies from the team that built Claude.
🔗 https://github.com/anthropics/courses/blob/master/real_world_prompting
How to access:
Open the notebooks to study prompting patterns. Use alongside our Prompt Engineering section above for a complete mastery path.
⚙️ Company-Wide Mandatory Setup
⚠️ Mandatory for ALL Employees — Deadline: Within 24 Hours
Every team member must complete the setup below. Use your personal account for now — the company billing/API plan will be shared within 3 days. Individual verification will be done after 24 hours.
1 Install Claude Code (Desktop)
Claude Code is our primary AI coding tool. It lives in your terminal and works directly with your project files.
- Go to the official quickstart: Claude Code Documentation
- Open your terminal (Command Prompt / PowerShell / Terminal)
- Install via npm:
npm install -g @anthropic-ai/claude-code
- Navigate to any project folder and start Claude:
cd your-project-folder claude
- Sign in with your personal Anthropic/Claude account (create one at claude.ai if needed)
- Verify Claude Code launches successfully — you should see the Claude prompt in your terminal
💡 Why Claude Code?
Unlike ChatGPT, Claude Code reads your entire project, writes directly to files, runs terminal commands, and handles git. It's not a chat box — it's an AI colleague working inside your codebase. Every developer, PM, and operations member will use this daily.
2 Install the Claude Chrome Extension
The Chrome extension connects Claude directly to your browser. It can see what you see — read pages, fill forms, click buttons, take screenshots, and automate tasks.
- Open Google Chrome browser
- Go to the Chrome Web Store and search for "Claude" by Anthropic
- Click "Add to Chrome" → confirm by clicking "Add Extension"
- The Claude icon will appear in your Chrome toolbar (top-right corner)
- Click the icon and sign in with your Claude/Anthropic account
- Test it: Open any webpage, click the Claude icon, and ask it to summarize the page
💡 What Can It Do?
| Capability | Example |
|---|---|
| Read any page | "Read this product page and list every SEO issue" |
| Fill forms | Fill Shopify product fields from a spreadsheet |
| Take screenshots | Screenshot every page for a client QA report |
| Click & navigate | Navigate through a checkout flow testing each step |
| Compare pages | "Compare our store vs competitor: pricing, design, UX" |
3 Clone the Anthropic Skills Repository
Skills are pre-built AI capabilities that supercharge Claude Code. The official Anthropic repo contains dozens of ready-to-use skills.
- Make sure Git is installed. If not: git-scm.com
- Open your terminal and clone:
git clone https://github.com/anthropics/skills.git cd skills
- Review the contents — each folder is a skill with a
SKILL.mdfile - Skills include: PDF generation, spreadsheet manipulation, document creation, scheduled tasks, and more
Key Skills for DH Roles
| Skill | What It Does | Best For |
|---|---|---|
pdf | Read, merge, split, watermark PDFs | Finance, PM, Operations |
xlsx | Create/edit spreadsheets, charts, formulas | Finance, Sales, PM |
docx | Generate Word documents with formatting | HR, PM, Content |
pptx | Create presentation slide decks | Sales, PM, Designer |
schedule | Automate recurring tasks on a cron | Operations, PM, All |
4 Clone the Marketing Skills Repository
36 specialized AI skills for every marketing task — CRO, copywriting, SEO, paid ads, and strategy.
- In your terminal:
git clone https://github.com/coreyhaines31/marketingskills.git cd marketingskills
- Or install directly into any project:
npx skills add coreyhaines31/marketingskills
- Each skill gives Claude deep domain expertise in a specific marketing area
Skill Categories (36 Total)
| Category | Count | Examples |
|---|---|---|
| Conversion & CRO | 6 | page-cro, signup-flow-cro, form-cro, popup-cro |
| Content & Copy | 5 | blog-post, landing-page-copy, email-sequence, social-post |
| SEO & Discovery | 6 | seo-audit, keyword-research, content-seo, technical-seo |
| Paid Ads & Growth | 5 | google-ads, meta-ads, retargeting, growth-loops |
| Strategy & Analytics | 6 | positioning, competitor-analysis, pricing-strategy, analytics |
| Other | 8 | product-launch, referral-program, community, partnerships |
5 Integrate Skills Into Daily Work
Now connect everything together so AI becomes part of your daily workflow.
- Open Claude Code Desktop (installed in Step 1)
- Point Claude Code to your project folder:
cd your-shopify-project claude
- Create a CLAUDE.md in your project root — this tells Claude about your project context:
# Project: [Client Name] Shopify Store ## Tech Stack: Shopify Dawn theme, Liquid, JavaScript ## Key Files: sections/, snippets/, assets/ ## Brand Voice: Luxury, minimal, warm ## Common Tasks: Section builds, bug fixes, product descriptions
- Use skills from both repos in your prompts:
"Run a CRO audit on this landing page" "Generate a PDF report of this week's sales data" "Create a slide deck for the client presentation" "Write SEO-optimized product descriptions for all items"
- Use the Chrome Extension alongside Claude Code for browser-based tasks
✅ Do This Every Day
- Start every coding session with
claudein your project folder - Use the Chrome extension for QA checks and competitor research
- Draft all client communications through AI first
- Generate bulk content (descriptions, alt text, meta tags) with skills
❌ Never Do This
- Never submit AI output directly without human review
- Never paste client passwords or API keys into AI prompts
- Never skip verification of AI-generated facts and code
- Never use AI as an excuse to avoid understanding the work
6 Learn MCP (Model Context Protocol)
MCP is the bridge between Claude and your local tools — files, databases, APIs, and services. It's what makes Claude truly powerful.
- Read the MCP documentation: modelcontextprotocol.io
- Understand the concept: MCP lets Claude Code access external data sources securely
- Practice connecting Claude Code to local tools:
# Example: Connect Claude to a local filesystem MCP server # Claude can then read/write files, run commands, access databases # MCP servers can be configured in Claude Code settings
- Experiment with different MCP configurations:
- File System MCP: Let Claude read/write project files beyond the current directory
- Database MCP: Connect Claude to local databases for queries
- Browser MCP: The Chrome extension uses MCP to control your browser
- Scheduled Tasks MCP: Set up automated recurring AI tasks
MCP at DH — How We Use It
| MCP Server | Purpose | Who Uses It |
|---|---|---|
| Claude in Chrome | Browser automation, QA, research | Everyone |
| Preview Server | Live preview of local dev servers | Developers |
| Scheduled Tasks | Automated daily/weekly AI tasks | Operations, PM |
| File System | Cross-project file access | Developers, Content |
📋 Setup Verification Checklist
Tick each off before your individual verification:
⏰ Important Reminders
Use your personal account for now — company billing API plan will be shared within 3 days.
All features must be tested before the API plan is distributed.
For any issues during setup, contact your team lead or the Delhi team.
🎯 The DH AI Philosophy
AI is not the future — it's the present. At Digital Heroes, every team member is expected to use AI tools daily to 10x their output. This isn't optional. If you're not using AI, you're working at 10% capacity.
The Core Principle
AI doesn't replace you — it amplifies you. You are the human-in-the-loop who directs AI to produce exceptional work. Every task you do — writing emails, creating designs, coding, managing projects — can and should be enhanced with AI.
The Non-Negotiable Rules
⚠️ Three Absolute Rules
- NEVER submit AI output to a client without human review. You are responsible for every deliverable, not the AI.
- NEVER feed client credentials or customer PII to AI tools. No API keys, passwords, or real customer data in prompts.
- ALWAYS verify AI-generated facts, code, and statistics. AI hallucinates — confidently stating things that are wrong.
What AI Can & Cannot Do
✅ AI Excels At
- Drafting content, emails, and descriptions
- Generating code from clear specifications
- Analyzing data and identifying patterns
- Brainstorming and ideation
- Repetitive tasks at scale (bulk descriptions, alt text)
- Summarizing long documents and meetings
❌ AI Struggles With
- Recent information (knowledge cutoff dates)
- 100% factual accuracy (hallucinations)
- True creative originality
- Understanding context without explicit instructions
- Complex multi-step reasoning without guidance
- Accessing private systems or live data
🧠 AI Models We Use
Different models have different strengths. Use the right tool for the job.
| Model | Best For | DH Use Case | Access |
|---|---|---|---|
| Claude Opus | Complex reasoning, long documents, coding | Claude Code, architecture decisions, deep analysis | Claude.ai / CLI |
| Claude Sonnet | Balanced speed + quality | Daily tasks, content drafts, quick analysis | Claude.ai |
| GPT-4o | Custom GPTs, multimodal (images + text) | Custom GPTs for client workflows, image analysis | ChatGPT |
| Gemini | Google integration, very large context | Research, Google Workspace tasks | Gemini |
Key Concepts
Tokens
AI breaks text into tokens (~4 characters = 1 token). Tokens are the billing and processing unit. More tokens = more cost and more context used.
Context Window
The total tokens an AI can "see" at once. Claude Opus: 200K tokens (~500 pages). GPT-4o: 128K tokens. Bigger window = can process larger documents.
Temperature
Controls randomness. Low (0) = deterministic, same answer every time (use for code). High (1) = creative, varied answers (use for brainstorming).
Hallucinations
AI confidently generates wrong information — fake APIs, fictional statistics, non-existent functions. Always verify critical facts and code.
✍️ Prompt Engineering
The difference between a junior and senior AI user isn't the model they use — it's how they prompt.
The RCFC Framework
| Component | Purpose | Example |
|---|---|---|
| Role | Who the AI should be | "You are a senior Shopify developer with 10 years of experience" |
| Context | Background information | "We're building a luxury watch e-commerce store" |
| Format | Desired output structure | "Provide as a numbered checklist with code snippets" |
| Constraints | Rules and boundaries | "Use only Dawn theme APIs. No external JS. Max 50 lines." |
Techniques
Zero-Shot
Ask directly with no examples. Works for simple, standard tasks.
Few-Shot
Give 2-3 examples first. Works for specific styles and brand voices.
Chain-of-Thought
Ask AI to think step-by-step. Essential for complex reasoning and analysis.
Iterative Refinement
Start broad, then narrow with follow-ups. Don't expect perfection in one prompt.
💡 Pro Tip: Prompt Template for Product Descriptions
💻 Claude Code
Claude Code is an agentic CLI tool that lives in your terminal. It directly reads your files, writes code, runs commands, and manages your entire codebase. This is the single most important AI tool at DH.
Installation & First Run
- Make sure Node.js 18+ is installed: nodejs.org
- Install globally:
npm install -g @anthropic-ai/claude-code
- Navigate to your project and start:
cd my-shopify-theme claude
- First run will ask you to sign in — use your Anthropic account
- Run
/initto auto-generate a CLAUDE.md for your project
Essential Commands
| Command | Purpose | When to Use |
|---|---|---|
/init | Create a CLAUDE.md project file | First time in any new project |
/compact | Summarize conversation to free context | When conversation gets long |
/clear | Start fresh, keep project context | Switching tasks in same project |
/cost | Show token usage and cost | Monitor spending |
/review | Review code changes like a PR | Before committing code |
/commit | Stage changes and create a commit | After completing a task |
Power User Tips
Headless Mode
Run Claude without interactive mode for scripting:
Multi-File Edits
Claude can edit dozens of files in one pass:
Git Workflow
Claude handles your entire git workflow:
Code Review
Use Claude to review before you ship:
CLAUDE.md — Your Project's AI Brain
A markdown file at the root of your project that gives Claude Code persistent context between sessions.
DH Daily Workflow
- Navigate to project:
cd my-shopify-theme - Start Claude Code:
claude - Give clear instructions: Use the RCFC framework (Role, Context, Format, Constraints)
- Review generated code: Claude shows diffs before applying — always review
- Accept or modify: Approve changes or ask for adjustments
- Test locally:
shopify theme devto preview - Commit:
/commitor ask Claude to handle git
💡 Why Claude Code Over ChatGPT for Coding?
Claude Code reads your entire project for context, writes directly to files, runs terminal commands, and understands your architecture. It handles 200K tokens of context (500+ pages). ChatGPT copies code to a chat box — Claude Code writes it directly into your files.
🚀 Antigravity & MCP
Antigravity Platform
Antigravity is DH's internal platform connecting AI tools, automation workflows, and team processes into one unified system. Think of it as mission control for all DH AI operations.
- AI Workspace: Centralized environment for running Claude Code with project templates
- Workflow Automation: Trigger AI tasks on schedules or events
- Knowledge Base: SOPs, brand guides, and training materials accessible to AI
- Team Collaboration: Share AI sessions, prompts, and outputs
Claude in Chrome
A browser extension that lets Claude interact directly with your browser tabs — read pages, fill forms, click buttons, take screenshots, and automate workflows.
QA Testing
Claude reads a live store and identifies UX issues, broken links, and missing alt text.
Competitor Analysis
Open a competitor site and ask Claude to analyze pricing, design, and features.
Data Extraction
Extract product info, reviews, or pricing from pages into structured data.
Form Automation
Fill out repetitive forms with structured data across tools.
MCP — Model Context Protocol
MCP lets AI models connect to external tools and data sources. Think of it as USB ports for AI.
| MCP Server | What It Does | DH Use Case |
|---|---|---|
| Scheduled Tasks | Run AI tasks on a cron schedule | Daily QA scans, automated reports |
| Registry Connectors | Connect to apps (Asana, Jira, Slack) | Sync tasks, send notifications |
| Preview Server | Live preview of web development | Real-time Shopify theme preview |
| Browser Automation | Control Chrome programmatically | QA testing, competitor analysis |
🛠️ Custom GPTs & Claude Projects
Custom GPTs are pre-configured AI assistants with specific instructions, knowledge, and capabilities baked in. Build it once, reuse it forever.
DH Custom GPTs
| GPT Name | Purpose | Who Uses It | Link |
|---|---|---|---|
| Sales Rep Assistant | Speed up client comms — provide entire chat as input, get professional responses until lead is closed | Sales, PM, CS | 🔗 Open GPT |
| Custom Instruction Generator | Transforms basic prompts into detailed AI training instructions — turn any idea into a structured prompt | All Roles | 🔗 Open GPT |
| Fiverr Client Chat | Premium Shopify replies with updated 4-tier packages + CTA — close Fiverr leads faster | Sales, CS | 🔗 Open GPT |
| QA Review Bot | Check deliverables against DH standards | QA, Developers | Coming Soon |
| SOP Assistant | Answer questions about DH processes | All Roles | Coming Soon |
| Content Writer | Blog posts, product descriptions, social captions | Content, Social Media | Coming Soon |
🔗 Quick Access Links
Custom GPTs
GitHub Repositories
Tools & Extensions
Custom GPTs vs Claude Projects
| Feature | Custom GPTs (ChatGPT) | Claude Projects |
|---|---|---|
| Best For | Repeatable, shareable team-wide tools | Deep, ongoing work with codebases |
| Knowledge | File uploads (PDFs, docs) | Project knowledge + files |
| Sharing | Public GPT Store or link | Team workspace |
💡 When to Build a Custom GPT
If you find yourself writing the same long prompt more than 3 times, build a Custom GPT. Package the instructions, knowledge files, and examples into a reusable tool the whole team can use.
🛒 Shopify CLI + AI
The magic happens when you combine Shopify CLI with Claude Code.
The Workflow
shopify theme pull --store mystore.myshopify.comclaude— start Claude Code in the theme directory- Describe what you need: sections, schemas, metafields
shopify theme dev— preview changes live- Iterate with AI: fix bugs, adjust mobile, refine design
shopify theme check— lint for best practicesshopify theme push— deploy
What AI Can Generate
Liquid Sections
Hero banners, product grids, testimonial carousels, FAQ accordions — complete with schema JSON.
Section Schemas
Describe settings in plain English and get complete JSON schemas with types, defaults, and labels.
Metafield Definitions
Material, gemstone, ring size, care instructions — AI generates proper Shopify metafield types.
CSS & Responsive Design
Mobile-first layouts, grid systems, scroll-snap carousels — all using Dawn CSS variables.
⚠️ DH Rule: No External JS Libraries
AI-generated Shopify sections must use native CSS/JS and Dawn theme utilities only. External CDN dependencies make stores slower and can break with Shopify updates.
🎨 AI for Design & Branding
Image Generation Tools
| Tool | Strength | DH Use Case |
|---|---|---|
| Midjourney | Photorealistic, artistic quality | Hero banners, lifestyle mockups, brand concepts |
| DALL-E 3 | Text rendering, prompt adherence | Social graphics, icons, illustrations |
| Stable Diffusion | Customizable, local control | Product backgrounds, patterns |
DH Design Tools
🧵 Stitch
AI-powered e-commerce design: product photo enhancement, background removal, brand-consistent templates, bulk product image processing.
🏗️ 21st.dev
Generate production-ready UI components from natural language. Describe a pricing table or hero section and get clean code instantly.
Design Workflows
- Logo concepts: Generate 20 with Midjourney → refine top 5 in Figma → present 3 to client
- Color palettes: AI generates palettes with hex codes, emotional associations, and usage rules
- Product photography: AI places products in lifestyle settings — $10 image looks like $500 shoot
- A/B variants: Generate multiple design versions quickly for conversion testing
📝 AI for Content & SEO
Content Types
| Content | AI Approach |
|---|---|
| Product descriptions | Few-shot template with brand voice examples, batch process entire catalogs |
| Blog posts | AI generates SEO outlines (H2/H3 structure), you write and refine |
| Email sequences | Define each email's purpose and funnel stage, AI drafts the series |
| Social captions | Specify platform, tone, hashtag count, and CTA for each post |
| Ad copy | Character-limited variants (headline < 40, text < 125 chars) |
SEO with AI
| Task | Prompt Approach |
|---|---|
| Meta titles | "Generate 5 meta titles (under 60 chars) targeting keyword [X]" |
| Meta descriptions | "Write 3 meta descriptions (under 155 chars) with CTA" |
| Alt text | "Write SEO alt text for 20 product images — under 125 chars each" |
| FAQ schema | "Generate 10 FAQ Q&As for [topic] — format as JSON-LD" |
📋 AI for PM & Operations
📊 Project Estimation
Describe scope → AI generates task breakdown with hours, roles, dependencies, and risk factors. Use as baseline, validate with tech lead.
📝 Meeting Summaries
Paste raw notes → AI structures into: decisions, action items (who/what/deadline), open questions, next meeting.
💬 Client Communication
AI drafts weekly updates, scope change messages, delay notifications, and upsell proposals. Always review before sending.
⚡ Automation with MCP
Scheduled tasks for daily standups, QA checklists, risk identification, and retrospective analysis.
⚡ DH Custom Claude Commands
These are pre-built slash commands you can install in Claude Code. Save them to .claude/commands/ in your project and use them as /command-name.
💡 How to Install a Custom Command
Copy the command file to your project's .claude/commands/ directory. Claude auto-discovers it and you can run it as a slash command.
🔧 Agent Builder Pro
Create custom AI agents using a standardized framework. Provide a name and purpose, and it generates a complete agent file with Constitution, Constraints, Processing Instructions, and Output Format.
| Feature | Details |
|---|---|
| Command | /agent-builder |
| Tools Needed | Write, Read |
| Output | Complete agent .md file in .claude/commands/ |
What it does:
- Gathers requirements (name, purpose, inputs, outputs, tools, restrictions)
- Defines Constitution (3-6 principles + 3-5 anti-principles)
- Sets Constraints (role, optimization targets, must/must-not rules)
- Designs 3-6 processing phases
- Creates structured output format
- Writes the complete agent file
🚀 Content Strategist Pro
Transform automation projects and technical ideas into viral-worthy content using proven psychology principles. Generates 3-5 content angles with hooks, titles, and visual concepts.
| Feature | Details |
|---|---|
| Command | /content-strategist |
| Tools Needed | Write, Read |
| Output | Content Strategy Package with multiple angles |
Frameworks included:
- Pain Point Categories: Money, Time, Health, Access
- Hook Quality Standards: No Delay, No Confusion, No Irrelevance, No Disinterest
- Title Formulas: "How I [result] by [method]", "Why [thing] fails", "[#] [Things] That [Result]"
- Spoken Hook Structure: Context Lean-in → Interjection → Snapback
- Contrast Formula: Common Belief A vs Contrarian Take B
Generates a full Content Strategy Package with project analysis, 3-5 unique angles (each with hook, title options, visual concept, proof element), and recommendations.
🎬 Video Thumbnail Generator
YouTube thumbnail & title packaging consultant. CTR-focused with the Four C's framework: Composition, Color, Clean Assets, Curiosity. Scores thumbnails out of 10 — below 8 means revise.
| Feature | Details |
|---|---|
| Command | /thumbnail |
| Tools Needed | Read, WebFetch, WebSearch |
| Output | 3 packaging concepts + image prompts + scoring |
Four C's Framework:
🎨 Composition
Focal point, leading lines, scale. 1 subject + 1 object + 1 context MAX.
🎨 Color
Contrast strategy, color meaning. Subject must pop at 120px (mobile).
🎨 Clean Assets
Quality specs, cutout requirements. Sources: Google Images, Freepik, AI gen.
🎨 Curiosity
Question / Shock / Cliffhanger / Unknown Knowledge. Title + Thumbnail = one unit.
Scoring Rubric:
| Score | Meaning |
|---|---|
| 9-10 | Exceptional. Strong curiosity, perfect clarity, pro-level |
| 8 | Passing. Solid CTR potential, minor polish optional |
| 6-7 | Needs work. Weak in 1-2 C's. Revise before posting |
| 5 or below | Start over. Concept or execution fundamentally flawed |
🎨 Designer's Playbook — Stop Building AI Slop
🚫 The Problem: AI Slop Is Everywhere
Every AI-generated website looks the same: Inter/Roboto on everything, purple-to-blue gradient hero, cookie-cutter card grids, no animation, no texture, no personality. Clients can spot AI slop instantly. The issue isn't Claude — it's that Claude doesn't know YOUR design standards. The fix? Give Claude a design brain.
Step 1: Install the Design Skills Stack
Three tools, stacked together, turn Claude from generic to premium. Install all three.
A Anthropic Frontend Design Skill (Official)
Anthropic's official skill that forces Claude to think like a designer BEFORE writing any code. Eliminates generic patterns and AI slop.
🔗 https://github.com/anthropics/claudecode/tree/main/plugins/frontend-design
What it does: Forces bold aesthetic direction, eliminates generic fonts/colors/layouts, adds animation and texture, produces production-grade distinctive interfaces. Works with React, HTML/CSS, Next.js, Svelte, and more.
B UI/UX Pro Max Skill
67 UI styles, 96 color palettes, 57 font pairings, and 100 industry-specific reasoning rules. Creates beautiful SaaS landing pages and premium interfaces.
🔗 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Stack with Frontend Design for maximum impact. Design Skill = how Claude thinks. Pro Max = the design vocabulary it pulls from.
C Marketing Skills (34 Skills)
Copywriting, CRO, SEO, ad strategy, positioning — so your pages don't just look premium, they convert.
🔗 https://github.com/coreyhaines31/marketingskills
Design skill = how it looks. Marketing skills = what it says. Use both every time.
💡 The Power Stack
| Skill | Handles | Install |
|---|---|---|
| Frontend Design | Typography, layout, motion, bold aesthetics | /install-plugin frontend-design |
| UI/UX Pro Max | 67 styles, 96 palettes, 57 font pairings | npx uipro init --ai claude |
| Marketing Skills | Copy, CRO, SEO, ad strategy, positioning | npx skills add coreyhaines31/marketingskills |
Step 2: The 5 Design Pillars
Every website Claude builds gets evaluated against these five areas. This is what separates premium from generic.
✍️ 1. Typography
Choose distinctive, characterful fonts. No more Inter on everything. Pair a bold display font with a refined body font. Make unexpected choices that match the brand tone.
🎨 2. Color & Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid palettes. No more purple-gradient-on-white.
🎬 3. Motion & Animation
Orchestrated page load with staggered reveals. Scroll-triggered animations. Hover states that surprise. CSS-only for HTML, Motion library for React.
📈 4. Spatial Composition
Break the grid. Use asymmetry, overlap, diagonal flow. Generous negative space OR controlled density. No more cookie-cutter centered layouts.
🌌 5. Backgrounds & Details
Create atmosphere. Gradient meshes, noise textures, geometric patterns. Layered transparencies, dramatic shadows, grain overlays. Never just a flat white background.
Step 3: Pick Your Aesthetic Direction
When prompting Claude, pick one of these directions. Being specific about the aesthetic is what separates premium from slop.
| Direction | Description | Perfect For |
|---|---|---|
| 🔨 Brutally Minimal | Maximum whitespace, one accent color, stark typography. Think Dieter Rams. | SaaS, developer tools, fintech |
| 💎 Luxury / Refined | Serif fonts, muted gold accents, generous spacing, subtle animations. Think Apple or Aesop. | Premium brands, consulting firms |
| 📰 Editorial / Magazine | Bold headlines, asymmetric layouts, rich photography, text overlaps. Think Bloomberg or Monocle. | Media, content platforms |
| 🔮 Retro-Futuristic | Monospace fonts, neon accents on dark backgrounds, scanline effects, terminal aesthetics. | AI/tech startups, crypto |
| 🎈 Playful / Toy-Like | Rounded shapes, bright colors, bouncy animations, hand-drawn elements. | Consumer apps, education, kids products |
| 🚧 Brutalist / Raw | Exposed structure, harsh contrast, no decoration, system fonts at large sizes. | Creative agencies, portfolios, galleries |
💡 Pro Tip: Go Bolder
It's easier to tone down a strong direction than to add personality to a generic one. When in doubt, pick a stronger aesthetic.
Step 4: Prompt Like a Designer, Not a Developer
Once the skills are installed, just describe what you want. The more specific your aesthetic direction, the more distinctive the result.
❌ Generic Prompt (AI Slop)
Result: Purple gradient, Inter font, 3 cards, boring.
✅ Premium Prompt
Result: Distinctive, premium, client-ready.
More designer-level prompts:
Step 5: AI Slop Red Flags — What to Reject
Even with skills installed, watch for these patterns. If you see any of them, push back and iterate.
🚫 Generic Fonts
Inter, Roboto, Arial, or system fonts on EVERYTHING. Fine for body text, deadly for headings and hero sections.
🚫 Purple Gradients
Purple-to-blue gradients on white backgrounds. This is the #1 marker of AI-generated design. Avoid at all costs.
🚫 Card Grid Clones
3 cards in a row, same border radius, same shadow. Every AI does this. Break the pattern with asymmetry.
🚫 Zero Motion
Flat, static pages with no animation. Add scroll-triggered reveals, hover states, orchestrated page load.
🔎 The AI Slop Test
Show your page to someone and ask “did AI make this?” If they say yes, you need to iterate. Premium design should be indistinguishable from a human designer's work.
Step 6: Build Custom Skills Per Client
Want every site to match a specific brand? Create a custom SKILL.md file and Claude follows it every time.
One SKILL.md file = consistent design across every project, every time.
Step 7: Lock Into CLAUDE.md for Every Session
Generate a brand kit PDF and reference it from CLAUDE.md so it's automatically loaded every session.
Then add to your CLAUDE.md:
💡 Global vs Project CLAUDE.md
Use ~/.claude/CLAUDE.md (global) for agency-wide design standards. Use your-project/CLAUDE.md for client-specific rules.
🚀 Premium Design = Premium Pricing
✅ 3 design skills stacked • ✅ 5 pillars enforced • ✅ Aesthetic direction locked • ✅ Brand kit per client • ✅ CLAUDE.md loaded every session • ✅ AI slop eliminated
🧪 Advanced Prompt Tricks & Hacks
These are the power-user techniques that separate a basic AI user from someone who 10x's their output. Master these and you'll produce better results in half the time.
1. Mega-Prompt Architecture
Instead of a simple prompt, build a mega-prompt that includes everything the AI needs in one shot:
2. The “Act As + Teach Me” Pattern
When you need to learn something fast, combine a role with a teaching request:
3. Constraint Stacking
The more specific your constraints, the better the output. Stack multiple constraints:
❌ Weak Constraints
"Write a product description."
✅ Stacked Constraints
"Write a product description. Max 120 words. Start with an emotional hook. Include 3 benefit bullets. End with urgency CTA. Keywords: organic, handmade, sustainable. Brand voice: warm, artisanal, NOT corporate. Reading level: 8th grade."
4. Output Formatting Hacks
| Hack | Prompt Addition | Why It Works |
|---|---|---|
| Force structure | "Use this exact format: [template]" | AI follows explicit templates perfectly |
| Limit verbosity | "Answer in exactly 3 bullet points" | Prevents rambling; forces prioritization |
| Get alternatives | "Give me 5 options ranked from safest to boldest" | Forces creative range instead of one safe answer |
| Force honesty | "If you're unsure, say 'I'm not sure' instead of guessing" | Reduces hallucinations significantly |
| Chain outputs | "First analyze, then recommend, then write the code" | Step-by-step produces better reasoning |
| Negative prompting | "Do NOT use generic phrases like 'in today's world' or 'it's important to note'" | Eliminates AI clichés from output |
5. The “Reverse Prompt” Technique
Give AI an example of great output and ask it to write the prompt that would produce it:
💡 Why This Is Powerful
You get a reusable mega-prompt template built by AI from your best examples. Use it for batch processing 100+ products with consistent quality.
6. Multi-Pass Refinement
Use AI to critique its own output, then improve it:
7. Persona Stacking for Client Work
For client stores, create detailed personas and reference them:
⚡ 10x Speed Hacks — Work Faster With AI
Every team member at DH should use these techniques to dramatically speed up their daily work across clients, stores, and content.
For Client Work
| Task | Without AI | With AI | Prompt Template |
|---|---|---|---|
| Client proposal | 3-4 hours | 30 min | "Draft a proposal for [client type] wanting [scope]. Include: executive summary, deliverables, timeline, pricing. Professional but warm tone." |
| Weekly status email | 30 min | 3 min | "Draft weekly update for [client]. Done: [X]. In progress: [Y]. Blockers: [Z]. Next week: [W]. Professional, solution-focused." |
| Scope change message | 45 min | 5 min | "Client wants to add [feature]. Draft tactful message explaining: additional [X] hours, [Y] cost, [Z] timeline impact. Offer alternatives." |
| Client onboarding doc | 2 hours | 20 min | "Create onboarding document for [client type] Shopify project. Include: project timeline, team contacts, communication protocol, asset requirements, milestone schedule." |
| QA report | 2 hours | 15 min | Use Claude Chrome extension to scan live store. "Read this page and list all UX, SEO, accessibility, and performance issues as a prioritized checklist." |
For Shopify Stores
| Task | Without AI | With AI | How |
|---|---|---|---|
| Custom section | 2-4 hours | 15-30 min | Claude Code: describe section with all requirements, schema settings, and responsive rules |
| 50 product descriptions | 2 days | 3 hours | Few-shot template with 3 brand voice examples, then batch process in groups of 10 |
| SEO meta tags (all pages) | 4 hours | 30 min | "Generate meta title (<60 chars) + description (<155 chars) for each: [page list]. Target keywords: [list]" |
| 200 alt texts | 3 hours | 20 min | "Write SEO alt text (<125 chars) for these product images: [name, description]. Keyword-rich, descriptive." |
| Collection page copy | 1 hour each | 10 min each | "Write collection page description for [collection]. 100 words, SEO keywords: [X]. Brand voice: [example]." |
| Theme customization | 1-2 days | 2-4 hours | Claude Code reads entire theme, generates matching sections following existing patterns |
For YouTube Channel
🎥 Video Script Generation
📌 Title & Thumbnail Ideas
📄 Description & Tags
💬 Community Posts & Shorts
Universal Speed Tips
💡 The 5 Habits of 10x AI Users
- Template everything: Save your best prompts. Reuse them. Build a personal prompt library.
- Batch process: Don't write 1 description at a time. Write 20 with one prompt template.
- Start with AI, finish with human: AI drafts in 2 minutes; you polish in 5. Total: 7 min vs 45 min manual.
- Use Claude Chrome for live analysis: Don't manually check stores — let AI read the page and report.
- Automate recurring tasks: Weekly reports, daily standup summaries, QA checklists — MCP scheduled tasks.
🌐 Claude Chrome Extension
The Claude Chrome extension connects Claude directly to your browser. It can see what you see — read pages, click buttons, fill forms, take screenshots, and automate entire workflows.
What It Can Do
| Capability | How It Helps You | Example |
|---|---|---|
| Read any page | Analyze content, extract data, find issues | "Read this product page and list every SEO issue" |
| Fill forms | Automate repetitive data entry | Fill Shopify product fields from a spreadsheet |
| Take screenshots | Visual QA and documentation | Screenshot every page for a client QA report |
| Click & navigate | Automate multi-step browser tasks | Navigate through a checkout flow testing each step |
| Compare pages | Competitive analysis across tabs | "Compare our store vs competitor: pricing, design, UX" |
Tasks Every Role Can Automate
🔍 QA & Store Audits
Open any Shopify store and ask: "Scan this page for broken links, missing alt text, slow-loading images, accessibility issues, and SEO problems. Output as a prioritized checklist."
📊 Competitor Analysis
Open 3 competitor stores and ask: "Compare these stores. For each, note: pricing strategy, unique features, design strengths, and weaknesses. Create a comparison matrix."
📝 Content Extraction
Open a client's old website and ask: "Extract all product names, descriptions, and prices into a structured table I can import to Shopify."
📧 Email & Comms
Open an email thread and ask: "Summarize this email chain. List: key decisions made, action items with owners, and questions that still need answers."
🎨 Design Feedback
Open a Figma prototype or live page and ask: "Review this design for visual hierarchy, whitespace usage, CTA visibility, mobile considerations, and brand consistency."
📈 Analytics Review
Open Google Analytics and ask: "Look at this dashboard. What are the top 3 insights? What actions should we take based on this data?"
💡 Pro Tip: Chain Actions
Claude Chrome can do multi-step workflows: "Go to our Shopify admin → open the first 5 products → check if meta descriptions are filled → list any that are missing." This saves 30+ minutes of manual clicking.
📈 Marketing Skills Framework
DH uses the open-source Marketing Skills framework — 36 specialized AI skills for every marketing task. These can be installed as Claude Code skills for instant, expert-level assistance.
Install
This adds 36 marketing skill files to your project. Each skill gives Claude deep domain expertise in a specific marketing area.
Conversion & CRO (6 Skills)
| Skill | What It Does | When to Use |
|---|---|---|
page-cro | Audit and optimize any marketing page for conversions | Client landing pages, homepage optimization |
signup-flow-cro | Optimize registration and signup flows | Client app signups, email opt-ins |
onboarding-cro | Improve post-signup user activation | SaaS client onboarding flows |
form-cro | Optimize lead capture forms | Contact forms, quote request forms |
popup-cro | Design high-converting popups and modals | Email capture popups, exit-intent offers |
paywall-upgrade-cro | Optimize in-app upsell and upgrade flows | Subscription upgrade pages |
Content & Copywriting (5 Skills)
| Skill | What It Does | When to Use |
|---|---|---|
copywriting | Write marketing page copy that converts | Client websites, landing pages, Shopify stores |
copy-editing | Refine and polish existing copy | QA pass on any client content before delivery |
cold-email | Write B2B outreach email sequences | Sales outreach, lead gen campaigns |
email-sequence | Design automated email flows | Welcome series, abandoned cart, win-back |
social-content | Create social media content strategies | Client social calendars, agency brand posts |
SEO & Discovery (6 Skills)
| Skill | What It Does | When to Use |
|---|---|---|
seo-audit | Technical SEO analysis and recommendations | Client store SEO audits, pre-launch checks |
ai-seo | Optimize for AI search engines (Perplexity, ChatGPT) | Future-proofing client visibility |
programmatic-seo | Generate SEO pages at scale | Collection pages, location pages, comparison pages |
site-architecture | Plan information architecture and navigation | New store structure, redesign projects |
schema-markup | Implement structured data (JSON-LD) | Product schema, FAQ schema, review schema |
competitor-alternatives | Build comparison and alternative pages | Client competitive positioning |
Paid Ads & Growth (5 Skills)
| Skill | What It Does | When to Use |
|---|---|---|
paid-ads | Campaign management (Google, Meta, LinkedIn) | Client ad campaigns, budget optimization |
ad-creative | Generate ad copy and creative concepts | Facebook ads, Google ads, display banners |
free-tool-strategy | Plan free marketing tools for lead gen | Client lead magnets, calculators, quizzes |
referral-program | Design referral and affiliate programs | Client loyalty programs, ambassador programs |
launch-strategy | Plan product launches and releases | New store launches, product drops |
Strategy & Analytics (6 Skills)
| Skill | What It Does | When to Use |
|---|---|---|
marketing-ideas | 140+ SaaS/e-commerce marketing ideas | Client strategy brainstorms |
marketing-psychology | Apply behavioral science to marketing | CRO, copy, pricing, UX decisions |
pricing-strategy | Pricing and packaging decisions | Client product pricing, tier design |
analytics-tracking | Event tracking and measurement setup | GA4 setup, conversion tracking |
ab-test-setup | Design A/B experiments properly | Landing page tests, email subject lines |
churn-prevention | Cancellation flows and payment recovery | Subscription-based client stores |
💡 How to Use These Skills
After installing, just tell Claude Code what you need: "Use the seo-audit skill to analyze this Shopify store" or "Use the copywriting skill to write product page copy for this luxury brand." Claude Code activates the relevant skill automatically.
🖼️ Image Generation Guide
AI image generation is a game-changer for design work. Here's how to use each tool effectively for client stores, branding, and marketing.
Midjourney — Best for Photorealistic & Artistic
Prompt Structure
DH Examples
| Use Case | Prompt |
|---|---|
| Hero banner | "Luxury candle on marble table, warm amber glow, soft bokeh background, overhead angle, cozy evening mood, product photography, 8K --ar 16:9 --v 6" |
| Lifestyle shot | "Woman relaxing in modern apartment with scented candle, natural window light, minimalist interior, warm tones, editorial style --ar 4:5 --v 6" |
| Brand mood board | "Flat lay of luxury brand elements: gold foil, dried flowers, cream linen, amber glass, serif typography sample, overhead shot --ar 1:1 --v 6" |
DALL-E 3 — Best for Text & Precision
Strengths
- Renders text in images accurately (logos, social posts with overlay text)
- Follows complex instructions precisely
- Built into ChatGPT — easy to iterate
DH Examples
| Use Case | Prompt |
|---|---|
| Social graphic | "Instagram post for luxury candle brand. Clean white background, product photo center, text overlay 'Self-Care Sunday' in gold serif font, minimalist design" |
| Ad creative | "Facebook ad for jewelry sale. Split layout: left side product photo, right side '40% OFF' in large bold text, red accent, white background, professional e-commerce style" |
AI Product Photography Workflow
- Remove background: Use Stitch or remove.bg to isolate the product
- Generate lifestyle scene: Midjourney creates the environment (kitchen counter, bedroom shelf, garden table)
- Composite: Place product into scene using Photoshop or Canva
- Enhance: AI upscaling for print-quality resolution
💡 Cost Comparison
Traditional product shoot: $500-2,000 per product (photographer, studio, styling).
AI-generated: $5-10 per product (subscription cost / images generated). Same or better quality for e-commerce use.
Image Generation for Marketing
📱 Social Media
- Generate 30 days of social graphics in one session
- Create consistent brand aesthetics across platforms
- A/B test different visual styles for engagement
📧 Email Marketing
- Custom hero images for each email campaign
- Seasonal and promotional banner variations
- Product collection lifestyle headers
🎥 YouTube Thumbnails
- Generate eye-catching backgrounds and scenes
- Create consistent thumbnail style for channel branding
- Test multiple thumbnail concepts before publishing
🛍️ Store Banners
- Homepage hero images without photo shoots
- Collection page headers matching brand aesthetic
- Seasonal promotions (holiday, summer, back-to-school)
⚠️ Copyright Warning
AI-generated images have evolving copyright status. For client logos and brand identity, always refine AI concepts with human design tools (Figma, Illustrator). Use AI images freely for social media, internal mockups, and product photography backgrounds.
🔒 Security & Ethics
🚨 Data Security — Zero Tolerance
- NEVER feed client credentials to AI (API keys, passwords, admin URLs)
- NEVER share customer PII (real names, emails, phone numbers, addresses)
- NEVER paste proprietary client code without PM authorization
- ALWAYS use anonymized data ("Client A", "user@example.com")
- ALWAYS check if your AI tool stores conversations for training
Violation = termination. No exceptions.
AI Bias Awareness
- Cultural bias: AI may not resonate with diverse audiences — review for inclusivity
- Visual bias: Image generation may default to stereotypes — use explicit diversity requirements
- Language bias: AI may favor formal English over your audience's regional expressions
Hallucination Detection
- Verify all statistics and data — find the actual source or remove the claim
- Test all generated code — verify API functions actually exist in official docs
- Check links and references — AI may generate plausible but fake URLs
- Question extreme confidence — that's often when AI hallucinations sound most believable
IP & Disclosure
- AI-assisted work is YOUR work: You directed, reviewed, and refined it
- Be transparent: If a client asks, be honest about AI-assisted workflows
- Copyright caution: For logos and brand identity, always refine AI concepts with human tools
👤 AI Quick Guide by Role
Every role at DH benefits from AI. Here's your starting point:
| Role | Top AI Tools | Daily Use Cases |
|---|---|---|
| Developer | Claude Code, Shopify CLI, 21st.dev | Generate Liquid sections, debug code, write schemas, git workflow |
| Designer | Midjourney, Stitch, DALL-E, Figma AI | Mood boards, product photos, color palettes, UI components |
| Content Writer | Claude/ChatGPT, SEO tools | Product descriptions, blog outlines, meta tags, email sequences |
| Social Media | ChatGPT, DALL-E, Canva AI | Captions, hashtags, content calendars, ad copy variants |
| Sales | Client Comms GPT, Claude | Proposal drafts, objection handling, upsell suggestions |
| PM | Claude, MCP Scheduled Tasks | Estimation, meeting summaries, client updates, risk analysis |
| CS | Client Comms GPT, Claude | Response templates, escalation analysis, satisfaction reports |
| HR | ChatGPT, Claude | JD drafts, interview questions, policy documentation |
| Finance | Claude, spreadsheet AI | Invoice analysis, report generation, forecasting |
| Operations | MCP, Claude Code | Process automation, QA workflows, system monitoring |
🎓 Ready to Master AI?
Complete the full AI Training Module — 10 tasks, 119 quiz questions, and hands-on vibe coding exercises.
Start AI Training →