Skip to main content

dsh-design-skills

15Stars0Forks0Issues0Watchers

Packages 10 web design aesthetic skills for DeepSeek Harness. The model automatically applies corresponding design specifications when generating sites based on user descriptions, eliminating generic AI-style templates.

Categories◎ Knowledge & Search✦ Creative Content
Evidence4/5methodologySourceInstallMaintenanceDSH versionSecurity scan
Machine-auditedInstall commandRepo verifieddsh-plugin topicLicenseREADMEAI wiki
zhaiyatengzhaiyateng
·zhaiyateng/dsh-design-skills
Language
JavaScript
License
NOASSERTION
Branch
main
deepseek-harnessdesign-skillsdesign-systemdsh-pluginuivibe-codingweb-design

Install

cmdweb profile
$ dsh plugin --profile web add github:zhaiyateng/dsh-design-skills

Run the command above in your terminal to install this plugin via the dsh CLI. You can switch Profile in the top-right corner. New to dsh? Read the beginner tutorial

Install via your agent

Install the DeepSeek Harness plugin zhaiyateng/dsh-design-skills for me: review the repository at https://github.com/zhaiyateng/dsh-design-skills first, then run the install command and verify the plugin loads successfully.

Paste this instruction to the DSH Web GUI assistant — it will install and verify for you.

One-Sentence Positioning

This is a "web design aesthetic skill pack" packaged for DeepSeek Harness, registering 10 curated visual styles (dark SaaS, minimal white, neo-neumorphism, brutalism, glassmorphism, Japanese minimal, bento-grid, cyberpunk, vaporwave, art-deco) as directly-followable specifications for AI agents. It ensures that vibe-coded websites no longer stay at the generic AI applied style of "gray-white gradient + purple CTA", but have clear design tokens, component rules, and prohibition lists to follow.

