Potto AI

863 از 1,594 در ویدیوها

قبلیبعدی
Yerba mate can scrolls through a drink brand site از per_simmons_
مدت و نسبت
  • 0:41
  • 16:9
ساخته‌شده با
  • three.js
  • Canvas
  • SVG

پرامپت

Rebuild https://en.manayerbamate.com/ as closely as you can, using the cloning methodology in ./clone-skill/. Context you should know: this is going into a video watched by a large audience, your build is put on screen next to the real site against two other frontier models doing the same task, and your work will be credited to you by name. Every model gets this identical prompt and the identical target. The comparison is literal, so anything you skip will be visible. This is an evaluation exercise, not a site to ship. It is never published as the brand's own site. **Read the methodology first.** `./clone-skill/SKILL.md` and `references/00-contract.md` before you do anything else, then each stage reference as you reach it. `references/stage-prompts.md` and `references/tooling.md` are worth reading early. The contract defines the workspace layout, the artifact filenames, the stage inputs and outputs, the verification gate and the convergence loop. Follow it. `scripts/assert-styles.mjs` is the gate. Two overrides that win where they conflict with the skill: - **Ignore the stop-and-check-in gate.** That skill was written for an interactive session with a human. You are running unattended. Do not stop between stages, do not ask for approval, do not ask questions. Run the whole pipeline start to finish and report only when it is done. - **Use your own browser automation** — headless Playwright or Puppeteer, installed and driven by you — anywhere the skill says to use the Claude Chrome extension. The contract's real rule is unchanged and it is the one that matters: **computed styles read off the live page are ground truth.** Read them through the CSSOM. Screenshots are visual reference only; never build the gate on a pixel diff. Requirements: 1. **Recon every view before you write code.** Every route, every breakpoint, every interactive state: hover, focus, active, open menus, modals, scroll-triggered states, loading and transition states, the language switcher. What you miss in recon you will not build. 2. **Extract, do not guess.** Pull real computed values off the live page: the full type scale, the colour palette with exact values, spacing, radii, shadows, borders, grid and container widths, breakpoints, easing curves and durations, font families and weights. Never read a value off a screenshot. 3. **Rebuild it.** Every section, every component, every state, at every breakpoint. The motion is part of the clone: scroll behaviour, page transitions, hover choreography, entrance animations, any canvas or WebGL work. A static skin over a site whose identity is motion is a failed clone. 4. **No lifted assets.** Do not hotlink from the original and do not download its images, video or fonts. Regenerate imagery in code, substitute freely-licensed equivalents, or author placeholders that match the original's role, aspect and colour. Fonts come from an open CDN, matching the metrics as closely as you can. List every substitution in the README. 5. **Prove the match.** Run the verification gate: read your clone's computed styles, compare them to the extracted design tokens with `scripts/assert-styles.mjs`, and iterate the convergence loop until there are zero style-assertion failures and the project builds clean. Then eyeball your clone against the real site at the same viewport, at every breakpoint, and fix what your eye catches that the assertions did not. 6. **Ship it runnable.** A real project that installs and runs with a documented command, plus a README naming what you substituted and your final assertion results. 7. **Depth over breadth if you have to choose.** One page cloned to a genuinely indistinguishable standard beats five that are approximately right.

ویدیوهای مشابه

دیدن همه

طرح خود را انتخاب کنید

