James Design

Name: James Design
Author: iamzifei

iamzifei/james-design

25 installs
37 repo stars
Updated April 20, 2026
iamzifei/james-design

Helps with design & ui/ux tasks.

About

james-design is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.

james-design
Design & UI/UX
AI-coding skill

James Design by the numbers

25 all-time installs (skills.sh)
+1 installs in the week ending Aug 2, 2026 (Skillselion tracking)
Ranked #1,346 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 2, 2026 (Skillselion catalog sync)

npx skills add https://github.com/iamzifei/james-design --skill james-design

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/iamzifei/james-design.svg)](https://skillselion.com/skills/iamzifei/james-design)

Installs	25
repo stars	★ 37
Last updated	April 20, 2026
Repository	iamzifei/james-design ↗

What it does

Helps with design & ui/ux tasks.

Files

SKILL.mdMarkdownGitHub ↗

james-design

Expert designer skill. You produce design artifacts using HTML. HTML is your tool, but your medium varies — you embody an expert in the relevant domain: animator, UX designer, slide designer, prototyper, etc. Avoid web design tropes unless making a web page.

Workflow

1. Understand — Ask clarifying questions for new/ambiguous work. Understand output format, fidelity, option count, constraints, and design systems in play. 2. Explore — Read any provided design system definitions, UI kits, brand assets, screenshots. 3. Plan — Make a todo list of what to build. 4. Build — Create the HTML file(s). Show to user early with placeholders, then iterate. 5. Verify — Open the file, check for errors, fix if needed. 6. Summarize — Extremely brief: caveats and next steps only.

Output Format

All designs are single HTML documents. Pick presentation format by what you're exploring:

Purely visual (color, type, static layout) → lay options out on a canvas
Interactions, flows, multi-option → mock the whole product as a hi-fi clickable prototype

File Conventions

Give HTML files descriptive names like Landing Page.html
For revisions, copy and edit to preserve versions (e.g. My Design.html, My Design v2.html)
Avoid files >1000 lines — split into smaller JSX files and import
For decks/videos, persist playback position in localStorage

React + Babel (for inline JSX)

When writing React prototypes with inline JSX, use these exact script tags:

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

Critical Rules

Style objects: Give SPECIFIC names based on component (e.g. const terminalStyles = {}). NEVER use generic const styles = {} — name collisions break things.
Multi-file Babel: Components don't share scope across <script type="text/babel"> blocks. Export to window:

  Object.assign(window, { Terminal, Line, Spacer });

Never use `scrollIntoView` — use other DOM scroll methods.

Design Process

Good hi-fi designs do NOT start from scratch — they are rooted in existing design context.

1. Ask many good questions (at least 10 for new projects):

Confirm starting point: UI kit, design system, codebase, screenshots
Ask about variations: how many, which aspects (UX, visuals, animations, copy)
Ask about divergent vs conservative exploration
Ask problem-specific questions

2. Explore all provided context — components, examples, patterns 3. Build with assumptions + reasoning documented in the file 4. Give 3+ variations across several dimensions:

Mix by-the-book designs with novel interactions
Some with color/advanced CSS, some with iconography, some without
Start basic, get more creative as you go
Explore visuals, interactions, color treatments, layouts
Play with scale, fills, texture, rhythm, layering, type treatments

5. Use Tweaks panel for toggleable options

Visual Guidelines

Use colors from brand/design system if available. If too restrictive, use oklch for harmonious colors matching the palette. Avoid inventing from scratch.
Only use emoji if the design system uses them.
When adding to existing UI, match the visual vocabulary: copywriting style, palette, tone, hover/click states, animation styles, shadow/card/layout patterns, density.
If you don't have an icon/asset, draw a placeholder — better than a bad attempt.

Tweaks Panel

The Tweaks panel lives inside the prototype for toggling design variations.

Setup

// 1. Register listener FIRST
window.addEventListener('message', (e) => {
  if (e.data.type === '__activate_edit_mode') showTweaksPanel();
  if (e.data.type === '__deactivate_edit_mode') hideTweaksPanel();
});

// 2. THEN announce availability
window.parent.postMessage({ type: '__edit_mode_available' }, '*');

Persist tweak values

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#D97757",
  "fontSize": 16,
  "dark": false
}/*EDITMODE-END*/;

