Design Skill

What it is

hara-design is an installable skill that turns your agent CLI — hara, Claude Code, or Codex — into a design tool you drive from the terminal. You describe what you want; your agent generates a self-contained, interactive HTML artifact — a landing page, dashboard, app prototype, or slide deck — in one of 150 brand-grade design systems, and you watch it render live in your browser. You drive entirely from the CLI; the web is a view-only preview (there's no chat in the page).

App prototypes are playable, not static mockups. The agent authors only the screens + design tokens; the preview injects a fixed framework (the device bezel, the view modes, the interaction runtime). So a multi-screen design behaves like a real app — and the agent can't accidentally turn it into a slideshow.

Install

hara-design runs in hara, Claude Code, and Codex — same skill, same hara-design command on your PATH.

hara

hara plugin add github:hara-cli/hara-design   # installs the skill + links the `hara-design` command
# or from a local clone:  hara plugin add file:/path/to/hara-design

Claude Code

npm i -g @nanhara/hara-design
hara-design install --claude   # links the skill into ~/.claude/skills/design

Codex

npm i -g @nanhara/hara-design
hara-design install --codex    # links the skill into ~/.agents/skills/design

hara-design uninstall --claude|--codex reverses it (it only removes its own link). Then, in any session, just describe the design (or run /design in hara):

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

How a session goes

Brief. hara asks a few short questions (output kind, surface, audience, tone, brand, scale) and waits — it locks the brief before building so you don't re-do a wrong direction. (Say "just build" to skip.)
Direction. Name a design system, or pick a vibe — the agent narrows from a mood (Minimal & Precise · Editorial & Refined · Warm & Soft · Bold & Expressive · Tech & Utility · Luxe & Premium · Brutalist & Retro) to a concrete system — or it extracts a palette from a brand/screenshot you share.
Build. It writes a complete index.html to .hara/design/<slug>/ and starts the live preview — open the printed http://127.0.0.1:<port> URL.
Iterate. Tell hara what to change ("make the hero bigger, narrow the sidebar"); the browser auto-reloads.
Quality gate. Before calling it done, hara self-checks against the recipe's P0 checklist and a 5-dimension critique (philosophy / hierarchy / execution / specificity / restraint) to keep output on-brand and slop-free.

Viewing a prototype

A multi-screen prototype gets two view modes in the preview toolbar:

Grid — a board of all screens as scaled device cards; click any card to open it.
Play — one screen in a device frame, fully interactive: tap CTAs to walk the flow screen-to-screen.

Four platform frames are built in: mobile (iOS / Android), WeChat mini-program, mobile web, and desktop web — chosen via a <meta name="hara-preview"> tag in the asset.

Interactivity (the agent wires it; you don't)

Screens become playable through declarative data-* hooks the agent adds: routing (data-go), tabs, toggles, modals/sheets, forms (fake success / inline errors), selects & steppers, toasts — plus motion (data-stagger, data-press) and a zero-dependency data-sparkline mini-chart. A "No Dead Controls" rule means anything that looks interactive either works or is visibly, intentionally static.

What you can make

Pages — landing / marketing / pricing / docs / blog (recipes like web-prototype, saas-landing).
Dashboards & tool UIs — information-dense, monospace numerics, data-sparkline trends.
App prototypes — single screen, or multi-screen playable flows using the built-in device frames.
Slide decks — fixed-canvas, scale-to-fit, keyboard nav, via the deck recipes.

Export & handoff

hara-design export  .hara/design/<slug>/index.html             # → a self-contained interactive HTML
hara-design handoff .hara/design/<slug>/index.html --target tailwind   # or css | swiftui | flutter | all

export bundles a single self-contained HTML with the frozen framework inlined: it opens anywhere (double-click, email, static host), stays fully interactive, and needs no server or Chrome. A standalone prototype even self-mounts its own Grid / Play toggle. (Need a PDF? Open it and print from the browser.)
handoff hands the design to a frontend coding agent to build the production app. It emits a handoff/ folder: reference.html (visual ground truth), tokens.json (DTCG design tokens with {alias} refs, extracted from the design's :root), theme/<target> (tokens pre-mapped to Tailwind / CSS vars / SwiftUI / Flutter), and components.md + HANDOFF.md (the skill fills these with the component breakdown and build instructions). A downstream agent reads the folder and rebuilds the app faithfully, using token references — never raw values.

(The hara-design command ships with the plugin; or call node ~/.hara/plugins/design/scripts/*.mjs directly.)

Notes

Design systems and recipes are plain Markdown — add your own under the plugin's references/, or override a bundled one by name in ~/.hara/skills. Each system's DESIGN.md carries YAML frontmatter (palette / fonts / category / mood) so the agent wires exact token values, not eyeballed hexes.
The preview is for your browser. hara doesn't web_fetch localhost; if the agent needs to inspect its own output it uses the browser-automation tools.
Sharing a generated artifact as a public link (design.hara.run) is on the roadmap — because artifacts are self-contained HTML, publishing is just static hosting.

Credits & license: Apache-2.0. The design content and workflow are adapted from Open Design (Apache-2.0).