nlook-service/design-from-code
13 stars · Last commit 2026-06-20
Design UI changes from real source code — verify data, iterate faithful HTML mockups, then delegate. A Claude Code plugin & Codex skill by nlook.me
README preview
<div align="center"> # 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. <p> <a href="https://nlook.me"><img alt="Made by nlook" src="https://img.shields.io/badge/made%20by-nlook.me-0a0a0b"></a> <img alt="License: MIT" src="https://img.shields.io/badge/license-MIT-2563eb"> <img alt="Claude Code plugin" src="https://img.shields.io/badge/Claude%20Code-plugin-86efac"> <img alt="Codex skill" src="https://img.shields.io/badge/Codex-skill-fcd34d"> </p> <img src="examples/images/mobile-bottom-brand-status-v5.png" alt="Example output — faithful AS-IS / TO-BE / empty-state mobile mockups produced by the skill" width="900"> <sub><b>Actual output of the skill</b> (issue #976): the current bar reproduced from <code>MobileBottomBar.tsx</code> (AS-IS), the proposed change (TO-BE — <b>green = new / yellow = changed</b>), and the data-zero empty state — all as one self-contained HTML file, zero dependencies.</sub> </div>