Files
workbuddy_skills/open-design/design-systems/ollama/components.html
T
admin 5afeb6b78a ④段整套同步(六节 + 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。
2026-10-15 21:17:28 +08:00

701 lines
24 KiB
HTML

<!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>