πŸŽ‰ Exciting news! We've launched Nakxi, a powerful design tool for creating designs, app screenshots and mockups. Check it out today! πŸš€
Code & Dev Compatible: claude

Developer Docs Landing Page (SEO + DX)

Complexity Level: Expert
Prompt Code Block

Design the developer documentation homepage for [API/PRODUCT_NAME] β€” optimized for search ([PRODUCT] API docs, [PRODUCT] SDK, how to integrate [PRODUCT]) AND developer experience. --- 🎯 AUDIENCE [Backend devs | Full-stack | No-code integrators] building [USE_CASES] SDKs: [JS, Python, Go, etc.] --- πŸ“ PAGE LAYOUT 1. Hero - H1: [PRODUCT] Documentation - Sub: ship [OUTCOME] in minutes - Quickstarts: 3 cards (Popular: REST API, Webhooks, [SDK_LANGUAGE]) - Search bar prominent (cmd+K) 2. Popular guides (6 links with descriptions β€” indexable) 3. API reference teaser + OpenAPI badge 4. Code snippet block (dark theme) β€” copy button, real hello-world 5. Changelog preview (last 3 releases, link /changelog) 6. Community: Discord, GitHub, Stack Overflow 7. Support CTA --- πŸ” SEO Indexable intro copy (250+ words) explaining what the API does β€” not only a component grid Title/meta with "documentation" + "API" SoftwareApplication or TechArticle schema Breadcrumb to docs root Internal links to top 20 doc paths in HTML sitemap section (footer) --- 🎨 DESIGN Dark mode default [#0D1117] or light [Stripe-style] β€” specify Typography: excellent code font [JetBrains Mono] + clear sans Sidebar preview in hero optional --- βš™οΈ STACK [Mintlify | Docusaurus | Fumadocs | Custom Next.js] Deliver: full wireframe, copy, nav taxonomy for docs sidebar, and SEO metadata.

🌟 Example Output / Preview

### Generated Component Preview: ```typescript // Fully validated modern structure import { z } from 'zod'; export const RequestSchema = z.object({ id: z.string().uuid(), createdAt: z.date().default(() => new Date()), data: z.record(z.string(), z.any()) }); export type ValidatedRequest = z.infer<typeof RequestSchema>; ```

Prompt Metadata

DifficultyExpert
Compatibilityclaude

Primary Use Cases:

  • β€’Legacy code modernization & technical refactoring
  • β€’Full-stack layout generation & component structuring
  • β€’CI/CD workflow automation & unit/E2E testing suites

Associated Tags:

#docs #developer #seo #api #landing-page

πŸ’‘ Pro Tips & Advice

1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.

2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.

πŸ”— Related AI Prompts

Code & Dev
β˜… Featured

Full SaaS Landing Page Build Spec (SEO + Conversion)

You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...

Compatible:claudeDiff:Advanced
#landing-page #saas #seo #nextjs #tailwind
Code & Dev
β˜… Featured πŸ”₯ Trending

SaaS Analytics Dashboard Full Build Spec

You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...

Compatible:claudeDiff:Intermediate
#dashboard #saas #ui #tailwind #seo
Code & Dev

SaaS Admin Panel Dashboard Build Spec

Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...

Compatible:claudeDiff:Intermediate
#admin #dashboard #saas #crud #tailwind