Open Design · 网页设计 Skills 速查表
玄策整理 | 2026-05-25 | 来源：open-design.ai/zh/skills
内置精选（新手从这 7 个开始）
| Skill | 做什么 | 一句话场景 |
|---|
| web-prototype | 通用网页原型（默认） | “做个XX网站”——万能入口 |
| saas-landing | SaaS 产品落地页 | 产品官网、定价页 |
| dashboard | 数据仪表盘 | 后台面板、数据看板 |
| pricing-page | 定价页面 | 套餐对比表 |
| docs-page | 技术文档页 | API 文档、使用说明 |
| blog-post | 博客文章页 | 图文排版 |
| mobile-app | 移动端原型 | 手机 App 界面 |
进阶网页类
| Skill | 做什么 |
|---|
| frontend-design | 前端设计（综合） |
| frontend-dev | 前端开发（偏代码） |
| web-artifacts-builder | 网页作品构建器 |
| artifacts-builder | 通用作品构建器 |
| web-design-guidelines | 网页设计规范 |
| ui-skills | UI 设计技巧集 |
| ui-ux-pro-max | UI/UX 专业级 |
| platform-design | 平台级设计 |
| shadcn-ui | shadcn/ui 组件库 |
| login-flow | 登录流程页 |
| faq-page | FAQ 常见问题页 |
| article-magazine | 杂志风文章页 |
品牌/视觉（辅助网页设计）
| Skill | 做什么 |
|---|
| brand-guidelines | 品牌风格规范 |
| color-expert | 配色方案 |
| canvas-design | 海报/视觉设计 |
| creative-director | 创意指导 |
| design-consultation | 设计咨询 |
| design-review | 设计审查 |
| theme-factory | 主题工厂 |
| taste-skill | 审美品味 |
| copywriting | 文案撰写 |
交互/动效
| Skill | 做什么 |
|---|
| gsap-core | GSAP 动画核心 |
| gsap-scrolltrigger | 滚动触发动画 |
| gsap-timeline | 时间轴动画 |
建议学习路径
第 1 天：web-prototype × 3 套 Design System → 感受风格差异
第 2 天：saas-landing + dashboard → 了解不同页面类型
第 3 天：brand-guidelines + color-expert → 建立品牌意识
第 4 天：frontend-design → 自由创作
玄策 · Codex 王国