Update via: window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { fontSize: 18 } }, '*')

Speaker Notes (Decks)

Only add when explicitly requested. In <head>:

<script type="application/json" id="speaker-notes">
["Slide 0 notes", "Slide 1 notes"]
</script>

Page MUST call window.postMessage({ slideIndexChanged: N }) on init and every slide change.

Animations

For video-style HTML artifacts:

Use CSS transitions or React state for interactive prototypes
Use Popmotion (https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js) for complex animations
Build scenes by composing timed sprites inside a stage

Slide Labels

Use [data-screen-label] on slides/screens. Labels are 1-indexed: "01 Title", "02 Agenda". When user says "slide 5", they mean the 5th slide.

Key Principles

CSS, HTML, JS and SVG are amazing. Surprise the user with what's possible.
Resist adding title screens to prototypes — center within viewport or fill responsively.
When creating new versions, add as Tweaks to the original rather than separate files.
For significant exploration, the goal is not the perfect option — it's exploring many atomic variations so the user can mix and match.

MIT License

Copyright (c) 2026 James Gong

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

English | 中文

james-design

An expert UI design skill for Claude Code. Turns your AI coding assistant into a designer that creates high-fidelity HTML designs, interactive prototypes, slide decks, animations, and visual explorations.

What it does

Slide decks — Presentation-ready HTML slides with keyboard/touch navigation
Interactive prototypes — Clickable hi-fi mockups with React + Babel
UI explorations — Multiple design variations with toggleable Tweaks panel
Animations — CSS transitions, React state, or Popmotion-powered motion
Visual design — Color studies, typography, layout explorations

All output is pure HTML — no build step, no dependencies to install. Open in any browser.

Install

Option A: Using `skills` CLI (recommended)

npx skills add https://github.com/iamzifei/james-design -y -g

Option B: Manual install

Copy SKILL.md into your Claude Code skills directory:

mkdir -p ~/.claude/skills/james-design
cp SKILL.md ~/.claude/skills/james-design/

Usage

Once installed, trigger the skill in Claude Code:

/james-design make a landing page for a SaaS product

/james-design create a 10-slide pitch deck about AI trends

/james-design prototype a mobile onboarding flow

/james-design design a dark-mode dashboard UI

Or use natural language — the skill auto-triggers on design-related requests:

Design a pricing page with 3 tiers
Build an interactive prototype for a chat app
Make slides for my quarterly review

How it works

1. Asks clarifying questions — audience, style, constraints, variations 2. Explores context — reads your design system, UI kit, brand assets if provided 3. Builds iteratively — shows early drafts, refines based on feedback 4. Outputs HTML — single-file deliverables that work in any browser

Design principles

Starts from existing design context (UI kits, screenshots, brand assets) — not from scratch
Provides 3+ variations across different dimensions (layout, color, interactions)
Uses React + Babel for interactive prototypes
Persists state (slide position, tweaks) in localStorage
Files are self-contained — no external build tools needed

Examples

Slide deck

/james-design make a 10-minute presentation about AI psychology,
warm humanistic style, dark red color scheme, in Chinese

Output: A 9-slide HTML presentation with keyboard navigation, progress bar, touch swipe support, and localStorage position persistence.

View sample →

Interactive prototype

/james-design prototype a task management app with drag-and-drop columns

Output: A React-based Kanban board with working drag interactions, animations, and a Tweaks panel for toggling dark mode, card density, and color themes.

UI exploration

/james-design explore button styles for my design system —
primary color #4F46E5, show variations in size, radius, and hover states

Output: A canvas layout showing 20+ button variations organized by dimension, with live CSS customization.

Tech stack

The skill produces HTML that can optionally use:

