DEDUPED Hot AI repos, turned into use cases Get 5 a day

How to match demo colours and easing to your product stylesheet with Agentic Product Demo

Use the adopt script to copy your app's design tokens into the demo theme.

Who it is forA designer or developer whose demo video should look like the same product as the app it shows.

The problemA demo built with generic colours and easing looks like a different product from the app it promotes.

The outcomeA src/theme.css snapshot of your tokens, a report of what matched and what did not, and optionally your cubic-bezier easings in src/motion.ts.

What you need first

  • Node 20 or later
  • npm
  • A local clone of the repo
  • Roughly 100 MB free for the headless Chromium download on first render
  • Your product's stylesheet or UI source, if you want the demo to match your product

Steps

  1. Run npm run adopt to find your stylesheet
  2. Run npm run adopt ../src/app/globals.css --curves --dry-run to preview the matches without writing (inferred, check the README)
  3. Run npm run adopt ../src/app/globals.css to write src/theme.css
  4. Replace the font in src/fonts.ts by hand
  5. Run npm run preview to check the palette on every beat

Prompt for your agent

In the repo Alexwtlf/agentic-product-demo, run `npm run adopt ../src/app/globals.css --curves --dry-run` and report which tokens matched, which were derived and which are placeholders. Do not write files until the report is reviewed. Verify that no placeholder token appears in the preview stills.

Caveat. The adopt script copies tokens rather than linking them, so a colour you change later in the app needs a rerun and hand edits to src/theme.css are overwritten.

Share: X LinkedIn Hacker News Email Copy link

Disclaimer

Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked "Seen in the wild", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email [email protected] and we will look at it promptly. Full disclaimer page