design-from-code

Verify facts in code → agree on HTML → lock it in a .md → delegate the build.

A workflow skill for Claude Code and OpenAI Codex that designs changes to existing UI from the real source — not from imagination.

Actual output of the skill (issue #976): the current bar reproduced from MobileBottomBar.tsx (AS-IS), the proposed change (TO-BE — green = new / yellow = changed), and the data-zero empty state — all as one self-contained HTML file, zero dependencies.

Before drawing anything, it reads the actual component JSX and traces the data model in code, then reproduces the current screen pixel-for-pixel and iterates self-contained HTML mockups until you approve. The result is a design doc grounded in facts, ready to hand to an implementer.

Built and maintained by the team behind nlook.me — a publishing platform where writers ship documents and watch readership grow. The worked example here is a real nlook feature.

---

Why this exists

Most "design a UI change" prompts fail the same two ways:

1. The model guesses how the data works. "What does this visitor count actually count?" — if you imagine the answer, you are wrong ~100% of the time. This skill traces handler → use-case → repository → schema and confirms it as fact before designing.
2. The mockup is schematic, so it doesn't match reality. This skill reads the actual JSX (render functions, class names, labels, spacing) and reproduces the current component so the proposal sits believably inside the real product.

It also bakes in the things people forget: one decision at a time, explicit keep / new / changed tags, and the empty (data-zero) state as a first-class screen.

What you get

• An 8-step workflow (issue → code map → data verification → HTML mockup → confirm → faithful AS-IS/TO-BE → design doc → delegated build + verify)
• Self-contained HTML mockups: phone frames, inline-SVG charts (no chart library), monotone big numbers, keep/new/changed outlines, empty states
• A restraint-by-default guardrail against the generic "AI look" (no emoji-icons, gradient blobs, or rainbow accents) — it matches your product's real tokens or a reference you give, and is fully overridable
• A portable .design/ output format that persists every mockup with its decisions, verified data meanings, and version history — so designs outlive the session and any viewer can load them
• Reference guides for each hard part and a fully worked real example

Install

This repo is both a Claude Code plugin and a plain skill folder. Pick one path.

Option A — Claude Code plugin (recommended)

From inside Claude Code:

/plugin marketplace add nlook-service/design-from-code
/plugin install design-from-code@design-from-code

The first command registers this repo as a marketplace; the second installs the bundled skill. Restart the session and the design-from-code skill is available.

Replace nlook-service/design-from-code with your fork's owner/repo if you forked it.

Option B — Manual skill install (Claude Code or Codex)

Both tools read the same SKILL.md format and load skills from a skills/ directory.

git clone https://github.com/nlook-service/design-from-code.git
cd design-from-code