FINALLY
Warp is the main software I use daily, this will be a great addition
Warp@warpdotdev
Coming soon. 👀
English
CloudAI-X
2.8K posts
CloudAI-X
@cloudxdev
Coding Agents / CLI workflows [email protected]
Katılım Kasım 2020
1.2K Takip Edilen4.1K Takipçiler
If you don't study Hermes Agent
You are NGMI
Great team @Teknium @NousResearch
Nous Research@NousResearch
xAI has expanded access to X Premium+ subscribers in Hermes Agent. Enjoy!
English
This is huge btw
GOATs @MiniMax_AI
MiniMax_Agent@MiniMaxAgent
Upgrading Agent — here's what's new 🧵 🤝 Agent Teams Multi-agent, multi-stage parallel execution on desktop. Adversarial quality gates between phases. Spin up agents across roles — run your own one-person company. 🧠 Mavis — your personal AI chief of staff Lark, WeChat, Telegram. Remote desktop control from your phone. Persistent memory that compounds the longer you use it. 🎯 One subscription, everything unlocked TokenPlan + Agent Plan merged. CLI, API, Agent — all in. Every model: M2.7, music, video, voice. Flexible credits shared across Agent and API. Already on both plans? Free extra month on us. 🔓 Open-source incoming — Teams, Mavis, all of it.
English
CloudAI-X retweetledi
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
Actually I need to know which model in @opencode Go is best for UI.
Codex was able to cook the app, but the UI left much to be desired.
Shikhar@shikhr_
Might as well use OpenCode Go since Codex limits are dead right now. Which models work best?
English
How to upgrade from firepass 1.0 to firepass 2.0 for using kimi k2.6 turbo? @FireworksAI_HQ
English
Btw I have been using coding agents for mostly deep research works and @badlogicgames pi agent is the most accurate one , completely moved to pi and customized my deep research skills/extensions with gpt-5.5
English
Great walkthrough for @warpdotdev and oz agent from @BHolmesDev
Warp is such a great experience so if you are looking for a terminal, definitely check out.
youtube.com/watch?v=CIuiyu…
YouTube
English
Highly suggest, it is smooth and accurate. Works perfect with Claude Code and OpenCode as a general agent use
Laevitas@laevitas1
github.com/Laevitas/cli The CLI is evolving, if you have an api key or x402, come test it out!
English
Btw @NousResearch hermes agent is perfect for learning or improving language
I have been studying Spanish 1-2 hours a day with it for the past week and it really pays off
English
@BHolmesDev What do you think about scientific research? Article/topic review, generating deep research reports?
English
Tbh, people are underrating Gemini 3 Flash for general knowledge questions outside of coding. It beats out ChatGPT and Claude for:
- Instructions on how to navigate settings and dashboards for SaaS. It's 100% accurate, while others typically hallucinate.
- Any questions relating to Maps (i.e. restaurants or landmarks nearby). A Google Maps tool call is a massive asset that ChatGPT and Claude can't match.
- Questions on books or literature. I've asked it to summarize chapters in nonfictional novels and Bible verses, and I have yet to see a hallucination. Not so for ChatGPT (haven't tried Claude for this).
- Napkin math questions for, say, finances. ChatGPT has an odd habit of saying "you're wrong about this..." then proceeding to contradict itself. Claude is good, but has the weakest research habits and rigor of the bunch.
The reason I believe Gemini is best at these things:
- Their "personality" is right down the middle. Pretty dull to talk to, but it's an information machine.
- Their web search is second to none.
- Their training set must be incredible. Likely bad for the future of publication and news... but I'm not sure how to reconcile that yet 😄
I've set my browser's default search back to Google for these reasons. The UX of instant answers in Google + a "dive deeper" button is quite nice too. What is y'all's experience with Gemini?
English
@OfficialLoganK @firstadopter gemini cli is unsuable, I just cancelled my ultra plan, it is impossible to use gemini-3.1-pro, idk how google is this bad with all the infinite resources
English
@firstadopter the engine room is running at full speed to make Gemini best in class at coding, progress is all positive : )
English
Btw @warpdotdev could be the best harness for design, pair with opus 4.7 or gpt-5.5 and see yourself
English