为 DeepSeek Harness 打包 10 种网页设计美学技能，模型生成站点时按用户描述自动遵循对应规范，摆脱通用 AI 套用风格。
- 语言
- JavaScript
- License
- NOASSERTION
- 分支
- main
安装
$ dsh plugin --profile web add github:zhaiyateng/dsh-design-skills在终端中运行以上命令，通过 dsh CLI 安装此插件。可在右上角切换 Profile。 第一次用 dsh？看这篇新手教程
对话式安装
帮我安装 DeepSeek Harness 插件 zhaiyateng/dsh-design-skills：先查看仓库 https://github.com/zhaiyateng/dsh-design-skills.git 确认安全性，然后执行安装命令并验证插件加载成功。
把这段指令粘贴给 DSH Web GUI 里的助手，由它代你完成安装与验证。
一句话定位
这是一个为 DeepSeek Harness 打包的"网页设计美学技能包"，把 10 种经过整理的视觉风格（深色 SaaS、极简白、新拟态、粗野主义、毛玻璃、日式极简、便当盒、赛博朋克、蒸汽波、装饰艺术）注册成 AI agent 可直接遵循的规范。 让 vibe coding 出来的网站不再停留在"灰白渐变 + 紫色 CTA"的通用 AI 套用风格，而是有清晰的设计 token、组件规则与禁用清单可遵循。
核心能力
- 提供 10 种设计风格技能（dark-saas / apple-minimal / neo-neumorphism / brutalism / glassmorphism / japanese-minimal / bento-grid / cyberpunk / vaporwave / art-deco），AI agent 根据用户的自然语言描述自动匹配并遵循对应规范
- 每种技能自带设计 token（颜色 / 字号 / 间距 / 字距）、组件落地清单、禁用清单与可勾选的验收清单，模型可直接据此产出 HTML/CSS 而不是凭印象
- 渐进式披露：会话开始时模型只看到技能名与简短描述，命中任务后才加载完整 SKILL.md 正文，节省上下文 token
- 与 DSH 官方内置技能以同等优先级（rank 600）注册到 ctx.skills provider，免手工注入即可在所有 DSH profile 中被识别
- 每个风格附一份可一键复制运行的完整 HTML 落地页示例（
examples/*.html，共 10 份）+ 10 张宣传截图（assets/*.png），可直接拿来当模板或截图宣传 - 仅
dark-saas提供独立的完整 token 参考文档references/dark-saas-tokens.md，其余 9 种风格的 token 写在 SKILL.md 正文里
技术实现
- 语言: JavaScript（ESM，Node.js
node:内置协议） - 关键依赖:
yaml（解析每个 SKILL.md 的 YAML frontmatter）；@deepseek-ai/cordis（peer 依赖，由宿主提供，类型仅在 JSDoc 中引用） - 架构模式: DSH bundle patch + ctx.skills provider；
cordis.patch.yml声明本包为可在dsh plugin add安装的 bundle，index.js#apply在启动时把skills/*/SKILL.md全部注册为同一个 provider；每次发现都从磁盘重读，编辑保存即生效 - 入口文件:
index.js（被package.json#main与exports."."指向，导出name/inject/apply）
适用场景
正在用 DeepSeek Harness（或 Claude Code、Codex 等支持 Agent Skills 规范的 agent）做 vibe coding 网页时，希望产出摆脱"AI 套用风格"、有明确设计语言、有 token 与组件规则可遵循的产品落地页、官网、Dashboard、个人主页、品牌站。前端开发者、独立产品人、AI 编程爱好者想从 0 到 1 生成一张"看起来不像 AI 默认产物"的网页时用它。
前置依赖与兼容性
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| DeepSeek Harness | 未声明 | 通过 ctx.skills provider 注入；README.md:80 称与官方内置技能同级（rank 600），cordis.patch.yml 表明本包作为 dsh-design-skills bundle 安装 |
| Node.js | 未声明 | 运行时仅用到 node:fs / node:fs/promises / node:path / node:url；package.json 未声明 engines |
| 平台 | 跨平台 | 纯 JS + Markdown，无原生模块、无外部网络/IO 调用 |
| 原生模块 | 无 | 唯一 npm 依赖是 yaml ^2.4.2（纯 JS 库） |
安装方式
dsh plugin --profile web add github:zhaiyateng/dsh-design-skills
配置项
本插件无需额外配置。所有内容都是 SKILL.md 内静态声明，安装到 DSH profile 即可使用；技能本身不读取 process.env、ctx.config 或任何用户输入。
常见问题
Q: 安装后 DSH 界面会出现新按钮或新菜单吗？
A: 不会出现新 UI。它不会给 DSH 控制台加任何按钮或面板，而是把 10 套设计规范注册成 AI agent 可加载的"技能"，让 agent 在生成网页时自动遵循对应规范。
Q: 怎么让 AI 用上某个具体风格？
A: 直接用自然语言描述你想要的视觉感受，例如"苹果官网那种极简的落地页""毛玻璃 AI 产品首页""日式禅意品牌站""赛博朋克霓虹工具页"，agent 会自动匹配 dark-saas / apple-minimal / neo-neumorphism / brutalism / glassmorphism / japanese-minimal / bento-grid / cyberpunk / vaporwave / art-deco 中对应的那一个。
Q: package.json 描述写 6 种风格，仓库里却装了 10 种，哪个对？
A: 以仓库 skills/ 目录为准（共 10 个技能）。package.json 第 4 行的 description 字段仍写着 "6 styles — dark SaaS, minimal white, neumorphism, brutalism, glassmorphism, Japanese minimal"，是早期版本的残留文案，未与 README 及实际目录同步。
Q: 使用前需要联网、Token、第三方账号吗？
A: 不需要。技能包是纯 Markdown 加一个 ESM 入口脚本，不调用任何外部 API、不读写宿主机文件系统之外的位置、不收集任何遥测。
Q: 修改 SKILL.md 之后需要重启 DSH 吗？
A: 不需要。index.js:50-54 的注释明确：每次发现技能都从磁盘重新读取 skills/*/SKILL.md，编辑保存后下一次任务匹配即生效。
Q: 风格里提到的 Linear、Art Deco 之类的品牌是合作的吗？
A: 不是合作关系。THIRD_PARTY_NOTICES.md 与 SKILL.md 头部均声明：本仓库与所列品牌无任何隶属或背书关系；token 是对公开界面的事实性观察提炼，遵循 MIT 协议的来源（如 VoltAgent/awesome-design-md）已在合规文件中逐项列出。
Q: 怎么升级或卸载？
A: 升级：再次运行 dsh plugin --profile web add github:zhaiyateng/dsh-design-skills 即可覆盖式安装。卸载：在 DSH profile 配置中移除该 bundle 条目，或删除 profiles/node_modules/dsh-design-skills 软链接，DSH 没有提供专用的 uninstall 命令。
上手难度
入门 — 安装一行命令即可，会话里直接描述想要的视觉风格即可触发；不需要任何配置、构建、额外学习，也不需要准备 API Key 或登录账号。
已知问题与限制
package.json:4的 description 字段仍声称 6 种风格（dark SaaS、minimal white、neumorphism、brutalism、glassmorphism、Japanese minimal），但仓库skills/目录实际包含 10 个技能，新增了 bento-grid、cyberpunk、vaporwave、art-deco 四个，描述文案未与目录同步（evidence: package.json:4 / README.md:45-56）package.json未声明engines/peerDependencies/os/cpu字段，DSH 与 Node 的具体兼容范围需调用方自行保证（evidence: package.json）- README.md:88-91 路线图中尚未交付的能力：场景化工作流 skill（落地页 / 作品集 / 文档站 / SaaS 后台）、token 的 Tailwind / CSS variables 双格式输出，当前版本不提供
- 只有
dark-saas提供了独立的完整 token 参考文档references/dark-saas-tokens.md，其余 9 种风格的 token 直接写在各自 SKILL.md 正文里，没有可单独加载的设计参考文件（evidence: references/dark-saas-tokens.md:1-3） - 路由/触发效果高度依赖底层 AI 模型对技能描述的语义匹配；如果在 description 中使用的关键词过于冷门，可能不会自动匹配上对应技能（evidence: README.md:78-79 "技能通过渐进式披露工作：会话开始时模型只看到技能名与描述，当任务匹配时才加载完整 SKILL.md"）
Design aesthetics skill pack for DeepSeek Harness (DSH) — keeps your vibe-coded websites away from the "AI look".
DeepSeek Harness 设计美学技能包 —— 让 vibe coding 出来的网站摆脱「AI 味」。
模型不缺"怎么建站"，缺"怎么建得好看"。本技能包把经过验证的设计风格提炼成 可执行的规范（token + 组件规则 + 禁用清单 + 验收清单），模型匹配后自动遵循。
Models don't lack "how to build a site" — they lack "how to make it look good". This pack distills proven design aesthetics into executable specs (tokens + component rules + forbidden lists + acceptance checklists).
🖼️ Try all 10 styles live → zhaiyateng.github.io/dsh-design-skills
🖼️ 在线体验全部 10 种风格 → zhaiyateng.github.io/dsh-design-skills
English | 中文
Preview / 效果预览
Same product (a fictional agent-orchestration console, "Relay"), ten aesthetics — the exact "before / after" of what these skills do to your vibe-coded site:
同一产品（虚构的 Agent 编排平台 "Relay"）的十种风格效果——这就是本技能包 对 vibe coding 产物的实际影响：
dark-saas (dark, Linear-inspired) | apple-minimal (minimal white) | neo-neumorphism (soft UI) | brutalism (hard-edge) | glassmorphism (frosted glass) |
|---|---|---|---|---|
 |  |  |  |  |
japanese-minimal (zen serif) | bento-grid (modular cards) | cyberpunk (neon) | vaporwave (synthwave) | art-deco (gold & emerald) |
|---|---|---|---|---|
 |  |  |  |  |
Demo source: examples/dark-saas-landing.html · examples/apple-minimal-landing.html · examples/neo-neumorphism-landing.html · examples/brutalism-landing.html · examples/glassmorphism-landing.html · examples/japanese-minimal-landing.html · examples/bento-grid-landing.html · examples/cyberpunk-landing.html · examples/vaporwave-landing.html · examples/art-deco-landing.html
What's inside / 包含的技能
| Skill | 风格 / Style | 适用场景 / Use for |
|---|---|---|
dark-saas | 深色 SaaS（Linear 式） Dark SaaS, Linear-inspired | 开发者工具、数据看板、AI 产品、SaaS 后台 Dev tools, dashboards, AI products |
apple-minimal | 极简白（Apple 式） Minimal white, Apple-style | 产品官网、落地页、作品集 Product sites, landing pages, portfolios |
neo-neumorphism | 新拟态 / Soft UI Neumorphism | 个人主页、健康/理财 App、演示 Demo Personal pages, lifestyle apps, demos |
brutalism | 粗野主义 / Brutalism Hard-edge, neo-brutalist | 实验性产品、艺术/独立项目、开发者工具 Experimental products, indie sites, dev tools |
glassmorphism | 毛玻璃 / Glassmorphism Frosted glass | AI 产品、SaaS 官网、Dashboard、演示 Demo AI products, SaaS sites, dashboards, demos |
japanese-minimal | 日式极简 / Japanese Minimal Zen serif, wabi-sabi | 文化/美学类产品、博客、艺术展、和风品牌 Cultural/aesthetic products, blogs, art sites |
bento-grid | 便当盒 / Bento Grid Modular card grid | 产品官网、功能展示、SaaS 首页、个人主页 Product sites, feature walls, SaaS homepages |
cyberpunk | 赛博朋克 / Cyberpunk Neon, futuristic glow | 科技产品、AI 工具、游戏、极客向落地页 Tech products, AI tools, games |
vaporwave | 蒸汽波 / Vaporwave Synthwave, retro-futurism | 艺术项目、音乐/文化向站点、实验性落地页 Art projects, music/culture sites |
art-deco | 装饰艺术 / Art Deco Gold & emerald, 1920s | 高端品牌、奢华酒店、艺术/时尚类站点 Luxury brands, hotels, art/fashion sites |
Install / 安装
dsh plugin --profile web add dsh-design-skills
Or add the repo as a local profile dependency / 或本地安装：把仓库放进
$DSH_HOME/profiles/node_modules/（符号链接），然后在 profile 的
cordis.patch.yml 中插入 dsh-design-skills。
Usage / 使用
在会话中直接说：
- 「用深色 SaaS 风给我做一个 AI 产品落地页」→ 自动匹配
dark-saas - 「帮我做一个 Linear 风格的数据看板」→ 自动匹配
dark-saas - 「做一个苹果官网那种极简的落地页」→ 自动匹配
apple-minimal - 「Soft UI 风格的个人主页」→ 自动匹配
neo-neumorphism
技能通过渐进式披露工作：会话开始时模型只看到技能名与描述， 当任务匹配时才加载完整 SKILL.md（token、组件规则、禁用清单）。
How it works / 原理
- 每个技能是标准的
skills/<name>/SKILL.md（YAML frontmatter：name+description必填）。 index.js以ctx.skillsprovider 形式注册本包全部技能（rank 600，与官方内置同级）。- 声明
dsh.bundlemanifest，可通过dsh plugin add一键安装。
Roadmap / 路线图
- Ten styles: dark SaaS, minimal white, neumorphism, brutalism, glassmorphism, Japanese minimal, bento grid, cyberpunk, vaporwave, art deco
- Full landing-page demo + promo screenshot for every style
- Scenario workflows: landing page / portfolio / docs site / SaaS admin
- Tokens in Tailwind & CSS-variable dual formats
Compliance / 合规说明
本仓库的设计规范参考了 MIT 许可的开源项目（awesome-design-md、shadcn/ui）。 所有来源、许可证全文与商标声明见 THIRD_PARTY_NOTICES.md。 本仓库与所列品牌无任何隶属或背书关系。
License
收录徽章
[](https://deepseek-plugin.org/plugins/zhaiyateng/dsh-design-skills)把这段 markdown 粘贴到你的 GitHub README，链接回本插件详情页。徽章只声明已被本站收录，不代表安全认证。