Agent Plugins Marketplace
← All plugins

design-from-code

v1.0.0

Workflow skill that designs UI changes from real source code and data models — verify data in code, iterate faithful HTML mockups, lock a design doc, then delegate implementation. It reproduces existing components pixel-for-pixel by reading actual JSX/queries instead of imagining them.

Claude Code1 Skill

By nlookLicense: MIT945 GitHub starsUpdated last month

Directory evidence

Runtimes
Claude Code
Parsed components
1 skill or MCP entry
Source updated
Aug 12, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install design-from-code for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install design-from-code@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/ccplugins/awesome-claude-code-plugins

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/design-from-code/.

Plugin files

plugins/design-from-code/
├── .claude-plugin/plugin.json
└── skills/design-from-code/SKILL.md

Included Skills1

design-from-codeskills/design-from-code/SKILL.md

Workflow skill that turns one issue/requirement into a design in the order "verify real code & data → iterate faithful HTML mockups → design doc (.md) → delegate implementation." When designing a change to existing UI, it reads the actual component source and data model instead of imagining them, and reproduces the current screen pixel-for-pixel. Triggers (EN) "design this", "make a mockup", "how should this feature look", "add ~ to the existing screen"; (KO) "설계해줘", "시안 만들어줘", "이 기능 어떻게 보여줄지", "기존 화면에 ~ 추가".

Plugin manifests1

plugins/design-from-code/.claude-plugin/plugin.json
{
  "name": "design-from-code",
  "version": "1.0.0",
  "description": "Workflow skill that designs UI changes from real source code and data models — verify data in code, iterate faithful HTML mockups, lock a design doc, then delegate implementation. It reproduces existing components pixel-for-pixel by reading actual JSX/queries instead of imagining them.",
  "author": {
    "name": "nlook",
    "url": "https://nlook.me"
  },
  "homepage": "https://github.com/nlook-service/design-from-code",
  "license": "MIT",
  "keywords": [
    "design",
    "ui",
    "mockup",
    "workflow",
    "html",
    "skill"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[design-from-code on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-from-code)