design-clone

v1.0.0

Design DNA extraction + pixel-perfect website cloning. Combines programmatic CSS extraction (Browser MCP + getComputedStyle) with a 3-dimension design profile schema (design system / design style / visual effects). Two modes: --dna-only outputs a structured 150+ field Design DNA JSON; --full additionally generates a Next.js pixel-perfect clone via parallel builder agents.

Claude Code1 Skill

By XRenSiuLicense: MIT2 GitHub starsUpdated 3 days ago

Directory evidence

Runtimes: Claude Code
Parsed components: 1 skill or MCP entry
Source updated: Sep 21, 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-clone 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-clone@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/XRenSiu/claude-code-forge

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

Plugin files

plugins/design-clone/

├── .claude-plugin/plugin.json
└── skills/design-clone/SKILL.md

Included Skills1

design-cloneskills/design-clone/SKILL.md

从任意网站精确提取三维设计画像（Design DNA JSON）并可选地生成像素级克隆。使用 Browser MCP + getComputedStyle() 程序化提取设计系统 token（颜色、字体、间距、圆角、阴影、动效），AI 认知判断设计风格（情绪、流派、构图），代码扫描 + AI 判断视觉特效（Canvas、WebGL、粒子、Shader、滚动效果）。触发词："design clone"、"提取设计"、"设计 DNA"、"克隆网站"、"提取设计数据"、 "分析这个网站的设计"、"复刻这个网站"、"design dna"、"clone this site"。使用 --dna-only 仅输出 DNA JSON（跳过 Phase 4-6），使用 --full 或不加参数则完整克隆。

Plugin manifests1

plugins/design-clone/.claude-plugin/plugin.json

{
  "name": "design-clone",
  "description": "Design DNA extraction + pixel-perfect website cloning. Combines programmatic CSS extraction (Browser MCP + getComputedStyle) with a 3-dimension design profile schema (design system / design style / visual effects). Two modes: --dna-only outputs a structured 150+ field Design DNA JSON; --full additionally generates a Next.js pixel-perfect clone via parallel builder agents.",
  "version": "1.0.0",
  "author": {
    "name": "XRenSiu",
    "email": "[email protected]"
  },
  "homepage": "https://github.com/XRenSiu/claude-code-forge/tree/main/plugins/design-clone",
  "repository": "https://github.com/XRenSiu/claude-code-forge",
  "license": "MIT",
  "keywords": [
    "design-clone",
    "design-dna",
    "website-clone",
    "design-tokens",
    "design-system",
    "visual-effects",
    "reverse-engineering",
    "pixel-perfect",
    "browser-mcp",
    "getComputedStyle"
  ]
}

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-clone on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-clone)