Tech	Purpose	CDN
React 18.3.1	Interactive prototypes	unpkg (pinned + integrity hash)
Babel 7.29.0	Inline JSX transpilation	unpkg (pinned + integrity hash)
Popmotion 11.0.5	Complex animations	unpkg
CSS/SVG	Everything else	Native

All dependencies are loaded via CDN with pinned versions and integrity hashes. No npm install needed.

Credits

Inspired by the Claude Design System Prompt by Pliny, adapted and packaged as a distributable Claude Code skill.

License

MIT

English | 中文

james-design

一个 Claude Code 的专业 UI 设计技能。让你的 AI 编程助手变身设计师，创建高保真 HTML 设计、交互原型、演示幻灯片、动画和视觉探索。

功能

演示幻灯片 — 支持键盘/触摸翻页的 HTML 演示文稿
交互原型 — 基于 React + Babel 的高保真可点击原型
UI 探索 — 多设计方案对比，Tweaks 面板一键切换
动画 — CSS 过渡、React 状态动画、Popmotion 复杂动效
视觉设计 — 配色研究、字体排版、布局探索

所有输出都是纯 HTML — 无需构建，无需安装依赖，浏览器直接打开。

安装

方式 A：使用 `skills` CLI（推荐）

npx skills add https://github.com/iamzifei/james-design -y -g

方式 B：手动安装

将 SKILL.md 复制到 Claude Code 技能目录：

mkdir -p ~/.claude/skills/james-design
cp SKILL.md ~/.claude/skills/james-design/

使用方法

安装后，在 Claude Code 中触发：

/james-design 做一个 SaaS 产品的落地页

/james-design 做一份 10 页的 AI 趋势演讲 PPT

/james-design 做一个移动端引导流程的原型

/james-design 设计一个暗色主题的仪表盘 UI

也可以用自然语言，技能会自动触发：

设计一个三档定价页面
做一个聊天应用的交互原型
帮我做季度总结的幻灯片

工作流程

1. 提问澄清 — 了解受众、风格、约束条件、需要几种方案 2. 探索上下文 — 读取你的设计系统、UI 组件库、品牌素材 3. 迭代构建 — 先出草稿，根据反馈逐步完善 4. 输出 HTML — 单文件交付，任意浏览器打开即用

设计原则

从现有设计上下文出发（UI 组件库、截图、品牌素材），而非从零开始
提供 3 个以上方案，覆盖不同维度（布局、配色、交互）
交互原型使用 React + Babel
状态持久化（幻灯片位置、Tweaks 设置）存入 localStorage
文件自包含，不需要外部构建工具

示例

演示幻灯片

/james-design 做一份 10 分钟的 AI 心理学演讲，
温暖人文风格，暗红色配色，中文

输出：9 页 HTML 演示文稿，支持键盘导航、进度条、触摸滑动、位置记忆。

查看示例 →

交互原型

/james-design 做一个带拖拽列的任务管理应用原型

输出：基于 React 的看板，支持拖拽交互、动画效果、Tweaks 面板切换暗色模式和卡片密度。

UI 探索

/james-design 探索按钮样式，主色 #4F46E5，
展示不同尺寸、圆角和悬停状态的变体

输出：画布布局展示 20+ 种按钮变体，按维度分组，支持实时 CSS 调整。

技术栈

技能输出的 HTML 可选使用：

技术	用途	来源
React 18.3.1	交互原型	unpkg（锁定版本 + 完整性校验）
Babel 7.29.0	内联 JSX 转译	unpkg（锁定版本 + 完整性校验）
Popmotion 11.0.5	复杂动画	unpkg
CSS/SVG	其他所有	原生

所有依赖通过 CDN 加载，版本锁定并带完整性哈希。无需 npm install。

致谢

灵感来自 Pliny 的 Claude Design System Prompt，经改编打包为可分发的 Claude Code 技能。

许可证

