④段整套同步(六节 + P/S/F/J + 模板)+ open-design 移到技能根
一、④段整套同步(用户选候选 A)
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`(16 KB/247 行,从备份拷、转 LF)。
- ④段 SKILL.md 换成备份 15:28 那版,并按模板口径改齐:
· 「产品文档框架」从「四块+一附录」改成**六节** —— 页面结构/功能清单/使用场景/操作流程/
跨页与界面状态/待确认与偏离;与模板同构,⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面/S 场景/F 功能/J 二级功能**,各自唯一、按展示顺序通排。
· 保留旧版有价值的要求:每项功能补齐 做什么/入口在哪/输入边界/异常与恢复;重点功能三处标红;
横向流程图每步写清页面/功能/操作/完成判据。
· 完成标准「七节」→「六节」,自查清单同步换掉「需求」那批条目,补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`(2 处)。
· 补回本机那条「每份产出文档开头都要有一张图」的引用(指向主 skill,段内不复述)。
- 主 skill 同步:四段结构表④行、④段沿革、画图小节(④段画页面结构图 + 用户路径)。
二、open-design 移到技能根(用户选候选 A)
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`(4178 文件)。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处:路径形态 `assets/open-design/...` → `<技能根>/open-design/...`;
「随段携带的自带件」改称「同根技能」;「路径怎么找」那条改成自带件(段内相对路径)与
同根技能(`<技能根>/<技能名>/`)两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步(它现在与 oil-ui-pro 同层)。
- 副作用(有益):命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了;现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent = 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0;工作区 CRLF 文件 0。
This commit is contained in:
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,700 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ollama — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/ollama. Every visible
|
||||
value comes from tokens.css; if the agent paste-replaces the
|
||||
:root block and reuses the component selectors below verbatim,
|
||||
the artifact passes lint without further audit."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #fafafa;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #000000;
|
||||
--fg-2: #262626;
|
||||
--muted: #737373;
|
||||
--meta: #a3a3a3;
|
||||
|
||||
--border: #e5e5e5;
|
||||
--border-soft: var(--border);
|
||||
|
||||
--accent: #000000;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #262626;
|
||||
--accent-active: #404040;
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display: "SF Pro Rounded", system-ui, -apple-system, system-ui;
|
||||
--font-body: ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 48px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1;
|
||||
--tracking-display: 0;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 112px;
|
||||
--section-y-tablet: 88px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
--radius-sm: 9999px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 9999px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 0 0 1px var(--border);
|
||||
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, #3b82f6, transparent 50%);
|
||||
|
||||
--motion-fast: 100ms;
|
||||
--motion-base: 140ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section {
|
||||
padding-block: var(--section-y-desktop);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Navigation ────────────────────────────────────────── */
|
||||
/* Transparent on white per DESIGN.md §4 — no background,
|
||||
no border, just the wordmark, three text links, and a
|
||||
black pill CTA. */
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6);
|
||||
padding-block: var(--space-5);
|
||||
}
|
||||
.nav-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
.nav-brand svg { display: block; }
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
margin-inline-start: var(--space-4);
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--fg);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-spacer { flex: 1; }
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.nav-signin {
|
||||
color: var(--fg);
|
||||
font-size: var(--text-base);
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.nav-links, .nav-signin { display: none; }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-display);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); color: var(--fg); }
|
||||
h2 { font-size: var(--text-3xl); color: var(--fg); }
|
||||
h3 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 400;
|
||||
line-height: 1.33;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--muted);
|
||||
line-height: 1.56;
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-5 > * + * { margin-block-start: var(--space-5); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons (every interactive radius is pill) ─────────── */
|
||||
/* DESIGN.md §4 — three pill variants, all 10px 24px padding,
|
||||
all 9999px radius. The accent role is fulfilled by the
|
||||
black pill; the gray pill is the calmer affirmative; the
|
||||
outlined pill is the secondary action on white. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px var(--space-6);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: inherit;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
border-color: var(--accent-hover);
|
||||
}
|
||||
.btn-primary:active {
|
||||
background: var(--accent-active);
|
||||
border-color: var(--accent-active);
|
||||
}
|
||||
.btn-gray {
|
||||
background: var(--border);
|
||||
color: var(--fg-2);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-gray:hover {
|
||||
background: color-mix(in oklab, var(--border), var(--fg) 6%);
|
||||
border-color: color-mix(in oklab, var(--border), var(--fg) 6%);
|
||||
}
|
||||
.btn-outline {
|
||||
background: var(--bg);
|
||||
color: var(--fg-2);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-outline:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* ─── Pill tabs ─────────────────────────────────────────── */
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1);
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.tab {
|
||||
padding: 6px var(--space-4);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tab[aria-selected="true"] {
|
||||
background: var(--border);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.tab:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
/* ─── Inputs (pill search / form fields) ────────────────── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.field label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.field input {
|
||||
padding: 10px var(--space-5);
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
padding-inline-start: var(--space-5);
|
||||
}
|
||||
|
||||
/* ─── Cards (the only non-pill radius) ──────────────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.card h3 { color: var(--fg); }
|
||||
|
||||
/* ─── Terminal block ────────────────────────────────────── */
|
||||
/* 12px-radius bordered container per DESIGN.md §4, no shadow.
|
||||
Mono inside, with a pill copy button on the right. */
|
||||
.terminal {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-base);
|
||||
color: var(--fg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.terminal-prompt { color: var(--meta); user-select: none; }
|
||||
.terminal-cmd { color: var(--fg-2); flex: 1; }
|
||||
.terminal-copy {
|
||||
padding: 4px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
.terminal-copy:hover { background: var(--surface); }
|
||||
.terminal-copy:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
/* ─── Tag pills ─────────────────────────────────────────── */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--border);
|
||||
color: var(--fg-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a.text-link {
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
a.text-link:hover { border-bottom-color: var(--fg); }
|
||||
|
||||
/* ─── Section-specific layout ───────────────────────────── */
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
.hero h1 { max-width: 18ch; }
|
||||
.hero .lead { max-width: 56ch; }
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-terminal {
|
||||
margin-block-start: var(--space-6);
|
||||
width: min(640px, 100%);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.feature-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.signup {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-12) var(--space-8);
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.signup {
|
||||
grid-template-columns: 1fr;
|
||||
padding: var(--space-8);
|
||||
gap: var(--space-6);
|
||||
}
|
||||
}
|
||||
.signup-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.signup-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.signup-row .field { flex: 1; }
|
||||
@media (max-width: 639px) {
|
||||
.signup-row { flex-direction: column; }
|
||||
}
|
||||
|
||||
.footnote {
|
||||
margin-block-start: var(--space-12);
|
||||
padding-block-start: var(--space-6);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
color: var(--meta);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
NAV — transparent on white, three text links, pill CTA.
|
||||
Exercises: .nav, .nav-brand, .nav-links, .btn-primary.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<header class="nav" aria-label="Primary">
|
||||
<a href="#" class="nav-brand">
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M7 14c0-3 1.5-5 5-5s5 2 5 5v5H7v-5z" />
|
||||
<path d="M9 9V6a3 3 0 0 1 6 0v3" />
|
||||
<circle cx="10" cy="13" r="0.6" fill="currentColor" stroke="none" />
|
||||
<circle cx="14" cy="13" r="0.6" fill="currentColor" stroke="none" />
|
||||
<path d="M11 16h2" />
|
||||
</svg>
|
||||
Ollama
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Sections">
|
||||
<a href="#models">Models</a>
|
||||
<a href="#docs">Docs</a>
|
||||
<a href="#blog">Blog</a>
|
||||
</nav>
|
||||
<span class="nav-spacer"></span>
|
||||
<div class="nav-actions">
|
||||
<a href="#signin" class="nav-signin">Sign in</a>
|
||||
<a href="#download" class="btn btn-primary">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
HERO — centered single column. Exercises h1, .lead,
|
||||
.btn-primary, .btn-gray, .terminal, --section-y-* rhythm.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="hero" aria-labelledby="hero-heading">
|
||||
<div class="hero">
|
||||
<p class="eyebrow">ollama · run open models locally</p>
|
||||
<h1 id="hero-heading">
|
||||
Run large language models on your own machine.
|
||||
</h1>
|
||||
<p class="lead">
|
||||
Pull an open model, run it offline, and chat with it from
|
||||
your terminal or your app. No accounts, no API keys, no
|
||||
tokens billed by the thousand — your machine is the server.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#download" class="btn btn-primary">
|
||||
Download for macOS
|
||||
</a>
|
||||
<a href="#docs" class="btn btn-gray">
|
||||
Read the docs
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-terminal">
|
||||
<div class="terminal" role="figure" aria-label="Example command">
|
||||
<span class="terminal-prompt">$</span>
|
||||
<span class="terminal-cmd">ollama run llama3.2</span>
|
||||
<button type="button" class="terminal-copy" aria-label="Copy command">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FEATURES — three cards, plain border, 12px radius.
|
||||
Exercises h2, .card, .tag, .features-grid, mono accents.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="features" aria-labelledby="features-heading">
|
||||
<div class="stack-4" style="text-align: center; margin-block-end: var(--space-12);">
|
||||
<p class="eyebrow">what ollama does</p>
|
||||
<h2 id="features-heading" style="margin-inline: auto; max-width: 22ch;">
|
||||
One command. Any model. On your hardware.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card">
|
||||
<svg
|
||||
class="feature-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 3v12" />
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
<path d="M4 21h16" />
|
||||
</svg>
|
||||
<h3>Pull a model</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Browse a catalog of open models — Llama, Mistral, Gemma,
|
||||
Qwen, DeepSeek — and download with a single command. Models
|
||||
live on your disk, not on someone else's server.
|
||||
</p>
|
||||
<div class="tag-row">
|
||||
<span class="tag">llama3.2</span>
|
||||
<span class="tag">mistral</span>
|
||||
<span class="tag">gemma3</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<svg
|
||||
class="feature-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||
<path d="M3 9h18" />
|
||||
<path d="M8 14h4" />
|
||||
</svg>
|
||||
<h3>Talk to it</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Chat from the terminal, or call the OpenAI-compatible
|
||||
local API from any language. Streaming, tool calls, and
|
||||
structured output work the same as the hosted runtimes
|
||||
your app already targets.
|
||||
</p>
|
||||
<div class="tag-row">
|
||||
<span class="tag">http://localhost:11434</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<svg
|
||||
class="feature-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="6" cy="6" r="2" />
|
||||
<circle cx="18" cy="6" r="2" />
|
||||
<circle cx="6" cy="18" r="2" />
|
||||
<circle cx="18" cy="18" r="2" />
|
||||
<path d="M8 6h8M8 18h8M6 8v8M18 8v8" />
|
||||
</svg>
|
||||
<h3>Plug it in</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Drop Ollama behind the agent framework, IDE plugin, or
|
||||
chat client you already use — LangChain, OpenWebUI,
|
||||
Continue, your homegrown CLI. The runtime stays out of
|
||||
the way.
|
||||
</p>
|
||||
<div class="tag-row">
|
||||
<span class="tag">langchain</span>
|
||||
<span class="tag">opencode</span>
|
||||
<span class="tag">continue</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FORM — pill input + black pill submit. Exercises .field,
|
||||
input :focus-visible, .btn-primary (reused), .field-help.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="signup" aria-labelledby="signup-heading">
|
||||
<div class="signup">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">stay close to the work</p>
|
||||
<h2 id="signup-heading" style="max-width: 16ch;">
|
||||
Get a note when a new model lands.
|
||||
</h2>
|
||||
<p class="body-muted">
|
||||
Roughly one email a month — release notes for new models,
|
||||
changelog highlights, and the occasional benchmark. No
|
||||
marketing, no upsells, unsubscribe in one click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="signup-form" onsubmit="event.preventDefault();">
|
||||
<div class="signup-row">
|
||||
<div class="field">
|
||||
<label for="signup-email" class="body-sm">Email</label>
|
||||
<input
|
||||
id="signup-email"
|
||||
type="email"
|
||||
placeholder="[email protected]"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" style="align-self: end;">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
<p class="field-help">
|
||||
We use the address only to send release notes. See the
|
||||
<a href="#privacy" class="text-link">privacy note</a>.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="footnote">
|
||||
<span>© Ollama · run open models locally</span>
|
||||
<span>v0.5.0 · <a href="#changelog" class="text-link" style="color: inherit;">changelog</a></span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user