# Design Link In Bio > Generate a minimal single-column standalone HTML page — mobile-first at 375px width — for use as a link-in-bio destination. Contains: name/wordmark, short tagline, list of links (each a styled block), social footer. Self-contained, works offline, deployable as-is to GitHub Pages or Netlify. Reads ./design//DESIGN.md, tokens.css, and components.html. Triggers include "link in bio", "linktree replacement", "bio page", "/link-in-bio". - Skill: `slogsdon/design-link-in-bio` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add slogsdon/design-link-in-bio` - Raw SKILL.md: https://api.skillmd.com/api/skills/slogsdon/design-link-in-bio/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: slogsdon (https://skillmd.com/u/slogsdon) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/slogsdon/design-link-in-bio --- # Skill: link-in-bio Produces a deliverable mobile-first HTML page at 375px primary design width (with a centered-on-desktop fallback that maintains the column constraint). This is **NOT** a screenshot artifact — it's a real page meant to be deployed to a static host (GitHub Pages, Netlify, Vercel) as a `link-in-bio` destination from social profiles. The format is functionally identical to a Linktree-style page, but the visual treatment commits to the brand's editorial register rather than the rounded-button-stack template that all link-in-bio services produce by default. ## When to use - User wants a link-in-bio page (replaces or complements Linktree, Beacons, etc.) - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, name (or wordmark text), tagline (1 line, max ~10 words) - **Required:** array of links — each with `label` + `url`, optional `meta` (e.g. "GitHub" + "github.com/shane" + "Open source") - **Optional:** social handles for footer (Twitter/X, GitHub, etc.) - **Optional:** "current" indicator — one link can be marked as "current" (e.g. the latest piece, the next event) ## Output `./design//artifacts/link-in-bio.html` (single file — overwrite OK; canonical bio page for the brand) ## Steps ### 1. Verify brand exists ```bash test -f ./design//tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Name / wordmark — how the brand displays at the top 2. Tagline — 1 line, max 10 words, sentence-case ending in period per brand voice 3. Links — list of label + URL pairs, in display order. Optionally per-link meta description (1 sentence). 4. Social footer handles — Twitter/X, GitHub, etc. 5. Optional: which link (if any) is "current" — gets the brand accent treatment ``` ### 3. Pick variation — overall register The link-in-bio is small surface area, so the variation lever is the OVERALL register: - `editorial-cream` — cream page, Fraunces wordmark, link entries as numbered list with hairline rules. Most editorial. - `inverted` — full dark inversion canvas (canonical v2 feature treatment). Reads as confident; rare for link-in-bio formats which lean cheerful by default. - `mono-stack` — mono-led, technical register. Each link as a code-style row. Best for engineering-audience brands. - `chrome-led` — wordmark + tagline + buttons-vertical-stack. **Last resort.** This is the Linktree default the skill exists to avoid. ### 4. Generate the HTML Template: ```html [name] — links

[name / wordmark]

[tagline]

  1. 01 [link 1 label][optional meta] →
``` ### 5. Verify - [ ] Page renders correctly at 375px width AND at desktop widths (centered, max 375px column) - [ ] No JavaScript required for any functionality - [ ] Variation register documented — NOT `chrome-led` unless explicitly justified - [ ] Links use the numbered-row pattern, NOT vertically stacked rounded buttons (the Linktree-default tell) - [ ] At MOST one link marked as "current" (per brand-canonical use of accent) - [ ] **Read `../../design-anti-patterns.md` and verify the page violates none of its rules.** Pay special attention to sections 1 (no orbs, no gradients, no decorative imagery), 2 (no italics-emphasis OR single-word color emphasis as default — except the "current" link uses accent semantically, which is allowed), and 4 (architecture must reach inner blocks) - [ ] All copy is sentence-case per brand voice - [ ] Self-contained — opens correctly when double-clicked from Finder (no broken external paths) > Link-in-bio page generated at `./design//artifacts/link-in-bio.html`. > > Variation register: ``. Open in a browser at 375px AND desktop widths to verify the column layout holds. > > To deploy: drop the file on any static host (GitHub Pages, Netlify, Vercel) at `index.html` of a subdomain or path. Update the `` and meta description with brand-specific copy. ## Anti-Slop Rules Governed by three shared canonical references — read them, do not restate them: - **`../../design-anti-patterns.md`** — the hard floor. Wins every conflict. - **`../../design-principles.md`** — the craft floor (typographic hierarchy, spatial rhythm, color theory, layout logic, visual tension). - **`../../design-variation-sop.md`** — the named-aesthetic roster + the procedure for varying every invocation. **Forbidden (fast scan — the references hold the full list):** - Indigo/violet/purple as default accent or primary — the `hsl(230–280)` family on a near-white surface. The single loudest AI tell. - Purple→blue / "aurora" / gradient-mesh backgrounds; gradient-fill text. - Glassmorphism without an explicit AA-contrast scrim; floating gradient "blobs" as atmosphere. - The three-up icon-card feature grid; the "hero → 3 cards → CTA" median skeleton. - One global border-radius on every element; timid evenly-weighted low-contrast palette. - Inter / Roboto / Arial / Open Sans / Lato / Helvetica / system as the primary family (Space Grotesk = yellow flag). Use a category-matched stack from the variation roster. - Value-free CTAs ("Get Started", "Learn More", "Sign Up"); the two-CTA hero. Name the real action and its value. **Required variation (every invocation):** - Make at least **two** intentional decisions that differ from the safe defaults (palette, layout structure, typographic voice, or spatial density) AND from the most recent artifact in this brand. - Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1). - Sketch **three distinct directions**, offer them as a one-line menu, generate the best-fit by default, all three only if asked (variation-sop Rule 3). **Authenticity:** prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders. ## Rules - **Deliverable HTML, not a screenshot artifact.** No `.canvas` div. The page IS the deliverable. - **375px design width, centered on desktop.** This is a mobile-first format because that's where the audience clicks from social bios. - **Numbered list, not button stack.** The link rows are list items with hairline separators — not card-styled rounded buttons. - **CSS-only.** No JavaScript. The page works with JS disabled. - **Accent used at most once per page.** Reserved for the "current" link or absent entirely. - **Token-pure.** Every visual value via `var(--*)` from tokens.css. - **Anti-pattern compliance.** This skill defers to three shared canonical references: `../../design-anti-patterns.md` (the hard floor — wins every conflict), `../../design-principles.md` (the craft floor), and `../../design-variation-sop.md` (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list. Specific anti-pattern this format invites: the Linktree-default vertical button stack. Avoid it.