Web App Development（网页应用开发）
TraeWork 官方插件 —— 用于网页应用设计、开发与调试的内部技能插件。内含 uicraft skill，覆盖 UI 设计的完整流程。
一、定位
| 字段 | 值 |
|---|---|
| 所属 | TraeWork 官方 marketplace 插件 |
| 开发者 | Trae |
| 版本 | 0.1.1 |
| 协议 | UNLICENSED（内部使用） |
| 类别 | Developer Tools（Interactive / Read / Write） |
| 核心能力 | 网页应用全流程 |
二、它解决什么问题
2.1 传统痛点
- 网页应用开发涉及设计 + 实现 + 调试，每个环节都复杂
- 不同项目类型（landing page / dashboard / portfolio）需要不同方法
- 缺乏系统化的 UI craft 指导
2.2 Web App Development 的解决方案
- 统一工作流——设计 → 实现 → 优化
- uicraft skill——内含 30+ 份参考文档，覆盖 UI 设计的每个方面
- 针对不同项目类型——landing page、dashboard、portfolio 各有指南
三、内含 Skill：uicraft
uicraft skill 是这个插件的核心，覆盖 UI 设计的完整方法论。
3.1 30+ 份参考文档
设计原则：
clarify.md——需求澄清personas.md——用户画像ux-writing.md——文案设计interaction-design.md——交互设计motion-design.md——动效设计
视觉设计：
color-and-contrast.md——颜色与对比度typography.md——字体设计spatial-design.md——空间设计typeset.md——排版
实施细节：
adapt.md、arrange.md、audit.md、bolder.md、colorize.md、critique.md、delight.md、distill.md、extract.md、harden.md、normalize.md、onboard.md、optimize.md、overdrive.md、polish.md、quieter.md、responsive-design.md
场景模板：
landing-page.md——产品落地页portfolio.md——作品集dashboard.md（隐含）uicraft-init.md——初始化
3.2 工作流程
uicraft 引导 AI 走完整的设计 → 实现流程：
- Clarify——需求澄清
- Personas——理解用户
- Design——视觉设计
- Implement——写代码
- Audit——质量检查
- Polish——优化细节
四、典型使用场景
"做一个 SaaS 产品的 landing page"
"构建一个数据分析 dashboard"
"创建一个开发者作品集网站"
"设计一个 SaaS 登录页"
"用 uicraft 给我的项目做 UX 审查"
五、与其他前端相关插件的关系
| 插件 | 用途 |
|---|---|
| web-app-development（本插件） | 系统化 UI craft 方法论（设计 + 实现 + 优化） |
| frontend-design | Anthropic 出品的高品质前端生成（侧重品味） |
| seedream / seedance | AI 图像 / 视频生成（设计素材） |
三者配合用：web-app-development 做框架 → frontend-design 做美学 → seedream/seedance 做素材。
六、什么时候用 / 不用
6.1 该用
- ✅ 系统化做前端项目
- ✅ 不知道从哪开始做 UI
- ✅ 想用成熟方法论（uicraft）
- ✅ 需要参考文档
6.2 不该用
- ❌ 极简修改（用普通 skill）
- ❌ 已经有完整设计稿（直接实现）
- ❌ 不需要方法论（只想快速出活）
七、引用来源
- TraeWork 插件目录 —— 本文内容完全来自此文件
- 插件内
skills/uicraft/目录（30+ 参考文档）
八、一句话总结
Web App Development 是「系统化网页应用开发」插件——内含 uicraft skill（30+ 参考文档），覆盖 UI craft 完整流程。Trae 官方，UNLICENSED。和 frontend-design 配合使用：系统方法 + 高品味美学。