← All skills
Web页面设计
82 / 100 · Low risk
Fine to try.
By ahang1598/doubao-workbuddy-qwenwork-skills (GitHub) · design · 97 stars · scanned at commit 5e45653
触发(正向)——设计模式:用户要设计 Web 端多屏 flow、产品信息架构、用户流程,或以下任一场景: SaaS 管理后台(权限管理、成员管理、工作区、角色配置、Admin)、 AI 产品(AI 对话、写作助手、Copilot、大模型、AI 工具)、 营销官网(Landing Page、注册转化、免费试用、访客漏斗、onboarding)、 数据分析(数据看板、BI、报表、仪表盘、图表钻取、维度筛选)、 电商(购物车、结账流程、商品详情、下单、加购、订单追踪)、 开发者工具(API Key、SDK、Playground、CLI、集成配置、Webhook)、 内部运营(审批流、工单、报销、请假、差旅、内部流程、OA)、 金融科技(转账、汇款、账户余额、交易记录、支付、对账、KYC)、 社区社交(Feed、帖子、评论、点赞、私信、关注、社区广场)、 医疗健康(预约就诊、健康档案、问诊、复诊、医患沟通)、 教育科技(课程学习、测验、证书、练习、XP、学习路径)、 娱乐流媒体(视频播放、音乐、Playlist、订阅、内容推荐)、 设计工具(画布、设计稿、模板、导出、协作、版本管理)、 房产…
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
This is disclosed by the author in the skill's SKILL.md or README.
Found in 6 places.
Show 3 more
Downloads and installs other software
The author does not mention this.
Found in 15 places.
Show 12 more
- qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 12
| 安装方式 | `npm install sparkdesign`(一行) | `npx shadcn@latest init` + 按需 add | - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 31
npx shadcn@latest init - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 38
npx shadcn@latest add button input form dialog sheet card table tabs badge - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 39
npx shadcn@latest add select textarea checkbox switch avatar progress skeleton - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 40
npx shadcn@latest add dropdown-menu alert-dialog popover tooltip toast - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 41
npx shadcn@latest add separator scroll-area breadcrumb pagination accordion - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 47
**shadcn 安装的优势**:每个 `npx shadcn add [component]` 会将组件文件写入 `src/components/ui/`,100% 可验证,不存在"组件没装"的不确定性。 - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 70
> `npx shadcn@latest init` 会自动配置 `tsconfig.json` 的路径别名,但 vite.config 需要手动确认 `@` 别名已添加。 - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 244
**Q: `npx shadcn@latest add` 和 `npx shadcn add` 有什么区别?** - qwenwork/experts/product-design/skills/flow-web/references/shadcn-setup.md, line 248
A: 检查 `src/components/ui/` 目录是否出现对应的 `.tsx` 文件。例如 `npx shadcn add button` 后应看到 `src/components/ui/button.tsx`。 - qwenwork/experts/product-design/skills/flow-web/references/spark-token-config.md, line 115
| Token 注入 | `npx sparkdesign init` 写入约 900 行到 index.css | `@import 'sparkdesign/theme.css'` + `@import 'sparkdesign/scale.css'` 两行 | - qwenwork/experts/product-design/skills/flow-web/references/spark-token-config.md, line 117
| 组件安装 | `npx sparkdesign add button` | `npm install sparkdesign`(全部组件一次安装) |
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'web' ] || [ -L ~/.agents/skills/'web' ]; then echo 'A skill folder named web already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/ahang1598/doubao-workbuddy-qwenwork-skills' "$d" && git -C "$d" checkout --quiet '5e45653f59a2e4a2a65f575e8aaf7637165674d5' -- 'qwenwork/experts/product-design/skills/flow-web' && mkdir -p ~/.agents/skills && cp -R "$d"/'qwenwork/experts/product-design/skills/flow-web' ~/.agents/skills/'web' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'web' ~/.claude/skills/'web' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for ahang1598/doubao-workbuddy-qwenwork-skills shows the score of its lowest-scoring skill.

[](https://zalavijaysinh.github.io/skilltrust/repos/ahang1598/doubao-workbuddy-qwenwork-skills/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | 5e45653 | 82 |