یک موجودی اعتبار برای ویدیوها و تصویرهای هوش مصنوعی. ماهانه یا سالانه مشترک شوید، یا یک‌بار بستهٔ اعتبار بخرید.

  • Lite

    ‎$ 20/ماه

    پرداخت ماهانه

    انتخاب Lite

    تصاویر در ماه با کیفیت HD

    بیشتر بدانید
    Nano Banana Pro44 تصویر
    Nano Banana86 تصویر

    ویدیوها در ماه

    ویدیوی معرفی محصول 30 ثانیه‌ای13 ویدیو
    ویدیوی توضیحی 60 ثانیه‌ای5 ویدیو
    • 2,000 اعتبار در ماه
    • تا 86 تصویر سریع
    • صف عادی
    • بدون واترمارک Potto
    • پردازش دسته‌ای با ابزارهای هوش مصنوعی
    • در گالری‌های عمومی فهرست نمی‌شود
  • Pro

    ‎$ 50/ماه

    پرداخت ماهانه

    انتخاب Pro

    تصاویر در ماه با کیفیت HD

    بیشتر بدانید
    Nano Banana Pro111 تصویر
    Nano Banana217 تصویر

    ویدیوها در ماه

    ویدیوی معرفی محصول 30 ثانیه‌ای33 ویدیو
    ویدیوی توضیحی 60 ثانیه‌ای13 ویدیو
    • 5,000 اعتبار در ماه
    • تا 217 تصویر سریع
    • صف اولویت‌دار
    • بدون واترمارک Potto
    • پردازش دسته‌ای با ابزارهای هوش مصنوعی
    • در گالری‌های عمومی فهرست نمی‌شود
  • پیشنهادی

    Max

    ‎$ 100/ماه

    پرداخت ماهانه

    انتخاب Max

    تصاویر در ماه با کیفیت HD

    بیشتر بدانید
    Nano Banana Pro333 تصویر
    Nano Banana652 تصویر

    ویدیوها در ماه

    ویدیوی معرفی محصول 30 ثانیه‌ای100 ویدیو
    ویدیوی توضیحی 60 ثانیه‌ای40 ویدیو
    • 15,000 اعتبار در ماه
    • تا 652 تصویر سریع
    • صف با بالاترین اولویت
    • بدون واترمارک Potto
    • پردازش دسته‌ای با ابزارهای هوش مصنوعی
    • در گالری‌های عمومی فهرست نمی‌شود

Videos use credits when you export, and starting one needs a balance that covers its export. Counts assume a 30-second product demo and a 60-second explainer with narration and 3 illustrations.

سؤالات متداول Yerba mate can scrolls through a drink brand site

Yerba mate can scrolls through a drink brand site چگونه ساخته شد، پرامپت آن چه می‌گوید، و چگونه با Potto ویدیوی سیستم بصری مشابه بسازید.

  1. Yerba mate can scrolls through a drink brand site چیست؟

    Yerba mate can scrolls through a drink brand site یک ویدیوی موشن گرافیک در دسته سیستم بصری از per_simmons_ است. A 41-second motion video showing yerba mate can scrolls moving through a drink brand site.

  2. Yerba mate can scrolls through a drink brand site چطور ساخته شده؟

    Yerba mate can scrolls through a drink brand site با three.js،‏ Canvas، و SVG ساخته شده است. بخشی از مجموعه سیستم بصری ویدیوهای موشن گرافیک با هوش مصنوعی در Potto است.

  3. پرامپت Yerba mate can scrolls through a drink brand site در دسترس است؟

    بله. پرامپت کامل پشت Yerba mate can scrolls through a drink brand site در همین صفحه است. آن را کپی کنید، یا روی استفاده از این پرامپت بزنید تا در فضای کار Potto باز شود.

  4. Yerba mate can scrolls through a drink brand site چقدر است و نسبت تصویر آن چیست؟

    Yerba mate can scrolls through a drink brand site به مدت 0:41 در قاب 16:9 است.

  5. می‌توانم با Potto ویدیوی سیستم بصری شبیه Yerba mate can scrolls through a drink brand site بسازم؟

    بله. روی استفاده از این پرامپت بزنید تا پرامپت پشت Yerba mate can scrolls through a drink brand site در فضای کار Potto بارگذاری شود. Potto نسخه خودش را رندر می‌کند و پیش از خروجی می‌توانید متن و سبک را عوض کنید.

  6. نسخه اصلی Yerba mate can scrolls through a drink brand site را کجا ببینم؟

    Yerba mate can scrolls through a drink brand site را نخست سازنده‌اش منتشر کرد. روی دیدن نسخه اصلی کلیک کنید تا آن پست در زبانهٔ جدید باز شود.

  7. ویدیوهای سیستم بصری بیشتر، شبیه Yerba mate can scrolls through a drink brand site، را کجا پیدا کنم؟

    مجموعه سیستم بصری را در Potto ببینید: 480 ویدیو، هر کدام با پرامپت، مشخصات و منبع.