# dsh-design-skills > 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. ## Metadata - Author: [@zhaiyateng](https://github.com/zhaiyateng) - Repo: - GitHub: [zhaiyateng/dsh-design-skills](https://github.com/zhaiyateng/dsh-design-skills) - Stars: 15 - Language: JavaScript - License: [NOASSERTION](https://spdx.org/licenses/NOASSERTION.html) - Topics: `deepseek-harness`, `design-skills`, `design-system`, `dsh-plugin`, `ui`, `vibe-coding`, `web-design` - Forks: 0 - Open Issues: 0 - Last push: 2026-08-14T17:21:56.000Z - Added: 2026-08-15T00:00:00.000Z ## Install ```bash dsh plugin --profile web add github:zhaiyateng/dsh-design-skills ``` ## Wiki ## 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 | Dependency | Minimum Version | Description | |---|---|---| | DeepSeek Harness | Not declared | Injected 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.js | Not declared | At runtime only uses `node:fs` / `node:fs/promises` / `node:path` / `node:url`; `package.json` does not declare `engines` | | Platform | Cross-platform | Pure JS + Markdown, no native modules, no external network/IO calls | | Native Modules | None | The only npm dependency is `yaml ^2.4.2` (pure JS library) | ## Installation ```bash 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") --- This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [dsh-design-skills](https://deepseek-plugin.org/plugins/zhaiyateng/dsh-design-skills) Wiki generated by AI (model: `MiniMax-M2.5`)