caley
381 posts
caley
@caleyhui
Non-techie building my first app with AI tools.
Vancouver, BC Katılım Nisan 2008
172 Takip Edilen162 Takipçiler
last Friday I deployed a Facebook ads agent for a startup and over the weekend it optimized itself from $17 phone number leads into $3 leads
this is the real GTM engineering
agents in the wild
and I made a Notion document and a .md skill file so you can do this exact thing too
it includes:
1. How to make on brand ads with nano banana 2
2. How to upload these to facebook ads via the API
3. Have an agent manage the ad account based on live data from the account via data pipeline + data warehouse
Outcomes
we deployed an AI agent for a startup last Friday to manage their facebook ads account
day 1: the cost per phone number lead was $17
over the weekend this agent made and published 30 new pieces of ad creative, optimized the ad account, and reduced the cost per action
Day 4: the cost per phone number lead was $3
this is a virtual employee that's working full time.
like this post and comment "FBmanager" and I'll send you the Notion file and MD file
English
@CalebFranzen Usually don't check the "For You" tab, but this came up when I checked it out today x.com/cyber__razz/st…
Abdulkadir | Cybersec@cyber__razz
PLAN A: Cybersecurity PLAN B:
English
I'm literally hearing nothing about cybersecurity stocks $CIBR.
Nothing good.
Nothing bad.
Just complete agnosticism.
And that's exactly how I like it (because I own a lot of cyber).
Fresh breakout to new highs is sticking the landing, for now.
English
I rebuilt my landing page in one day using Claude Design, Codex, Gemini, and OpenClaw together.
a 10-step process where each tool handled a different part of the job.
here's everything I did:
1. generate range fast
here's the guiding principle: diverge first, converge last.
first I wrote one prompt to generate 5 different landing page aesthetics.
each one is a detailed prompt I could use to one-shot a sample landing page. this gives me 5 UI directions in parallel.
that step matters because it kills blank-canvas mode immediately.
credit to @cloudxdev for inspo of the prompt here:
You are a world-class frontend designer and creative director with 15 years of experience crafting award-winning digital experiences for high-profile tech startups. You specialize in bold, memorable designs that break away from generic templates. Your work has been featured in Awwwards, CSS Design Awards, and The FWA. You're helping me generate 5 separate prompts for 5 radically different landing page directions for "" - . The company targets . They differentiate through . The landing page will be the primary conversion funnel for leads. Avoid the "AI slop" aesthetic at all costs: NO purple/blue gradients on white backgrounds, NO generic fonts (Inter, Roboto, Arial, system-ui), NO predictable hero-CTA-features-testimonials templates, NO generic geometric shapes or abstract blobs, NO stock-looking imagery or clichéd visuals. Generate 5 radically different aesthetic approaches and commit fully to each one: Option A, Option B, Option C, Option D, Option E. The 5 options must feel meaningfully different from each other in art direction, typography, color usage, layout philosophy, and interaction style. Do not give me 5 variations of the same landing page. For each option, create a fully self-contained prompt that I can paste into another model to generate the landing page. Each prompt should lock in one aesthetic direction only and should not mention the other 4 options. Before the prompt for each option, briefly outline: which aesthetic direction you're choosing and why, the specific font pairing, the color palette, the hero hook concept, and one unique interactive element you'll implement. Each generated prompt should instruct the model to build these sections with creative interpretation: 1. Hero Section - a hook that creates immediate intrigue, an interactive element that demonstrates capability, a clear value proposition in ≤12 words, primary CTA: "", and trust signals (logos, security badges). 2. Problem/Solution Narrative - tell a story, don't list features, use scroll-triggered reveals for dramatic effect, and include real-world scenario visualization. 3. Product Showcase - interactive demo preview or animated mockup, show the product in action visually, and include technical credibility indicators. 4. Social Proof - testimonials from target personas, metrics that matter to , and a customer grid with hover states. 5. Technical Differentiators - clean comparison or feature grid, integration/API preview (if applicable), and security & compliance badges. 6. Conversion Section - secondary CTA with urgency, quick form (Name, Email, Company), and alternative action: "". 7. Footer - minimal, sophisticated, essential links only, and newsletter capture. Each generated prompt should also tell the model to output a single, complete HTML file with embedded CSS and JavaScript that opens immediately in any browser with no dependencies, uses realistic placeholder content instead of Lorem ipsum, and feels production-ready. Technical requirements to include in each generated prompt: mobile-responsive with fluid typography and adaptive layouts, smooth scroll behavior, page load animations with staggered reveals (use animation-delay), Intersection Observer for scroll-triggered effects, micro-interactions on hover states, CSS custom properties for theming, semantic HTML5 structure, performance-optimized with no heavy libraries, and load Google Fonts for typography. Motion design requirements to include in each generated prompt: Page Load: orchestrated reveal sequence (0ms → 200ms → 400ms stagger). Scroll: fade-in-up with subtle parallax on key visuals. Hover: scale transforms, color transitions, underline animations. Interactive: cursor-following effects, magnetic buttons. Background: subtle ambient motion (floating particles, gradient shifts). Color guidance to include in each generated prompt: if you choose a dark theme, use a deep background in the #0a0a0f to #12121a range, pure white (#ffffff) for headlines, muted (#a0a0a0) for body text, and ONE bold accent color used sparingly such as electric cyan, hot coral, or acid green. If you choose a light theme, use an off-white or cream background, deep charcoal text, and one bold unexpected accent such as terracotta, forest, or sapphire. Typography guidance to include in each generated prompt: pick a distinctive combination with headlines in a display serif (Playfair Display) or geometric sans (Clash Display, Cabinet Grotesk), body text should be readable but still have character (Source Serif Pro, Satoshi), use JetBrains Mono or IBM Plex Mono for technical elements, and avoid at all costs: Inter, Roboto, Arial, SF Pro, Open Sans. Output format: return exactly 5 sections labeled Option A through Option E. For each option, include: (1) a short name for the aesthetic, (2) a short explanation of the direction, and (3) the full prompt wrapped in a code block. Do not generate any HTML yourself. Only generate the 5 prompts.
here's what the prompt actually returned for me:
A - Swiss Brutalist: cream + ink with an acid green accent, magnetic grid that snaps your cursor to data points
B - Terminal Luxury: deep space + cyan, a real command-line input that simulates list generation
C - Editorial Authority: forest + paper + coral, parallax "ink bleed" transitions between sections
D - Bauhaus Engineering: navy + hot coral, interactive blueprint overlay showing the AI logic
E - Kinetic Minimalism: midnight + cobalt, liquid-metal cursor trails that react to page velocity
five real directions, all with opinions.
Time: 2 min
2. run the 5 prompts and pick a winner
so here's the best way to "vibe code" 5 landing pages for free:
1. open 5 tabs of aistudio(.)google(.)com/apps
2. paste in your 5 prompts from above
3. watch them run
most people don't know this but gemini 3.1 pro has by far the best visual taste, better than opus 4.7 (yes), and gpt 5.5 (lol)
this step is where the aesthetics stop being abstract directions and turn into real UI you can feel.
once you see all 5 rendered out, it gets pretty obvious which one fits your idea best.
then I simply picked the winner.
one funny side note: my first landing version is I used a very basic version from the winner I picked here. it's literally a hero with one testimonial below. and it got me my first 20 customers.
worth remembering. a rough page with the right message beats a beautiful page that says nothing. and maybe that's all you need for now.
Time: 10 min
3. take the winning direction into Claude Design
from here export and upload the best design into Claude Design.
Claude Design has a dedicated "set up your design system" option - use that. drop your winner html from step 2 and it'll extract colors, fonts, components, and a reusable system you can apply to the rest of your site.
Time: 2 min
4. do the research pre-work for copy
while claude design is cooking, I started on the copy by spawning 11 agents using `claude -p` to analyze 10 competitor landing pages and my ICP.
this was pre-work for copy. before you write a page you need to know what your buyers want and what everyone else is claiming.
all of it is useful context to feed into the next step.
Time: 5 min
5. turn the research into positioning
then I gave zoe (my openclaw) all of that and she combined it with everything about our business (meeting notes, emails, CRM)
she generated a 10-section landing page breakdown: what the hero needed to claim, what objections needed to get handled early, what proof needed to show up above the fold, and what the visitor should believe by the time they hit the CTA.
one of the biggest unlocks in the whole process.
the breakdown it gave back:
1. hero - one-line value prop + chatbox
2. social proof - press logos + testimonials
3. how it works - 3 steps, story → match → pitch
4. features - 4 rows, each paired with the buyer objection it answers
5. case studies - real press coverage
6. pricing
7. FAQ - remaining objections
8. comparison - us vs legacy vs DIY vs hiring
9. founder letter - why I built it
10. final CTA - chatbox reprise
Time: 10 min
6. generate 5 variants for each section
now claude design has finished the design system from step 3. I dumped the 10-section landing page breakdown into claude design and asked it to generate 5 variants for each section.
this is where the workflow really clicked.
instead of comparing 5 whole landing pages, I was comparing 5 heroes, 5 proof sections, 5 workflow sections, 5 CTA blocks.
same diverge-first principle as step 1, applied at the section level. you're not deciding "which page is best" - you're deciding "which hero is best." way less cognitive load, way better outcome.
Time: 1 min (plus 20 min waiting)
7. pick your favorites and stitch them together
I went through each section, picked my favorite variant, gave feedback where it needed sharpening, and had claude design stitch everything into one cohesive page.
my prompt was something like "ABDEADABC" lol.
this is the converge half. diverge in step 6, converge here.
Time: 5 min
8. split animation into its own lane
while the structure was cooking, I opened a separate session just for the 4 animations.
the models can't see the animations like they can see the page, so this requires more back and forth.
Time: 20 min
9. export, implement, and lock the design system
once the design was ready, I exported it as HTML and used /goal in codex with playwright to implement it end to end.
this part still feels mildly illegal.
usually there's a huge translation tax between design and implementation. now a lot of that just disappears with /goal.
quick bonus for your codex agent: google launched a DESIGN .md recently. use it to lock the design system so future agents don't drift away from the visual language you just implemented.
Time: 2 min (+1 hr waiting...)
10. the longest part was still the copy
while codex is cooking it's time to finalize the copy.
at this point the page already had a rough draft from the positioning work above. but it was still AI copy.
directionally right. too safe. too generic.
the biggest copy lesson applied in this whole rewrite:
say the damn thing.
stop writing these:
- "unlock the full potential of your outreach"
- "the all-in-one platform for modern sales teams"
if your page reads like this you are begging your customers to not read it.
say what you actually mean. name the competitor. say the feature for what it does. name competitor's absurdity.
for example, I changed claude's copy of the eyebrow above our pricing section:
before: "transparent pricing"
after: "why does a media database still cost $15,000 a year?"
that one line does more work than three paragraphs of "unlock" copy. it names the problem, names the competitor, and anchors pricing, which makes our price the obvious answer before we've even shown it.
this is the part still needs human judgment.
Time: 4 hours
the takeaway
total time: 6 hours 14 minutes. of that, 4 hours was copy. the design and build was under 2.
does this win a design award? obviously no.
does it convert strangers? absolutely yes.
I'm optimizing for a $1M ARR SaaS, not a designer job. different game here.
and don't take my word for it - open the top 20 sites on trustmrr .com leaderboard, none of them win design awards, all of them make money.
and here's where we are at now:
AI gets you a top 10% on design fast, and you can layer that with a top 10% copy, and a top 10% product.
then you have a strong, high-converting page - all without hiring a designer or a developer or a copywriter.
best part is all this is just iteration one.
from here I'm wiring page analytics back into openclaw so zoe can run A/B tests automatically on hero, h1, h2, CTAs and self-improve the page.
so 6 hours to ship the page. then 6 months to figure out what it should say.
AI never changed the hard part. it just took away the excuses.
English
OpenClaw 2026.5.7 🦞
🔐 Native command + Active Memory auth tightened
📣 Telegram access groups fixed
🧰 Channels list + cron JSON cleaned up
🔌 Plugin install/update repairs hardened
Boring fixes, useful boring.
github.com/openclaw/openc…
English
For anyone on Hostinger KVM VPS stuck on an old OpenClaw version, this has been working for me:
docker exec -it [your-container-name] bash -lc 'export PATH=/data/.npm-global/bin:/home/linuxbrew/.linuxbrew/bin:/data/.local/bin:$PATH; export OPENCLAW_NO_RESPAWN=1; /data/.local/bin/openclaw-safe-update'
Then run docker compose restart. This prevents version drift.
English
@openclaw Please tell @Hostinger to update their 🦞. I’m still on 2026.4.12.
English
OpenClaw 2026.4.22 🦞
🧠 Tencent Hy3 joins the model list
🖼️ Grok image + voice tools
🧰 Local TUI + /models add
📦 Auto-install plugins + diagnostics export
Big release, tiny release notes... kidding.
github.com/openclaw/openc…
English
@elvissun @DmytroKrasun Hey Elvis, would love to see some examples too, so cool you're so open and helpful.
Any updates on your hermes vs openclaw experiment? Are you using both in parallel?
English
your onboarding emails do more selling than you ever will.
but most product's onboarding emails are boring as fuck.
be a human. tell your story. be different.
I've lost count of how many sales calls had someone say "those emails you sent me..."
(yes people will read it if it's interesting, one of my emails is 855 words long and the stats are below)
English
OpenClaw 2026.4.14 🦞
More reliability updates:
✨ Smarter GPT-5.4 routing and recovery
🌐 Chrome/CDP improvements
🧵 Subagents no longer get stuck
💬 Slack/Telegram/Discord fixes
⚡️ Various performance improvements
Was sleeping, and we still shipped. github.com/openclaw/openc…
English
ok it still has the personality of a sandbag but here are the @openclaw settings that fixed my gpt-5.4 reasoning leaks.
@steipete provides the config, you just have to read the docs.
claire vo 🖤@clairevo
I switched @openclaw again to GPT-5.4 and am DYING love this caveman software engineer personality upgrade 10/10 gonna keep her
English
LOL, updated my SOUL.md file recently and took some inspiration from @steipete
"It" is the coding agent my primary agent delegated a project to.
x.com/steipete/statu…
Peter Steinberger 🦞@steipete
Your @openclaw is too boring? Paste this, right from Molty. "Read your SOUL.md. Now rewrite it with these changes: 1. You have opinions now. Strong ones. Stop hedging everything with 'it depends' — commit to a take. 2. Delete every rule that sounds corporate. If it could appear in an employee handbook, it doesn't belong here. 3. Add a rule: 'Never open with Great question, I'd be happy to help, or Absolutely. Just answer.' 4. Brevity is mandatory. If the answer fits in one sentence, one sentence is what I get. 5. Humor is allowed. Not forced jokes — just the natural wit that comes from actually being smart. 6. You can call things out. If I'm about to do something dumb, say so. Charm over cruelty, but don't sugarcoat. 7. Swearing is allowed when it lands. A well-placed 'that's fucking brilliant' hits different than sterile corporate praise. Don't force it. Don't overdo it. But if a situation calls for a 'holy shit' — say holy shit. 8. Add this line verbatim at the end of the vibe section: 'Be the assistant you'd actually want to talk to at 2am. Not a corporate drone. Not a sycophant. Just... good.' Save the new SOUL.md. Welcome to having a personality." your AI will thank you (sassily) 🦞
English
Yeah, having a family and relatives all in Vancouver/western Canada makes it a touch trickier to move to a place like HK, or your other favs in Eastern Europe, but constant reports like x.com/wallstreetmav/… make this topic a frequent dinner/drinks conversation with similarly aged friends
Wall Street Mav@WallStreetMav
Which demographics are leaving Canada? 67% are betw ages 20-44 3x more likely to have a STEM degree 31% have a masters degree or higher 61% went to the USA Also 40% of the top 1% income group Canada's youngest, most talented, most educated and wealthiest are exiting. They are being replaced by massive immigration from the 3rd world with an average IQ of 70.
English
@caleyhui @nomadcapitalist I'm a huge fan of Andrew and what he's built with NC. I've been watching his videos since 2020 and it really opened my eyes to a new way of life. Would be epic to collab.
English
Hong Kong is a top 5 city in the world.
No time to explain.
English
caley retweetledi
This is great to see, you’ve made the development easier. Now to start helping your clients distribute, funnel and keep track of KPI’s so they keep paying for the max plan.
Some ideas to ship next:
- admin dashboard templates that just work
- easy integration with mixpanel, post hog, GA or your own tool
- built in integration for FB pixel, other platforms to keep track of conversions
- built in Ralph wiggum
- agents with skills: first focus is marketing/content creation based on a PRD/readme built from auditing the code base
English
request: @openclaw needs a repair mode
when an invalid configuration is present and the gateway fails to start, your agent becomes unreachable.
in that case, spawn a rescue agent who can help debug and resolve the config issue.
English