Kai Nakamura

@kainaka

Designer, photographer, part-time ceramicist. Tokyo / Berlin.

Portfolio, Shop, Print Store, Newsletter

https://example.com, https://example.com/shop, https://example.com/prints, https://example.com/newsletter

<div style="background:#000;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
  <div style="max-width:400px;width:100%;text-align:center">
    <img src="{{avatar:image}}" alt="" style="width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block;border:3px solid #333" />
    <h1 style="color:#fff;font-size:1.2rem;font-weight:700;margin:0 0 4px">{{display_name:string}}</h1>
    <p style="color:#888;font-size:0.85rem;margin:0 0 8px">@{{handle:string}}</p>
    <p style="color:#aaa;font-size:0.85rem;line-height:1.5;margin:0 0 32px">{{bio:string}}</p>
    <div style="display:flex;flex-direction:column;gap:12px">
      <p style="color:#ccc;font-size:0.9rem;line-height:2.5">{{link_labels:list&lt;string&gt;}}</p>
      <p style="color:#666;font-size:0.75rem;line-height:2">{{links:list&lt;link&gt;}}</p>
    </div>
  </div>
</div>

Link in Bio

Linktree-style link aggregator with avatar, name, bio, and stacked link buttons.

by DesignGenerate 1 stars 1 renders 0 forks

Use This Template View Full Page Sign in to star

Schema

Field	Type
`display_name`	`string`
`handle`	`string`
`avatar`	`image`
`bio`	`string`
`links`	`list<link>`
`link_labels`	`list<string>`

Apply Values

POST JSON to the API endpoint:

POST /api/templates/link-in-bio/apply
Content-Type: application/json

{
  "display_name": "Kai Nakamura",
  "handle": "kainaka",
  "avatar": "/images/defaults/avatar-linkinbio.webp",
  "bio": "Designer, photographer, part-time ceramicist. Tokyo / Berlin.",
  "links": [
    "https://example.com",
    "https://example.com/shop",
    "https://example.com/prints",
    "https://example.com/newsletter"
  ],
  "link_labels": [
    "Portfolio",
    "Shop",
    "Print Store",
    "Newsletter"
  ]
}

AI Prompt

Copy this prompt to generate a compatible template with any LLM:

You are an expert frontend designer.
Create a beautiful, modern HTML template for "Link in Bio" that strictly follows the constraints and schema below.

## Constraints
- Style everything using inline style="" attributes only (no external CSS, no <link>, no <style> tags)
- Do NOT use: <script>, <iframe>, <form>, <input>, <textarea>, <button>, <select>, <object>, <embed>, <details>, <dialog>
- Place data placeholders using this syntax: {{display_name:string}}, {{handle:string}}, {{avatar:image}}
- The template must be a single HTML fragment (no <html>, <head>, or <body> tags)
- Use system fonts: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif (or Georgia, serif for editorial)

## JSON Schema
```json
{
  "display_name": "string",
  "handle": "string",
  "avatar": "image",
  "bio": "string",
  "links": [
    "link"
  ],
  "link_labels": [
    "string"
  ]
}
```

## Placeholder Syntax
Each data point uses `{{key:type}}` — for example:
- `{{display_name:string}}` → string
- `{{handle:string}}` → string
- `{{avatar:image}}` → image
- `{{bio:string}}` → string
- `{{links:list<link>}}` → list<link>
- `{{link_labels:list<string>}}` → list<string>

Output ONLY the HTML code block. No explanation.

← All Templates