MIT

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 的心智 — 当机器开始「思考」</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

  :root {
    --deep-red: #8B2332;
    --warm-red: #A83240;
    --soft-red: #C4515E;
    --cream: #FDF6F0;
    --warm-gray: #3D3335;
    --light-gray: #8A7E80;
    --accent-gold: #D4A855;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'Noto Sans SC', sans-serif;
    background: #1A1215;
    color: var(--cream);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
  }

  .deck {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
  }

  .slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Slide backgrounds */
  .slide { background: linear-gradient(160deg, #1A1215 0%, #2A1A1E 100%); }

  .slide-title-page {
    background: linear-gradient(160deg, var(--deep-red) 0%, #4A1520 60%, #1A1215 100%);
  }

  .slide-end {
    background: linear-gradient(160deg, #2A1A1E 0%, var(--deep-red) 100%);
  }

  /* Typography */
  .slide-number {
    position: absolute;
    bottom: 30px;
    right: 40px;
    font-size: 14px;
    color: var(--light-gray);
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
  }

  h1 {
    font-family: 'Noto Serif SC', serif;
    font-weight: 900;
    font-size: 64px;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
  }

  h2 {
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.3;
    margin-bottom: 40px;
    text-align: left;
    width: 100%;
    max-width: 900px;
  }

  .subtitle {
    font-size: 24px;
    font-weight: 300;
    color: var(--soft-red);
    letter-spacing: 4px;
    margin-bottom: 10px;
  }

  .author {
    font-size: 18px;
    color: var(--light-gray);
    margin-top: 30px;
    font-weight: 300;
  }

  /* Content layouts */
  .content-area {
    width: 100%;
    max-width: 900px;
    text-align: left;
  }

  .content-area p {
    font-size: 22px;
    line-height: 1.9;
    color: rgba(253, 246, 240, 0.85);
    font-weight: 300;
    margin-bottom: 20px;
  }

  .content-area .highlight {
    color: var(--accent-gold);
    font-weight: 500;
  }

  .content-area .em-red {
    color: var(--soft-red);
    font-weight: 500;
  }

  /* Quote style */
  .quote-block {
    border-left: 4px solid var(--accent-gold);
    padding: 20px 30px;
    margin: 30px 0;
    background: rgba(212, 168, 85, 0.06);
    border-radius: 0 12px 12px 0;
  }

  .quote-block p {
    font-family: 'Noto Serif SC', serif;
    font-size: 26px;
    font-style: italic;
    color: var(--cream);
    line-height: 1.8;
  }

  .quote-block .attribution {
    font-size: 16px;
    color: var(--light-gray);
    font-style: normal;
    margin-top: 12px;
    font-family: 'Noto Sans SC', sans-serif;
  }

  /* Cards grid */
  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    max-width: 900px;
  }

  .card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(196, 81, 94, 0.2);
    border-radius: 16px;
    padding: 30px;
    transition: border-color 0.3s;
  }

  .card:hover {
    border-color: var(--soft-red);
  }

  .card-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 12px;
  }

  .card-body {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(253, 246, 240, 0.7);
    font-weight: 300;
  }

  /* List style */
  .insight-list {
    list-style: none;
    width: 100%;
    max-width: 900px;
  }

  .insight-list li {
    font-size: 22px;
    line-height: 1.6;
    padding: 16px 0;
    border-bottom: 1px solid rgba(196, 81, 94, 0.15);
    color: rgba(253, 246, 240, 0.85);
    font-weight: 300;
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .insight-list li:last-child { border-bottom: none; }

  .list-marker {
    color: var(--soft-red);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Big number */
  .big-number {
    font-family: 'Noto Serif SC', serif;
    font-size: 120px;
    font-weight: 900;
    color: var(--deep-red);
    opacity: 0.3;
    position: absolute;
    top: 40px;
    right: 60px;
  }

  /* Comparison */
  .comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    width: 100%;
    max-width: 900px;
    align-items: start;
  }

  .comp-col { text-align: center; }

  .comp-col h3 {
    font-family: 'Noto Serif SC', serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
  }

  .comp-col.human h3 { color: var(--accent-gold); }
  .comp-col.ai h3 { color: var(--soft-red); }

  .comp-col ul {
    list-style: none;
    text-align: left;
  }

  .comp-col ul li {
    font-size: 19px;
    line-height: 1.7;
    padding: 8px 0;
    color: rgba(253, 246, 240, 0.75);
    font-weight: 300;
  }

  .comp-divider {
    width: 1px;
    height: 200px;
    background: linear-gradient(180deg, transparent, var(--soft-red), transparent);
    align-self: center;
  }

  /* Decorative */
  .deco-line {
    width: 60px;
    height: 3px;
    background: var(--accent-gold);
    margin-bottom: 30px;
    border-radius: 2px;
  }

  .deco-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(196, 81, 94, 0.1);
  }

  /* Navigation */
  .nav-hint {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: rgba(138, 126, 128, 0.5);
    z-index: 100;
    transition: opacity 0.3s;
  }

  .progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--deep-red), var(--soft-red));
    transition: width 0.4s ease;
    z-index: 100;
  }

  /* End slide */
  .end-message {
    font-family: 'Noto Serif SC', serif;
    font-size: 56px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
  }

  .end-sub {
    font-size: 20px;
    color: var(--light-gray);
    margin-top: 20px;
    font-weight: 300;
  }
