Guides / Adapt a template / Developer tools
How to adapt an animated website template for a developer tool
To adapt an animated website template for a developer tool, start from Quillstone AI Code Editor with a Particle Swarm, Code River Landing, Swiftpine Bird Flock Sweeping a Pine Valley or the closest fit, keep the hero with an install command, hide abstract art chapters without code, add a copy-ready quickstart, and apply the developer tools style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit developer tools, APIs and open source projects best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Quillstone AI Code Editor with a Particle Swarm
Particles circling live code and splitting into agents suit an editor or agent tool.
Pick 2 · Pro
Code River Landing
A river of syntax-highlighted code shows the product the way developers read it.
Pick 3 · Pro
Swiftpine Bird Flock Sweeping a Pine Valley
Two streams splitting from a flock is a clean picture for sync, queues and realtime APIs.
What to change for a developer tool
Keep
- The hero with an install command
- A real code sample
- The docs link
- The pricing or open source section
Hide
- Abstract art chapters without code
- Marketing claims with no benchmark
Add
- A copy-ready quickstart
- A GitHub star link and license
- A changelog
- A status page
Copy angles
- Put the install command in the hero.
- Show the smallest working example.
- Be exact about versions, limits and pricing.
Trust elements
- Open source license named
- Real benchmark method
- Maintainer names
- Public roadmap
Compliance notes to check
- State the license of your code and any dependencies you ship.
- Disclose telemetry and what it collects.
- Publish benchmarks only with the method used.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Quillstone AI Code Editor with a Particle Swarm and works for the other two picks if you change the name and slug. The example client is Pinecone Forge, an open source job queue maintained from Seattle, Washington.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "quillstone-code-editor", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Quillstone AI Code Editor with a Particle Swarm" (slug: quillstone-code-editor) into a website for a developer tool.
Example client: Pinecone Forge, an open source job queue maintained from Seattle, Washington. Replace it with my real business details, which I will give you.
Keep:
- The hero with an install command
- A real code sample
- The docs link
- The pricing or open source section
Hide:
- Abstract art chapters without code
- Marketing claims with no benchmark
Add:
- A copy-ready quickstart
- A GitHub star link and license
- A changelog
- A status page
Copy angles:
- Put the install command in the hero.
- Show the smallest working example.
- Be exact about versions, limits and pricing.
Trust elements to include only if I can supply them:
- Open source license named
- Real benchmark method
- Maintainer names
- Public roadmap
Style: use the CSS variables and fonts from the Developer tools style pack. Motion intensity: Medium. Keep code blocks and docs fully still. Motion belongs in the hero and nowhere developers read.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Developer tools style pack
Technical, dark and code-first. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Lagoon
#38e8c6
Accent
Deep Cobalt
#121827
Surface
Void
#05070f
Background
Pale Cobalt
#e8edf7
Text
Type pairing (Google Fonts)
- Display Space GroteskSpecimen ↗
- Body InterSpecimen ↗
Motion intensity: Medium
Keep code blocks and docs fully still. Motion belongs in the hero and nowhere developers read.
The CSS export includes the Google Fonts import and motion variables.
# Developer tools style pack, Style Reference > Technical, dark and code-first **Theme:** dark · **Template:** Developer tools style pack (https://animatedwebs.com/guides/adapt/developer-tools) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lagoon | `#38e8c6` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Cobalt | `#121827` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#05070f` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Pale Cobalt | `#e8edf7` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Space Grotesk, Space Grotesk 600 - **Body:** Inter, Inter 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Keep code blocks and docs fully still. Motion belongs in the hero and nowhere developers read. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Lagoon (`#38e8c6`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Space Grotesk + Inter
Questions
Which template is best for a developer tool?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a developer tool site keep, hide and add?+
Keep the hero with an install command and a real code sample. Hide abstract art chapters without code. Add a copy-ready quickstart and a github star link and license.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.