设计技能

它是什么

hara-design 是一个可安装技能,把你的 agent CLI —— hara、Claude Code 或 Codex —— 变成一个 你从终端驱动的设计工具。你描述想要什么,你的 agent 就生成一个 自包含、可交互的 HTML 制品 —— 落地页、仪表盘、app 原型或幻灯片演示稿 —— 采用 150 套品牌级设计系统 之一,而你看着它 在浏览器里实时渲染。你完全从 CLI 驱动; 网页只是一个只读预览(页面里没有聊天)。

app 原型是 可玩的,而非静态稿。agent 只编写各个屏幕 + 设计 token;预览会注入一套固定框架(设备外框、视图模式、交互运行时)。于是多屏设计的表现就像一个真实 app —— 而 agent 也不会不小心把它变成一张幻灯片。

安装

hara-design 可在 hara、Claude Code、Codex 里运行 —— 同一套技能,同一个 PATH 上的 hara-design 命令。

hara

hara plugin add github:hara-cli/hara-design   # 安装技能 + 链接 `hara-design` 命令
# 或从本地克隆:  hara plugin add file:/path/to/hara-design

Claude Code

npm i -g @nanhara/hara-design
hara-design install --claude   # 把技能链接进 ~/.claude/skills/design

Codex

npm i -g @nanhara/hara-design
hara-design install --codex    # 把技能链接进 ~/.agents/skills/design

hara-design uninstall --claude|--codex 可撤销(只会删除它自己建的链接)。然后,在任意会话中, 直接描述设计(在 hara 里也可运行 /design):

> a dark, modern-minimal landing page for a developer log-search tool, use the linear-app design system

一次会话的流程

简报。 hara 会问几个简短问题(产出类型、载体、受众、调性、品牌、规模)并等待 —— 它在动工前锁定简报,这样你就不必为一个错误方向返工。(说 "just build" 可跳过。)
方向。 指定一个设计系统,或 挑一种气质 —— agent 会从一种情绪(Minimal & Precise · Editorial & Refined · Warm & Soft · Bold & Expressive · Tech & Utility · Luxe & Premium · Brutalist & Retro)收敛到一个具体系统 —— 或者从你分享的品牌 / 截图里提取一套配色。
构建。 它把完整的 index.html 写到 .hara/design/<slug>/ 并启动实时预览 —— 打开打印出来的 http://127.0.0.1:<port> URL。
迭代。 告诉 hara 要改什么("把 hero 放大,侧边栏收窄");浏览器会自动重载。
质量关。 在宣布完成前,hara 会对照该 recipe 的 P0 清单和一份 5 维评估 (理念 / 层级 / 执行 / 针对性 / 克制)做自检,以保证产出贴合品牌、不含套路水货。

查看一个原型

多屏原型在预览工具栏里会有两种视图模式:

Grid —— 把所有屏幕作为按比例缩放的设备卡片排成一块板;点任意卡片即可打开。
Play —— 在设备外框中显示单个屏幕,完全可交互:点击 CTA 即可在屏幕之间走完整个流程。

内置四种平台外框:mobile(iOS / Android)、小程序(微信小程序)、mobile web 和 desktop web —— 通过制品中的 <meta name="hara-preview"> 标签选择。

交互性(由 agent 接线,你不用管)

屏幕通过 agent 添加的声明式 data-* 钩子变得可玩:路由(data-go)、标签页、开关、弹窗 / 抽屉、表单(假成功 / 内联错误)、下拉与步进器、toast —— 外加动效(data-stagger、 data-press)和一个零依赖的 data-sparkline 迷你图表。一条 "No Dead Controls"(无死控件) 规则意味着任何看起来可交互的东西,要么真的能用,要么明显且有意地是静态的。

你能做什么

页面 —— 落地 / 营销 / 定价 / 文档 / 博客(web-prototype、saas-landing 之类 recipe)。
仪表盘与工具 UI —— 信息密集、等宽数字、data-sparkline 趋势。
app 原型 —— 单屏,或用内置设备外框做多屏可玩流程。
幻灯片演示稿 —— 固定画布、缩放自适应、键盘导航,通过 deck 类 recipe。

导出与交接

hara-design export  .hara/design/<slug>/index.html             # → 一个自包含、可交互的 HTML
hara-design handoff .hara/design/<slug>/index.html --target tailwind   # 或 css | swiftui | flutter | all

export 把框架冻结内联,打包成 单个自包含 HTML:它在任何地方都能打开 (双击、邮件、静态托管),保持完全可交互,且无需服务器或 Chrome。独立原型甚至会自挂载自己的 Grid / Play 切换。(需要 PDF?打开它从浏览器打印即可。)
handoff 把设计交给一个 前端编码 agent 去构建生产 app。它会产出一个 handoff/ 目录:reference.html(视觉基准事实)、tokens.json(带 {alias} 引用的 DTCG 设计 token,从设计的 :root 提取)、theme/<target>(已预映射到 Tailwind / CSS 变量 / SwiftUI / Flutter 的 token),以及 components.md + HANDOFF.md(技能会用组件拆解和构建说明填充它们)。下游 agent 读取该目录并忠实重建 app,使用 token 引用 —— 绝不用裸值。

(hara-design 命令随插件一起提供;也可以直接调用 node ~/.hara/plugins/design/scripts/*.mjs。)

备注

设计系统和 recipe 都是纯 Markdown —— 在插件的 references/ 下加你自己的,或在 ~/.hara/skills 里按名覆盖一个内置的。每个系统的 DESIGN.md 带有 YAML frontmatter(palette / fonts / category / mood),让 agent 接入精确的 token 值,而不是凭肉眼估的色值。
预览是给你的浏览器用的。hara 不会对 localhost 做 web_fetch;如果 agent 需要检查自己的产出,它会用浏览器自动化工具。
把生成的制品作为公开链接分享(design.hara.run)在路线图上 —— 因为制品是自包含 HTML, 发布无非就是静态托管。

致谢与许可:Apache-2.0。设计内容与工作流改编自 Open Design(Apache-2.0)。