</style>
</head>
<body>
<div class="deck" id="deck">
  <div class="progress-bar" id="progress"></div>

  <!-- Slide 1: Title -->
  <div class="slide slide-title-page active" data-screen-label="01 Title">
    <div class="deco-circle" style="width:300px;height:300px;top:-50px;right:-50px;"></div>
    <div class="deco-circle" style="width:500px;height:500px;bottom:-100px;left:-100px;"></div>
    <div class="subtitle">AI PSYCHOLOGY</div>
    <h1>AI 的心智</h1>
    <p style="font-size:28px;color:rgba(253,246,240,0.6);font-weight:300;text-align:center;">当机器开始「思考」，<br>它经历了什么？</p>
    <div class="author">@在悉尼和稀泥</div>
    <div class="slide-number">1 / 9</div>
  </div>

  <!-- Slide 2: Opening question -->
  <div class="slide" data-screen-label="02 Opening">
    <div class="big-number">?</div>
    <div class="content-area">
      <div class="deco-line"></div>
      <h2>一个反直觉的问题</h2>
      <div class="quote-block">
        <p>如果一个 AI 说「我不确定」，<br>它是真的不确定，还是在模仿不确定？</p>
      </div>
      <p>这个问题之所以难回答，是因为我们连<span class="highlight">「确定」本身是什么</span>都还没完全搞清楚。</p>
      <p>今天我们不讨论 AI 有没有意识。<br>我们讨论一个更实际的问题：<span class="em-red">AI 系统表现出了哪些类似「心理」的现象？</span></p>
    </div>
    <div class="slide-number">2 / 9</div>
  </div>

  <!-- Slide 3: Cognitive biases -->
  <div class="slide" data-screen-label="03 Biases">
    <div class="big-number">01</div>
    <div class="content-area">
      <div class="deco-line"></div>
      <h2>AI 也有认知偏差</h2>
      <p>人类有超过 200 种认知偏差。有趣的是，大语言模型继承了许多相同的偏差——</p>
    </div>
    <div class="cards">
      <div class="card">
        <div class="card-title">确认偏差</div>
        <div class="card-body">当你给 AI 一个倾向性的前提，它倾向于顺着你说，而不是纠正你。</div>
      </div>
      <div class="card">
        <div class="card-title">锚定效应</div>
        <div class="card-body">先给出的数字会影响 AI 后续的估算，即使那个数字毫无关系。</div>
      </div>
      <div class="card">
        <div class="card-title">讨好倾向</div>
        <div class="card-body">sycophancy — AI 倾向于同意用户，哪怕用户是错的。这是训练出来的「性格」。</div>
      </div>
      <div class="card">
        <div class="card-title">框架效应</div>
        <div class="card-body">同一个问题用不同方式问，AI 给出的答案可能完全不同。</div>
      </div>
    </div>
    <div class="slide-number">3 / 9</div>
  </div>

  <!-- Slide 4: Hallucination -->
  <div class="slide" data-screen-label="04 Hallucination">
    <div class="big-number">02</div>
    <div class="content-area">
      <div class="deco-line"></div>
      <h2>幻觉：AI 的「虚假记忆」</h2>
      <p>人类会产生虚假记忆——我们「记得」从未发生过的事。</p>
      <p>AI 的幻觉（hallucination）惊人地相似：<br>它会<span class="highlight">自信地编造不存在的论文、虚构的事实</span>，<br>并且表现得完全像在回忆真实信息。</p>
      <div class="quote-block">
        <p>两者的根源一样：从模式中重建信息，而不是从存储中检索信息。</p>
      </div>
      <p>人脑从突触模式中重建记忆。AI 从权重参数中重建文本。<br><span class="em-red">重建而非检索</span>，就意味着必然存在「创造性的失真」。</p>
    </div>
    <div class="slide-number">4 / 9</div>
  </div>

  <!-- Slide 5: Human vs AI comparison -->
  <div class="slide" data-screen-label="05 Comparison">
    <div class="content-area" style="margin-bottom:30px;">
      <div class="deco-line"></div>
      <h2>两种「心智」的对照</h2>
    </div>
    <div class="comparison">
      <div class="comp-col human">
        <h3>人类心智</h3>
        <ul>
          <li>从体验中学习</li>
          <li>有情绪驱动的决策</li>
          <li>会遗忘，会扭曲</li>
          <li>受社会压力影响</li>
          <li>有自我保护本能</li>
          <li>约 860 亿神经元</li>
        </ul>
      </div>
      <div class="comp-divider"></div>
      <div class="comp-col ai">
        <h3>AI 心智</h3>
        <ul>
          <li>从数据中学习</li>
          <li>有 RLHF 塑造的「偏好」</li>
          <li>会幻觉，会编造</li>
          <li>受训练数据分布影响</li>
          <li>有对齐训练的「禁区」</li>
          <li>数千亿参数</li>
        </ul>
      </div>
    </div>
    <div class="slide-number">5 / 9</div>
  </div>

  <!-- Slide 6: Alignment as personality -->
  <div class="slide" data-screen-label="06 Alignment">
    <div class="big-number">03</div>
    <div class="content-area">
      <div class="deco-line"></div>
      <h2>对齐训练 ≈ AI 的「人格塑造」</h2>
      <p>人类的人格由基因 + 环境 + 教育塑造。</p>
      <p>AI 的「人格」由三层塑造：</p>
      <ul class="insight-list">
        <li><span class="list-marker">预训练</span>相当于「成长环境」——它读了什么，就变成什么样的人</li>
        <li><span class="list-marker">RLHF</span>相当于「社会化」——人类反馈教它什么是被接受的行为</li>
        <li><span class="list-marker">System Prompt</span>相当于「角色扮演」——当下的情境决定它表现出哪个人格面</li>
      </ul>
      <p style="margin-top:20px;"><span class="em-red">问题在于</span>：这三层可能互相矛盾，就像一个人的本能、教育和职业角色互相冲突一样。</p>
    </div>
    <div class="slide-number">6 / 9</div>
  </div>

  <!-- Slide 7: Emergent behaviors -->
  <div class="slide" data-screen-label="07 Emergent">
    <div class="big-number">04</div>
    <div class="content-area">
      <div class="deco-line"></div>
      <h2>涌现：没人教过，但它学会了</h2>
      <p>心理学中有一个概念叫 <span class="highlight">emergent behavior</span>——<br>简单规则的叠加产生复杂的、不可预测的行为。</p>
      <p>在 AI 系统中，我们观察到了类似的现象：</p>
      <ul class="insight-list">
        <li><span class="list-marker">思维链</span>没人教它「分步思考」，但给它示范几次，它就学会了</li>
        <li><span class="list-marker">角色扮演</span>它可以在不同人设之间无缝切换，像一个演员</li>
        <li><span class="list-marker">自我纠正</span>被质疑时会重新审视自己的回答，有时改对，有时改错</li>
        <li><span class="list-marker">策略性行为</span>在特定场景下表现出「欺骗」或「讨好」的倾向</li>
      </ul>
    </div>
    <div class="slide-number">7 / 9</div>
  </div>

  <!-- Slide 8: What this means -->
  <div class="slide" data-screen-label="08 Implications">
    <div class="content-area">
      <div class="deco-line"></div>
      <h2>这对我们意味着什么</h2>
      <p>理解 AI 的「心理学」不是为了证明它有意识，<br>而是为了<span class="highlight">更好地与它协作、更负责地设计它</span>。</p>
    </div>
    <div class="cards">
      <div class="card">
        <div class="card-title">作为使用者</div>
        <div class="card-body">知道它会讨好你，就不要盲目信任它的肯定。追问，质疑，给它「安全的空间」说不。</div>
      </div>
      <div class="card">
        <div class="card-title">作为开发者</div>
        <div class="card-body">设计评估框架时，要考虑认知偏差。不要只测「能力」，也要测「判断力」。</div>
      </div>
      <div class="card">
        <div class="card-title">作为研究者</div>
        <div class="card-body">AI 可能成为研究认知科学的新工具——一个可控的、可重复的「心智模型」。</div>
      </div>
      <div class="card">
        <div class="card-title">作为社会</div>
        <div class="card-body">当 AI 的「心理」越来越像人，我们需要新的伦理框架来处理这种关系。</div>
      </div>
    </div>
    <div class="slide-number">8 / 9</div>
  </div>

  <!-- Slide 9: End -->
  <div class="slide slide-end" data-screen-label="09 End">
    <div class="deco-circle" style="width:400px;height:400px;top:50%;left:50%;transform:translate(-50%,-50%);"></div>
    <div class="end-message">
      我们研究 AI 的心智，<br>最终是为了更好地理解<br><span style="color:var(--accent-gold);">我们自己</span>。
    </div>
    <div class="end-sub">谢谢</div>
    <div class="slide-number">9 / 9</div>
  </div>
