设计美学技能包 zhaiyateng/dsh-design-skills

dsh-design-skills

DeepSeek Harness（DSH）设计美学技能包 —— 让 vibe coding 出来的网站摆脱「AI 味」。

DeepSeek Harness 设计美学技能包 —— 让 vibe coding 出来的网站摆脱「AI 味」。

模型不缺「怎么建站」，缺「怎么建得好看」。本技能包把经过验证的设计风格提炼成可执行的规范（token + 组件规则 + 禁用清单 + 验收清单），模型匹配后自动遵循。

模型不缺「怎么建站」，缺「怎么建得好看」。本技能包把经过验证的设计风格提炼成可执行的规范（token + 组件规则 + 禁用清单 + 验收清单）。

awesome · DSH plugin

🖼️ 在线体验全部 10 种风格 → zhaiyateng.github.io/dsh-design-skills

🖼️ 在线体验全部 10 种风格 → zhaiyateng.github.io/dsh-design-skills

Preview / 效果预览

同一产品（虚构的智能体编排平台 "Relay"）的十种风格效果——这就是本技能包对 vibe coding 产物的实际影响：

同一产品（虚构的智能体编排平台 "Relay"）的十种风格效果——这就是本技能包对 vibe coding 产物的实际影响：

| dark-saas (dark, Linear-inspired) | apple-minimal (minimal white) | neo-neumorphism (soft UI) | brutalism (hard-edge) | glassmorphism (frosted glass) |
| dark-saas landing demo | apple-minimal landing demo | neo-neumorphism landing demo | brutalism landing demo | glassmorphism landing demo |

| japanese-minimal (zen serif) | bento-grid (modular cards) | cyberpunk (neon) | vaporwave (synthwave) | art-deco (gold & emerald) |
| japanese-minimal landing demo | bento-grid landing demo | cyberpunk landing demo | vaporwave landing demo | art-deco landing demo |
Demo 源码：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 UINeumorphism | 个人主页、健康/理财 App、演示 DemoPersonal pages, lifestyle apps, demos |
| brutalism | 粗野主义 / BrutalismHard-edge, neo-brutalist | 实验性产品、艺术/独立项目、开发者工具Experimental products, indie sites, dev tools |
| glassmorphism | 毛玻璃 / GlassmorphismFrosted glass | AI 产品、SaaS 官网、Dashboard、演示 DemoAI products, SaaS sites, dashboards, demos |
| japanese-minimal | 日式极简 / Japanese MinimalZen serif, wabi-sabi | 文化/美学类产品、博客、艺术展、和风品牌Cultural/aesthetic products, blogs, art sites |
| bento-grid | 便当盒 / Bento GridModular card grid | 产品官网、功能展示、SaaS 首页、个人主页Product sites, feature walls, SaaS homepages |
| cyberpunk | 赛博朋克 / CyberpunkNeon, futuristic glow | 科技产品、AI 工具、游戏、极客向落地页Tech products, AI tools, games |
| vaporwave | 蒸汽波 / VaporwaveSynthwave, retro-futurism | 艺术项目、音乐/文化向站点、实验性落地页Art projects, music/culture sites |
| art-deco | 装饰艺术 / Art DecoGold & 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.skills 服务商形式注册本包全部技能（rank 600，与官方内置同级）。
- 声明 dsh.bundle manifest，可通过 dsh plugin add 一键安装。

Roadmap / 路线图

- [x] 十种风格：dark SaaS、minimal white、neumorphism、brutalism、glassmorphism、Japanese minimal、bento grid、cyberpunk、vaporwave、art deco
- [x] 每种风格都有完整落地页 demo + 宣传截图
- [ ] 场景工作流：落地页 / 作品集 / 文档站 / SaaS 后台
- [ ] token 同时提供 Tailwind 与 CSS 变量两种格式

Compliance / 合规说明

本仓库的设计规范参考了 MIT 许可的开源项目（awesome-design-md、shadcn/ui）。
所有来源、许可证全文与商标声明见 THIRD_PARTY_NOTICES.md。
本仓库与所列品牌无任何隶属或背书关系。

License

MIT