它会怎么做

从 SKILL.md 抽出的真实步骤，Agent 就是按这个顺序执行的。

01
Collect the product facts
Ask for (or infer from what the user gave): product name, one-line promise, the work objects the tool manages (issues, incidents, deploys, tickets...), the three views worth showing in the hero, five capabilities for the bento, how it connects to the developer workflow (branches,
02
Choose the output target
03
Plan sections and copy
Follow `references/section-inventory.md`. Keep the signature order: hero with the product window, wordmark marquee, metric cards, workspace bento, cycles tabs on the mint band, developer workflow, evaluation path, security, customers (quote carousel and story card), pricing, FAQ,
04
Plan and produce the imagery
Use `references/image-plan.md`. The product is drawn in HTML/CSS/SVG and is never a photo or a generated screenshot. Write one art-direction sentence, then define photo slots by role, only where a real company site uses photography: customer portraits for the quote carousel, the
05
Build to the craft bar
06
Single-file build and sandbox constraints
Build the single file with `node scripts/inline-assets.mjs <source.html> <index.html>`: it inlines every `images/`, `fonts/` and `assets/` reference as a data URI, downloads each `https://cdn.jsdelivr.net/fontsource/fonts/...woff2` named in the `@font-face` rules once and embeds

包里有什么

29 个文件 · 887 KB

SKILL.mddoc · 17 KB
references/icon-library.mddoc · 3 KB
references/image-plan.mddoc · 6 KB
references/images/av-amaya.webpmedia · 2 KB
references/images/av-daniel.webpmedia · 2 KB
references/images/av-felix.webpmedia · 2 KB
references/images/av-ingrid.webpmedia · 2 KB
references/images/av-lucia.webpmedia · 3 KB
references/images/av-mara.webpmedia · 2 KB
references/images/av-noor.webpmedia · 2 KB
references/images/av-owen.webpmedia · 2 KB
references/images/av-tobi.webpmedia · 2 KB
references/images/qf-amara.webpmedia · 2 KB
references/images/qf-jonas.webpmedia · 2 KB
references/images/qf-kenji.webpmedia · 2 KB
references/images/qf-rhea.webpmedia · 2 KB
references/images/quote-amara.webpmedia · 61 KB
references/images/quote-jonas.webpmedia · 71 KB
references/images/quote-kenji.webpmedia · 51 KB
references/images/quote-rhea.webpmedia · 65 KB
references/images/story-vantri.webpmedia · 143 KB
references/images/team-tracklane.webpmedia · 135 KB
references/motion-system.mddoc · 4 KB
references/quality-checklist.mddoc · 4 KB
references/section-inventory.mddoc · 5 KB
references/style-guide.mddoc · 10 KB
references/template.htmlweb · 262 KB
scripts/inline-assets.mjscode · 5 KB
scripts/validate-template.mjscode · 18 KB

免费网页与落地页

轨道协作落地站

暖沙底加薄荷色带的开发者工具站，Inter Tight 标题与克制的分栏 hero。

文件: 29
脚本: 2
源文件: 887 KB

下载 ZIP · 654 KB

装到哪

mkdir -p ~/.agents/skills
unzip bs-tracklane-devtool-landing.zip -d ~/.agents/skills/

其他 Agent 的安装路径

需要准备

· 运行环境：node

网页落地页开发者工具浅色

原始的英文说明来自 SKILL.md

Build a complete developer-tool marketing site in the tracklane style: warm sand canvas with mint section bands, near-black ink, calm Inter Tight headlines and a quiet split hero: a one-line headline, muted subtitle, four feature notes and a crisp live product window (board, cycle burn-up, roadmap) on the right. Includes a customer wordmark marquee, gradient metric cards, a five-tile workspace bento, tabbed cycles section, developer workflow with CLI, Git and API tabs, an evaluation path for technical buyers, security, a quote carousel with customer story, pricing with a billing switch, FAQ and sign-up CTA, plus pricing comparison, changelog, sign-in, sign-up, book-a-demo, security, customer story, company, legal and 404 routes and a working dark theme. Use for issue trackers, planning tools, dev tools and B2B SaaS, as standalone HTML or ported into Next.js, React, Vue, Svelte or Astro.

接着看