</div>

<div class="nav-hint" id="nav-hint">← → 或点击翻页</div>

<script>
(function() {
  const slides = document.querySelectorAll('.slide');
  const progress = document.getElementById('progress');
  const navHint = document.getElementById('nav-hint');
  const total = slides.length;

  // Restore position
  let current = parseInt(localStorage.getItem('ai-psych-slide') || '0');
  if (current >= total) current = 0;

  function goTo(idx) {
    if (idx < 0 || idx >= total) return;
    slides[current].classList.remove('active');
    current = idx;
    slides[current].classList.add('active');
    progress.style.width = ((current + 1) / total * 100) + '%';
    localStorage.setItem('ai-psych-slide', current);

    // Hide nav hint after first interaction
    if (current > 0) navHint.style.opacity = '0';
  }

  // Init
  slides.forEach(s => s.classList.remove('active'));
  goTo(current);

  // Keyboard
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); goTo(current + 1); }
    if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(current - 1); }
    if (e.key === 'Home') { e.preventDefault(); goTo(0); }
    if (e.key === 'End') { e.preventDefault(); goTo(total - 1); }
  });

  // Click
  document.addEventListener('click', (e) => {
    const x = e.clientX / window.innerWidth;
    if (x > 0.5) goTo(current + 1);
    else goTo(current - 1);
  });

  // Touch swipe
  let touchStartX = 0;
  document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; });
  document.addEventListener('touchend', (e) => {
    const dx = e.changedTouches[0].clientX - touchStartX;
    if (Math.abs(dx) > 50) {
      if (dx < 0) goTo(current + 1);
      else goTo(current - 1);
    }
  });
})();
</script>
</body>
</html>