dsh-design-skills
zhaiyateng/dsh-design-skills
디자인 미학 스킬 팩(다크 SaaS, 미니멀 화이트, 뉴모피즘, 브루탈리즘, 글래스모피즘, 일본식 미니멀, 벤토 그리드, 사이버펑크, 베이퍼웨이브, 아르데코까지 10가지 스타일)으로, 실행 가능한 랜딩 페이지 데모와 함께 스타일별 토큰, 컴포넌트 규칙, 금지 목록, 수락 체크리스트를 제공합니다.
설치
dsh plugin --profile web add github:zhaiyateng/dsh-design-skillsREADME
dsh-design-skills
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。 本仓库与所列品牌无任何隶属或背书关系。