Is the Design From Code skill free?

Yes. The skill itself is free from nlook-service/design-from-code. SkillProof publishes the install command and an independent test verdict at no cost.

What is the Design From Code SkillProof Score?

8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 5/5.

How do I install Design From Code?

Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.

Can I use Design From Code with Cursor, Copilot, Gemini CLI, Codex or other AI tools?

The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.

Design From Code

Reads real component source, then designs pixel-faithful HTML mockups

by nlook-service · nlook-service/design-from-code

Tested · Works

Install — copy the command Download source ↗

Test report

Verdict: Tested · Works
Score: 8.8/10
Tested: Jul 25, 2026
Environment: Claude Code 2.x (agent harness)
Upstream re-checked: Jul 30, 2026 · cba60ae

⚠ This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (repo unreachable/deleted). The test below is what we measured on Jul 25, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.

On a small test component I ran the skill's grep/sed source-reading step and it surfaced facts a baseline would have guessed wrong: the real Korean row labels (상품금액 / 배송비 / 결제예정금액), the ₩50,000 free-shipping threshold, conditional row rendering (shipping shows 무료 muted, coupon row only when discount>0), and the exact tailwind classes (rounded-t-2xl, text-[13px]). A no-skill baseline invents English labels and a flat fee. The 659 lines of references are substantive and the Step-0 gate honestly downgrades to a labeled proposal when source is missing rather than fabricating an AS-IS screen.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

Installs cleanly 5/5
Triggers reliably 5/5
Output vs. baseline 7/10
Docs & honesty 5/5

What Design From Code does

Workflow skill that turns one issue into a design in a fixed order: verify the real component JSX and data queries, reproduce the current screen faithfully, iterate self-contained HTML mockups, write a design.md, then delegate the build. Triggers on 'design this', 'make a mockup', 'how should this feature look', or the Korean equivalents. Its core rule is to read the actual code and data model instead of imagining them, and to downgrade to a labeled proposal when no source exists.

How to install Design From Code

Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.

Commands — how to trigger Design From Code

/design-from-code Reads real component source, then designs pixel-faithful HTML mockups

It also activates on plain-language prompts like these:

이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘
주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘
이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘

Frequently asked questions

Is the Design From Code skill free?: Yes. The skill itself is free from nlook-service/design-from-code. SkillProof publishes the install command and an independent test verdict at no cost.
Does Design From Code work with Claude Code?: We tested it with Claude Code 2.x (agent harness) on Jul 25, 2026. Verdict: Tested · Works. On a small test component I ran the skill's grep/sed source-reading step and it surfaced facts a baseline would have guessed wrong: the real Korean row labels (상품금액 / 배송비 / 결제예정금액), the ₩50,000 free-shipping threshold, conditional row rendering (shipping shows 무료 muted, coupon row only when discount>0), and the exact tailwind classes (rounded-t-2xl, text-[13px]). A no-skill baseline invents English labels and a flat fee. The 659 lines of references are substantive and the Step-0 gate honestly downgrades to a labeled proposal when source is missing rather than fabricating an AS-IS screen.
What is the Design From Code SkillProof Score?: 8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 5/5.
How do I install Design From Code?: Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Design From Code with Cursor, Copilot, Gemini CLI, Codex or other AI tools?: The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.