Core Capabilities

  • Provides 10 design style skills (dark-saas / apple-minimal / neo-neumorphism / brutalism / glassmorphism / japanese-minimal / bento-grid / cyberpunk / vaporwave / art-deco), with AI agents automatically matching and following corresponding specifications based on natural language descriptions from users
  • Each skill includes design tokens (colors / font sizes / spacing / letter spacing), component landing checklist, prohibition checklist, and selectable acceptance checklist. The model can directly produce HTML/CSS based on this rather than relying on impressions
  • Progressive disclosure: At the start of a session, the model only sees the skill name and brief description. Full SKILL.md content is loaded only when the task matches, saving context tokens
  • Registered to ctx.skills provider at the same priority as DSH official built-in skills (rank 600), recognized in all DSH profiles without manual injection
  • Each style comes with a complete HTML landing page example that can be copied and run with one click (examples/*.html, 10 in total) + 10 promotional screenshots (assets/*.png), which can be directly used as templates or for promotional screenshots
  • Only dark-saas provides an independent complete token reference document references/dark-saas-tokens.md, tokens for the other 9 styles are written in the SKILL.md body

Technical Implementation

  • Language: JavaScript (ESM, Node.js node: built-in protocol)
  • Key Dependencies: yaml (parsing YAML frontmatter for each SKILL.md); @deepseek-ai/cordis (peer dependency, provided by host, types only referenced in JSDoc)
  • Architecture Pattern: DSH bundle patch + ctx.skills provider; cordis.patch.yml declares this package as a bundle that can be installed via dsh plugin add; index.js#apply registers all skills/*/SKILL.md as the same provider at startup; reads from disk each time it's discovered, editing and saving takes effect immediately
  • Entry File: index.js (pointed to by package.json#main and exports.".", exports name / inject / apply)

Applicable Scenarios

When using DeepSeek Harness (or Claude Code, Codex, etc. agents that support Agent Skills specification) for vibe coding websites, you want the output to break away from "AI applied style", have a clear design language, and have tokens and component rules to follow for product landing pages, official websites, dashboards, personal homepages, brand sites. Frontend developers, independent product people, and AI programming enthusiasts who want to generate a webpage from 0 to 1 that "doesn't look like an AI default product" can use this.

Prerequisites and Compatibility

DependencyMinimum VersionDescription
DeepSeek HarnessNot declaredInjected through ctx.skills provider; README.md:80 states it's at the same level as official built-in skills (rank 600), cordis.patch.yml indicates this package is installed as a dsh-design-skills bundle
Node.jsNot declaredAt runtime only uses node:fs / node:fs/promises / node:path / node:url; package.json does not declare engines
PlatformCross-platformPure JS + Markdown, no native modules, no external network/IO calls
Native ModulesNoneThe only npm dependency is yaml ^2.4.2 (pure JS library)

Installation

dsh plugin --profile web add github:zhaiyateng/dsh-design-skills

Configuration

No additional configuration is required. All content is statically declared within SKILL.md and becomes available after installation to the DSH profile. The skills themselves do not read process.env, ctx.config, or any user input.

Frequently Asked Questions

Q: Will new buttons or menus appear in the DSH interface after installation?

A: No new UI will appear. It doesn't add any buttons or panels to the DSH console, but registers 10 sets of design specifications as "skills" that AI agents can load, allowing agents to automatically follow the corresponding specifications when generating websites.

Q: How do I make the AI use a specific style?

A: Simply describe the visual feeling you want in natural language, such as "a minimalist landing page like the Apple website", "a glassmorphism AI product homepage", "a Japanese Zen brand site", "a cyberpunk neon tool page". The agent will automatically match the corresponding one from dark-saas / apple-minimal / neo-neumorphism / brutalism / glassmorphism / japanese-minimal / bento-grid / cyberpunk / vaporwave / art-deco.

Q: The package.json description says 6 styles, but the repository has 10 installed. Which is correct?

A: The repository skills/ directory is authoritative (10 skills total). The description field on line 4 of package.json still reads "6 styles — dark SaaS, minimal white, neumorphism, brutalism, glassmorphism, Japanese minimal", which is leftover copy from early versions and hasn't been synchronized with the README and actual directory.

Q: Do I need internet, tokens, or third-party accounts before using this?

A: No. The skill pack is pure Markdown plus an ESM entry script, doesn't call any external APIs, doesn't read/write outside the host machine's filesystem, and doesn't collect any telemetry.

Q: Do I need to restart DSH after modifying SKILL.md?

A: No. The comments in index.js:50-54 are clear: each time a skill is discovered, it reads skills/*/SKILL.md fresh from disk. After editing and saving, the next task match will take effect immediately.

Q: Are brands like Linear and Art Deco mentioned in the styles partners?

A: No partnership relationship. Both THIRD_PARTY_NOTICES.md and the SKILL.md header declare: this repository has no affiliation or endorsement relationship with the listed brands; tokens are factual observations提炼 from public interfaces, and sources following MIT protocol (such as VoltAgent/awesome-design-md) have been listed item by item in compliance documents.

Q: How do I upgrade or uninstall?

A: Upgrade: Run dsh plugin --profile web add github:zhaiyateng/dsh-design-skills again for over-the-installation. Uninstall: Remove the bundle entry from the DSH profile configuration, or delete the profiles/node_modules/dsh-design-skills symlink. DSH does not provide a dedicated uninstall command.

Difficulty Level

Beginner — One installation command, just describe the desired visual style in the session to trigger; no configuration, build, or additional learning required, and no API Key or login needed.

Known Issues and Limitations

  • package.json:4 description field still claims 6 styles (dark SaaS, minimal white, neumorphism, brutalism, glassmorphism, Japanese minimal), but the repository skills/ directory actually contains 10 skills. Four new ones were added: bento-grid, cyberpunk, vaporwave, art-deco. The description copy hasn't been synchronized with the directory (evidence: package.json:4 / README.md:45-56)
  • package.json does not declare engines / peerDependencies / os / cpu fields. Specific compatibility ranges for DSH and Node need to be ensured by the caller (evidence: package.json)
  • Capabilities not yet delivered in README.md:88-91 roadmap: scenario-based workflow skills (landing page / portfolio / documentation site / SaaS backend), Tailwind / CSS variables dual format output for tokens. Current version does not provide these
  • Only dark-saas provides an independent complete token reference document references/dark-saas-tokens.md. Tokens for the other 9 styles are directly written in their respective SKILL.md bodies, with no separately loadable design reference files (evidence: references/dark-saas-tokens.md:1-3)
  • Routing/triggering effects highly depend on the underlying AI model's semantic matching of skill descriptions; if keywords used in the description are too niche, the corresponding skill may not automatically match (evidence: README.md:78-79 "Skills work through progressive disclosure: at the start of a session, the model only sees the skill name and description, and loads the full SKILL.md only when the task matches")

Read the usage guide →

Install steps, key points, FAQ and compatibility for this plugin — auto-derived from indexed fields.

Listing badge

Listed on deepseek-plugin.org
[![Listed on deepseek-plugin.org](https://img.shields.io/badge/listed_on-deepseek--plugin.org-007EC6)](https://deepseek-plugin.org/plugins/zhaiyateng/dsh-design-skills)

Paste this markdown into your GitHub README to link back to this listing. The badge only states the listing — not a security endorsement.

← Back to plugin directory