# superdesign-skill > Inject Superdesign capabilities into DeepSeek Harness, enabling AI to analyze codebases, build design systems, and generate branchable UI sketches on an infinite canvas. ## Metadata - Author: [@superdesigndev](https://github.com/superdesigndev) - Repo: - GitHub: [superdesigndev/superdesign-skill](https://github.com/superdesigndev/superdesign-skill) - Stars: 436 - Language: JavaScript - License: [MIT](https://spdx.org/licenses/MIT.html) - Homepage: - Topics: `agent-skills`, `ai-design`, `claude-code`, `claude-skill`, `claude-skills`, `coding-agent`, `cursor`, `design-agent`, `dsh-plugin`, `frontend`, `superdesign`, `ui-design`, `ux-design` - Forks: 28 - Open Issues: 4 - Last push: 2026-08-20T09:46:50.000Z - Added: 2026-08-17T00:00:00.000Z ## Install ```bash dsh plugin --profile web add github:superdesigndev/superdesign-skill ``` ## Wiki ## One-Line Positioning superdesign-skill injects Superdesign design capabilities into DeepSeek Harness: let AI first scan your project's current UI, extract design DNA in the terminal, then generate branchable and iteratively improvable UI mockups and marketing images on the web canvas—aiming to replace the AI's default "generic template style" with results that match your project's brand. ## Core Capabilities - Register Superdesign skill instructions into dsh's skill list, allowing the host's conversational model to directly call `$superdesign` to enter the design workflow - Scan the existing repository's components, layouts, routing, design tokens, and style files, writing the output to `.superdesign/init/` as design context for subsequent generation - Maintain a reusable design system file `.superdesign/design-system.md` in the repository, supporting extraction from existing code or rebuilding by referencing external sites - Invoke Superdesign CLI to create projects and generate drafts on the canvas based on prompts, supporting `replace` (in-place iteration) and `branch` (side-by-side comparison of multiple directions) modes - Generate branch variants after pixel-level recreation of existing pages; directly create designs for new pages/posters without mandatory "recreation" step - Extract style guides, design tokens, and brand assets from specified URLs via CLI's `extract-website`, serving as the basis for reference-based reconstruction ## Technical Implementation - **Language**: JavaScript (Node.js ESM, pure ESM with no build steps) + extensive Markdown skill documentation - **Key Dependencies**: No npm runtime dependencies (`dsh/index.js` only depends on `node:fs/promises` and `node:url`); the host's cordis framework and dsh plugin loading mechanism are provided by dsh itself, this package doesn't introduce any `@deepseek-ai/*` subpackages - **Architecture Pattern**: dsh cordis plugin — `package.json#dsh.bundle.patch` points to `dsh/cordis.patch.yml`, which inserts the npm package named `superdesign-skill` into the dsh configuration layer; the package entry `dsh/index.js` exports `apply(ctx)`, which calls `ctx.skills.registerProvider(...)` to register a skill provider in `list`/`get` form, publishing `skills/superdesign/SKILL.md` directly as the skill content - **Entry Files**: `dsh/index.js` (cordis plugin entry) + `skills/superdesign/SKILL.md` (skill content and routing) + `skills/superdesign/references/SUPERDESIGN.md` (design SOP for real repository paths) ## Applicable Scenarios Developers using DeepSeek Harness for frontend development who want to review page/marketing designs with AI before writing code; especially users tired of AI's default "generic shadcn style" output—this skill actively reads your repository's existing UI and design tokens, forcing generated results to fit within your project's existing visual system. Also suitable for scenarios requiring batch generation of multiple direction drafts for comparison, or replacing existing interfaces with new visual styles while preserving structure and content. ## Prerequisites and Compatibility | Dependency | Minimum Version | Description | |---|---|---| | Node.js | Not declared | `package.json` doesn't declare `engines`; `dsh/index.js` only uses two built-in modules `node:fs/promises` and `node:url`, any Node version that runs dsh normally will work | | dsh | Not declared | Connected via `dsh.bundle.patch`, command is `dsh plugin --profile web add github:superdesigndev/superdesign-skill`; `package.json` doesn't declare `peerDependencies` | | `@superdesign/cli` | Latest stable | The skill itself doesn't carry the CLI, but all image/draft generation operations go through `npx --yes @superdesign/cli@latest`; the skill will guide users to install and log in on first actual use | | Platform | macOS / Windows / Linux | Cross-platform pure JS package, `package.json` doesn't declare `os`/`cpu`; CLI login involves browser redirect, requires local machine to open browser or use proxy | | Native modules | None | No node-gyp dependencies, no native binaries introduced | | External account | Superdesign team account | Must complete `superdesign login` before running generation; generation is billed per use, specific rates depend on team plan | ## Installation ```bash dsh plugin --profile web add github:superdesigndev/superdesign-skill ``` ## Configuration This plugin requires no additional configuration. `dsh/index.js` only reads the frontmatter `description` from `skills/superdesign/SKILL.md` to register into dsh's skill list, doesn't parse any configuration items, doesn't read environment variables, doesn't read local configuration files. All runtime configuration (CLI login state, generation options) is maintained by `@superdesign/cli` itself, unrelated to this plugin. ## FAQ **Q: Is this plugin usable after installation, or do I need to do something else?** A: The plugin only registers Superdesign skill instructions into dsh's skill list; the actual generation/iteration is handled by Superdesign CLI. So after installing this plugin, you still need to globally install `@superdesign/cli` (`npm install -g @superdesign/cli@latest`) and complete one `superdesign login`—the skill will guide you through this before the first actual image generation. **Q: Does this plugin read my code? Will it upload my code anywhere?** A: The skill reads your local repository's source code, styles, and configurations to understand the current UI (written to `.superdesign/init/`), and when generating, submits relevant files as context to Superdesign backend via CLI as needed. It doesn't batch upload the entire repository, nor does it write local paths directly into generated HTML—all image materials must first be uploaded to get public `https://` URLs before being embedded. **Q: Why are design files written in my repository? What remains after uninstallation?** A: The skill writes initialization outputs to `.superdesign/init/` (six context files), `.superdesign/design-system.md`, `.superdesign/replica_html_template/`, and `.superdesign/resume.json`, all under the `.superdesign/` directory in project root. Uninstalling the plugin doesn't automatically clean up these local files—manually delete if needed; after deletion, dsh won't see the skill, but other harnesses (Claude Code, Cursor, Codex, etc.) that installed the same skill earlier will retain it. **Q: What's the difference from directly using the web version at superdesign.dev?** A: The web version is a graphical editor, supporting pixel-level "cloning" and editable canvas. This plugin uses CLI—the skill side can do "style reference-based reconstruction"—extracts design DNA from reference sites then creates a new editable draft; if users want 1:1 editable cloning, they need to go to the web version. All CLI changes are visualized on superdesign.dev's canvas—the skill only handles initiating calls and returning canvas/preview links. **Q: Can I use it on an empty directory with no frontend code?** A: Yes. Step 1 in SKILL.md recognizes "empty repository/sandbox" as a no-code path, skips init, collects design context directly through conversation (target users, platform, style preferences, reference sites), then generates drafts via the BRAND NEW PROJECT workflow. Real repositories with existing frontend code will force init first—the six context files must all exist or it won't proceed. **Q: How to troubleshoot errors? Do I need to reinstall?** A: First handle by situation per SKILL.md's "When a command fails": login errors retry `npx --yes @superdesign/cli@latest login`; `extract-website` timeout (60–120 seconds) allows one retry; generation commands (`create-design-draft` / `iterate-design-draft`) failure allows one retry via references/design-with-your-model.md to import HTML yourself. Don't keep blindly retrying any command after consecutive failures—stop and tell the user the current error. **Q: Which AI tools can use this skill?** A: This DSH plugin only works with the DeepSeek Harness system. The same `skills/superdesign/` tree is also packaged and released as Claude Code plugin, Codex plugin, and Cursor plugin—the root `package.json` and `.claude-plugin/`, `.codex-plugin/`, `.cursor-plugin/` four manifests share one version number, so other hosts can install the same skill via their corresponding plugin markets or `npx skills add`. ## Difficulty Level Advanced—installing the package itself is one command, but to use it smoothly requires first installing and logging into CLI, understanding the init/design-system/replica-html conventions, and knowing not to blindly retry on command 400 errors; for occasional image generation, you can get through using the skill's built-in guidance. ## Known Issues and Limitations - Design calls strongly depend on `@superdesign/cli` and the team's login state; not logged in or session expired directly errors—the skill's handling for such errors is to stop and tell the user rather than bypass (see `skills/superdesign/SKILL.md:108-114` and references/SUPERDESIGN.md command failure section) - Design calls go through Superdesign backend billed per use/credit point—each `create-design-draft`, `iterate-design-draft`, `execute-flow-pages` consumes quota; the skill deliberately requires "don't randomly generate images before user confirms direction" to avoid invalid charges - Generation has a "context budget" hard limit: a single request stuffing in the target page + shared header + entire globals.css file will most likely return 400; the correct approach is to split at the 900-line threshold before passing to the rendering branch—failure shouldn't "simplify context" for retry—that would let the model conjure a generic page out of thin air based on the design system (see `references/SUPERDESIGN.md:65-73`) - Logo position must use real Brand Asset logo—using first letter/emoji/generic icon as substitute is prohibited; the `assetKey` and public URL from upload must be explicitly inserted into component template or passed to generation with `--reference-id`, otherwise the model will automatically swap to a placeholder (see `references/SUPERDESIGN.md:79-82`) - "Cloning" semantics on the CLI side is "style reference-based reconstruction", not pixel-perfect 1:1 copy; for editable pixel-perfect cloning you need superdesign.dev web version—CLI can't do it (see `SKILL.md:17` and README line 25) - Repository must be git-tracked (used for incremental diff comparing context fingerprint); if the project isn't in a git working tree, the precise diff in the hot path becomes ineffective, requiring full refresh strategy (see `references/RESUME.md:166-180`) - `extract-website` calls remote crawler, taking 60–120 seconds per call and may be affected by target site's anti-crawl; one retry allowed on failure—if both attempts fail, must stop, don't automatically bypass this step --- This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [superdesign-skill](https://deepseek-plugin.org/plugins/superdesigndev/superdesign-skill) Wiki generated by AI (model: `MiniMax-M2.5`)